|
CSS - Strange Css Menu Is Borked In Netscape
This side menu works great in MSIE, but in netscape and mozilla the top half of the menu is unfunctional (screenshots and above), it's very strange.
here is the css for the menu Code:
#leftcolumn ul {
list-style: none;
margin: 0;
padding-top: 5px;
padding-left: 5px;
border: none;
}
#leftcolumn li {
margin: 0;
}
#leftcolumn li a {
display: block;
height: 12px;
text-align: left;
text-decoration: none;
color: #000;
}
html>body #leftcolumn li a {
width: auto;
}
#leftcolumn li a:hover {
color: #A03215;
}
#leftcolumn ul.subnav {
list-style: none;
margin: 0;
padding-top: 0px;
padding-left: 10px;
border: none;
}
#leftcolumn ul.subnav li {
margin: 0;
}
#leftcolumn ul.subnav li a {
display: block;
text-align: left;
height: 12px;
text-decoration: none;
padding-left: 3px;
margin-bottom: 1px;
border-left: 7px solid #B2B2B2;
color: #B2B2B2;
}
html>body #leftcolumn ul.subnav li a {
width: auto;
}
#leftcolumn ul.subnav li a:hover {
color: #000;
border-left: 7px solid #A03215;
}
here is the code for displaying it. PHP Code: <ul> <li><a href="">Register!</a></li> <li><a href="">News</a></li> <li><a href="">About us</a></li> <li><a href="">Forums</a></li> <ul class="subnav"> <li><a href="">General</a></li> <li><a href="">Quests</a></li> <li><a href="">Technical</a></li> <li><a href="">Off-topic</a></li> </ul> <li><a href="">Screenshots</a></li> <ul class="subnav"> <li><a href="">Official</a></li> <li><a href="">Beta Images</a></li> <li><a href="">Concept Art</a></li> </ul> <li><a href="">Beta Journals</a></li> <li><a href="">Information</a></li> <ul class="subnav"> <li><a href="">Guides</a></li> <li><a href="">Races</a></li> <li><a href="">Classes</a></li> </ul> <li><a href="">Downloads</a></li> <li><a href="">Contact</a></li> </ul> thanks! Similar TutorialsI got this snippet from the Whateverhover website ...
Code: li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }
I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox. Here's how I've used it: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
* { font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav { border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links { vertical-align: top; width: 155px }
ul,li,a { margin: 0; padding: 0; border: 0 }
ul { width: 155px; background-color: #E2E2EF; list-style: none }
li { position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder { }
li.folder ul { position: absolute; left: 150px; /* IE */ top: 0px }
li.folder>ul { left: 145px /* others */ }
a { }
a.submenu { }
li>a { width: auto } /* others */
li a.submenu { }
/* regular hovers */
a:hover { color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover { background-color: #000080 }
/* hovers with specificity */
li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }</style>
</head>
<body>
<table class="nav">
<tr>
<td class="links">
<!-- Start Navigation Menues -->
<table>
<tr>
<td nowrap>
<ul>
<li class="folder">
<a class="submenu" href="#">Kitchenware ></a>
<ul>
<li class="folder">
<a href="#" class="submenu">Cutlery ></a>
<ul>
<li><a class="submenu" href="#">Cased Sets</a> </li>
<li><a class="submenu" href="#">Poultry Shears</a> </li>
<li><a class="submenu" href="#">Scissors</a> </li>
<li><a class="submenu" href="#">Sets</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor? Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine. www.chroma-zone.net css: www.chroma-zone.net/new.css Any idea's? -Thanks Ok, I'm at my wits end with this. For the past couple of days, I have been working very hard on my online portfolio site. I got it mostly done until I went to validate the CSS and the HTML in the W3C validator, and it screwed some stuff up (when I copied the new validated CSS), or I messed something up accidently, and now i've been trying to figure out for what reason the footer background color is missing (it's all white), and won't show up no matter what I do. I have two css files and a link to my portfolio that I can share, but as i'm a new user, that is disallowed, so. I guess I can show them in PM or something? The top seems to be fine, it's just the footer that's messed up. The footer is supposed to be the same color as the header, and no matter what I do, it won't show up and I don't know what part of the CSS I need to change. The entire layout is made up of css. Usually i'm pretty good with CSS - but I can't seem to figure out what I broke. I've been ytrying to figure it out since last night. If anyone can help me, i'd -very- greatly appreciate it. Thanks! check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! Hi all, My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong. My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap. So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process. One such peice was the nav menu. As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift. Please can you take a look at the files and let me know where i'm going wrong? www [dot] dubtrippin [dot] com/test.html Cheers, Paul. I have made some pages with css styling. This works perfect with IE, but he just ignores the css styling in netscape. An example, I made an tumbnail from a picture, set the size in css, works perfect in IE, but he ignores it in netscape. See example http://www.bvkb.be/BVKB/Sportklimme...finale/test.php Can anywhone help me how this comes. On another page he takes some of the css, en some not. Thanks i'm new at CSS, and the width works fine in IE but not in Netscape. I'm trying to get #bottomLeftFirst1 to be the same width as #bottomLeft, but for some reason #bottomLeftFirst1 is wider in Netscape. Thanks! #bottomLeft { position: absolute; width: 175px; height: 100%; padding: 0; margin: 0; } #bottomLeftFirst1 { border-width: 1.5px; border-style: none none none none; width: 175px; margin: 0; padding: 5px 0 5px 10px; } hi, i have used nested divs and with overflow: scrolll and it works perfectly fine in IE but it has no effect in Netscape. how do i achieve the same in netscape without using iframes? thanks in advance... Hello all, Wondering if those of you who love netscape more than I do can help me, This is a little css script to get a bg image to show in the top right hand corner of a table the table Its called from <td class="rightnav"> Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag? I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating .rightnav { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; background-image: url(images/continued.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top right; height: 100%; white-space: normal; display: block; overflow: hidden; } any help apreciated =) - Shell. Greetings Yall, I am having a big problem, I am woeking on a site for a huge client and in netscape approx. 50px is cut off the top of the page and my tables sized to 100% cut off approx. 50px from the bottom. I have no idea why or if it is evan a CSS problem at all.... Can anyone give some insight. here is a link: http://www.slbdrivingcentre.ca/dev/ Hi, I'm trying to set a box to be offset over a table that contains a jpg. My code is: Code:
.holder {
position: relative;
}
.offset {
position: absolute;
top: 60px;
left: 50px;
height: 140px;
width: 203px;
padding: 8px;
background-color: #FE9900;
color: #003366;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
}
<div class="holder">
<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="images/homepage_flyerdeals_pic.jpg" alt="" width="71" height="71" border="0"></td>
<td><img src="images/homepage_flyerdeals_header.gif" alt="" width="127" height="31" border="0"></td>
</tr>
</table>
<div class="offset">
text here </div>
</div>
My problem is, the offset box is too high and wide in Netscape. It looks fine and lines up perfectly in IE. How can I get it to look the same in Netscape?? Alright.. so I made a site, and have been trying to optimize it in FF, IE6, IE7, NS, and Opera. It works fine in all except NS. Well, the only thing not working in NS is the background-image: Code: .navbar {background-image:url('images/navbar.jpg');
text-align:center;
margin:auto;
width:635px;
font-size:16px;
font-family:Times New Roman;
}
Is there a hack for NS that I haven't been able to find? Or am I just missing something. Thanks. is there anything special i need to do to get CSS to work with IE? Here is what i have above the </head> tag Code: <link rel="stylesheet" type="text/css" href="layout.css"> the layout.css has: Code:
catheader {
color:#ffffff;
font-size: 14px;
font-weight: bold;
font-family: verdana;
}
then in the <body> i have Code: <catheader>My New Category</catheader> In netscape it shows correctly, in IE it doesnt read it at all. any ideas? hi, ive been creating a website for a project and ive used css throughout. Im not experienced with css but managed to develop a decent front end. My problem is that although it displays perfectly in IE it messes up in netscape. Im not sure which parts of the css conflict. Can anyone suggest anything or point me to some website that may help? Cheers The screenshot from netscape is below, its mainly the footer top line and the navbar which fails to span the full screen width. Netscape screenshot This is one of the pages for comparison Main site Thanks in advance for any help Hello, I am having problems sorting out my css. It all looks good but when i look at the css it has 21 browser errors in different browsers. Mainly it is padding errors for netscape 4.0. Is there a way round this please? Cheers I'm sure there is a simple solution, but I'm drawing a blank. I'm trying to line up absolute divs but running into an issue where IE includes the border in the width and Netscape appears to tack the borders on - so if I have a div with a width of 100px and a border of 5px, IE diplays 100px, inclusive of the border. Netscape appears to dispay a div with a total width of 110px. <div align="center" class="box" style="top:49px; left:111px; width:100px; height:100px"><br>Test<br></div> .box {position:absolute; border: 5px double black; font: 200 9px arial} Havn't been able to find the property that may control this. ???? When I use padding in a box it increases the width of the box by the amount of the padding when viewed in NS. IE won't. Anybody know of a good solution to this problem? Code:
<html>
<head>
<style type="text/css">
.box1{
position: absolute;
top: 20px;
left: 40px;
width: 50px;
height: 30px;
border-width: 1px;
border-style: solid;
}
.box2{
position: absolute;
top: 55px;
left: 40px;
width: 50px;
height:30px;
border-width: 1px;
border-style: solid;
padding-left: 10px;
}
</style>
</head>
<body>
<div class = 'box1'>
box 1
</div>
<div class = 'box2'>
box 2
</div>
</body>
</html>
Thanks Hi, This is the first day i am tackling css. Please Explain why my site is looking different in netscape as opposed to IE, (ie is the correct look). This is the link http://www.eac.net.au/remax/template1/new_apartment.htm . I am also attaching my css file, let me know if i am on the right track for using CSS THANKYOU uno_turko I discovered something today, that NS defines the root containing block as being html whereas IE uses body. That being said, look at this code in both browsers and tell me how you would position the black box so it is in the same location on both browsers - Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0" /> <meta name="ProgId" content="FrontPage.Editor.Document" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Navigation</title> <style type="text/css" media="screen"> html{ height:100%; } body { margin: 0; padding: 0; font: 85% arial, hevetica, sans-serif; text-align: center; color: #000; background-color: #00f; height: 100%; border: 0px solid red; } #container { margin: 0px auto; width: 770px; height: 100%; bottom: 0px; text-align: center; background-color: #f00; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; border: 0px solid red; layer-background-color:red; } #mainnav { float: left; width:130px; height:100%; vertical-align: middle; position: relative; layer-background-colorurple; background-colorurple; } #mainbod { float: left; width:640px; height:100%; vertical-align: middle; position: relative; layer-background-color:aqua; background-color:aqua; top:0px; } #banner { float: left; width:640px; height:100px; vertical-align: middle; position: relative; layer-background-color:green; background-color:green; top:0px; } #test{ position:absolute; layer-background-color:black; background-color:black; width:150px; height:30px; top:85px; right:0px; border:1px solid red; } </style> </head> <body> <div id="container" > <div id="mainnav"> hello </div> <div id="mainbod"> <div id="banner"> <div id="test"> </div> </div> hello </div> </div> </body> </html> On our new test site for our colleges online catalog I've been charged with trying to fix an issue we are having with some versions of Netscape on some PC's(not mac) where our CSS printing style isn't working....We can't pin point what causes the problem and some pages have the error and others do not, some pages print fine in 7.1 and not 7.2 or 8.1 (in 7.2/8.1 almost everything longer than one page in depth does not print properly) and its really nerve racking. If anyone has experienced a similar problem or knows of a possible solution I would be eternally in thier debt. The link is http://www.ramapo.edu/test/catalog_06_07/ and the pages that have print problems in netscape are generally longer than a page in depth are mostly major requirements pages like. http://www.ramapo.edu/test/catalog_06_07/academicPrograms/TAS/iss_req_major.html When the problem occurs the printer will usually print a blank page with just the url and date (header/footer) or will print nothing but 1 or 2 blank pages with the url/date and this can be seen in preview (no need to waste paper). Here is what it looks like when it properly prints: http://phobos.ramapo.edu/~chdonnel/properprinting.jpg Here is what it looks like when netscape masacres it: http://phobos.ramapo.edu/~chdonnel/badprinting.jpg Thanks in advance, Chris |
|||||||