954,176 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Standard CSS formating for all browsers

Hi,

I have developed an application a while ago and used CSS for the formatting of the generated web pages.

As I am using Google Chrome, everything was working fine and I have tested it few times on Firefox and noticed slight differences.

Yesterday, one of the users complained that the website is showing totally different from what was documented. The user was accessing it through IE6. I tested it again onChrom: Working perfect
Firefox 3.5.2: good with some issues with the size of some images
Firefox 3.5.7: as good as chrome
IE6: Totally different from what I have developed
IE8: Perfect apart from some color and sizes issues

Is there any standard CSS/HTML tag that instructs all browsers to function the same? On there hand, what would be a good work around for the issue?

Thanking you,

Aziz

almahmeed
Newbie Poster
11 posts since Dec 2009
Reputation Points: 10
Solved Threads: 0
 

What you might want to Google when it comes to IE6 and lower is to code css specifically for it. You'll need HTML conditional statements:

<!--[if IE]><style type="text/css">@import "css/IEstyle.css";</style><![endif]-->


That calls all IE browsers, all the code is located in a IEstyle.css external file.

<!--[if lte IE 6]><style type="text/css">@import "css/IElt.css";</style><![endif]-->


That one calls IE6 and lower in again an external file. Of course you can hop right to it and just put the CSS between the statements.

<!--[if lte IE 6]>
<style type="text/css">
body{
 background: black;
}
</style><![endif]-->


It might have been nice to show a link to the page, maybe you don't even need to implement conditionals.

Good luck.

CJesusSaves
Light Poster
49 posts since Jan 2010
Reputation Points: 16
Solved Threads: 5
 

What you might want to Google when it comes to IE6 and lower is to code css specifically for it. You'll need HTML conditional statements:

<!--[if IE]><style type="text/css">@import "css/IEstyle.css";</style><![endif]-->

That calls all IE browsers, all the code is located in a IEstyle.css external file.

<!--[if lte IE 6]><style type="text/css">@import "css/IElt.css";</style><![endif]-->

That one calls IE6 and lower in again an external file. Of course you can hop right to it and just put the CSS between the statements.

<!--[if lte IE 6]>
<style type="text/css">
body{
 background: black;
}
</style><![endif]-->

It might have been nice to show a link to the page, maybe you don't even need to implement conditionals.

Good luck.

Hi,

I will try it out.

Is there anyway to tell which tags would be affected so that I create a new external CSS for them?

for the link, I will try to upload a copy of the website for you on the public server as it is currently used internally.

Thanking you for your help.

Aziz

almahmeed
Newbie Poster
11 posts since Dec 2009
Reputation Points: 10
Solved Threads: 0
 

add a DOC type declaration.

vaultdweller123
Posting Pro
554 posts since Sep 2009
Reputation Points: 42
Solved Threads: 75
 
add a DOC type declaration.

Hi,

I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


added to the index.php.

Shall I add it to all documents?

Regards.

Aziz

almahmeed
Newbie Poster
11 posts since Dec 2009
Reputation Points: 10
Solved Threads: 0
 

yep. try reading in w3schools.com and you find out that they have to declare DOC type to solve browser issue.

vaultdweller123
Posting Pro
554 posts since Sep 2009
Reputation Points: 42
Solved Threads: 75
 

Also to make the page cross-browser, I would recommend to set to null margin and padding to all elements.

* {
  margin: 0;
  padding: 0;
}


The issue is that different browsers set up different margin and padding to HTML elements.

amd_k8
Light Poster
49 posts since Jan 2010
Reputation Points: 12
Solved Threads: 11
 

if going xhtml
also have to add
<html xmlns="http://www.w3.org/1999/xhtml"> or other issues will arise

almostbob
Posting Sensei
3,147 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 

Also to make the page cross-browser, I would recommend to set to null margin and padding to all elements.

* {
  margin: 0;
  padding: 0;
}

The issue is that different browsers set up different margin and padding to HTML elements.

Eric Meyer, CSS Brigadier-General has a reset.css file on his site. I use a modified version of this in many of my projects. I think Yahoo! has a similar one on their developer site. It deals with pretty much everything. http://meyerweb.com/eric/tools/css/reset/

diafol
Rhod Gilbert Fan (ardav)
Moderator
7,765 posts since Oct 2006
Reputation Points: 1,168
Solved Threads: 1,075
 

Yep there are some reset files in the net, but I particularly found them useless, since most of the troubles come from margin and padding.
Anyway, useful link for the rest.

amd_k8
Light Poster
49 posts since Jan 2010
Reputation Points: 12
Solved Threads: 11
 
Yep there are some reset files in the net, but I particularly found them useless, since most of the troubles come from margin and padding. Anyway, useful link for the rest.

Yeah sure - it's not a magic bullet, but you can start with a clean sheet. IE6 will even misbehave with a clean sheet. The use of a dedicated IE6 hacks css file via conditional comments is the usual fix.

Unfortunately some hacks use invalid CSS -> fail CSS validation.

Gawd, I wish IE6 would just die a quick death. Instead it lingers and festers.

diafol
Rhod Gilbert Fan (ardav)
Moderator
7,765 posts since Oct 2006
Reputation Points: 1,168
Solved Threads: 1,075
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You