[DieuxSoldat_04]

Hey Coders,

I am currently working on a project located here: Team24CS.

Right now, I checked the site with Opera, Fire Fox and Safari and everything appears as intended. Of course, when viewed with IE, there are issues. I have never done any cross browser style sheet fixes, so I was hoping to use this as an opportunity to learn this. I have seen other sites where in the head of the HTML code, they have scripts like "if. {internet explorer}" or what not. Anyone care to share some knowledge?

I tried Googling for it, but it seems I failed at choosing the right terms

Any links or help is greatly appreciated!

Warm Regards,
Jason Xiao

P.S. I know there are validation errors. I will fix those when done

[Nico]

Try fixing these errors, at first.

[Invalid] Markup Validation of http://www.jxhnetwork.com/team24/ - W3C Markup Validator

[DieuxSoldat_04]

I will work on the errors, but I wanted to prepare myself and to learn about have a cross platform style sheet. Would anyone care to talk about this process? Doesn't even have to be a fix for the project I am working on, I just wanted to learn it.

Warm Regards,
Jason Xiao

[Nico]

Having a valid markup is the first rule of designing a cross platform web site.

[wirehopper]

The stylesheet architecture I like to use has several stylesheets:

1. base.css or layout.css - site wide common styles, dimensions and page layout
2. colors.css - colors only, including background images, and any dimensions required to support the background images
3. ie.css - IE adjustments. The server will send it if the request is from IE
4. ff.css - FF adjustments - The server will send it if the request is from FF
5. page.css - page specific CSS, for any page that has complex styles
6. Inline style - style tags for very minor adjustments on pages (embedded in <style> tags)
7. style attributes - anything that has to be forced (style="display:none"), or dimensions

Usually there are also stylesheets from toolkits or applications as well.

And, the XHTML/CSS is validated.

[DieuxSoldat_04]

Okay, thanks for the feedback gents.

So for the 1-7 steps, what is actually written in the .php files? I understand how to use multiple CSS style-sheets, but what coding do I use on the web pages to detect the browser and use the correct style sheet?

The main reason I am putting off the validation is because we have 3 people working on the coding. [Yes we are coordinated enough to not screw up each others' edits, but the different coding style makes validating while working a little harder.]

Thanks!
Jason Xiao

[wirehopper]

The PHP should be a hierarchy - where one file handles the site wide includes/references like CSS, and it includes/manages other pages/files for the site.

Without a good architecture, it will be very difficult to maintain the site.

[DieuxSoldat_04]

I checked the XHTML and CSS and they all validate now.

It was a problem caused by the embedded YouTube video, Server Tracker, and I forgot two ALT fields for images. I knew it wasn't big stuff ; P All fixed by changing two files. Now onward...

to the main act, what coding do I actually put on my pages to have them "call" the proper cascading style sheets based on browser?

Warm Regards,
Jason Xiao

[wirehopper]

$_SERVER['HTTP_USER_AGENT'] will tell you what browser is in use.

This is IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

This is FireFox

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.15) Gecko/2009101601 Firefox/3.0.15 (.NET CLR 3.5.30729)

[Nico]

Or you can do it on the client side.

Code:

<!--[if IE 7]>
	your style sheet.
<![endif]-->