|
CSS - :hover Compatibility Trouble With Ie & Netscape 7.2
Hello!
Here is a test page that I made up to show my problem, CSS Testpage. Viewing this page in IE, or Netscape will show you the differences in the two browsers. The setup: I am using images as links, and when you mouse over them I want the border to swap colors, extremely simple and plain action. I am just trying to get it too work in all browsers (current ones). The CSS code: Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-color:00aa00;
}
span {
padding: 1px;
}
#wrapper {
margin:0px auto;
width:740;
text-align:left;
}
#workOpera,#workNetscape,#workIE {
margin: 10px;
white-space:nowrap;
text-align:center;
border:0px solid #00f;
padding: 0px 5px 40px 5px;
float:left;
position:relative;
border: 1px solid #00f;
}
h2 {
color:#FFFF33;
}
h3 {
color:#00CCFF;
}
#workOpera img {
border:1px solid #ccc;
}
#workOpera a {
border:0px solid #CCCCCC;
}
#workOpera a:hover img{
border:1px solid #FFFFFF;
}
#workNetscape img {
border:1px solid #ccc;
}
#workNetscape a :link {
border:0px solid #CCCCCC;
}
#workNetscape a :hover {
border:1px solid #FFFFFF;
}
#workIE img {
border:0px solid #ccc;
}
#workIE a {
border:1px solid #CCCCCC;
}
#workIE a:hover {
border:1px solid #FFFFFF;
}
#largeImageIE img {
border:0px solid #ccc;
}
#largeImageIE a {
border:1px solid #ccc;
}
#largeImageIE a:hover {
border:1px solid #FFFFFF;
}
#largeImageNet img {
border:1px solid #ccc;
}
#largeImageNet a :link {
border:0px solid #ccc;
}
#largeImageNet a :hover {
border:1px solid #FFFFFF;
}
The HTML Code: Code: <div id="wrapper"> <div style="margin:15px; padding:5px; background-color:#99CC99; color:#663399; width:700px; display:block;"> <p>Okay, Now if you are viewing this is in IE, you can see that the IE mouseover is working. But the rest of them are not. The mouseover you are looking for is the border changes color.</p> <p>If you are viewing this in Opera or Netscape (new versions) you will see that everything except the IE section is working as it should.</p> <p>The IE section (if viewing from Opera or Netscape) shows the border off from the image, it doesn't "surround" the image like I think it should.</p> <p>Is there a way to combine the IE, and the Netscape/Opera versions so that what I want to accomplish will work no matter what browser the person is using.</p> </div> <div id="workOpera"> <h3>Works in Opera 7.5.4</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <div id="workNetscape"> <h3>Works in Netscape 7.2</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="GLO Agency Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <div id="workIE"> <h3>Works In Internet Explorer 6.0</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <br clear="all"> <table border="0" cellpadding="10" cellspacing="0" align="center"> <tr> <td colspan="2" align="center"><h2>Right Side: IE | Left Side: Opera/Netscape</h2></td> </tr> <tr> <td align="center"> <div id="largeImageIE"> <h3>Internet Explorer<br>Transparent GIF 250X250</h3> <a href="/" target="_blank"><img src="gifs/250X250T.gif" width="250" height="250"></a> </div> </td> <td align="center"> <div id="largeImageNet"> <h3>Netscape / Opera<br>Transparent GIF 250X250</h3> <a href="/" target="_blank"><img src="gifs/250X250T.gif" width="250" height="250"></a> </div> </td> </tr> </table> </div> </div> What happens is the code that works in IE, for some reason doesn't surround the image correctly in Netscape or Opera (or Mozilla Firefox). It's like 3 pixels lower or something or the image is bumped up 3 pixels. It's strange. Viewing the testpage in IE and then in Netscape should show you what I am trying to explain and failing badly at. bpmann Similar Tutorialshi, 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 I 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? Greetings! I seem to have some problems with the hover pseudo-class in IE6. I have tried many combinations but cannot get the color to change on a hover. The other attributes seem to work ok, such as background color, cursor, etc. When I place the COLOR attribute in, IE6 just seems to ignore it. here are the significant snippets of the CSS: This is at the very top of the CSS external..note that the color that is desired on hover is #0000FF or blue: Code:
A:link {color: #FFFF00; text-decoration: none}
A:visited {color: #FFBF00; text-decoration: none}
A:hover {color: #0000FF; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
I am using relative positioning for my "menu" elements, so I created a CSS block for each item that results in the following: Code:
#home, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -200px;
left: -390px;
text-decoration: none;
}
#aboutus, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -170px;
left: -460px;
text-decoration: none;
}
#services, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -140px;
left: -553px;
text-decoration: none;
}
#faqs, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -110px;
left: -682px;
text-decoration: none;
}
#contact, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -97px;
left: 170px;
text-decoration: none;
}
As can be seen the base color or starting color of the menu item is #CC0000 (red). The actual HTML is very simple: Code: <a id="home" href="index3.html">Home</a> <a id="aboutus" href="aboutus.htm">About Us</a> <a id="services" href="services.htm">Our Services</a> <a id="faqs" href="faqs.htm">Questions</a> <a id="contact" href="contactus.htm">Contact Us</a> What now happens, is that each menu item displays in RED, but when you hover over it, the text does not change color to the BLUE that I want. It just remains RED. Yet, when I add an attribute such as "background-color: green" to that HOVER directive, it works fine, it just wont change the text. Is this one of those Microsoft IE problems, or am I doing something wrong?? Thanks, in advance for your help! Kork Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! 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; } 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 Hi, I was curious to know why only the background shows up in Netscape. In IE this site works good. I had it working on Netscape before but now it doesnt. 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 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. 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 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. ???? 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? Hello all, When trying to position:absolute an object within another relatively positioned and left floated in netscape 7.1, for some reason the contained element ignores the parents position:relative property and goes to the top left edge of the body. Try www.signplanning.com in Netscape 7.1 and you will see that compared to I.E. the left-side is pushed up and it should look like the Internet Explorer. Thanks in advanced. BAF I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well. You can see where I've got to he http://www.discographynetwork.com/nav2.php The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful. However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div. Can someone point me in the right direction. Thanks. Could someone please tell me why this is not working in Netscape PLEASE... Code:
<html>
<head>
<style type="text/css">
#welcome { float: left; width: 492px; height: 65px; background-image: url(http://impactinvesting.loadedtechnologies.com/Portals/www.impactinvesting.com/skins/impact-investing/images/welcome-back.gif); background-repeat: no-repeat; background-position: left top; background-attachment: scroll; }
.homeWelcome { width: 100%; }
.welcomeHeader { padding-top: 30px; padding-left: 35px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 18px; color: #4F91CD; width: 492px; height: 65px; }
</style>
</head>
<body>
<div id="welcome"><span id="dnn_ctr977_dnnTITLE_lblTitle" class="welcomeHeader">Welcome</span></div>
</body>
</html>
Thanks 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> 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... 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. |
|||||||