Inconsistent width sizes

[wickford]

I have a problem with the width parameter of my CSS. I have a number of A tags inside a DIV that has a set width of 182px. That DIV is inside another DIV, which is relatively positioned.

The problem is with the A tags. I have set them a width of 100% to fill the inner DIV tag. But while in IE they properly position themselves to the end of the inner DIV, in Mozilla and Netscape they spill over. I am testing this on Windows.

I tried to change the width into pixels and ems, but in Mozilla they always spill over, so that is not the solution.

Please see the zip file that contains screenshots of the same web file but in different browsers. The picture of IE is what I want. The A tags have a navy blue background.

I would like to edit the CSS so that I don't need an IE version and an MZ version, as one version is much easier to handle.

Thanks in advance.
/* CSS FILE */
div.lmct{margin:9px;width:182px}
div.lmnu{background-color:#993333;border:1px solid red;color:white;margin-bottom:10px;
padding-bottom:3px;width:182px}
div.lmnu a{background-color:#333366;color:#66CC66;display:block;
font:11pt "Berlin Sans FB",serif;padding:1px 5px;
text-decoration:none;width:100%}
div.lmnu a:hover{background-color:#993333;color:#33CCFF}
div.lmnu a img{border:0px;height:16px;padding:0px 0px 3px 3px;
vertical-align:text-top;width:20px}
div.lmnu img{height:26px;width:182px}


<div class="lmct">
<div class="lmnu">
<img src="thisthat.bmp" width="182" height="26" alt="" />
<a href="#"><img src="off.gif" width="20" height="16" alt="" />Swap</a>
<a href="#"><img src="off.gif" width="20" height="16" alt="" />Swap</a>
<a href="#"><img src="off.gif" width="20" height="16" alt="" />Swap</a>
</div>
</div>

[MotherNatrsSon]

Set the overflow to hidden??? I am willing to bet Netscape is rendering it correctly and IE has it wrong. Did you validate the css?

http://jigsaw.w3.org/css-validator/

Something I just noticed though is that you have a SANS font by name and then change it to a serif for a general??? :confused:

MNS

[pardicity3]

Another attack of IE's incorrect box model. IE is incorrectly including the padding in the specified width while mozilla adds the padding onto the specified width. So really your <a> tag has a width of 100% + 10px, hence the spill over.

If you were to put an xhtml doctype (i think an html 4.01 doctype works too...) at the top of your document IE would go into standards mode and render your page the same as mozilla does.

To fix your problem, try making the width of the <a> tag 172 pixels. That way, when you add 10 pixels of padding you will be at a width of 182.

[wickford]

Yes I have validated it. I did it before I noticed the problem. The only change I made was to give the A tags a background colour.

I shall try what you said.

[wickford]

Thanks, it works great. :D