Sent by Bryce Fields on 11 November 2004 03:03
On Wed, 10 Nov 2004 15:37:17 -0500, Elms, David [EMAIL-REMOVED]> wrote:
> I've created a horizontal navigation bar which looks fine in IE6/Win but
> isn't right in Firefox 1.0.
Okay...here goes:
> The colours and rollover effects are correct in both browsers but:
> * the blue bar is supposed to extend to the right beyond the five
> navbar links,
When you float an element, you remove it from the normal flow of a
page. The div wrapping the nav items actually "contains" nothing, and
therefor collapse to 0 height. IE incorrectly continues to wrap the
div around the floated elements. To see this illustrated, slap a red
border on #pNavCon and view in FF. You can remedy this by applying a
height to #pNavCon. I was able to use height : 1.5em, but feel free
to experiment w/ whatever units you prefer. Also, you have three
layers of divs wrapping the navigation, and pretty much redundant
styling applied to each. I was able to remove the styles #pNavConFix
and #pNav w/o any affect to the page. Again, your preference there,
but the simpler the code, the better IMHO.
> * the first link text should be displayed on a single line and should
> not wrap onto a second line, and
First I changed the width inside the voice-family hack from 114px to
128px so all the elements were the same length. But the reason your
text is wrapping is the right padding you have on the the links.
Changing all the declarations to padding: 2px 0 5px 15px; on those
items gives it room to display on one line in FF also. Also, you have
some rules just below the voice-family hack "body>a.pNavLink" etc.
that look like ">" was replaced with it's entity. Still, I was able
to remove those three rules w/o affecting the page.
> * there is a blank line above the content in Firefox which is not
> required (ignore the comment in Firefox).
That's the <p> element you have wrapped around your text. You can
either remove it or give it a top and bottom margin and padding of 0.
Also, the div you have wrapping the <p> is closed outside the table,
rather than in the table cell. Improper nesting may cause a headache
somewhere down the road. :-)
www.gov.ky? LOL I work for www.ky.gov. :-) Hope this helps.
--
Bryce Fields, Web Developer
Where I Work: Kentucky Council on Postsecondary Education
Where I Play: www.royalrodent.com
"Do or do not! There is no try!" -- Yoda
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
