Different CSS styles dependent on browser
- Started
- Last post
- 15 Responses
- scrap_paper
So, I've been building a new site and I noticed that my type styles look completely different in IE, Firefox and Safari on both Mac and PC.
Is there a way to designate which type style the page should read depending on which browser is being used?
Here are one of the pages I am working on:
http://www.kausticdesign.com/ALG…In order to make the typography not look like chicken scratch I had to apply:
font-weight:bolder;Problem is this actually looks bolder in FF and Safari while just filling out the typeface in IE.
Any and all suggestions appreciated.
- airey0
you're best method to start with is to crush all the inherit browser styles prior to then adding yours. this'll give you the ability to then get in there and tweak.
this is often called a 'reset'.
http://developer.yahoo.com/yui/r…
http://www.smashingmagazine.com/…
http://meyerweb.com/eric/thought…- did the reset but I'm still seeing a drastic difference beteen browsersscrap_paper
- airey0
another option is to build new styles specifically for IE and add them to the style sheet:
http://www.quirksmode.org/css/co…
http://css-tricks.com/how-to-cre…
http://blogs.msdn.com/ie/archive…
- scrap_paper0
I can see the potential madness. Thanks for the links. I think this will be enough for me to start at it.
- airey0
there will always be a difference in browser viewing anyway. IE's font rendering for a start is so different. also, you need to look into the best method to style fonts - px vs. pt vs % as this makes big differences.
most of all, do your best to lose the control freak art director inside. the web is a different beast and you'll never ever ever make a site that views the same across all platforms. breathe in...breathe out...
- scrap_paper0
Lol. Trying to set aside the desire for typographic control. Really I am!
So, I've tried to use this statement to provide an alternative style sheet when using IE:
<!-- [if IE]>
<link href="global-ie.css" rel="stylesheet" type="text/css" />
<![endif] -->and made the font-family times just to test it out. IE is not reading the if condition however. Suggestions?
- airey0
no idea.
start from scratch a bit.
1. add the rest to the site stlesheet and check that made some difference.
2. strip out the styles related to font family and size.
3. add teh font size styles. check.
4. add the font family styles. check.run screaming from the room. check.
MOST IMPORTANT: google has always been more help than some tool on qbn that barely knows what he's talking about (i'm obviously talking about myself there).
- dmolanphy0
Aside from ridding yourself of IE altogether, use ems for font sizes. That may help some.
- trooper0
lame having browser dependent styles
- airey0
sometimes it's the only solution which i why the hack is featured in and on every book and site about css created by renouned experts. or are you some uber-css guru trooper?
- trooper0
you know it ;)
- ukit0
What about just using hacks within a stylesheet? That considered better/ worse?
- airey0
personal pref. the 2nd sheet helps some peeps with their organisation is all. also, the IE only include means that there's that many lines of code other browser don't need to look at and ignore.
- ukit0
the only thing I use hacks for BTW, is the extra space IE6 seems to create. I know there's a better way to do it, but I've been too lazy to look it up. Maybe this is a good time to ask what a better solution is.
- airey0
for ukit:
http://www.andybudd.com/archives…- Hey, thanks! I don't code much these days but I'm sure this will come in handy when I do.ukit
- 1pxsolid0
Use reset.css always.
Your only main problems should come from IE 6... So do the css for your site in Firefox and Safari, then at the end add
<!-- [if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif] -->And use it only to override problems that can't be fixed in the main.css file.
capiche?