CSS Menu Width in Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

vunet.us@gmail.com - 26 Jun 2007 14:06 GMT

Hello,
This menu is perfect in IE but the width in Firefox is a few pixels
bigger that 100% as seen in "UL" CSS. Please, recommend a fix if
possible. I am out of
luck. I just want the width to be 100%, nicely inside of a div (50%)
with some border:

http://www.vunet.us/wic/test/ (compare Firefox and IE)

Thank you.

Reply to this Message

Bergamot - 26 Jun 2007 14:51 GMT

> This menu is perfect in IE but the width in Firefox is a few pixels
> bigger that 100% as seen in "UL" CSS.
>
> http://www.vunet.us/wic/test/ (compare Firefox and IE)

Your lack of a DOCTYPE throws browsers into quirks mode. If you expect
any consistency, learn about web standards and start using them. HTML
4.01 Strict is recommended.

http://www.hut.fi/u/hsivonen/doctype.html

Signature

Berg

Reply to this Message

dorayme - 26 Jun 2007 14:53 GMT

In article
<1182863210.594625.270290@c77g2000hse.googlegroups.com>,

> Hello,
> This menu is perfect in IE but the width in Firefox is a few pixels
[quoted text clipped - 6 lines]
>
> Thank you.

It never is as pure as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
img {border:0px solid black}
</style>
</head>
<body>
<div>
<image src="" width="50%"><image src="" width="50%">
</div>
</body>
</html>

In FF, putting any border value in causes more than 50% to be
taken up by the two bits of equal content, the second then wraps.

Signature

dorayme

Reply to this Message

vunet.us@gmail.com - 26 Jun 2007 16:54 GMT

> In article
> <1182863210.594625.270...@c77g2000hse.googlegroups.com>,
[quoted text clipped - 34 lines]
> --
> dorayme

I checked IE7, it behaves as FF. If my 50% div is set to 500px, then
my ul must be 498px to be perfectly in div for IE7 and FF. I cannot
test for IE6 yet. But what is cross browser solution? Will DOCTYPE
help?
Thank you

Reply to this Message

Jonathan N. Little - 26 Jun 2007 17:05 GMT

> Hello,
> This menu is perfect in IE but the width in Firefox is a few pixels
[quoted text clipped - 4 lines]
>
> http://www.vunet.us/wic/test/ (compare Firefox and IE)

Actually IE is "perfect" because it is wrong on calculatingly the
block's overall width.

http://www.w3.org/TR/CSS21/visudet.html#blockwidth

the width of the block if set to 50% if your add a border with be >50%.
Borders, margins and padding are added to the overall width of the block
in normal flow. You would have to make the two child blocks <50% to fit
with a border.

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

CSS Menu Width in Firefox