CSS conflict?

**Dagmar** · 01-16-2004, 10:36 AM

Hi! I'm creating a new site using CSS for formatting. Right now I have everything looking fine in IE and Opera, but Netscape 6.2.3 is having troubles with my code, specifically the background color of an h1. Instead of my header 1 being white text on blue, it simply renders as black text with no background.

Since this browser seems to be able to render this tag on other sites, there must be something wrong with my code. Can anyone help?

I access a seperate style sheet that looks like this:

<STYLE type="text/css">



</STYLE>

The page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link type="text/css" rel="stylesheet" href="style2.css">

<title>
Company Name
</title>
<meta name="GENERATOR" content="Arachnophilia 5.2">
<meta name="FORMATTER" content="Arachnophilia 5.2">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#ffffff" text="#000000" link="#3333cc" vlink="#800080" alink="#ff0000">

<div style="font-family: arial, helvetica, sans-serif; padding: 0; font-size: 12px; color: #ffffff; background-color: #cc0033; text-align: right; padding: 3px 3px 3px 3px">address<img src="wrtdbusred.gif"> </div>

<h1> Company Name</h1>

<ul id="nav">
<li class="inline"><a href="index.html">Home</a></li>
<li class="inline"><a href="fixed_routes.html">Fixed Routes</a></li>
<li class="inline"><a href="dial-a-ride.html">Dial-A-Ride</a></li>
<li class="inline"><a href="ADA.html">ADA Paratransit</a></li>
<li class="inline"><a href="JA.html">Jobs Access</a></li>
<li class="inline"><a href="calendar.html">Service Calendar</a></li>
<li class="last"><a href="about.html">About Us</a></li>
</ul>
<div id="content">
<P> </p>
<h2>General Info</h2>

<P>To be written.</P>

</div>

<hr class="red">
<hr class="blue">

</body>
</html>

Any ideas? I have been struggling with this for some time, and appreciate any input.

Thanks,
Dagmar

**blanchrt** · 12-21-2007, 11:39 PM

Hello, Dagmar,

I can see no problem in my Netscape 6.2.3: white "Company Name" over blue background.

Besides, both the HTML and the CSS seem to be correct and pretty clean.

Perhaps it would help if you uploaded the page and posted the URL.

CU

**futureproof** · 01-03-2008, 01:11 AM

Hello Dagmar, I'm new at CSS but am very particular about it; I have had some confounding but simple issues, so may I make some observations? Yes, you have some conflicts and ones that seem intuitively minor can be major issues.

I don't have Opera but my IE7 renders your page correctly. I'm assuming that your *CSS* in this

Code:

<STYLE type="text/css"><!-- *CSS*-->

is copied from your CSS file simply for display in the post (as I have inferred, but the CSS file needs no prolog as you may have implied).

Grouping:

you have stated font-family and margin-bottom: 0ex; for both h1{} and h2{} when you could do it for h1,h2{} More on "ex" in a moment...

text-align:left is redundant as it is default, unless it inherits from a previous block element, such as body {text-align: middle;}, which I can't imagine in a sensibly arranged style.

You have attributed padding: 0; in h2{} which is shorthand for top, right, bottom, left (plain "0" is good because 0px is the same as 0em!) but you also attribute

Code:

padding-top: 0ex;
padding-bottom: 0ex;

and "ex" is not a measure, I think you meant "px" rather than "ex" ... maybe that's what's playing-up in your browser. Anything "0" should be plain zero.

Measures:

if you're going to play with measures such as padding then maybe attribute it to the body or p 'all round' as 0 and change it for the line elements as a "percentage" or "em" rather than a fixed measure. I use "em" for my headings as I like 'more before' and 'less after', i.e. decent padding top and minimal bottom.

Similarly, attribute your font as "medium" in the body and then adjust for inline elements; personally I like body as medium and p as 110% then h1-h6 as 105%-170%; table elements are 90% and using CSS this way avoids "font size" in the HTML page. Readers can then size their page fonts without issue. Clever CSS is different but then again, I said I'm new at this.

Your pre-title also seems to be incomplete; there are several to choose from but a good vanilla solution is

HTML Code:

<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>title | Example.com</title>
<link rel="stylesheet" type="text/css" href="../css/example.css"/>
<base href="http://www.example.com/" target="_blank"/>
</head>
<body>

The CSS in the body should also really go into a CSS file, that is

Code:

<body bgcolor="#ffffff" text="#000000" link="#3333cc" vlink="#800080" alink="#ff0000">

so you can focus on content in the HTML and style/presentation in the CSS file - there can be LOTS of HTML pages, but, generally, only ONE CSS file

Anyway, I hope you get the idea as I've saved several Kb on my pages which is important to many of my friends and family who are still on dial-up

**futureproof** · 01-03-2008, 06:18 PM

Sorry, "ex" is a measure, my mistake

**grassmeyerdesign** · 01-08-2008, 02:22 PM

Maybe you could try display:block;

That might work . . .

Jen

Thread: CSS conflict?

Thread Tools

Related

Conflict, What is the right htaccess rule, default homepage file with htaccess? Forum: PHP Forum

conflict scrolling taxt Forum: Javascript Forum

conflict scrolling taxt Forum: HTML Forum

CSS conflict?

Re: CSS conflict?

Re: CSS conflict?

Re: CSS conflict?

Re: CSS conflict?

Tags for this Thread

Cloudjiffy- PaaS for Developers