943,155 Members | Top Members by Rank

Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 1012
  • PHP RSS
You are currently viewing page 1 of this multi-page discussion thread
Jan 21st, 2010
0

Standard CSS formating for all browsers

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
almahmeed is offline Offline
11 posts
since Dec 2009
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
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:

PHP Syntax (Toggle Plain Text)
  1. <!--[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.

PHP Syntax (Toggle Plain Text)
  1. <!--[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.

PHP Syntax (Toggle Plain Text)
  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. body{
  4. background: black;
  5. }
  6. </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.
Reputation Points: 16
Solved Threads: 5
Light Poster
CJesusSaves is offline Offline
49 posts
since Jan 2010
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
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:

PHP Syntax (Toggle Plain Text)
  1. <!--[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.

PHP Syntax (Toggle Plain Text)
  1. <!--[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.

PHP Syntax (Toggle Plain Text)
  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. body{
  4. background: black;
  5. }
  6. </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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
almahmeed is offline Offline
11 posts
since Dec 2009
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
add a DOC type declaration.
Reputation Points: 32
Solved Threads: 60
Posting Pro in Training
vaultdweller123 is offline Offline
484 posts
since Sep 2009
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
add a DOC type declaration.
Hi,

I have
PHP Syntax (Toggle Plain Text)
  1. <!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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
almahmeed is offline Offline
11 posts
since Dec 2009
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
yep. try reading in w3schools.com and you find out that they have to declare DOC type to solve browser issue.
Reputation Points: 32
Solved Threads: 60
Posting Pro in Training
vaultdweller123 is offline Offline
484 posts
since Sep 2009
Jan 21st, 2010
0
Re: Standard CSS formating for all browsers
Also to make the page cross-browser, I would recommend to set to null margin and padding to all elements.
PHP Syntax (Toggle Plain Text)
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

The issue is that different browsers set up different margin and padding to HTML elements.
Reputation Points: 12
Solved Threads: 11
Light Poster
amd_k8 is offline Offline
49 posts
since Jan 2010
Jan 21st, 2010
1
Re: Standard CSS formating for all browsers
if going xhtml
also have to add
<html xmlns="http://www.w3.org/1999/xhtml"> or other issues will arise
Reputation Points: 561
Solved Threads: 365
Posting Maven
almostbob is offline Offline
2,966 posts
since Jan 2009
Jan 21st, 2010
1
Re: Standard CSS formating for all browsers
Click to Expand / Collapse  Quote originally posted by amd_k8 ...
Also to make the page cross-browser, I would recommend to set to null margin and padding to all elements.
PHP Syntax (Toggle Plain Text)
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

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/
Sponsor
Featured Poster
Reputation Points: 1041
Solved Threads: 935
Sarcastic Poster
ardav is offline Offline
6,620 posts
since Oct 2006
Jan 22nd, 2010
0
Re: Standard CSS formating for all browsers
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.
Reputation Points: 12
Solved Threads: 11
Light Poster
amd_k8 is offline Offline
49 posts
since Jan 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in PHP Forum Timeline: Can someone explain what data a session actually holds?
Next Thread in PHP Forum Timeline: Issues with Soap/XML/Nusoap/Stripped Slashes





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC