Hi there --
I'm working on a long-overdue redesign and am finally getting to shed
tables and work more with CSS.
I know both my HTML and CSS could be [ more elegant | more concise |
better ], but still, I was relatively pleased with my prototype progress
until I began styling the primary and secondary nav bars. They're fine in
FF (1.5), but not so much in IE6 (and IE7, I believe).
In the IEs, hovering over a primary nav option ("about us" et al) causes
its container, div#nav, to expand 3px at the bottom, pushing the content
below it down the page. Rolling over a secondary nav option ("corp" et al)
restores it to its regular size. If you roll over a secondary nav option
first, no unexpected expansion or contraction takes place.
The page is here:
http://tinyurl.com/3xbj78
I assumed this behavior was due to an issue with padding or borders, and
tinkered with the obvious ones to no avail. I started troubleshooting by
commenting out sections of my stylesheet, and narrowed it down to the
#primNav li a:hover rule -- comment that out, and the unwanted behavior
disappears. Then I worked the process of elimination within that rule, and
made the strange discovery that any declaration (except "color") with a
specific color caused the unwanted behavior. Eliminate the color values or
change them to "inherit", and the unwanted expansion ceases. (The color
declaration doesn't seem to be giving me trouble, just background-color,
border, and border-bottom-color.) Changing the hex values of the
troublesome colors doesn't help, nor does changing them to RGB values.
I validated the HTML and CSS. The HTML had two errors -- missing actions
on the forms I haven't completed yet. The CSS validated with no errors;
there were 30 warnings, all related to colors, but I addressed most of
them at one time or another during the troubleshooting process to no
effect on the problem.
My first question is "Am I crazy?" but I realize that's probably not the
smartest one to ask. So I guess my real questions for you folks are:
Is it really possible that the color values are causing this problem?
If yes, how can I fix or work around this?
If no, what did I miss in the troubleshooting (ie, what *is* the problem)?
My apologies if this has been addressed before; I did spend a couple of
hours searching the list archives yesterday, but found nothing that fit.
TIA for any insight you can provide (and your patience with my code and
not-quite-finished page).
Tina
______________________________________________________________________
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/
