Weird IE7 random float bug... [CSS]

nikimere

Hi,

I'm wondering if anyone else has come across this....?
I have a navbar div with 6 <li>'s and then a 'logo' div after the navbar. They all run horizontal and are all floated left.
For some reason on IE7 only (perfect in IE6 and FF) the 'logo' div sometimes doesn't float and returns to the line below.
I could refresh the page 10 times and it might only happen once or twice but it is a major pain. I have searched google and can't find anything.
The logo div never gets any bigger and no margin/padding is doubled or anything like that. It's just like IE7 diesn't pick up the "float: left;" every now and then.
Anyone else found this or even better have a solution?

Hope someone can help!
Thanks

P.S. i dont have an online version of the site so i can't show you what i mean

Serbian

I haven't come across it personally. It may be a problem with the code, but it would be difficult to tell without seeing the CSS / HTML.

nikimere

I doubt it is a code problem because if it was it would happen all the time surely?
Below is pretty much the code i'm using...

#topbar{
   width: 774px;
   height: 28px;
}

#navbar {
    float: left;
    position: relative;
    width: 558px;
    height: 28px;
    }

#navbar ul li {
    float: left;
    position: relative;
    width: 93px;
}

#logo {
    float: right;
    position: relative;
    width: 216px;
    height: 26px;
    }  

<div id='topbar'>
<div id='navbar'>
<ul>            
<li>button1</li> <li>button2</li> <li>button3</li> <li>button4</li><li>button5</li> <li>button6</li>
</ul>
</div>
<div id='logo'>
<img src='/images/logo.png' alt='The Company Name' />
</div>
</div>

nikimere

sorry double post.

Adam

Well in your code there you have the logo div floated right...

nikimere

Mirror wrote:

Well in your code there you have the logo div floated right...

ye i was just trying something forgot to change it back
it makes no difference anyway

Adam

Ah right. Well I tried your code and I can't seem to replicate the error... try this for the li's:

#navbar ul li {
	display: inline;
	padding: 10px;
    width: 93px;
}

More than one way to skin a cat

nikimere

nope didn't fix it.
the code above isn't the exact code because i'm using a lot of Ruby code in my HTML to display the navbar (it's dynamic).
i really dont think it's a code problem from my end... i think it's a rendering problem in IE7.
it works fine in every other browser, including IE6 and if it were a problem in my code it would be a constant problem... not random.
90% of the time it's fine....
the width of the "navbar" div or the "logo" div never change, even when it is not floated, which is why i think it's a float problem..... ahhhh the stress!

Adam

True...could be an issue with you displaying it dynamically, but that's just a shot in the dark. Sorry I couldn't be of more help!

nikimere

no probs, thanks anyways
think i'll just put the nav and logo into a table (which i really didn't want to do)... i've wasted too much time on this as it is. :mad:

Liam Byrne

Check firstly that the 93px is wide enough for the content that goes into it - an auto-expand would make this worse. Try an "overflow:hidden" on the li elements and see if any of them are getting chopped off.

Also remove the whitespace and newlines from between the tags and <li> elements.

Are you sure it's not IE's double-margin bug ? I've seen it cause elements to jump around if there isn't enough space to display the remaining content; try adding "display: inline" to the CSS for the floated elements to make sure that the double-margin bug doesn't kick in.

nikimere

Liam Byrne wrote:

Check firstly that the 93px is wide enough for the content that goes into it - an auto-expand would make this worse. Try an "overflow:hidden" on the li elements and see if any of them are getting chopped off.

Also remove the whitespace and newlines from between the tags and <li> elements.

Are you sure it's not IE's double-margin bug ? I've seen it cause elements to jump around if there isn't enough space to display the remaining content; try adding "display: inline" to the CSS for the floated elements to make sure that the double-margin bug doesn't kick in.

Hi Liam,

Thanks for your comments.
1st off the 93px is wide enough and no part of the li's are being chopped off.
I'll try removing all white space now and see if that works...
Definately not the IE double-margin bug. The elements or divs do not move or grow in size at all.