CSS issues in FireFox

[Stoemp]

Hi

I just installed Firefox on my computer and wondered of course how my website would look in this browser. The general lay-out showed fine, but some details don't show. I want to get rid of them...

http://www.biognost.be/research/

is the URL

- As you might see the top menu should have a grey background. This is done as following:

The lay-out is a table, so the code for the tr of the menu is:

<tr>
	<td width="780" height="22" class="tdLichtGrijs">
	&nbsp;
	</td>
</tr>

The CSS code for tdLichtGrijs is:

.tdLichtGrijs
{
    BACKGROUND-COLOR: #cccccc
}

- Another problem is the title (e.g. receive a free USB memory stick. I define the p with the class: pLinkVetGrootZwart. The css code for this class is:

.pLinkVetGrootZwart
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    COLOR: #000000;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}

This title shows in Firefox without any style.

- Also when I scroll down, the background is gone (the grey stripes to the left and right of the main table). Is this a browser issue?

Thanks a lot

Steven

 

[manarth]

[ul]
[li]Your web server isn't providing a character-encoding header, and neither is the page. Add a [highlight #cccccc]<meta http-equiv="Content-Type"[/highlight] tag to the head.[/li]
[li]Your page includes a HTML 4.01 Doctype, but the page doesn't conform to said doctype. Validate your page at

http://validator.w3.org/

[/li]
[li]The styling is done partially with css, and partially with HTML. You should move all styling to CSS.[/li]
[li]Your style declarations are in uppercase (FONT-SIZE); use all lower case. (Upper case is permitted in class names and IDs.)[/li]
[/ul]

Unfortunately, it's generally easier to develop in Moz/FireFox, and make IE specific changes afterwards.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[Stoemp]

Thanks manarth for the information. Unfortunately I don't have time at this point to re-style the site with full CSS. The site has grown from a non-css site to what it is now, and now I try to apply css where I do modifications.

I will try inserting the meta tag and also put all css style attributes in lowercase. I hope this will help me further.

Regards

Steven

 

[ChrisHunt]

Is this a browser issue?

No, it's a doing just what you told it to do issue.

You've got a Javascript that serves up a stylesheet called [tt]stylesIE.css[/tt] to IE users and [tt]stylesNN.css[/tt] to Netscape (which will include Firefox). Users who surf with Javascript switched off (there are more of them than you think) won't gat any stylesheet at all.

I didn't check the others, but the Netscape stylesheet has no definition for .pLinkVetGrootZwart - hardly surprising that it doesn't apply the styles!

If you really need a special stylesheet for IE/Netscape (frankly I doubt whether you really do) I suggest you produce a common one with simple stuff like colours and fonts that all browsers can cope with, and use your browser sniffer (server-side if possible) to serve up browser-specialised sheets with whatever stuff you're worried about.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Stoemp]

Chris

The style sheet chooser is indeed something I shouldn't do anymore. It's something I copied/pasted from previous projects, but I will get rid of this. I'll do my best to make one stylesheet for all browsers together.

Thanks a lot!

 

[Stoemp]

And what about the background that disappears? Does anyone see this or is this just on my pc? On the longer pages, the background is gone when you scroll and I get an extra horizontal scrollbar too when the page is longer than 1 window.

Thanks

Steven

 

[Vragabond]

I don't know about the scrollbar and can't check from here because I don't have Gecko-based browser installed. The background works correctly though. You have the background in a div that is 100% high. 100% is the browser window in this case, beyond that point the div ends. IE treats height differently, it assumes 100% as min-height. You can fix that by doing this in your css:

body {
  min-height: 100%; /* correct declaration for gecko-based browsers */
}

* html body {
  height: 100%; /* hack for IE browsers */
}

Hope it helps.

 

[Stoemp]

Thanks Vragabond, but that's not really my problem. The problem is that in Firefox, the background shows fine when he loads the page, but the area to scroll does not have a background. I put a screenshot online:

http://www.biognost.be/maps/firefoxBGIssue.jpg

 

[Vragabond]

Dear Stoemp, that is exactly your problem and what I have described in my above message. Gecko-based browsers (Netscape 6+, Mozilla, FireFox) interpret height attribute correctly and apply it to the element fixed. Your div has 100% height which means that it is as high as the browser window. Beyond this point, there is no div (add a border to the div and check the rendering in FireFox -- the div ends at the end of the screen). IE incorrectly applies height as min-height, meaning that div is 100% of the browser window high if there is no content or more than that if there is more content. My solution should solve that: Geckos will render it at least 100% or more, IE will ignore min-height as it does not support it and will take the height from the hack employed lower (other browsers will ignore that part).
<aside>
Have you even tried my solution if it works or not?
</aside>

 

[Stoemp]

Vragabond

I tried what you told me to do, but it doesn't work because the background is a table background. The body background works fine (the grey stripes). It's the blocks in the middle white table cell that doesn't show. I tried this min-height thing on the table cell, but without success.

 

[Vragabond]

Stoemp,

My solution works with nicely with my Mozilla and IE. I apologize, in hastiness of my reply I gave the height to the body and not to the appropriate div (which I mentioned throughout my text), so fully correct code (tested in Mozilla and IE) would be:

<div style="margin-left: auto; margin-right: auto; width: 780px; [b][COLOR=red]min-height: 100%;[/color][/b] border-right: solid 1px black; border-left: solid 1px black; background-image: url(../maps/back.gif);">

for the wrapper div right at the top of the page.

Incidentally, now I checked the scrollbar problem:
Your script generates a span called grid which is as wide as the browser window. Only it works wrong for Geckos (seemingly) and makes the span too wide. Easiest way to fight it is to give the width override in your html a setting:
var gridWIDTH = 980;
instead of 0 which is now. If this doesn't work you will have to tinker with the javascript of the menu.

 

[Stoemp]

Thanks for the info, but I'm afraid I can't use this. I'm not using divs to position my elements. I know it's a better way, but at the time I started designing the site I didn't know CSS and now I don't have time to adapt the whole site design. The div thing will be for when I re-design the site in 2 or 3 years... Do you know a solution for tables too? I tried the 100% trick but it didn't work for me...

Thanks for the help

Steven

 

[Vragabond]

I don't know if I am downloading the wrong code when checking your site then. I downloaded the source form your link you put up in the first message, found the mentioned div and changed it. If I should be looking at another code, let me know. Same goes for the scrollbar.

 

[UncleMortis]

Interesting to come across a bit of the problem described in this thread with the missing background colour. I checked my site

http://www.futuristicgames.com.au

with firefox yesterday and found that my background was missing. it wasn't the background colour to the whole web site not just an element. So instead of a blue background it was white, with yellow text,argh! However, one of my pages has an embedded css which asks it show a different background and it does with no problems. My h4 tags on the navigation side have the same type of css as the page background, and yet they show their background color correctly. I was shocked to see such a simple thing would go astray.

 

[Vragabond]

On the page you have:

body {
  background color: #000066;
  color: yellow;
}

Which is incorrect. Use background-color or simply shorthand property background if you have no other background properties.

body {
  background: #000066;
  color: yellow;
}