Forum Moderators: not2easy
It seems to be all about padding-top, but I need that since when I tried giving equal top and bottom padding to fieldset then Firefox and IE interpreted that differently too, meaning that IE put bottom part of the legend inside that padding making the padding smaller. When I tried defining both top and bottom-padding for ol then it the bottom one was ignored.
A have tried giving li a height of 1em as well, but no difference. Also I'm wondering why floating labels or not floating them changes their vertical position inside li.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style>
form ol{
list-style-type:none;
padding-top:0.8em;
}
form li{
margin:0;
border:1px solid #000;
float:left;
clear:left;
}
label {
float:left;
}
}
fieldset{
padding-bottom:0.8em;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="get" action="go.html">
<fieldset>
<legend>Legend</legend>
<ol>
<li>
<label for="number">Number*</label>
<input name="number" type="text" id="number" size="14" />
</li>
<li>
<label>Another*</label>
<input name="another" type="text" id="another" size="14" />
</li>
</ol>
</fieldset>
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</body>
</html>I'm not really fond of all those IE hacks as I have managed to keep my layouts rather simple so far, so I'd like to achieve it without that. All I want is equal top and bottom padding in fieldset. Or I'll have to simply take it the way it is now.
"Whitespace in lists" was prevalent in IE5, hid away for a while in IE6, or at least that's where it was mainly only seen if there was block anchor in the list, and it's back with a vengeance in IE7!
sorry but managing without a "hack" for IE is very unlikely these days and with IE7 looking set to be the default for years to come I know I would rather feed a bit of help - to me it's not so much a hack it is just 'helping' it help itself ;)
hasLayout is entrenched in IE's inner workings and workarounds abound, it's not too much to add a width or height here or there IMHO.
to solve you particular problem the <ol> needs hasLayout triggered, you can do that by adding a width to it
if you were to add
width: 100%; /* IE layout */remember to comment it as required by IE, and that if you were to add padding or border to your list 100% width might be too much and 95-99% might be better but it should work for you, and it's not really much of a hack to get a preferred look imho.
-Suzy
Hopefully it isn't like IE and transparent pngs, while I have thought that version 6 doesn't support them my friend sayd she uses version 6 and it displays them correct. I suppose it's not just the version that matters there.
