49 users online (0 members and 49 guests)  

Thread: CSS conflict?


  Results 1 to 5 of 5

Related

  1. Replies: 1
  2. conflict scrolling taxt    Forum: Javascript Forum
    Replies: 2
  3. conflict scrolling taxt    Forum: HTML Forum
    Replies: 0
  1. #1
    Dagmar's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Posts
    3

    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">&nbsp;</div>

    <h1>&nbsp;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>&nbsp;</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

  2. #2
    blanchrt's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    3

    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

  3. #3
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    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 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

  4. #4
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    Re: CSS conflict?

    Sorry, "ex" is a measure, my mistake

  5. #5
    grassmeyerdesign's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    8

    Re: CSS conflict?

    Maybe you could try display:block;

    That might work . . .

    Jen



Tags for this Thread