height difference

[Cullen411]

hi the code below in IE seems to make this div height alot bigger than in firefox, can anyone give me an idea as to why this is. Is it something to do with the padding and the border, and if so why would it display differently in firefox?

#search {
width: 342;
height: 20px;
margin: 0 auto;
background: #fff;
text-align: center;
padding: 2px;
border:2px solid #CCCCC;
}


<div id="searchbar">
<form action="" method="get">
<input name="" type="text" class="inputbox"></form></div>

even with the padding and border it should only be
height + padding + padding + border + border, is that correct?

 

[BillyRayPreachersSon]

FF will usually give unexpected results when developers fail to use correct CSS.

You should at specify the units you want after the "342".

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

FF in IE understand the height property differently. FF is correct, while IE is (as usual) wrong. FF will take the specified height and hold it, while IE will expand to fit the content. Clearly your content is bigger than the space you provided -- only that in FF it hangs over, in IE it pushes the height of the container down. One of the things causing that is the forms margin-bottom which is by default set to (I believe) 1em. If you specifically nullify that margin, you might have some good results. If IE is still giving you grief, you can put overflow: hidden; to stop it from expanding.

 

[tsdragon]

You could also try using a strict doctype to try to force IE to render it the same as FF. That would make it easier to fix (but might break other things that are relying on IE quirks).


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.