PDA

Click to See Complete Forum and Search --> : More Firefox problems.

SuzanneB
08-19-2004, 02:29 AM
Look at this menu...

Tiecali (http://www.tiscali.co.uk/products/?code=ZZ-NL-11GK)


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="blah.htm" class="menu">10000</a></div>
<diviv class="break">
<a href="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)
SuzanneB
08-19-2004, 03:34 AM
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????
Daniel T
08-19-2004, 03:57 AM
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.
Fang
08-19-2004, 05:27 AM
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.tiscali.co.uk/products/">menu item</a></li>
<li><a href="http://www.tiscali.co.uk/products/">menu item</a></li>
<li id="last"><a href="http://www.tiscali.co.uk/products/">menu item</a></li>
</ul>
</div>
</body>
</html>
SuzanneB
08-19-2004, 06:13 AM
Clever! I am impressed.
What is this display:block; ?? I don't seem to have any reference to that in my books.
Fang
08-19-2004, 06:37 AM
You should read the w3schools css tutorial (http://www.w3schools.com/css/css_classification.asp) before continuing.
SuzanneB
08-19-2004, 08:45 AM
I would never have guessed that block would have that effect though...
DaveSW
08-19-2004, 02:28 PM
a block means it goes to the full width of the container and forms a block on the page. inline is the opposite.