Thread: CSS conflict?
Results 1 to 5 of 5
Related
-
Replies: 1
-
conflict scrolling taxt Forum: Javascript Forum
Replies: 2 -
conflict scrolling taxt Forum: HTML Forum
Replies: 0
-
01-16-2004, 10:36 AM #1
CSS conflict?
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">
<!--
h1 {
font-family: arial, helvetica, sans-serif;
font-size: 30px;
color: #ffffff;
background-color: #3333cc;
margin-top: 15px;
margin-bottom: 0ex;
padding-top: 2px;
padding-bottom: 3px;
}
h2 {
font-family: arial, helvetica, sans-serif;
padding: 0;
font-size: 20px;
color: #3333cc;
text-align: left;
margin-top: 0ex;
margin-bottom: 0ex;
padding-top: 0ex;
padding-bottom: 0ex;
}
hr {
border: 0;
width: 100%;
height: 5px;
margin-top: 0ex;
margin-bottom: 0ex;
padding-top: 0ex;
padding-bottom: 0ex;
}
.red {
color: #cc0033;
background-color: #cc0033;
}
.blue {
color: #3333cc;
background-color: #3333cc;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li.inline {
font-family: arial, helvetica, sans-serif;
display: inline;
padding-left: 3px;
padding-right: 7px;
border-right: 1px dotted #3333cc;
}
li.last {
font-family: arial, helvetica, sans-serif;
display: inline;
padding-left: 3px;
padding-right: 3px;
border-right: 0px;
}
-->
</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
-
12-21-2007, 11:39 PM #2
Re: CSS conflict?
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
-
01-03-2008, 01:11 AM #3
Re: CSS conflict?
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 thisCode:<STYLE type="text/css"><!-- *CSS*-->
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 attributeCode:padding-top: 0ex; padding-bottom: 0ex;
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 isHTML 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>
Code:<body bgcolor="#ffffff" text="#000000" link="#3333cc" vlink="#800080" alink="#ff0000">
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
-
01-03-2008, 06:18 PM #4
Re: CSS conflict?
Sorry, "ex" is a measure, my mistake
-
01-08-2008, 02:22 PM #5
Re: CSS conflict?
Maybe you could try display:block;
That might work . . .
Jen
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum