CSS valid but not working

fifeclub posted this at 20:14 — 25th May 2004.

Joined: Feb 2001

Everybody says to stop using tables for design, so I'm trying to create a new template from scratch with CSS. I haven't gotten very far and it's ultra simple but I stopped here to ask y'all about it. Note this test page validates fine for HTML and CSS.

Check out this page in both MSIE ~~and~~ Firefox or similar non-IE browser.

Not that there's much code involved but here's the entire page:

<?php
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> 

<html>
<head>
    <title>Storm Template</title>
    <META http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">
    <META name=\"author\" content=\"Shooting Storm Media\">
    <META name=\"copyright\" content=\"Copyright 2004 Shooting Storm Media\">
    <META name=\"Revisit-After\" content=\"14 Days\">
    <META name=\"description\" content=\"Shooting Storm Media\">
    <META name=\"keywords\" content=\"website design Charlotte\">
    <!-- <link rel=\"stylesheet\" href=\"/style.css\" type=\"text/css\"> -->
    
    <style type=\"text/css\">

body {background-color: #dddddd;
    color: #000000;
    margin: 20px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif}

a:link, a:visited, a:active {color: #0000ff;
    text-decoration: none}

.header_bar {background-color: #ffffff;
    border: solid 2px #000000;
    padding: 2px;
    width: 100%;
    text-align: right}

.menu_top {background-color: #ff9999;
    border: solid 2px #000000;
    padding: 2px;
    width: 180px;
    text-align: left}

.menu_item {background-color: #ffffff;
    border-left: solid 2px #000000;
    border-right: solid 2px #000000;
    border-bottom: solid 2px #000000;
    padding: 2px;
    width: 180px;
    text-align: left}

    </style>
</head>

<body>

This is where the logo will go.<br />

<div class=\"header_bar\">this is <a href=\"/\">a link</a> inside the header bar.</div><br />

<div class=\"menu_top\">This is a menu item</div>
    <div><a href=\"/\" class=\"menu_item\">Link 1</a></div>
    <div><a href=\"/\" class=\"menu_item\">Link 2</a></div>
    <div><a href=\"/\" class=\"menu_item\">Link 3</a></div>
    <div><a href=\"/\" class=\"menu_item\">Link 4</a></div>
    <div><a href=\"/\" class=\"menu_item\">Link 5</a></div>

</body>
</html>
?>

Okay. So when you view it in IE everything looks fine except all the menu links 1-5. The width works fine for the menu header stle but doesn't seem to work on the menu items below it. Why? (*Note: It did work in IE before I put in the unit "px" in the CSS, but validation corrected me) Also, on those menu items, the border-left and border-right work fine but border-bottom doesn't work. Why?

Now look at the page in something like Firefox. Nearly identical outcome but notice that the black border that encompasses the menu header seems to be missing from the area where it is adjacent to the menu item below it, AND the border-bottom that doesn't work on menu items 1, 2, 3, and 4, somehow works on menu item 5. Why?

And finally a question for the next step. If I want the main page content to be in the area to the right of that failed menu, how do I do that? In the past I've "tabled up" the entire page. Is the only possible way to create another div tag with an absolute position value, or are there other methods?
Thanks for any advice.

Suzanne posted this at 12:21 — 26th May 2004.

She has: 5,507 posts

Joined: Feb 2000

A few suggestions, but I don't have a definitive answer.

1. use lists instead of a pile of divs -- listamatic.com
2. use contextual css instead of tons of classes:

<div id="navmenu">

<ul>
    <li>This is a menu item</li> 
    <li><a href="/">Link 1</a></li> 
    <li><a href="/">Link 2</a></li> 
    <li><a href="/">Link 3</a></li> 
    <li><a href="/">Link 4</a></li> 
    <li><a href="/">Link 5</a></li> 
</ul>
</div>

and

#navmenu ul li a {
    background-color: #fff; 
    border-left: solid 2px #000; 
    border-right: solid 2px #000; 
    border-bottom: solid 2px #000; 
    padding: 2px; 
    width: 180px; 
    text-align: left;
    display: block;
    }

#navmenu ul li {
    background-color: #ff9999; 
    border: solid 2px #000000; 
    padding: 2px; 
    width: 180px; 
    text-align: left;
    }

That's just an example, and may not work as intended, lol, fair warning. But hopefully it gives you an idea.

fifeclub posted this at 13:34 — 26th May 2004.

He has: 688 posts

Joined: Feb 2001

Hey that's a good link. Very informative. Thanks.

I should however say that even though I've seen it used all over the place on other sites, I never really knew what the deal was with id="x". What exactly does that do that class tags don't?

Suzanne posted this at 13:54 — 26th May 2004.

She has: 5,507 posts

Joined: Feb 2000

id is a unique identifier. class is a general identifier.

You can use them together, or stack classes. Using ID makes it accessible through the DOM for scripting and CSS control in a very specific and precise way.

So if you were CSS...

#mikesussman {
your dna
}

.male {
xy
}

.american {
born in USA
}

You would look like:

fifeclub posted this at 14:07 — 26th May 2004.

He has: 688 posts

Joined: Feb 2001

lol nice example.

dk01 posted this at 08:17 — 28th May 2004.

He has: 516 posts

Joined: Mar 2002

Lol creative
-dk

JeevesBond posted this at 12:36 — 28th May 2004.

He has: 3,956 posts

Joined: Jun 2002

Remember that fixed font sizes are evil (this is old but I'm sure you get the idea)! It also appears that you are using the wrong doctype declaration - have you thought of moving to XHTML? That's what this code appears to be

a Padded Cell our articles site!