|
CSS - Need Help With Ie And Netscape Compatibility
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 Similar TutorialsHello! 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 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; } 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 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'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. 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 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 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?? 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. ???? 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. Ok so ive got me site looking great on IE, Mozilla, Firefox but still have a problem with Netscape! It's only a small problem but if anyone can help me solve it I would be greatful! http://www.magickev.co.uk In IE, Firefox, Mozilla the main logo is right at the top of the screen and the text box is at the top of the grey area. In netscape there is about a 10 pixel gap, does anyone know how I can get rid of this gap? I have tried everything but to no avail! http://www.freewebs.com/magickev/index.htm - HTML source http://www.freewebs.com/magickev/styles.css - CSS source Thanks, Kev 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/ 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, 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, 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 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, 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... 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 |
|||||||