CSS Cross Browser Compatibility

  Gaz W 23:10 23 Aug 05
Locked

Hi,

I've noticed that my website doesn't work properly in Firefox or IE! I have used a cascading style sheet, and the layout is vaguely OK in IE, but in Firefox it's totally wrong.

In IE, everything appears correctly except that the top orange bar has an extra bit of orange below it (the orange is a background image 1 pixel wide). I assume this is to do with IE's margins or something.

In Firefox, the top orange bit displays perfectly right, but the problem is the content part is wrong; the footer is at the top and the side navigation bar is just above the content.

My site is here: click here

Here's a direct link to the style sheet: click here

By the way I know it says .com on my site name, but I also have this domain and I'm eventually going to transfer the hosting over to that one and have .co.uk forward to .com.

Anyway I'd appreciate advice anyone of you could provide.

Thanks,

Gaz

  Taran 04:22 24 Aug 05

Your page code seems to ignore the CSS in some cases, or at least contains pointless HTML in several other areas, and it also has two closing and odd opening <body></body> tags so I'm not surprised that things break horribly in some browsers.

If you're running with an HTML table then it seems pointless including a <div></div> tag to put your footer content into.

Basic anatomy of an HTML web page is as follows:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Note that I've left out a DOCTYPE declaration for the sake of brevity.

Your base page code, less its content, is as follows:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0>

</BODY>

</BODY>

</HTML>

So, from that alone we can deduce that the content of your page has been instructed to begin at two separate places (see the opening <body> tags ?) and also to stop at two separate places where the closing </body> tags appear.

Now, to link your stylesheet to the page I'd suggest you are a bit more thorough:

<link href

="main.css" rel="stylesheet" type="text/css" media="screen">

This at least tells browsers what to expect and how to use it.

  Taran 04:23 24 Aug 05

If we ignore your JavaScript snippet for now, the next real issue is where the page code begins in earnest:

<BODY>

<DIV ID="top">

<BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0>

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=100% BGCOLOR="#FFB754" BACKGROUND="../images/top-background.gif">

Here you have an opening <body> tag, followed by an opening <div> container, which contains, of all things, another opening <body ...> tag full of formatting instructions, effectively doubling the opening <body> tag but separateing the two with a <div>.

Interestingly, your margins as detailed in the HTML are duplicated in the CSS file you are using, so their presence is entirely redundant.

To cut to the chase here I think you should do one of two things:

1. Ditch CSS and format your page(s) using plain vanilla HTML

2. Ditch plain vanilla HTML page formatting rules COMPLETELY and keep your layout instuctions in your style sheet, including all table/cell/header/footer/navigation block etc settings.

It seems pointless telling an HTML table and its cells to be this or that size with this or that border when you have some or all of that information in your stylesheet. Where some of the formatting information is missing from the stylesheet it could all go in. That's the point to CSS to begin with - to remove presentation rules from your page content.

Ideally you could strip your page down to four or five <div> tags between the <body> HTML tags.

I'd consider a Container <div> (for all page content), a Header, NavPanel, Content, and Footer.

I'd strongly suggest that you include a relevant DOCTYPE and I'd also suggest you consider going lower case for your HTML code - for future projects in XHTML this will be essential, so it is worth getting to grips with and sticking to now.

CSS is a wonderful tool but a complete nightmare unless you fully understand it and how it interacts with and is used by the host page. With the underlying page code having so many problems your CSS didn't really stand much of a chance here.

  Taran 04:27 24 Aug 05

I also should mention that strictly speaking you should quote your HTML values:

<BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0>
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=100%

Shoud be:

<BODY TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%"

Or, even better, it should be:

<body topmargin="0" leftmargin="0" rightmargin="0">
<table cellspacing="0" cellpadding="0" border="0" width="100%"

Note the quote marks wrapping the values. You'd be surprised at how easily this can trip up some browsers if you leave them out or mix and match quoted and unquoted values.

IN summary, stick with either CSS formatting or pure HTML and get rid of duplicated opening and closing page body values in your code.

You might also consider using CSS1, rather than mixing CSS1 and CSS2 specification. Browser support for CSS1 is pretty good across the board, but still not perfect by a long way. Similar support for CSS2 is pants by comparison, and most mainstream browser fall well short of the mark. I stick with CSS1 as much as humanly possible for that reason alone.

Web design can be difficult enough without making life harder than it needs to be.

T

  Taran 04:30 24 Aug 05

I had a lot of ground to cover and it wasn't so much the word limitations of the forum at work here, it was my heavy use of hard returns to split information onto new lines that necessitated so many fractions of one reply.

  Gaz W 11:51 24 Aug 05

Hi,

Thanks for the reply.

I can tell you why it's got several <BODY> tags... that's my mistake... the top section and side section are actually server side includes, and when I wrote the HTML documents I must have accidentally included <BODY> tags. This isn't something I would normally do. I'll try what you have suggested - I must admit normally I use the stylesheet tag like this:

<LINK REL="StyleSheet" HREF="[location]" TYPE="text/css">

But more recently I'd been leaving out the last bit. What does media="screen" mean?

One other thing, the quoting HTML tags I agree with - again it's just something I've left out, partly due to laziness and partly because I've not done much HTML for a while and forgot why I used them.

I think I can see why the CSS is going wrong now, since I've told it what to do with <BODY> and there are two or three areas in the code with this tag.

Anyway thanks again for your response, and I will keep you posted.

Gaz

  Taran 13:17 24 Aug 05

media="screen" means that the CSS being called is to be used to format the page when displayed on a screen - ie, your monitor.

media="print" is self expolanatory and should be used when formatting a page for print.

media="handheld" is another option, then there's TV, aural, all, projection, and so on.

A quick search online will reveal the media types and when (and how) to use them - click here for a starter guide.

  PurplePenny 21:05 24 Aug 05

Your CSS contains some values that don't exist. #footer for instance contains float: bottom; and clear: all;. The only values taken by float are left, right, none or inherit; the values taken by clear are left, right, both or none. That may be contributing to the footer positioning problem.

Run your CSS through the W3C's CSS validator, you'll find some others that I haven't mentioned.

  PurplePenny 21:07 24 Aug 05
  Gaz W 21:33 24 Aug 05

Hi PurplePenny,

Thanks for that link - I'll try it now. I created that style sheet well over a year ago now, but I do seem to remember float: bottom and clear: all seeming to make a difference at the time. I looked most of the stuff up I needed using Google searches for descriptions of my problem (not easy with CSS).

Anyway I'll try that now and let you know how I get on.

Thanks,

Gaz

  PurplePenny 21:45 24 Aug 05

clear all works in the html (with the br tag).

There is good CSS reference on W3Schools: click here

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

These are the Best Christmas Ads and Studio Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…