Rafael Holt wrote: > 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 >
Hello, Looks like its because that first span has nothing to vertical-align: middle; with whereas the others have associated inputs. I'd either put that first span in a div too, or increase its line-height as you tried earlier. The latter approach saves on some markup so might be best. Have a go at setting overflow: hidden; on the #options container instead of using an empty p tag to clear it. Might work, at least for modern browsers. Take it easy, Rob O ______________________________________________________________________ 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/
