I Need CSS Help!!! [Archive] - Web Hosting Talk

joncotes

07-18-2005, 09:04 PM

I want to put a link inside a table cell, and have it act like a rollover image. I just want text inside a cell, like HOME. When you hover your mouse over the cell (not necessarily the text) the entire background color changes colors just like a rollover image would. The CSS I have works perfectly in Firefox, but in MSIE only the top cell works, and the others below it do not work.

Here's My Current CSS:

.celly {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
padding-left: 9px;
padding-right: 12px;
cursor: hand;
padding-top: 3px;
padding-bottom: 3px;
border-top-color: #306F8F;
border-top-width: 1px;
border-top-style: solid;
border-right-color: #306F8F;
border-right-width: 1px;
border-right-style: solid;
border-left-color: #306F8F;
border-left-width: 1px;
border-left-style: solid;
border-bottom-color: #306F8F;
border-bottom-width: 1px;
border-bottom-style: solid;
display: block;
}

a.celly {
color: #000000;
text-decoration: none;
background-color: #78B4D3;
font-weight: normal;
}

a.celly:hover {
color: #000000;
text-decoration: none;
background-color: #80BFDF;
}

View the page at: quelah102.com

the_pm

07-18-2005, 10:09 PM

First, let's start with a little CSS cleanup. Try this code out instead. Cleaner, lighter, and we might have ditched a syntax error, though I haven't found one yet...

.celly {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
padding: 3px 12px 3px 9px;
cursor: hand;
border:1px solid #306F8F;
display: block;
}

a.celly {
color: #000;
text-decoration: none;
background: #78B4D3;
font-weight: normal;
}

a.celly:hover {
color: #000;
text-decoration: none;
background: #80BFDF;
}

The next step would be to attribute the .celly class to the entire table (or remove the table entirely) and make a/a:hover decendent selectors.

Edit: It seems the display:block declaration is the part not being attributed to all four links in IE. Everything else is functioning fine. That 's very odd, and I'm looking into it now.

the_pm

07-18-2005, 10:25 PM

Presto :)

Copy/paste this into your browser, and you'll see how it works. You can port it right into your current markup and get rid of that nasty table all together. Let me know if you're interested in getting rid of the others too ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.celly, .celly li {
list-style: none;
margin: 0;
padding: 0;
width: 150px;
}

.celly a {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
margin-bottom: 5px;
padding: 3px 12px 3px 9px;
border:1px solid #306F8F;
display: block;
color: #000;
text-decoration: none;
background: #78B4D3;
font-weight: normal;
}

.celly a:hover {
color: #000;
text-decoration: none;
background: #80BFDF;
}
</style>
</head>

<body>
<ul class="celly">
<li><a href="index.html" class="celly">Home</a></li>
<li><a href="photos.html" class="celly">Photos</a></li>
<li><a href="calendar.html" class="celly">Calendar</a></li>
<li><a href="contact.html" class="celly">Contact</a></li>
</ul>

</body>
</html>

GnomeyNewt

07-18-2005, 11:23 PM

Good job :c).. If you popped it into a div you wouldnt have to use class on each <a> or the <ul>.

the_pm

07-18-2005, 11:28 PM

Something would still need to carry the class. It doesn't really matter if it's a <div> containing the navigation or the <ul> itself, but why not take advantage of the fact that the <ul> is a block-level container just like the generic <div> and give yourself one less set of tags to worry about ;) ?

GnomeyNewt

07-19-2005, 12:09 AM

I've done excatly what you did without actually using any classes in my <ul> or <li> or <a>. Or you could do just and ID on the <ul>. I learned it on that list page... they have some good examples of navigation with <ul>'s.

the_pm

07-19-2005, 12:13 AM

Yes, if the area is unique, it is preferable to use an ID anyway. Order of specificity and all that. You can go about doing practically anything in CSS without attaching classes and even IDs onto objects, but it's not a very good idea, since the whole point is really to identify and/or classify objects with proper identifiers/classifiers and adjust them from there. This is good coding practice, and it saves you from worrying about two object style conflicting with each other down the road.

If you're a follower of the Semantic Web project, they talk about codifying common site elements with language exactly to this effect. It's one of the next big things coming down the road for developers to consider. The jury's out on it as far as I'm concerned...

joncotes

07-19-2005, 04:37 PM

Now it doesn't work in firefox... the cells (they look like cells, but are really just an ul stretched with a bg) stretch behind some of my content now. Everything works fine in IE, but not in firefox anymore.

.celly, .celly li {
list-style: none;
margin: 0;
padding: 0;
width: 150px;
}

.celly a {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
margin-bottom: 5px;
padding: 3px 12px 3px 9px;
border:1px solid #306F8F;
display: block;
color: #000;
text-decoration: none;
background: #90A0B9;
font-weight: normal;
}

.celly a:hover {
color: #000;
text-decoration: none;
background: #A0B2CF;
}

I need the width to be 150px. In IE, it is exactly 150, but in firefox, the thing stretches behind the content a little bit.

Check: quelah102.com/test2

joncotes

07-19-2005, 04:43 PM

ooo... I fixed it. The issue was in the padding. Firefox was adding the 12px and the 9px to the 150px, IE was not.

I fixed it by removing left and right padding and then adding two non-breaking spaces before the text in the links. That fixed the problem.

Does anybody know how to fix the padding issue in the CSS, without adding the non-breaking spaces???

the_pm

07-19-2005, 04:56 PM

Firefox is handling this properly. IE does not ("broken box model" - Google it sometime, you'll get an eyeful on how bad IE can be).

Without digging into your code, it sounds like you could set an explicit width for the ul, then add margins to the li. That will do the trick, I believe.