Look at this menu...
Tiecali (<!-- m --><a class="postlink" href="http://www.tiscali.co.uk/products/?code=ZZ-NL-11GK">http://www.tiscali.co.uk/products/?code=ZZ-NL-11GK</a><!-- m -->)
It works under firefox.
Now look at this....
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
a:link.menu, a:active.menu, a:visited.menu { padding-left:5px; background-color:#D7D7D7; color:#666666; text-decoration:none; height:17px; width:116px; }
a:hover.menu {background-color: #990000; color: #FFFFFF; }
.break{background-color:#333333; width:116px; height:18px; }
a:link.down, a:active.down, a:visited.down {padding-left:5px; background-color:#990000; color:#FFFFFF; text-decoration:none; font-size:10pt; height:17px; width:116px; }
<div id="menu_container">
<div class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">10000</a></div>
<diviv class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">2000000</a></div>
</div>
Why doesn't that work the same way?? The highlight doesn't go all the way accross in firefox! ( It does in IE)I almost found a soulution, by experimentation.
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
div.break a {display: block; text-decoration: none; padding: 1px 0px 1px 5px;}
a:link.menu, a:active.menu, a:visited.menu { background-color:#D7D7D7; color:#666666; text-decoration:none; width:111px;}
a:hover.menu {background-color: #990000; color: #FFFFFF; }
a:link.down, a:active.down, a:visited.down { background-color:#990000; color:#FFFFFF; text-decoration:none; width:111px; }
But can anyone explain how this works????It is very difficult for us to read such large blocks of code that should be whitespaced. Please put them in
Tiecali (<!-- m --><a class="postlink" href="http://www.tiscali.co.uk/products/?code=ZZ-NL-11GK">http://www.tiscali.co.uk/products/?code=ZZ-NL-11GK</a><!-- m -->)
It works under firefox.
Now look at this....
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
a:link.menu, a:active.menu, a:visited.menu { padding-left:5px; background-color:#D7D7D7; color:#666666; text-decoration:none; height:17px; width:116px; }
a:hover.menu {background-color: #990000; color: #FFFFFF; }
.break{background-color:#333333; width:116px; height:18px; }
a:link.down, a:active.down, a:visited.down {padding-left:5px; background-color:#990000; color:#FFFFFF; text-decoration:none; font-size:10pt; height:17px; width:116px; }
<div id="menu_container">
<div class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">10000</a></div>
<diviv class="break">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.htm" class="menu">2000000</a></div>
</div>
Why doesn't that work the same way?? The highlight doesn't go all the way accross in firefox! ( It does in IE)I almost found a soulution, by experimentation.
div#menu_container{font_family:arial; text-align:left; font-size: 10pt; font-weight:bold; border:1px solid #666666; background-color:#333333; width:116px; color:#CCCCCC; padding:4px 1px 0px 1px;}
div.break a {display: block; text-decoration: none; padding: 1px 0px 1px 5px;}
a:link.menu, a:active.menu, a:visited.menu { background-color:#D7D7D7; color:#666666; text-decoration:none; width:111px;}
a:hover.menu {background-color: #990000; color: #FFFFFF; }
a:link.down, a:active.down, a:visited.down { background-color:#990000; color:#FFFFFF; text-decoration:none; width:111px; }
But can anyone explain how this works????It is very difficult for us to read such large blocks of code that should be whitespaced. Please put them in
Code:
blocks and whitespace them. Thanks.
And btw, it isn't Firefox that is displaying the page wrong, it is IE.The clue is to make a {display:block;}, that will give a full width rollover.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fake Tiscali</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:1em;
}
#menu {
width:8em;
padding:20px 0 200px 0;
background:#76c;
color:#000;
}
ul {
display:inline;
}
li {
list-style-type:none;
padding:3px 0;
border-top:1px dotted #000;
background:#ccd;
color:#000;
}
a {
display:block;
text-decoration:none;
padding-left:3px;
background:#ccd;
color:#000;
font-size:70%;
}
a:hover {
background:#fff;
color:#000;
}
#first {
border-top:1px solid #000;
}
#last {
border-bottom:1px solid #000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li id="first"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.tiscali.co.uk/products/">menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.tiscali.co.uk/products/">menu item</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.tiscali.co.uk/products/">menu item</a></li>
</ul>
</div>
</body>
</html>Clever! I am impressed.
What is this display:block; ?? I don't seem to have any reference to that in my books.You should read the w3schools css tutorial (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_classification.asp">http://www.w3schools.com/css/css_classification.asp</a><!-- m -->) before continuing.I would never have guessed that block would have that effect though...a block means it goes to the full width of the container and forms a block on the page. inline is the opposite.