[RESOLVED] CSS Issue Again :(

Ok, seems I forgetting the correct way to do this again.

I want to change the background color of a td cell upon the hover of it or the hover of the a tag.

Thanks

Code:

---

<tr style="WIDTH: 140px; HEIGHT: 12px">
    <td class="menu-s" style="BORDER-RIGHT: #b22222 1px solid; BORDER-LEFT: #b22222 1px solid; WIDTH: 140px; COLOR: #b22222; HEIGHT: 12px"
        vAlign="top" align="left" bgColor="#eeeeee" height="12"><a class="menu-s" href="#">Home</a>
    </td>
</tr>

---

Code:

---

.menu-s td:hover, td a:hover {
        text-decoration:        underline;
        color:        #ffffff;
        background-color: #b22222;
    }       
       
.menu-s A:link        {       
        text-decoration:        none;
        color:        #b22222;
        }       
               
.menu-s A:visited        {       
        text-decoration:        none;
        color:        #b22222;
        }       
               
.menu-s A:active        {       
        text-decoration:        none;
        color:        #ffffff;
        background-color: #b22222;
        }       
               
.menu-s A:hover        {       
        text-decoration:        underline;
        color:        #ffffff;
        background-color: #b22222;
        }

---

I'll simplify that a bit:

Code:

---

<tr class="menu-s">
    <td>
        <a href="#">Home</a>
    </td>
</tr>

---

Code:

---

.menu-s td {
    width : 140px;
}

.menu-s a {
    background : #FFF;
    color : #B22222;
    display : block;
    padding : 3px;
}

.menu-s a:hover {
    background : #B22222;
    color : #FFF;
}

---

That'll make the link conquer the entire cell (with display : block;) and the cell will resize according to the size of the link. Although we've set width to the cell, so the link conquers the max it can, in this case 140 pixels. Setting height depends a lot, 12px isn't all that much so the font is close to unreadable.

I also set some padding to prevent link from getting close to the borders of the cell. Although to make that look good you'll need to remove padding from the cell.

Cool, Thanks Merri :thumb:

Only one thing left. The hover only works over the link and not the entire cell.

Isnt there a TD :hover I can use?

Yes, but :hover in Internet Explorer only works on anchor tags, so that's all you can do.

Merri used display:block on the link to make it fit the entire cell, so everything within the cell needs to go within the link in order for the hover effect to work properly.

If it still does not work can you post your resultant code (with a screenie or something) ?

Here is my code PG and a "screenie". Is a "screenie" like a genie? :D

VB Code:

<tr class="menu-s" style="VERTICAL-ALIGN: top; WIDTH: 140px; HEIGHT: 12px">
    <td style="BORDER-RIGHT: #b22222 1px solid; FONT-SIZE: 12px; VERTICAL-ALIGN: top; BORDER-LEFT: #b22222 1px solid; 
    WIDTH: 140px; COLOR: #b22222; HEIGHT: 12px; ALIGN: left"
    vAlign="top" align="left" bgColor="#eeeeee" height="12"><A href="#">&nbsp;&nbsp;Home</A></td>
</tr>

VB Code:

.menu-s td {
    width : 140px;
    }
 
.menu-s A { 
    text-decoration: none;
    background : #eeeeee;
    color:  #b22222;
    display : block;
    padding-top : 2px;
    padding-left: 8px;
    padding-bottom : 2px;
}   
        
.menu-s A:visited   {   
    color:  #b22222;
    text-decoration: none;
}   
 
.menu-s A:hover {   
    color:  #ffffff;
    text-decoration: none;
    background-color: #b22222;
}
            
.menu-s A:active    {   
    color:  #ffffff;
    text-decoration: none;
    background-color: #b22222;
}

It depends how you take it :)

OK, first get rid of all that ugly presentational HTML stuff. All can be handled by your stylesheet, thus tidying up your markup a lot.

HTML Code:

---

<tr class="menu-s">
    <td><a href="#">Home</a></td>
</tr>

---

Now this should have the equal effect

Code:

---

.menu-s
{
  vertical-align: top;
}

.menu-s td
{
  border-left: 1px solid #b22222;
  border-right: 1px solid #b22222;
  font-size: 12px;
}

.menu-s td a
{
  display: block;
  width: 140px;
  height: 12px;
  padding-left: 2ex;  /* To replace your two &nbsp's. */
  color: #b22222;
  text-decoration: none;
}

.menu-s a:hover
{
  background: #b22222;
  color: white;
}

---

Remember to declare cellspacing=0 and cellpadding=0 on your table.

Although, for what you're doing I suggest strongly you do not use a table at all. It looks as though you are using tables for layout. I recommend you rid yourself of that nasty habit and use pure CSS instead ;) Tables tags should be reserved for tabular data only. Using them for layout does not make sense in any context except for in a screen-based style-capable browser.

What you can do, is make the menu a <div> element, the "Menu" text can be a paragraph <p> and the menu items a list (<ul> and <li>). That way the content is semantically descriptive and you can style it more easily using the CSS.

I know I know. I just havent learned DIVs yet and I hear they are better but I have a second TD to the right of the menu TD that is for displaying the meat of the page. If I take out the TD then the meat will shift to the left. :(

I write my inline css so after I am done I can shift it all over to the css file. Just seems easier tome to be able to group it after you can see where its all laid out. :)

I'll try the updated code right now. I didnt think you were awake yet. :D

Cool, got it working for the most part. I had to reduce the width: 140px;
in the a tag because it was extending the td by 2x so I made it width: 138px; and all is well except for the forecolor. Its now navy blue when not beong MO'd. I placed the color tag in the other class tags and still navy blue.

Did you apply it to a:visited as well? In IE if a link target is "#" it counts it as visited already.

Code:

---

.menu-s a:visited
{
  color: #b22222;
}

---

I had taken visited and active out because I thought it was a optimized version that was posted. Do I need active also? Its still out but its working correclty now :D

As for what I was saying about tables versus <div>'s,

The main reasons people use tables for layout are

1. historical. Before CSS, the only way to maximise screen usage by placing content vertically was to use tables. Now with CSS that reason is obsolete.
2. it is easy to visualise layout in the markup. But with this advantage comes a disadvantage - by integrating your layout into your markup you ruin any chance of redesigning the layout without changing the document structure.

Separation of presentation from content makes it very simple to redesign the site - simply trash your stylesheet and write a new one. No need to muck with the content structure. Also, it means your document must make semantic sense without any stylesheet - the CSS should be purely eye candy to be applied to a document that is already understandable.

For a two column design without using tables, the basic CSS is very simple. Use <div>'s for each column, apply widths to each (such as 30%/70%), float:left on the left column and float:right on the right. If you need any elements immediately below the columns apply clear:both to them so that the floating columns do not overlap it.

Now when implementing this there are some common pitfalls that you can run into which are due to the technicalities of the CSS box model sizing calculations. Innocent things like applying padding and borders can ruin your column layout because they increase the width of each column beyond your specified value.

Check out my simplified example for basic workarounds and a functional 2 column with footer CSS-only design.

Quote:

---

Originally Posted by RobDog

I had taken visited and active out because I thought it was a optimized version that was posted. Do I need active also?

---

Well, for Firefox and Opera at least, you do not as the a declaration applies also to :active, :hover, and :visited. IE I think requires them all specified individually.

On that note, if you're into the web development now, jokes and advocacy aside I do seriously recommend you do not develop initially in IE as it is rather strange. Of course test in it to get it looking right too but it simplifies your life a lot to do the initial work in a less quirky browser such as Opera or Fx as they are a bit more logical to deal with. But, I know you love IE so I am probably not swaying you on that one ;)

:D Point taken and I have already been getting someone to test its view in FF. My friend uses IE throughout so for now as this is a time sensitive project I will get the first section up and running asap and go back and rework it to DIVs when I have more time and learn more. Its basically getting a SSL Secure Login page that I need due tomorrow in about 12 hours. Yes, even helping him out on the weekend. :(

I will checkout your example seriously. I even have my MS ASP.NET book that I have been reading this week. So just so you guys know tha I am actually trying to learn this as its always been a pain for me. :)

Ps, Do you know asp.net?

Vaguely, I know PHP, the concept is the same just with a different approach :)

I am having an issue with retaining the login username to a session variable.

Check it out if you want since its so slooow around here. :)

http://www.vbforums.com/showthread.p...66#post2390166

You can have :hover on anything if you use an additional HTC-file and include it with IE-proprietary behavior property. Take a look at whatever:hover. It is a really helpful file :)


Btw, you can assign the same styles to different elements, ie.

Code:

---

.style a:active, .style a:link, .style:visited {
    styles : here;
}

---

Much simpler than to copy the same rows multiple times :)