trevor bayliss wrote: > Hello everyone I am new! > I am having problems with the last tab on a navigation bar. For some > reason I can´t make it fit with the light blue line above it and I am stuck > as to how to do it. Also the navigation bar doesn´t show up in Netscape 4.78 > (no Flash) with Windows 2000 Professional and the thing just goes crazy with > Explorer 4.0 (no Flash) Windows 98. I imagine that the problem is that they > are too old so I won´t worry that much about them. What can I do to make the > navigation line up? Thanks > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";> > <HTML><HEAD> > <META http-equiv=Content-Type content="text/html; charset=utf-8"> > <STYLE type=text/css> > UL { > LIST-STYLE-TYPE: none > } > LI { > LIST-STYLE-TYPE: none > } > A { > COLOR: #7f99ae; TEXT-DECORATION: none > } > #topnav { > BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px > } > #topnav LI.l { > WIDTH: 20px > } > #topnav LI { > DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: > 85px; HEIGHT: auto > } > #topnav LI SPAN.last-tab { > DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: > 80px; HEIGHT: auto > } > #topnav A { > BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left > top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: > center > } > #topnav A:hover { > BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none > } > #topnav A.selected { > BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none > } > #width { > MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left > } > </STYLE> > </HEAD> > <BODY id=body> > <DIV id=width> > <UL class=clearfix id=topnav> > <LI><A title="" href="index.cfm">Home </A></LI> > <LI><A title="" href="">About</A> </LI> > <LI><A title="" href="">Shops</A> </LI> > <LI><A title="" href="">Entertainment</A> </LI> > <LI><A title="" href="">Malls</A> </LI> > <LI><A title="" href="">Environment</A> </LI> > <LI><A title="" href="">Local</A> </LI> > <LI><A title="" href="">Information</A></LI> > <LI><A title="" href="">Contact Us</A> </LI> > <LI class=l><A href="">Login</A></LI> > </UL></div> > > > > ____________________________________________________________________________________You > snooze, you lose. Get messages ASAP with AutoCheck > in the all-new Yahoo! Mail Beta. > http://advision.webevents.yahoo.com/mailbeta/newmail_html.html > ______________________________________________________________________ > 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/ > > Ok... I worked this out and I'm not sure it's what you want. But the reason you can't get things lining up is you didn't take off the default padding/margin on your list. This design could benefit from a rewrite but I have no idea what your project specs are so I left most of your code alone. Below is the code to duplicate the effect I created. I only tested in FF and IE7 but I figured this'll give you a good baseline to work from.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> UL { LIST-STYLE-TYPE: none; padding: 0; margin: 0; } LI { LIST-STYLE-TYPE: none; } A { COLOR: #7f99ae; TEXT-DECORATION: none; } #topnav { BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0 0 0; } #topnav LI.l { width: 89px; } #topnav LI { DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 88px; HEIGHT: auto; } #topnav A { BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left top; FONT: 11px/20px tahoma, arial; WIDTH: 100%; COLOR: #fff; TEXT-ALIGN: center; } #topnav A:hover { BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none; } #topnav A.selected { BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none; } #width { MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left; } </STYLE> </HEAD> <BODY id=body> <DIV id=width> <UL class=clearfix id=topnav> <LI><A title="" href="index.cfm">Home </A></LI> <LI><A title="" href="">About</A> </LI> <LI><A title="" href="">Shops</A> </LI> <LI><A title="" href="">Entertainment</A> </LI> <LI><A title="" href="">Malls</A> </LI> <LI><A title="" href="">Environment</A> </LI> <LI><A title="" href="">Local</A> </LI> <LI><A title="" href="">Information</A></LI> <LI><A title="" href="">Contact Us</A> </LI> <LI class=l><A href="">Login</A></LI> </UL></div></body></html> -- Thanks, Jim ______________________________________________________________________ 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/
