Hi,
I have a div whose children (some spans and another div) are floated left
inside it. This is the site: http://raffles.awardspace.com/G/misc/
I am currently testing this in Firefox 1.5 only. It won't work in IE
(probably will in Opera and Safari).
Please select "custom" in the dropdown, enter a number less than 10 and
press the button (to create more than one page). If you hover over the
number after "page", you will see the ul containing links appear. The HTML:
<div id="options">
<form method="post" action="melbourne/2/">
<div>
<span>page</span>
<div>
<ul>
<li><a href="misc/1/">1</a></li>
<li><a href="misc/2/">2</a></li>
</ul>
</div>
<span>of <span>2</span> showing <span>the last lonely
image</span></span>
</div>
<!-- ... -->
</form>
</div>
In terms of semantic HTML it isn't ideal, but I'm just testing something
here. The problem is, the span containing the word "page" is one pixel
higher than the others. I think it's more a case of the others being one
pixel lower. It's the div's fault I think. This is the relevant CSS:
#options form div {
display:inline;
vertical-align:middle;
}
#options form div:first-child > * {
float:left;
}
#options form div div,
#options form div div ul {
position:relative;
}
#options form div div {
display:block;
line-height:1em;
height:1em;
overflow:hidden;
margin:0 0.4em;
z-index:2;
}
If I give #options form div div a line-height of 1.1em and #options form
div:first-child > * a line-height of 0.9 em, they suddenly line up (not the
div, but that's easily solved). Why don't the spans line up? I'd rather not
have to faff about with line-height, which I don't really understand too
well and how it deals with inline elements mixed with block-level elements,
and when you make them floated - it gets complicated.
Thanks in advance,
Rafael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
