What is causing my UL to go wrong in IE6/5.5?

I am designing a masthead and all looks fine in IE7, FF, Safari, Opera, but in IE5.5, and IE6 the "ul" called "leftmenu" is halfway across the screen. The UL should be lined up just to the right of the "thisisatest" title. All appears fine in IE7.

www.siteoftom.com/pages/masthead_2divs.html

Browsershots link to IE6 image -

http://browsershots.org/screenshots/d4ee45f34c488afa309489b4e956775e/

this really looks like IE double horizontal margin on floated elements.

adding display:inline should fix the issue, read here : http://www.positioniseverything.net/explorer/doubled-margin.html

ul#leftmenu {
margin: 10px 0px 0px 240px;
padding: 0px 0px 0px 20px;
height: 34px;
list-style-type: none;
float: left;
display:inline;
background-image: url(../images/bannerimage_pinkred300.png);
background-repeat: no-repeat;
}

Yes that has fixed it :)

Many thanks for your help, much appreciated!

no problem ;)

I have just noticed the problem is still occuring in IE5.5 but I have sorted it in IE6.

Whats up with IE5.5??

http://browsershots.org/screenshots/b2164790767562cca64502706c52f94a/

sorry, i did some search but i do not understand the issue :confused:

Have a look at the screenshots -

IE5 (displaying the UL incorrectly) -
http://browsershots.org/screenshots/b2164790767562cca64502706c52f94a/

IE6 (displaying the UL correctly as I want it to) -
http://browsershots.org/screenshots/2db4b77fd41ec1c1f87dac0822db45a5/

IE5.5 is still making the margin go double in size.

you could use this code this parse IE less than or equal 5.5 with half the margin, it *should* fix it!

<!--[if lte IE 5.5]>
<style type="text/css">
ul#leftmenu {
margin: 10px 0px 0px 120px;
}
</style>
<![endif]-->

I have just reloaded the Browsershots page and it seems to be ok now in both IE5.5 and IE6. The "display inline" does indeed seemed to have done the trick afterall. :thumbsup:

i wonder why i was confused now! lol!

Question. Are you on a Mac or PC? If you are on a PC you can run multiple IE browsers you know?

Im on a pc, as far as I know I cannot run IE6 or IE5 with Windows Vista IE7 installed. You cannot install IE6 when IE7 is already there.

I do run FF, Opera, safari and IE7 however.

You have to dual boot a few operating systems or use a virtual machine say with windows xp and ie6 installed.

On a side not:

If you change the default text size everything gets thrown off. You should consider that some people like to browse with bigger or smaller text sizes then the default

On a side not:

If you change the default text size everything gets thrown off. You should consider that some people like to browse with bigger or smaller text sizes then the default

How do I get around different text sizes?

Im on a pc, as far as I know I cannot run IE6 or IE5 with Windows Vista IE7 installed. You cannot install IE6 when IE7 is already there.

I do run FF, Opera, safari and IE7 however.

You have to dual boot a few operating systems or use a virtual machine say with windows xp and ie6 installed.

Yes you are correct. I use Vista and I had to install Virtual PC with Windows XP and IE6. I was assuming you were on Windows XP already.

As to the text sizes, to get around that you just have to make sure your layout is scalable height wise meaning you really don't want to set heights to too many things. If you want to set the height then perhaps you should use images where you need to.

As to the text sizes, to get around that you just have to make sure your layout is scalable height wise meaning you really don't want to set heights to too many things. If you want to set the height then perhaps you should use images where you need to.

How do I make my text resize in relation to when a user alters the text size? I dont want my images to go out of line with each other. Say for example like in this webpage (www.codingforums.com) everything resizes nicely and stays in the correct postion. I have a set about 3 heights in px on my masthead.