Using CSS for a navigation element ‘table’

@happy_handsApr 09.2006

I’m currently working on a navigation style table element, using css, rather than javascript, image rollovers, etc.

~~[url]~~http://hosting.parlour.info/css_table.html[/url]

What I can’t seem to work out, is why the navigation works fine in IE, but looses it when displayed on Mozilla.

The css coding is as follows:

~~[QUOTE]~~

.MenuLink {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
text-decoration: none;
height: 10px;
width: 100%;
padding: 5px;
background-color: #DDEAF1;
border-bottom: 1px solid #808080;
}

.MenuLink:hover {
background-color: #DDDDDD;
}

.MenuSubLink {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
text-decoration: none;
height: 10px;
width: 100%;
padding: 5px;
background-color: #DDEAF1;
border-bottom: 1px dashed #808080;
}

.MenuSubLink:hover {
background-color: #DDDDDD;
}

[/QUOTE]

(the format for this was through Dreamweaver MX and it’s own thoughts on how to do it).

Can anyone let me know how to make this work, to display as seen in IE, but to work in Mozilla etc too?

to post a comment

CSS

7 Comments(s) _↴

@NogDogApr 09.2006 — #Start by adding a doctype declaration as the very first line of the file. This will get IE out of "quirks mode", which will cause it to use the correct box-size algorithm.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

@happy_handsauthorApr 09.2006 — #Cheers for that. Hadn't spotted I'd removed the doctype declaration from the html anyway (now updated)

The thing is, it's not actually IE to have the 'problem' displaying the CSS, it's actually Mozilla that looses the table cell style structure.

I'd really like to Mozilla to show the navigation bar 'correctly' but assume it must be something down to using:
height: 10px;

width: 100%;[/QUOTE]
in the css stylesheet. (as these are the only two elements not displaying correctly I think). I've now pasted a screen shot style image of how I was planning it to look in Mozilla (as well as IE).

@WebJoelApr 09.2006 — #that IE makes assumption about what "width:100%" means, whereby compliant browsers (Mozilla, Firefox, Opera, etc) know that "100%" means that whatever occupies the container is "100%", and adding any border, padding and margin, shows it the way it is supposed to be. So, "100%" of a link called "HOME" is not nearly as wide as "100%" of the link "Come visit us here next time"... see what I am saying? The "width" must be defacto amount, larger than the longest text used, applied to every link instance.

So, instead of "width:100%", try something like "width:300px" (I'm just guessing how wide you actually need it, -make it a bit wider than your LONGEST text-link on all of them, and ALL the text links will be exactly that wide. (untested, as I do not have your html to try it out upon).

Also, "height:10px"... this line of text is probably very close to that much tall. Maybe use something like "line-height:1em" or "1.05em" for a bit extra 'space', whatever...

That way, if the user has their text-size different, the line will always be "one" tall for their prefered font-size. (an "em" being the height of the letter "M" I guess, no matter what what "size" is being used...) I find myself using "font-size:@@px" too but really should be using "em", not "px". Pixel height is best used for DIV and other 'containers'. "em" is best used for text, <h>/s, for any text. "padding" is okay for use 'around' text, though, as this is just 'space' in addition to/surrounding the text.

@VladdyApr 09.2006 — #Navigation is a LIST of LINKs, starting with a proper markup will actually make the styling job easier.

@ray326Apr 10.2006 — #To elaborate on Vladdy's suggestion. Here's the markup for your menu with a couple of stylistic hints thrown in.

[code=html]
 <ul style="width:300px;list-style:none;margin:0;padding:0">
 <li><a class="MenuLink" href="#">HOME</a></li>
 <li><a class="MenuSubLink" href="#">Storage</a></li>
 <li>
 <ul style="list-style:none;margin:0;padding:0 0 0 1em;">
 <li><a class="MenuSubLink" href="#">Intl Freight Forwarding</a></li>
 <li><a class="MenuSubLink" href="#">Transport</a></li>
 <li><a class="MenuSubLink" href="#">Returns</a></li>
 <li><a class="MenuSubLink" href="#">Inventory</a></li>
 <li><a class="MenuSubLink" href="#">The Smart Driver</a></li>
 <li><a class="MenuSubLink" href="#">Installation/Relocation</a></li>
 <li><a class="MenuSubLink" href="#">Exhibitions</a></li>
 <li><a class="MenuLink" href="#">Task Force</a></li>
 </ul>
 <li><a class="MenuLink" href="#">TRACKING SYSTEM</a><strong></li>
 <li><a class="MenuLink" href="#">ABOUT  US</a></li>
 <li><a class="MenuLink" href="#">CONTACT US</a></strong></li>
 </ul>
 [/code]

@happy_handsauthorApr 11.2006 — #Much appreciated for all that info WebJoel, Vladdy & ray326. The list idea certainly makes sense. Thank you.

Thankfully, after playing around with em and px sizes, to try and make the layout work to the expected format in Mozilla, and adding the class to the list item, I've now just about managed to make it work just about as I was hoping in Mozilla.

http://hosting.parlour.info/css_table.html

Unfortunately, now in IE, there seems to be a small unchanging border padding around the text within each cell, that doesn't change colour on mouseover. The IE can be removed by removing the padding and line height specifications from '.menulist', but only at the cost of the formatting going back to how it was before, in Mozilla. ?

I know Mozilla is more like proper markup, but with something like 75-80% of users still on IE as far as I know, I'd really like them to see the correct effect too.

[code=html]
 <ul style="width:200px;list-style:none;margin:0;padding:0">
 <li class="Menulisttop"><a class="Menulink" href="#">Storage &amp; Distribution</a></li>
 <li class="Menulist"><a class="Menulink" href="#">International Freight Forwarding</a></li>
 <li class="Menulist"><a class="Menulink" href="#">Specialised Transportation</a></li>
 <li class="Menulist"><a class="Menulink" href="#">Storage & Distribution</a></li>
 <li class="Menulist"><a class="Menulink" href="#">Recycling &amp; Disposal</a></li>
 <li class="Menulist"><a class="Menulink" href="#">Reverse Logistics</a></li>
 </ul>[/code]

[CODE]
 .Menulist {
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 10px;
 font-weight: normal;
 text-decoration: none;
 line-height: 1.5em;
 width: 175px;
 padding: 5px 5px 5px 5px;
 background-color: #D1D3D4;
 border-bottom: 1px solid #808080;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 }
 
 .Menulist:hover {
 background-color: #DDDDDD;
 }
 
 .Menulink {
 font-family: Helvetica, Arial, Verdana, sans-serif;
 font-size: 10px;
 font-weight: normal;
 text-decoration: none;
 color: #2E3092;
 line-height: 1em;
 height: 15px;
 padding: 5px 5px 5px 5px;
 width: 165px;
 background-color: #D1D3D4;
 }
 
 .Menulink:hover {
 background-color: #DDDDDD;
 }
 [/CODE]

Any other changes you may be able to suggest, to make this navigation list cross browser compatible, without needing to resort to image rollovers to maintain the same look?

I look forward to hearing from you again. Thanks again in advance.

@ray326Apr 12.2006 — #They look much more alike with this style in place. Maybe you're missing some default size differences.

<i>
 </i>html, body {
 margin:0; 
 padding:0; 
 border: 0;
 background:#fff;
 color:#000;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size:1em;
 }

Also in #CSS _↴

Is there a limit of stylesheets i can link?Move Search box to the right of menu bar Layers inside a growing div-area

Success!

Help @happy_hands spread the word by sharing this article on Twitter...

Tweet This

Using CSS for a navigation element ‘table’

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Using CSS for a navigation element ‘table’

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴