/    Sign up×
Community /Pin to ProfileBookmark

Having trouble with CSS and Mozilla

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=”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=”#” alt=”foo” width=”100″ height=”400″ border=”0″ />

</td>

</tr>
</table>

</body>
</html>

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisOct 29.2003 — [i]Originally posted by bukwus [/i]

[B]Is the original Netscape browser better when using CSS than Mozilla?[/b][/quote]
Surely, you jest. NS 4.x barely supports CSS.
[B]I keep having problems getting my styles to show up in Mozilla, but IE is taking them fine. What have I done wrong!?[/b][/quote]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.
[B]background-color:999999;[/b][/quote]You forgot the "#".

The W3C has a CSS validator. That is what you ought to use to determine the correctness of your code.

http://www.w3.org/TR/CSS1
Copy linkTweet thisAlerts:
@spufiOct 29.2003 — In 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="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="#" alt="foo" width="100px" height="400px" border="0">

</td>

</tr>

</table>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@bukwusauthorOct 29.2003 — Thanks to both of you.

Spufi, when you say get rid of the table, do you suggest using <div>s in its place?
Copy linkTweet thisAlerts:
@spufiOct 30.2003 — 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.
×

Success!

Help @bukwus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...