Is the original Netscape browser better when using CSS than Mozilla? I keep having problems getting my styles to show up in Mozilla, but IE is taking them fine. What have I done wrong!?
Here's the newest problem. I'm using styles to color the <body> and <td> backgrounds and Mozilla won't take it. Any suggestions would be much appriciated. Here's the code:
CSS:
BODY {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:999999;
margin:0px;
padding:0px;
}
TD, P {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:CCCCCC;
margin:0px;
padding:0px;
}
TABLE {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:transparent;
margin:0px;
padding:0px;
}
.bodyTop {
background-image:url(grad_bodyTop.jpg);
background-repeat : repeat-x;
}
HTML:
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-epuiv="content-type" content="text/html; charset=windows-1252" />
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="intsearch" content="">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />
</head>
<body>
<div align="center">
<table height="600" width="770" border="0" cellspacing="4" cellpadding="4" align="center">
<tr>
<td width="20%" rowspan="2" align="left">
</td>
<td width="80%" height="15%" align="left">
</td>
</tr>
<tr>
<td width="80%" valign="top" class="bodyTop" align="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" alt="foo" width="100" height="400" border="0" />
</td>
</tr>
</table>
</body>
</html>Originally posted by bukwus
Is the original Netscape browser better when using CSS than Mozilla?Surely, you jest. NS 4.x barely supports CSS.
I keep having problems getting my styles to show up in Mozilla, but IE is taking them fine. What have I done wrong!?Many will say that starting with IE is what you have done wrong. IE allows what you might call sloppy coding, and Mozilla strictly adheres to W3C recommendations.
background-color:999999;You forgot the "#".
The W3C has a CSS validator. That is what you ought to use to determine the correctness of your code.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS1In">http://www.w3.org/TR/CSS1In</a><!-- m --> addition to what Gil pointed out. You look like you are using HTML and XHTML when you should use one, or the other. I don't see why you need to define the font-family, font-size, font-weight, and color all the same for what you did when you could just define all of those for the body tag and then code those properties for something specific when they happen to be different than what is already defined by your body tag.
Here's a simple rework of your code. Mind you I would get rid of the table.
CSS:
body { font-family:verdana, arial, helvetica, sans-serif; font-size:12px; font-weight:normal; color:#000; background-color:#999; margin:0 auto; padding:0px; }
td, p { background-color:#CCC; margin:0px; padding:0px; }
td { text-align:left; }
table { background-color:transparent; margin:0px; padding:0px; text-align:center; }
.bodyTop { background-image:url(grad_bodyTop.jpg); background-repeat: repeat-x; }
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-epuiv="content-type" content="text/html; charset=windows-1252">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="intsearch" content="">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />
</head>
<body>
<div>
<table height="600px" width="770px" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="20%" rowspan="2"></td>
<td width="80%" height="15%"></td>
</tr>
<tr>
<td width="80%" valign="top" class="bodyTop">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" alt="foo" width="100px" height="400px" border="0">
</td>
</tr>
</table>
</div>
</body>
</html>Thanks to both of you.
Spufi, when you say get rid of the table, do you suggest using <div>s in its place?Well, yeah I would, but the problem right now is that I can't show you code that you would use to replace the table. I think how it would be done is by having one <div> wihch contains the three <div> tags inside of it and then you use relative positioning to move things around to make them go where you need them. You might use float in there too. Again, I just started to play around with it, but I got nothing official out of it yet.
Here's the newest problem. I'm using styles to color the <body> and <td> backgrounds and Mozilla won't take it. Any suggestions would be much appriciated. Here's the code:
CSS:
BODY {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:999999;
margin:0px;
padding:0px;
}
TD, P {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:CCCCCC;
margin:0px;
padding:0px;
}
TABLE {
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:transparent;
margin:0px;
padding:0px;
}
.bodyTop {
background-image:url(grad_bodyTop.jpg);
background-repeat : repeat-x;
}
HTML:
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-epuiv="content-type" content="text/html; charset=windows-1252" />
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="intsearch" content="">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />
</head>
<body>
<div align="center">
<table height="600" width="770" border="0" cellspacing="4" cellpadding="4" align="center">
<tr>
<td width="20%" rowspan="2" align="left">
</td>
<td width="80%" height="15%" align="left">
</td>
</tr>
<tr>
<td width="80%" valign="top" class="bodyTop" align="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" alt="foo" width="100" height="400" border="0" />
</td>
</tr>
</table>
</body>
</html>Originally posted by bukwus
Is the original Netscape browser better when using CSS than Mozilla?Surely, you jest. NS 4.x barely supports CSS.
I keep having problems getting my styles to show up in Mozilla, but IE is taking them fine. What have I done wrong!?Many will say that starting with IE is what you have done wrong. IE allows what you might call sloppy coding, and Mozilla strictly adheres to W3C recommendations.
background-color:999999;You forgot the "#".
The W3C has a CSS validator. That is what you ought to use to determine the correctness of your code.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS1In">http://www.w3.org/TR/CSS1In</a><!-- m --> addition to what Gil pointed out. You look like you are using HTML and XHTML when you should use one, or the other. I don't see why you need to define the font-family, font-size, font-weight, and color all the same for what you did when you could just define all of those for the body tag and then code those properties for something specific when they happen to be different than what is already defined by your body tag.
Here's a simple rework of your code. Mind you I would get rid of the table.
CSS:
body { font-family:verdana, arial, helvetica, sans-serif; font-size:12px; font-weight:normal; color:#000; background-color:#999; margin:0 auto; padding:0px; }
td, p { background-color:#CCC; margin:0px; padding:0px; }
td { text-align:left; }
table { background-color:transparent; margin:0px; padding:0px; text-align:center; }
.bodyTop { background-image:url(grad_bodyTop.jpg); background-repeat: repeat-x; }
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-epuiv="content-type" content="text/html; charset=windows-1252">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="intsearch" content="">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />
</head>
<body>
<div>
<table height="600px" width="770px" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="20%" rowspan="2"></td>
<td width="80%" height="15%"></td>
</tr>
<tr>
<td width="80%" valign="top" class="bodyTop">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" alt="foo" width="100px" height="400px" border="0">
</td>
</tr>
</table>
</div>
</body>
</html>Thanks to both of you.
Spufi, when you say get rid of the table, do you suggest using <div>s in its place?Well, yeah I would, but the problem right now is that I can't show you code that you would use to replace the table. I think how it would be done is by having one <div> wihch contains the three <div> tags inside of it and then you use relative positioning to move things around to make them go where you need them. You might use float in there too. Again, I just started to play around with it, but I got nothing official out of it yet.