Incorrect div length

[NeoPuma]

Hey guys,
I got this web page here: http://neopian.co.uk/coding/bb/
The navigation bar should be 850px long. This is correct in IE. However, in Firefox, it's only as long as the actual menu.

Any suggestions?

Thanks

[harbingerOTV]

your links in the #mainnav are floated. the div is 850px but you cant tell because your not clearing the floats. IE clears automattically (incorrectly) so it looks right in it.

http://www.positioniseverything.net/easyclearing.html

[jcdevelopment]

take this out of your html

<div id="mainnav">
	<div class="mainnav_item"><a href="?p=home">Home</a></div>
    <div class="mainnav_item"><a href="?p=about">About Us</a></div>
</div>

make it look like this

<div id="mainnav">
	<a href="?p=home">Home</a>
    <a href="?p=about">About Us</a>
</div>

that will fix it!!

[NeoPuma]

Originally Posted by harbingerOTV

your links in the #mainnav are floated. the div is 850px but you cant tell because your not clearing the floats. IE clears automattically (incorrectly) so it looks right in it.

http://www.positioniseverything.net/easyclearing.html

Thanks, but if I remove the float, they end up one below each other. I've had a little look at that link, but using 'clear' doesn't really change any thing either.

Sorry.

@jcdevelopment: That would just remove the effect I'm after?

[Apostropartheid]

Hmm, try

#mainnav {
  height: 25px;
}

Inline-blocks would be useful here, but Firefox < 3 doesn't support it

[NeoPuma]

Originally Posted by CyanLight

Hmm, try

#mainnav {
  height: 25px;
}

Inline-blocks would be useful here, but Firefox < 3 doesn't support it

Thank-you! That worked :P. Such a simple answer ><