Member Avatar for almahmeed

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 on

  • Chrom: 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

  • 6 Contributors
  • 10 Replies
  • 173 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for CJesusSaves

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.

Member Avatar for almahmeed

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

Member Avatar for vaultdweller123

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

Member Avatar for amd_k8

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.

Member Avatar for almostbob

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

commented: Blimey! That's new to me. Thanks. +5
Member Avatar for diafol

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/

commented: Thanks, been looking for that file again for a few weeks, when you missspell Myer(sic) its really hard to find +3
Member Avatar for amd_k8

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.

Member Avatar for diafol

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.