SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    New York city
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yet another rollover question

    I have a series of 5 links in a table with five cells (toplinks) running horizontally across the page www.thevoiceworkshop.com . I am trying to get the whole cell to change background color with rollover but only the center part of the cell changes.
    This is the HTML

    <TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
    <A HREF="index.html">Home</A>
    </td>
    <TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
    <A HREF="Whats.html">What's New</A>
    </TD>
    <TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
    <A HREF="contact.html">Contact Us</A>
    </TD>
    <TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
    <A HREF="FAQ.html">FAQ</A>
    </TD>

    and here is the CSS

    A:link{
    color: #006666; text-decoration: none;
    }

    A:visited{
    color: #003333;
    text-decoration: none;
    }

    A:hover{
    color: yellow;
    text-decoration: none;
    background: #006666;

    }
    A:active{
    color: purple;
    text-decoration: none;
    }

    td.toplinks a{
    display: block;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .85em;
    padding: 0;
    }
    td.toplinks {
    background-color: #ff9966;
    font-size: .85em;
    border-top: 3px solid #006666;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try something like this.
    Code:
    td.toplinks a{
     display: block; 
     position:relative;
     font-weight: bold; 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size: .85em; 
     padding:5px;
    }
    Paul

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    New York city
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Try something like this.
    Code:
    td.toplinks a{
    display: block; 
    position:relative;
    font-weight: bold; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: .85em; 
    padding:5px;
    }
    Paul
    Why would position: relative; or padding:5px do it?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you try it?
    Did it work?

    I noticed that the cell wasn't rolling over unless you actually rolled over the text. Setting position:relative is a fix for IE that makes the whole cell react when you use display:block (setting width to 100% also works).

    Adding the padding just fills up the top and bottom of the anchor to match the cell. The padding changes color with the hover. There are other ways to do it but I hate fiddling with tables so I took the easy option

    Hope that helps.

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    New York city
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Did you try it? [img]images/smilies/wink.gif[/img]
    Did it work?[img]images/smilies/smile.gif[/img]

    I noticed that the cell wasn't rolling over unless you actually rolled over the text. Setting position:relative is a fix for IE that makes the whole cell react when you use display:block (setting width to 100% also works).

    Adding the padding just fills up the top and bottom of the anchor to match the cell. The padding changes color with the hover. There are other ways to do it but I hate fiddling with tables so I took the easy option[img]images/smilies/wink.gif[/img]

    Hope that helps.

    Paul
    Thanks for the info Paul,

    I won't be able to try this untill I get home from work and have acess to my Mac. I will let you know later tonight if this works.
    BTY I noticed that this problem also happens in NS7 as well. Will the same fix work there as well?

    Jerry
    Last edited by jerrynyc; Oct 2, 2003 at 07:35.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    BTY I noticed that this problem also happens in NS7
    Sorry I only looked quickly in IE. Yes the problem is still appearing in Mozilla as well. I'm just going out now but if you can't solve it post again and I'll take a proper look tonight.

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    New York city
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,


    Sorry I only looked quickly in IE. Yes the problem is still appearing in Mozilla as well. I'm just going out now but if you can't solve it post again and I'll take a proper look tonight.

    Paul
    thanks

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I really am going out in a minute

    Run your css through the validator there are a lot of missing semi colans and brackets that are messing moz up.

    http://jigsaw.w3.org/css-validator/validator-text.html

    Once that's sorted it should be easier to spot the problem.

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've run your css through the validator and fixed the errors.(too many to mention, mostly typing errors.)

    I've tweaked the code so the top nav displays ok, however the page may look different from before because you had conflicts with the previous errors.
    Anyway you should be able to sort it now. Your two css files are below so you will have to split them and put them in their respective files.
    Code:
    /* linked css file here */
    body, td.main, ul{
     font-size: 0.9em;
     font-family: Verdana,Arial,Helvetica,sans-serif; color:#006666;
     background-color:#ffe6cc;
    }
    H1, H2, H3, H4, H5, H6, ul, P{
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #006666;
    }
    H5.jean{
     margin-top: -2.5em;
     margin-bottom: 0.3em;
    }
    H3.theme {
     margin-top: 0.1em;
     margin-bottom: 0;
    }
    P{
     font-size : 0.9em;
     font-family: Verdana, Arial, Helvetica ,sans-serif;
     color: #006666;
    }
    A:link{
     color: #006666; 
     text-decoration: none;
    }
    A:visited{
     color: red;
     text-decoration: none;
    }
    A:hover{
     
     color: yellow;
     text-decoration: none;
     background: #006666;
    }
    A:active{
     color: purple; 
     text-decoration: none;
    }
    A.main:link{
     color: blue;
     text-decoration: none;
    }
    A.main:visited{
     color: red;
     text-decoration: none;
    }
    A.main:hover{
    display:inline;
     color: purple;
     text-decoration: none;
     background:none;
    }
    A.main:active{
     color: purple;
     text-decoration: none;
    }
    td.sidelinks a{
     display: block;
     border: 1.4px  solid black;
     border-color: #006666; 
     padding: 2px;
     margin-top: 0;
     padding: 0.6em;
     font-weight: bold; 
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 0.9em;
    }
    td.sidelinks {
     background-color: #ff9966; 
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 0.9em;
    }
    td.toplinks {
     background-color: #ff9966; 
     font-weight: bold;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     padding: 0px;
    }
    HR{
     width: 100%;
     height: 0.4em;
     color: #006666;
    }
    P.copyright{
     font-size : 0.7em;
     font-family: Verdana, Arial, Helvetica ,sans-serif;
     color: #006666;
    }
    /* imported file below */
    
    body, td.main, ul{ 
     font-size: 93%; 
     font-family: Verdana,Arial,Helvetica,sans-serif;
     color:#006666; 					  
     background-color:#ffe6cc; 
    } 
    H1, H2, H3, H4, H5, H6, ul, P{ 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     color: #006666; 
    } 
    table.banner { 
     margin-top: -.6em; 
     margin-bottom:-2.8em; 
    } 
    H5.jean{ 
     margin-top: 0; 
     margin-bottom:0; 
    } 
    H5.director{
     margin-top: 0.5em;
     margin-bottom: 0.3em;
    }
    H4.theme { 
     margin-top: 0; 
     margin-bottom: .3em; 
    }  
    table.toplinks{ 
     margin-top:0;
     margin-bottom: 0;
    }  
    P{ 
     font-family: Verdana, Arial, Helvetica ,sans-serif; 
     color: #006666; 
     font-size : .9em; 
    } 
    A:link{ 
     color: #006666; 
     text-decoration: none; 
    } 
    A:visited{ 
     color: #003333; 
     text-decoration: none; 
    } 
    A:hover{ 
      
      color: yellow; 
     text-decoration: none; 
     background: #006666; 
    } 
    A:active{ 
     color: purple; 
     text-decoration: none; 
    } 
    A.main:link{ 
     color: blue; 
     text-decoration: underline; 
    } 
    A.main:visited{ 
     color: #003333; 
     text-decoration: underline; 
    } 
    A.main:hover{ 
     display:inline; 
     color: purple; 
     text-decoration: none; 
     background:none; 
    } 
    A.main:active{ 
     color: purple; 
     text-decoration: underline; 
    } 
    td.sidelinks a{ 
    display: block;
     border: 1.4px  solid #006666; 
     border-color: #006666; 
     padding: 2px; 
     margin-top: 0; 
     padding: 0.6em; 
     font-weight: bold; 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
     font-size: .85em; 
    } 
    td.sidelinks { 
     background-color: #ff9966; 
     font-size: .85em; 
    } 
    td.toplinks a{
    display: block; 
    position:relative;
    height:100%;
    font-weight: bold; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    padding:0px;
    line-height:22px;
    } 
    td.toplinks { 
     background-color: #ff9966;
     border-top: 3px solid #006666;  
    } 
    td.main{ 
    background-color: #ffe6cc; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: .9em; 
    padding: 2.5em; 
    } 
    P.copyright{ 
     font-family: Verdana, Arial, Helvetica ,sans-serif; 
     color: #006666; 
     font-size : .8em; 
    }
    Hope that helps.

    Paul

  10. #10
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    New York city
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    First I just want to thank you for your very kind and generous help with my coding. I am a novice at this as this is my first attempt at creating a web page (for my wife business) and have had to learn html as well as css. Last night I tried your earlier suggestions and found that they worked but later discovered that the use of position: relative was unnecessary as increasing the padding alone seem to work. (at least in ie5). I took a look at my code in the validator and made some changes. There was some reduntancy when I was trying to get the same style sheet to also work in NS4x before I gave up and split them. I need to revisit the linked sheet and remove some of the unnecessary code that doesn't work for NS4x. I will look at your suggestions and try them out this weekend. Again I want to thank you for spending the time to assist me. I have found many generous people such as yourself in this forum as well as other forums and doubt that I would have be able to design a web site without them.

    Many Thanks
    Jerry

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Jerry,

    Glad to help

    I think you misinterpreted the position relative thing. What it does is that it makes the cell rollover when you are over any part of the cell and not just over the text link.

    The code I gave you fixes the problems you had with NS and IE6. If you make a mess of your original code then just copy it from the above post.

    In your NS style you had put in a table.chief with a negative margin. This doesn't need to be there as you had obviously put it in to counteract the errors that were in the code. Fixing the errors and taking table.chief style out altogether was all that NS needed.

    IE just needed tweaking a bit. Instead of using padding I increased the line height to compensate as NS was ok without it anyway. The position relative makes the whole cell active (width 100% in the anchor would probably achieve the same effect).

    Still best if you can work your way through it yourself and use my code if you get stuck .

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •