|
CSS - Netscape, Css, And The Whole F'n Page Being Off!
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/ Similar TutorialsNeed some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content. Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body {
background-color: #999999;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
#container {
width: 750px; /* For browsers with no escapes */
\width: 770px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #000000;
}
#banner {
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
height: 251px;
background-repeat: no-repeat;
clear: both;
}
#mainarea {
clear: both;
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
background: url(images/fauxcolumns.gif) repeat-y;
display: table;
}
#sidebar {
width: 179px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 179px; /* For good browsers */
background-color: #993300;
float: left;
}
#content {
margin-top: 0px;
float: right;
background-color: #FFFFFF;
width: 570px; /*For browsers with no escapes */
\width: 570px; /*For IE5/Win*/
w\idth: 570px; /*For good browsers */
}
#footer {
width: 740px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 740px; /* For good browsers */
padding: 5px;
clear: both;
}
.FooterText {
font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
text-align: right;
}
.Bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
line-height: 17px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodylink {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #499EEE;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodyhighlight {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #993300;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.SideBarBanner {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
line-height:inherit;
padding-top: 5px;
padding-bottom: 5px;
}
.SideBarLink {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarHeading {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thick solid;
border-top-color:#000000;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarMenuBlock {
background-image: url(images/button.gif);
background-repeat: no-repeat;
height: 26px;
margin-top: 4px;
margin-bottom: 0px;
padding-left: 20px;
margin-left: 9px;
margin-right: 9px;
width: 159px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 159px; /* For good browsers */
text-align: left;
vertical-align: middle;
color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.Heading {
width: 520px; /* For browsers with no escapes */
\width: 570px; /* For IE5/Win */
w\idth: 520px; /* For good browsers */
padding-left: 40px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
background-image: url(images/aceofspades.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: left;
vertical-align: top;
font-weight: bold;
font-style: italic;
}
img {
border: none;
}
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 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 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 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 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?? 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. 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> 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 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, 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'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. 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 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. |
|||||||