Thread

Hi,

Recently I bought the forum module which I almost customized to my own needs. But there is one curious problem: I don´t know why but I don´t see the solution:

All my links appear on “hover” and “visited” white. But I set all links in my CSS to #0099CC. I can´t find the entry that occurs the “white”-links.

May you have a look at my file? Perhaps I stared to long on the file that I don´t see the forest for the trees 😉

Thanks a lot…

Have you tried using Firebug with Firefox? You can select the offending element on screen, then choose ‘inspect element’, and then you can see which CSS rules are affecting that element.

I couldn’t do this job without Firebug, and it would make this task a breeze.

Here’s a screenshot of me inspecting my signature link!

No I didn´t try Firebug because usually I use Safari. But I can give it a try…

I just thought I have a small bug in my CSS and someone finds it.

I would recommend it. If you have a link to the live version, I’ll happily have a look and let you know what’s causing the white links - but it’s a case of a 2 second check versus going through your stylesheet in full.

I would say that you are repeating an awful lot of stuff in your CSS. A lot of things are set to the same font, the same bordering, the same coloring. For example this:

.input {
 border-top:        2px solid #979AC2;
 border-left:       2px solid #979AC2;
 border-bottom:     1px solid #979AC2;
 border-right:      1px solid #979AC2;
 color:             #333;
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         11px;
 height:            1.5em;
 padding:           0;
 margin:            0;
} 
.textarea {
 border-top:        2px solid #979AC2;
 border-left:       2px solid #979AC2;
 border-bottom:     1px solid #979AC2;
 border-right:      1px solid #979AC2;
 color:             #333;
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         11px;
 padding:           0;
 margin:            0;
}
.select {
 background-color:  #fff;
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         11px;
 font-weight:       normal;
 letter-spacing:    .1em;
 color:             #333;
 margin-top:        2px;
 margin-bottom:     2px;
} 
.multiselect {
 border-top:        2px solid #979AC2;
 border-left:       2px solid #979AC2;
 border-bottom:     1px solid #979AC2;
 border-right:      1px solid #979AC2;
 background-color:  #fff;
 color:             #333;
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         11px;
 margin-top:        2px;
 margin-top:        2px;
}

Could be written as

.input,
.textarea,
.select {
 border:            2px solid #979AC2;
 color:             #333;
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         11px;
 height:            1.5em;
 padding:           0;
 margin:            0;
} 
.textarea {
    height:0;
}
.select,
.multiselect {
 margin-top:        2px;
}
.select{
 border:0;}

And you can probably get it down even further if you declare your fonts etc at the start and use a CSS reset.

Hi Andy,

Thanks for you reply. This “to much - code” is not mine. That´s the original code from the forum-module.

But your hint with Firebug was great. I didn´t know his tool but in the past view minutes I installed and tried it. I guess, this tool becomes my favorite. However I found the bug with Firebug:

#login a, a:visited, a:hover{
 text-decoration:   none;
 color: #fff;
 background-color:  transparent;
}

After removing this part - everything works fine.  I will include this code in another way and hope to avoid this bug again.

Thanks a lot for your fast and great help!!!

Yeah, I noticed the forum CSS was a bit beefy so I intend to strip it down to basics so it’s easy to reuse.

No worries anyway, Firebug is better than sliced bread for finding these things! I guess the rule you have above is meant to be something like this:

#login a, #login a:visited, #login a:hover{
text-decoration:   none;
color: #fff;
background-color:  transparent;
}

No I didn´t try Firebug because usually I use Safari. But I can give it a try…

I just thought I have a small bug in my CSS and someone finds it.

Hi Lindstrom,

Just as a point of interest that may help you out Safari (in the newer versions anyway) now has an Inspect This Element type panel which is exceptionally powerful. If you control click on the element on the page and wait for the contextual menu to appear then if you have it turned on (I think there’s a preference for it in the main prefs otherwise it will just be there on the latest versions of Safari) you will see something like Inspect This Element or words to that effect. On the newest version of Safari you can also bring up a fantastic Network Monitor window using Apple-Option & N which will tell you how long the page took to load, what files are being used, which took the longest time and you can also inspect the page html source from there as well. A pretty invaluable tool for Safari.

Whilst Firefox does have tons more features and extensions that you can install this panel really does make Safari great to use.

Hope that helps for the future a bit.

Best wishes,

Mark

@Andy: Yes, it is simply an write error for this item.

@Mark: Thanks for this hint - I will try it. On the other hand Firebug makes a great job…