Firefox problem

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox problem

wakinglion

1:30 pm on May 4, 2005 (gmt 0)

Hello,

This is my very first post on here and I'm hoping that this is a simple question.

Although I've been designing sites for over five years now, I'm very new to Mozilla Firefox and one of the sites that I designed, which my client is very happy with looks awful in FF.

The text displays as Times Roman (default?) and the text links which should change colour on mouseover flash on and off.

I need to fix this but I can't find out what to do.

Can anybody point me in the right direction please? I suspect that I need a style sheet that is compatible with both browsers.

Many thanks, in advance.

Steve

MatthewHSE

2:51 pm on May 4, 2005 (gmt 0)

CSS problems could very well be the issue here. FireFox will display things according to standards, while IE will guess at what you intend and will normally be right. Coding "for" FireFox then tweaking in IE will normally be faster than the reverse, and has the added advantage of helping you learn to write valid code that is far more likely to work reliably cross-browser.

In order to help with your specific problems, why don't you post the relevant CSS and HTML for the page in question? Then we'll be able to help spot any problems or compatibility issues.

wakinglion

3:40 pm on May 4, 2005 (gmt 0)

Thanks a lot for replying Matthew. The site is <SNIP> and here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>...</title>
...
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="1" content="...">
<meta name="2" content="...">
<STYLE type="text/css">

</style>

</head>
<body bgcolor="#FFFFFF">

... Content ...

</body>
</html>

[edited by: BlobFisk at 5:40 pm (utc) on May 4, 2005]
[edit reason] Removed URLs and stripped out code [/edit]

SeK612

4:38 pm on May 4, 2005 (gmt 0)

I've scanned the code and whilst I'm not expert the following stands out under you css link code "text-decoration: blink;" which causes a flashing effect in some non-IE browsers.

Stormfx

5:38 pm on May 4, 2005 (gmt 0)

As SeK612 said, the text-decoration: blink doesn't work in all browsers. If you're just want it to change colors on mouseover, set the :hover color to a different color.

As far as the font goes, I've noticed you have some custom classes and each class specifies the same font:

font-family: Verdana, Arial, Helvetica, sans-serif;

But the body tag has no font specified. You should always specify the base font settings in the body tags. If you're using tables, you'll have to specify the font settings for tds as well, because some browsers won't properly allow table tags to inherit from the body tag.

Below I've tweaked your CSS to be more effecient. I've also reorganized the font settings the way the should be and eliminated a few typos.

body, td, th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
scrollbar-base-color: #0099FF;
scrollbar-track-color: #A4A4A4;
scrollbar-face-color: #01588D;
scrollbar-highlight-color: #0099FF;
scrollbar-3dlight-color: #0099FF;
scrollbar-darkshadow-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-arrow-color: #FFFFFF;
margin: 0px;
}
.style1 {}
.style2 {
font-size: larger;
font-weight: bold;
}
.style4 {
font-size: smaller;
font-weight: bold;
}
.class5 :link {
color: #CCCCCC;
font-size: 14px;
font-weight: bold;
}
.class5 :visited {
color: #CCCCCC;
font-size: 14px;
font-weight: bold;
}
.class5 :active{
color: #0099FF;
font-size: 14px;
font-weight: bold;
}
.class5 :hover{
color: #A4A4A4;
font-size: 14px;
font-weight: bold;
}
.class6 :link {color: #666666;}
.class6 :visited {color: #666666;}
.class6 :active {color: #00CCFF;}
.class6 :hover {color: #CCCCCC;}
}
.class7 :link {
color: #CCCCCC;
font-size: 12px;
font-weight: bold;
}
.class7 :visited {
color: #CCCCCC;
font-size: 12px;
font-weight: bold;
}
.class7 :active{
color: #0099FF;
font-size: 12px;
font-weight: bold;
}
.class7 :hover{
color: #A4A4A4;
font-size: 12px;
font-weight: bold;
}
-->

There's a bit more that could be done, such as specifying a base font size for the body, td, th element. I also took out the blink effect in the assumption that you justed wanted the links to change color on mouseover. Hope that helps.

wakinglion

7:35 pm on May 4, 2005 (gmt 0)

It's a marvellous help and thanks a lot. I've learnt a lot today.

However, the coloured scrollbar does not work in Firefox and I'm not sure why?

My trouble is that I got into CSS too late. Standard font wrapping HTML was working fine for me and so I didn't change.

Stormfx

8:37 pm on May 4, 2005 (gmt 0)

Scrollbar color is only supported by MSIE. It's one of those so-called 'features' that MS implemented that has no point. Excuse the rant, but instead of supporting that 'feature', they should've worked on its box model support. The scrollbar is part of the software used to render the page and should in theory, or at least my personal opinion, retain the look of the software.

wakinglion

5:09 am on May 5, 2005 (gmt 0)

I agree with you but if that's the way it is, then we have to just get on with it...

Firefox problem

wakinglion

MatthewHSE

wakinglion

SeK612

Stormfx

wakinglion

Stormfx

wakinglion

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week