View Full Version : The old internet explorer problem

03-28-2009, 02:58 PM
Hi! I know you get this question alot but for us new designers, the problem solving issue is real. I have just uploaded a new page to my site - www.kimberleywebdesign.com.au - called photoshop tutorials. I am using Dreamweaver CS3 on a Mac and have tested it on Firefox, Safari and Opera and all render it fine but when I tested in IE the intro div is all over the place. Dreamweaver says there are no issues but something is obviously not right and I dont know how to fix it. Hope someone can help me, I would be eternally grateful as if something like this happens again, I will know how to fix it.

03-29-2009, 06:15 PM
Not viewed your page in IE but these issues are usually related to margins and padding especially if you have floated elements as IE6 will typically double the margin on floated elements and this can really screw your whole layout.

Usually a display: inline; sorts this out.

You could also try zeroing out your margin and padding on all elements, this is a good idea to do at the beginning of your CSS file.

What I usually do is test in IE as I build and then its easier to pin point any problems, I use a Mac too and testing on the Mac is great if you install Parallels or VM Ware Fusion as you can run Windows and IE in the background.

In this case if you can't seem to spot the problem, just make a copy of the HTML file so you have a safe copy and then save a copy as test or something and just delete chunks of the HTML and copy and paste it back in sections TAG by TAG if needs be until the file breaks and then you'll know which element is causing the problem.

In time you do get used to IE's quirks and usually I know now what bugs its going to display before hand so I can correct them as I'm working.

03-30-2009, 02:53 AM
You're mixing layout techniques a little bit. I would go back to whichever tutorials you were using and make sure you're either going for a floated or absolutely positioned layout.

04-01-2009, 10:32 PM
Hi guys, still no closer to solving this problem! I tried remodelling it but I cant take chunks out and test it on IE even tho I do have Parallels, as my dreamweaver software is on my mac and so I think I would have to upload it every time I made a change to see the effect. Somebody said something about I have double ids and I just dont see it.

04-03-2009, 05:25 AM
Hi Ricky have tried everything you suggested and still no change. Any other suggestions? Thanks for your help.

04-03-2009, 05:53 AM
probably mean
#sidebar img{
#sidebar img {
padding: 20px 0px;}

merge it and keep them happy

04-03-2009, 06:11 AM
The code looks cleaner now. You've decided to use CSS floats which I think are easier as well.

You have no duplicate CSS id's now.

Having multiple '#sidebar img' rules in your CSS is completely fine, altough some might say it's not very organized ;)

Are you still having any issues with the layout?

04-03-2009, 10:34 AM
You don't need Dreamweaver to open a file in IE. Just browse to the folder in My Computer and just double click on it you will then be viewing the file in the default windows browser. This is how I work, I have Dreamweaver open on the Mac and I view in Safari and Firefox and then just flick over into parallels to view the file in IE and Google Chrome.

So you can cut and paste chunks back in to see where the problem lies.

Have you got this sorted now?

Email me the file if you want and I'll have a look for you.


04-04-2009, 07:51 AM
Hi! I dont have a sidebar div in my photoshop tutorials page. Wot page were you looking at? Thanks for your time, I really appreciate it.

04-04-2009, 08:01 AM
Hi! Yes still not displaying correctly in IE. Have tried zeroing out margins, using display in-line everything I can think of and that u all have suggested. I am wondering whether u are looking at the tutorials page as I do not have a sidebar div only Navigation, Intro, Main Content etc. Are u speakn generally in regards to sidebar divs. Thanks so much for your input, u guys are saviours for doddering web designers like myself.

04-04-2009, 12:45 PM
Try this instead of your intro and intro related ul li
#AAA {
margin-top: 35px;
width: 500px;
float: right;
#AAA ul {
list-style-type: none;
#AAA li {
display: block;
margin-top: 5px;
margin-bottom: 5px;

You need to simplify your approach. Have you heard of the KISS rule. Do that.
Sometimes less is more.

04-04-2009, 03:21 PM
Would that be keep it short and simple or keep it simple stupid, lol! Thanks for the code, works great but doesnt wrap text around the intro images. Without the text wrapped around the images the intro looks too long and the corresponding navigation area too short.

04-04-2009, 07:46 PM
Even if it's not a solution to your problem, hopefully it gave you an idea towards the resolution of it.

I would suggest to start over with that section: navigation and intro. Clean the code as much as possible and incrementally get it where I want.