61 users online (1 members and 60 guests)  

Thread: stumped CSS


  Results 1 to 4 of 4

Related

  1. Replies: 3
  1. #1
    geebee's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Posts
    2

    stumped CSS

    thanks for checking this out. i'm a newbie here, thought i'd give posting here a shot.

    i'm having a problem with css rendering text slightly different in different browsers. in Firefox, the text is sitting one pixel lower than in Safari (IE and Firefox on a pc are also rendering this text differently). and, the background hover is slightly off too. what i'd like to happen is to have the hover backgroung color match the height of the colored bar, and the text to sit in the same place. what am i doing wrong here?

    here's where you can view what i'm talking about:

    http://www.filmschoolmusic.com/test/1.html

    here's the page code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Demo</title>
    <LINK REL=StyleSheet HREF="css2/style.css" TYPE="text/css" MEDIA=screen>

    <span id="a">
    <span class="democontainer"><a class="demonav" href="../www/intro.html">Intro</a> . <span class="demonavon">01</span> . <a class="demonav" href="../www/2.html">02</a> . <a class="demonav" href="../www/3.html">03</a> . <a class="demonav" href="../www/4.html">04</a> . <a class="demonav" href="../www/5.html">05</a> . <a class="demonav" href="../www/6.html">06</a> . <a class="demonav" href="../www/7.html">07</a> . <a class="demonav" href="../www/8.html">08</a> . <a class="demonav" href="../www/9.html">09</a> . <a class="demonav" href="../www/10.html">10</a> . <a class="demonav" href="../www/11.html">11</a> . <a class="demonav" href="../www/12.html">12</a> . <a class="demonav" href="../www/13.html">13</a> . <a class="demonav" href="../www/14.html">14</a> . <a class="demonav" href="../www/15.html">15</a> . <a class="demonav" href="../www/16.html">16</a> . <a class="demonav" href="../www/17.html">17</a> . <a class="demonav" href="../www/18.html">18</a> . <a class="demonav" href="../www/19.html">19</a> . <a class="demonav" href="../www/20.html">20</a> . <a class="demonav" href="../www/21.html">21</a> . <a class="demonav" href="../www/22.html">22</a> . <a class="demonav" href="../www/23.html">23</a> . <a class="demonav" href="../www/24.html">24</a> . <a class="demonav" href="../www/25.html">25</a> <a class="demonav" href="../www/intro.html">Back</a> | <a class="demonav" href="../www/2.html"> Next</a></span></span></span>

    </body>
    </html>

    and here's the css:

    #A {
    font-family: Helvetica, arial, sans-serif;
    background-color: #999999;
    color: #ffffff;
    padding: 0px;
    margin:0;
    position: absolute;
    left: 40px;
    top: 87px;
    width: 719px;
    height: 20px;
    z-index:0;
    margin:0;
    line-height:22px;
    font-size:11px;
    }


    .democontainer {
    padding-left: 6px;
    }


    a.demonav, a.demonav:link, a.demo:visited, a.demo:focus {
    font-family: Helvetica, arial, sans-serif;
    font-size: 11px;
    color:#FFFFFF;
    text-decoration: none;
    margin: 0px;

    }

    a.demonav:hover {
    font-family: Helvetica, arial, sans-serif;
    background-color: #00ACC2;
    text-decoration: none;
    z-index:10;
    color:#FFFFFF;
    padding-top: 4px;
    padding-bottom: 4px;
    }

    .demonavon {
    font-family: Helvetica, arial, sans-serif;
    background-color: #00ACC2;
    color:#FFFFFF;
    padding-top: 4px;
    padding-bottom: 4px;
    margin:0;
    }


    thanks in advance for your suggestions.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: stumped


    Hi there geebee,

    and a warm welcome to these forums.

    I cannot test in Safari but this works OK in
    • IE 6.02
    • Firefox 1.5.0.4
    • Opera 9.00

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css" media="screen">
    body {
        margin:0;
        padding:0;
     }
    #adiv {
        font-family:helvetica,verdana,arial,sans-serif;
        font-size:11px;
        color:#fff;
        background-color:#999;
        width:769px;
        padding-left:6px;
        margin:87px 0 0 40px;
     }
    a.demonav, a.demonav:link, a.demo:visited, a.demo:focus {
        float:left;
        color:#fff;
        text-decoration:none;
        background-color:#999;
        padding:4px 0;
     }
    .demonavon,a.demonav:hover {
        float:left;
        color:#fff;
        background-color:#00acc2;
        padding:4px 0;
     }
    .dot {
        float:left;
        padding:4px 0;
        margin:0 3px;
     }
    #clear {
        clear:both;
     }
    </style>
    
    </head>
    <body>
    
    <div id="adiv">
    
    <a class="demonav" href="../www/intro.html">Intro</a><span class="dot">.</span> 
    <span class="demonavon">01</span><span class="dot">.</span>
    <a class="demonav" href="../www/2.html">02</a><span class="dot">.</span> 
    <a class="demonav" href="../www/3.html">03</a><span class="dot">.</span> 
    <a class="demonav" href="../www/4.html">04</a><span class="dot">.</span> 
    <a class="demonav" href="../www/5.html">05</a><span class="dot">.</span> 
    <a class="demonav" href="../www/6.html">06</a><span class="dot">.</span> 
    <a class="demonav" href="../www/7.html">07</a><span class="dot">.</span> 
    <a class="demonav" href="../www/8.html">08</a><span class="dot">.</span> 
    <a class="demonav" href="../www/9.html">09</a><span class="dot">.</span> 
    <a class="demonav" href="../www/10.html">10</a><span class="dot">.</span> 
    <a class="demonav" href="../www/11.html">11</a><span class="dot">.</span> 
    <a class="demonav" href="../www/12.html">12</a><span class="dot">.</span> 
    <a class="demonav" href="../www/13.html">13</a><span class="dot">.</span> 
    <a class="demonav" href="../www/14.html">14</a><span class="dot">.</span> 
    <a class="demonav" href="../www/15.html">15</a><span class="dot">.</span> 
    <a class="demonav" href="../www/16.html">16</a><span class="dot">.</span> 
    <a class="demonav" href="../www/17.html">17</a><span class="dot">.</span> 
    <a class="demonav" href="../www/18.html">18</a><span class="dot">.</span> 
    <a class="demonav" href="../www/19.html">19</a><span class="dot">.</span> 
    <a class="demonav" href="../www/20.html">20</a><span class="dot">.</span> 
    <a class="demonav" href="../www/21.html">21</a><span class="dot">.</span> 
    <a class="demonav" href="../www/22.html">22</a><span class="dot">.</span> 
    <a class="demonav" href="../www/23.html">23</a><span class="dot">.</span> 
    <a class="demonav" href="../www/24.html">24</a><span class="dot">.</span> 
    <a class="demonav" href="../www/25.html">25</a><span class="dot">.</span> 
    <a class="demonav" href="../www/intro.html">Back</a><span class="dot">|</span> 
    <a class="demonav" href="../www/2.html">Next</a>
    
    <div id="clear"></div>
    
    </div>
    
    </body>
    </html>
    
    I hope that this helps.

  3. #3
    geebee's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Posts
    2

    Re: stumped

    coothead, nice, this is great. can you tell me where my error was in the coding? i noticed you called out some of the additional parameters in the padding and margin tags, namely the zeros. also you added floats. was it these elements?

    i'm noticing that firefox on the mac is still displaying the bar and text two pixels shorter than on safari, but the background hover and "on" positions are working nicely, which was the main concern i had.

    big thanks.

  4. #4
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: stumped

    Quote Originally Posted by geebee
    what am i doing wrong here?
    All you are doing wrong is to assume that different browsers render the same CSS in the same way!
    LL



Tags for this Thread