2 replies [Last post]
_Lion
Offline
newbie
Last seen: 17 years 28 weeks ago
Joined: 2004-11-13
Posts: 1
Points: 0

Hai!

I use a (very simple) CSS on site. I'm currently in the process of testing the site with Firefox and I noticed that it looks slightly different in Firefox in comparison to IE.

Take a look at this:

Firefox:


Internet Explorer:


As you can see, Firefox displays the line in grey, as it is supposed to be in green. Firefox also uses a different font for the text "Quote of the day". The quote itself is displayed in black.

My CSS looks like this:

 
body { 
background : #000000;  
}  
.line { 
background-color : #008000;  
color : #008000;  
border : medium none inherit;  
height : 2px;  
}  
.header { 
background : #008000;  
color : #ffff00;  
font-family : Arial;  
font-weight : bold;  
font-size : 12px;  
}  
.inside { 
background : #009933;  
color : #ffffff;  
font-family : Arial;  
font-size : 12px;  
text-align : left;  
}  
.tussen { 
background : #000000;  
color : #000000;  
}  
.wntitle { 
color : #ffff00;  
font-family : Arial;  
font-size : 20px;  
}  
.geel { 
color : #ffff00;  
font-family : Arial;  
}  
.geeli { 
color : #ffff00;  
font-family : Arial;  
font-style : italic;  
}  
.witb { 
color : #ffffff;  
font-weight : bold;  
font-family : Arial;  
}  
.wit { 
color : #ffffff;  
font-family : Arial;  
}  
.footer { 
background : #009933;  
color : #ffffff;  
font-family : Arial;  
font-size : 12px;  
}  
table1 { 
background : #7f7f7f; 
}  
A:link { 
text-decoration : none;  
color : #ffffff;  
font-family : Arial;  
font-size : 12px;  
}  
A:visited { 
text-decoration : none;  
color : #ffffff;  
font-family : Arial;  
font-size : 12px;  
}  
A:active { 
text-decoration : none;  
color : #ffffff;  
font-family : Arial;  
font-size : 12px;  
}  
A:hover { 
text-decoration : none;  
color : #ffffff;  
font-weight : bold;  
} 


Can someone please explain, why this difference occurs?

Greets,

Martijn

mdipi
Offline
newbie
NorConn
Last seen: 17 years 26 weeks ago
NorConn
Joined: 2004-11-26
Posts: 4
Points: 0

CSS problem in Mozzila Firefox

Hey Lion!

Im assuming that the line's style is the class "line." You might want to try your border being set up a different way, this is the way I usually do it and it usually will work fine for FireFox (I design for Mozilla/Geko based browsers only).

.line {
background-color : #008000; 
color : #008000; 
border : 2px solid #008000;  
}

The only real thing changing is that you dont need the height: paramater and I just added the thikness, type, and color all right there in the border tag. [/code]

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 17 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: CSS problem in Mozzila Firefox

As mdipi hinted at, we could do with the HTML to see which classes go where...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.