Forum-CSS problem…
Posted: 22 April 2008 02:27 AM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  43
Joined  02-19-2008

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 wink

Thanks a lot…

File Attachments
mycss.txt  (File Size: 32KB - Downloads: 47)
Profile
 
 
Posted: 22 April 2008 02:29 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  887
Joined  02-15-2008

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!

 Signature 

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile
 
 
Posted: 22 April 2008 02:32 AM   [ Ignore ]   [ # 2 ]  
Grad Student
Avatar
Rank
Total Posts:  43
Joined  02-19-2008

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.

Profile
 
 
Posted: 22 April 2008 02:37 AM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  887
Joined  02-15-2008

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.

 Signature 

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile
 
 
Posted: 22 April 2008 02:44 AM   [ Ignore ]   [ # 4 ]  
Grad Student
Avatar
Rank
Total Posts:  43
Joined  02-19-2008

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!!!

Profile
 
 
Posted: 22 April 2008 02:50 AM   [ Ignore ]   [ # 5 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  887
Joined  02-15-2008

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;
}

 Signature 

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile
 
 
Posted: 22 April 2008 02:59 AM   [ Ignore ]   [ # 6 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  6610
Joined  04-15-2006
Lindstrom - 22 April 2008 02:32 AM

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

 Signature 

Full List Of Plugins Here!! (16)
 
Retrieve Statuses
Maximum Posts Reached
Neat Link
Redirect
Fetch URI

Profile
 
 
Posted: 22 April 2008 03:36 AM   [ Ignore ]   [ # 7 ]  
Grad Student
Avatar
Rank
Total Posts:  43
Joined  02-19-2008

@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…

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 65087 Total Logged-in Users: 33
Total Topics: 82228 Total Anonymous Users: 17
Total Replies: 441927 Total Guests: 226
Total Posts: 524155    
Members ( View Memberlist )