PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Nov 23, 2014 3:08 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Jun 08, 2006 2:26 pm 
Offline
Forum Commoner

Joined: Fri Mar 31, 2006 8:41 pm
Posts: 66
Any good tips for handling IE/Firefox compatible CSS?

I've got my pages displaying differently in the two browsers and I really don't want to have to manually define each item line by line.

-- Abe --


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 2:29 pm 
Offline
Tutorials Group

Joined: Sun Jan 04, 2004 11:30 pm
Posts: 2692
Show the specific code with a problem, and we can give specific solutions to the problem.

In general, use conditional statements for browser-specific issues.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 2:40 pm 
Offline
Forum Regular
User avatar

Joined: Wed May 11, 2005 2:33 am
Posts: 509
Location: Alicante (Spain)
Roja wrote:
use conditional statements for browser-specific issues.
Hmm! Personally that wouldn't be my recomendation. I'd say use CSS that is valid and that works and displays well in all browsers. Steer well clear of all solutions that aim to "fix" something in one browser.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 2:46 pm 
Offline
Forum Commoner

Joined: Fri Mar 31, 2006 8:41 pm
Posts: 66
Syntax: [ Download ] [ Hide ]
p {font-family: verdana; font-size: small}
#small {font-family: verdana; font-size: x-small}
img
{
 border-style: none;
}
p.small {font-family: verdana; font-size: x-small}




Syntax: [ Download ] [ Hide ]
print ("<p><a href=\"index.php?admincpcategories=1&subcatdeactivate=$subcatID\"><img src=\"../images/deactivate.gif\"  alt=\"De-activate\"></a>

<a href=\"index.php?admincpcategories=1&submodify=$subcatID\"><img src=\"../images/mod.gif\" alt=\"Modify\"></a>

<b>$subcatName</b> (#$subcatID)</p>"
);


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 4:55 pm 
Offline
DevNet Resident
User avatar

Joined: Thu Feb 09, 2006 5:52 pm
Posts: 1925
Location: everett, wa
Look at the Skidoo Too layout and csshover2.htc.

Lot's of great stuff there.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 5:22 pm 
Offline
Forum Regular
User avatar

Joined: Mon Nov 14, 2005 5:21 pm
Posts: 878
bokehman wrote:
Roja wrote:
use conditional statements for browser-specific issues.
Hmm! Personally that wouldn't be my recomendation. I'd say use CSS that is valid and that works and displays well in all browsers. Steer well clear of all solutions that aim to "fix" something in one browser.


I couldn't have said that better.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jun 08, 2006 6:50 pm 
Offline
Breakbeat Nuttzer
User avatar

Joined: Wed Mar 24, 2004 8:57 am
Posts: 13098
Location: Melbourne, Australia
AKA Panama Jack wrote:
bokehman wrote:
Roja wrote:
use conditional statements for browser-specific issues.
Hmm! Personally that wouldn't be my recomendation. I'd say use CSS that is valid and that works and displays well in all browsers. Steer well clear of all solutions that aim to "fix" something in one browser.


I couldn't have said that better.


There are situations where you simply cannot do that. I'm not talking about whacky DHTML stuff neither. For example have you ever tried playing with padding/margin on order & unordered lists and viewing the result in IE then in other browsers?

Using conditional comments if far better than the underscore hack. Granted, you can work around most of the box model issues by simply nesting <div> elements to create a fake padding/margin.


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 1:22 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
I agree that conditional comments are the way to go.

What bokehman says is also true to some extent. You have to be careful with "fixes". Don't let them bite you ..

My approach is simple: start designing according to the standards, testing in a modern and standards supporting browser, for example Firefox.

Then, when your design is finished, start testing in other browsers and see if something's broken. Sometimes you don't have to do anything, other times something is broken in f.e. IE. Often, one or a few "fixes" in the css file specific for IE 5 or 6 is enough to get your layout working in that browser. Most often the problem has something to do with the box model or misinterpretation of floats. A search through positioniseverything.net will often help you find the problem.

The main advantage of using conditional comments is that all fixes for that browser are centralized. When it's time to ditch support for that browser, you'll only have to remove that css file. And your main stylesheets stay clean. Although I must admit i don't like the fact that the conditional comments are written in the html. It would be better to have them in the main css file in some way (like the MidPass filter from Tantek).


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 1:41 am 
Offline
Site Administrator
User avatar

Joined: Tue Sep 09, 2003 6:04 pm
Posts: 14293
Location: Fremont, CA, USA
I know this sounds foolish, harsh and arrogant, but I like to write standard compliant code. Hacks are a common thing because IE still chokes on a lot of standard stuff (can we say box model issues?). So naturally I am not a proponent for conditional loading of stylesheets. Almost any CSS compliance issue ca be reworked to make a close resemblance to conformance if you try hard enough and google enough.

Man, IE just chaps my... goodnight.


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 3:14 am 
Offline
Forum Contributor
User avatar

Joined: Mon Jul 04, 2005 5:31 am
Posts: 220
Location: UK
IE 7 renders CSS much better than IE6, I've found that most websites that are well written render pretty much the same in IE7 as they do in firefox. I have had the odd exception (buttons wandering off page, and a menu bar disappearing) but on the whole its a vast improvment over how IE6 handles CSS, I'm hoping when MS finally releases it we will see an end to need to having to code for two different browsers ;)


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 11:53 am 
Offline
DevNet Resident
User avatar

Joined: Thu Feb 09, 2006 5:52 pm
Posts: 1925
Location: everett, wa
It's going to be a while before most people upgrade :(


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 2:54 pm 
Offline
Forum Commoner

Joined: Fri Mar 31, 2006 8:41 pm
Posts: 66
Daedalus- wrote:
It's going to be a while before most people upgrade :(


But why upgrade to IE7 when you can download Firefox?

:twisted:


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 3:31 pm 
Offline
Forum Regular
User avatar

Joined: Wed May 11, 2005 2:33 am
Posts: 509
Location: Alicante (Spain)
phpdevuk wrote:
IE 7 renders CSS much better than IE6, I've found that most websites that are well written render pretty much the same in IE7 as they do in firefox.
That is just not true. Try viewing the acid test. This really shows how far behind the Gecko browsers it really is.


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 3:58 pm 
Offline
Forum Regular
User avatar

Joined: Mon Nov 14, 2005 5:21 pm
Posts: 878
bokehman wrote:
phpdevuk wrote:
IE 7 renders CSS much better than IE6, I've found that most websites that are well written render pretty much the same in IE7 as they do in firefox.
That is just not true. Try viewing the acid test. This really shows how far behind the Gecko browsers it really is.


Download the latest version of Opera 9 and check out the Acid 2 Test. Opera 9 gets it right. :D


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jun 09, 2006 4:05 pm 
Offline
Neighborhood Spidermoddy
User avatar

Joined: Mon Mar 29, 2004 4:24 pm
Posts: 31559
Location: Bothell, Washington, USA
oh just stop with the "user this browser" stuff guys. I've read it enough and now I'm tired of seeing it.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group