Hey all.
I am making a site right now with a horizontal navigation using CSS. I want a block look to show up using both IE and Netscape, but it only works it IE as I have it now.
Here is a link to the file I am referring to. If you want to try in Netscape and IE, you'll see the difference with the navigation.
<!-- w --><a class="postlink" href="http://www.shanezack.com/netscape.htm">www.shanezack.com/netscape.htm</a><!-- w -->
In Netscape, the width doesn't work, and the background color doesn't show up to border the top and bottom lines in my style sheet. Can anyone help me get the Netscape so it looks similar to IE?
Any help is appreciated.
Thanks,
BrianThis article might help you: <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/I">http://www.alistapart.com/stories/taminglists/I</a><!-- m --> hate to break it to you but Netscape is getting it right. You need to check it first in Netscape and then figure out the "hack" to get it to work in IE if it doesn't.
Basically, if you make it work in IE and then look at it in other browsres, you already have it wrong. Use the "best" browser that has the "best" CSS support to check your initial designs and then "hack" for the rest. Mozilla 1.4 or Netscape 7.1 are the "best" and what you should use to "check" in first.
MNSHere's what I got. There is a very so small(1px?) gap on the bottom of the link area when you do a hover in Mozilla 1.4. I'm not sure why this is, but it is a lot closer than what you had. I also added a border when it isn't hovered so when you do, there's no shifting going on. You can tweek as needed.
body {
background-color:#FFF;
color:#000;
margin:0px;
}
.menu {
text-align:right;
border:1px solid #000;
}
.menu a {
text-decoration:none;
font-size:100%;
font-weight:bold;
border-right:1px solid #FFF;
border-left:1px solid #FFF;
padding-right:5px;
padding-left:5px;
}
.menu a:link, .menu a:visited {
color:#000;
}
.menu a:hover {
color:#FFF;
background-color:#3399CC;
border-right:1px solid #000;
border-left:1px solid #000;
}
<div class="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
</div>Pyro, thanks for that article. It helped immensely.
Spufi, thanks for the code example. It was a lot closer than what I had. I still couldn't get that 1px to change, so I changed it to a "text-decoration: none/text-decoration: underline" link rather than a "background-color: #000" link. I appreciate your help.
Thanks again!
BrianYou bet -- A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->) is a great resource...
I am making a site right now with a horizontal navigation using CSS. I want a block look to show up using both IE and Netscape, but it only works it IE as I have it now.
Here is a link to the file I am referring to. If you want to try in Netscape and IE, you'll see the difference with the navigation.
<!-- w --><a class="postlink" href="http://www.shanezack.com/netscape.htm">www.shanezack.com/netscape.htm</a><!-- w -->
In Netscape, the width doesn't work, and the background color doesn't show up to border the top and bottom lines in my style sheet. Can anyone help me get the Netscape so it looks similar to IE?
Any help is appreciated.
Thanks,
BrianThis article might help you: <!-- m --><a class="postlink" href="http://www.alistapart.com/stories/taminglists/I">http://www.alistapart.com/stories/taminglists/I</a><!-- m --> hate to break it to you but Netscape is getting it right. You need to check it first in Netscape and then figure out the "hack" to get it to work in IE if it doesn't.
Basically, if you make it work in IE and then look at it in other browsres, you already have it wrong. Use the "best" browser that has the "best" CSS support to check your initial designs and then "hack" for the rest. Mozilla 1.4 or Netscape 7.1 are the "best" and what you should use to "check" in first.
MNSHere's what I got. There is a very so small(1px?) gap on the bottom of the link area when you do a hover in Mozilla 1.4. I'm not sure why this is, but it is a lot closer than what you had. I also added a border when it isn't hovered so when you do, there's no shifting going on. You can tweek as needed.
body {
background-color:#FFF;
color:#000;
margin:0px;
}
.menu {
text-align:right;
border:1px solid #000;
}
.menu a {
text-decoration:none;
font-size:100%;
font-weight:bold;
border-right:1px solid #FFF;
border-left:1px solid #FFF;
padding-right:5px;
padding-left:5px;
}
.menu a:link, .menu a:visited {
color:#000;
}
.menu a:hover {
color:#FFF;
background-color:#3399CC;
border-right:1px solid #000;
border-left:1px solid #000;
}
<div class="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Link</a>
</div>Pyro, thanks for that article. It helped immensely.
Spufi, thanks for the code example. It was a lot closer than what I had. I still couldn't get that 1px to change, so I changed it to a "text-decoration: none/text-decoration: underline" link rather than a "background-color: #000" link. I appreciate your help.
Thanks again!
BrianYou bet -- A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->) is a great resource...