Sent by Matthew Bernhardt on 3 August 2006 21:09
Hello everyone,
I'm back, with another pair of somewhat-vexing phenomena. For reference,
here is the page and CSS I'm talking about:
http://support.knowlton.ohio-state.edu/ksa06jello/
I've run this page through the XHTML and CSS validators, and they're
reporting that everything is valid.
There are 4 areas where this page doesn't render as I intend in various
browsers. I've tried to massage each of them away, but haven't succeeded.
At this point, I could use a set of eyes that aren't mine. For
clarificatin, I've shaded the two divs (#ksamasthead and #ksasubmasthead)
that are related to these issues.
The issues (in descending importance):
1) also on IE6/Win, the #ksamasthead div doesn't land on the
#ksasubmasthead div below it. I believe this is due to the logo image
being floated, and so passing outside the #ksamasthead div. I looked at
the Wiki and added an "overflow: auto;" to fix this situation in the other
browsers, but IE doesn't budge.
On a related note, the main menu ("The School | Architecture ...") is
something I'd ideally like to vertically align to the bottom of the
ksamasthead div. Vertical alignment, though, is something I've struggled
with. I've gotten it to work in some test pages, but not others, and not
this one. Currently I've assigned that div a "margin-top: 4em;" which
works in normal text sizes, but when I scale the text down it doesn't work
anymore.
2) on IE6/Win, submenu ("Welcome | News | Events...") has a 1-pixel gap
between it and the border of its div. That gap doesn't appear in Opera9,
nor FF1.5.0.6. I don't believe it appears on any Mac browser in my test
suite (Safari/FF/Opera/IE). In looking over the CSS, I don't define
-anything- to happen above that menu; interestingly, the list at the
bottom of the page ("Knowlton School of Architecture | 275...") is showing
correctly with what should be identical markup strategies?
3) on FF1.5.0.6/Win, the top of the content box disappears. It's assigned
as the top border of the #ksasubmasthead div - and it's being covered by
something but I'm not sure what. If I make it 2 pixels wide, it shows 1
pixel worth (and the other browsers all show 2 pixels). This just popped
up recently, it was working about an hour ago - but not now.
4) This is picking nits, but I've tried adding a :last-child selector in
the CSS for both the main and sub menus to add a trailing color bar to the
right of both menus. It shows up correctly in FF, but not in Opera or IE.
I'm not too stressed about this one, but I am curious about why it's
happening?
Thanks very much for any insight anyone can offer.
--
Matt Bernhardt, [EMAIL-REMOVED]
Webmaster + Fab Lab Coordinator
Knowlton School of Architecture
The Ohio State University
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
