Lunarpages Web Hosting Forum

Author Topic: Separate CSS for different browsers?  (Read 3422 times)

Offline tech4all

  • Spaceship Captain
  • *****
  • Posts: 124
Separate CSS for different browsers?
« on: May 22, 2012, 11:56:56 PM »
Is it possible to have separate CSS property/values for different browsers?

Right now I have an unordered list with several list items:

Code: [Select]
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

I had a margin-bottom for the <li> set at 8px. But in Firefox the list items run into a paragraph, so I am forced to set it to 5px. And in Chrome it looks too compacted. Is it possible to have two lines of "margin-bottom:" for say Chrome and one for Firefox so they both get customized CSS? I know when I go to CSS3genarter.com to make special effects, it gives me several versions of them, webkit, moz, etc.

Thanks!

Offline scanman20

  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 1556
    • http://www.notonebit.com
Re: Separate CSS for different browsers?
« Reply #1 on: May 23, 2012, 05:33:57 AM »
Only IE supports conditional CSS comments (http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx), however what you describe indicates a bigger issue. If the styling looks different from Firefox to Chrome, odds are you have styled something incorrectly. The different versions you mentioned (webkit, moz, etc.) are vendor-specific prefixes (http://reference.sitepoint.com/css/vendorspecific) and are ways for browser makers to implement their own versions of CSS properties that haven't been standardized yet. You might want to look into a CSS reset (e.g. http://meyerweb.com/eric/tools/css/reset/) which is a simple way to try and level the CSS playing field by removing the margins, padding, borders on many elements across all browsers so you can then style them without any browser-defaults getting in the way.
Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP (<- unused since 2006!)

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6424
Re: Separate CSS for different browsers?
« Reply #2 on: May 23, 2012, 05:47:05 AM »
"conditional CSS comments" may be a bit confusing. It's special HTML comments that are typically used to include or exclude a block of HTML code. This is often used to specify the use of different .css or .js files depending on the IE version in use (or non-IE browser). The bottom line in your case is that you end up using a .css file tuned for specific IE browser levels (or all non-IE browsers).

I agree with @scanman20 that if you're getting noticeable differences between Firefox and Chrome, you probably have done something wrong in the CSS itself (or at least, something sensitive to implementation differences between the two).
Visit My Site

E-mail Me
-= From the ashes shall rise a sooty tern =-

Offline tech4all

  • Spaceship Captain
  • *****
  • Posts: 124
Re: Separate CSS for different browsers?
« Reply #3 on: May 23, 2012, 11:56:27 AM »
Thank you both for the replies.

How else could I be doing it? Right now I'm simply doing this for the <li>:

Code: [Select]
ul.nav4 li {
margin-bottom: 8px;
}

I tried those different prefixes, but they didn't work.

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6424
Re: Separate CSS for different browsers?
« Reply #4 on: May 23, 2012, 02:00:13 PM »
You have <ul class="nav4">? And you're looking to add either 5 or 8px below each list item <li>? Or are you trying to put the extra margin at the bottom of the entire list? All I can think of is that there is a different default top-margin and/or different top and bottom padding between the two. You should explicitly set both padding and margin (to 0 if unused) everywhere, as different browsers set different defaults (as well as interpreting the standards a little differently, as whether to use margin or padding default in certain places). Note that for adjoining top and bottom margins, the larger one is used (they aren't added).

Taking complete control of all padding and margins may fix your problem with Firefox display running into something else, so you won't need to add different margins for different browsers!
Visit My Site

E-mail Me
-= From the ashes shall rise a sooty tern =-

Offline tech4all

  • Spaceship Captain
  • *****
  • Posts: 124
Re: Separate CSS for different browsers?
« Reply #5 on: May 23, 2012, 03:52:44 PM »
You have <ul class="nav4">? And you're looking to add either 5 or 8px below each list item <li>? Or are you trying to put the extra margin at the bottom of the entire list? All I can think of is that there is a different default top-margin and/or different top and bottom padding between the two. You should explicitly set both padding and margin (to 0 if unused) everywhere, as different browsers set different defaults (as well as interpreting the standards a little differently, as whether to use margin or padding default in certain places). Note that for adjoining top and bottom margins, the larger one is used (they aren't added).

Taking complete control of all padding and margins may fix your problem with Firefox display running into something else, so you won't need to add different margins for different browsers!

Yes I have <li>'s inside a <ul> tag. I am trying to increase the bottom margins of the <li>'s.

Here's the CSS:

Code: [Select]
ul.port-graphics-nav4 {
position: relative;
padding: 0px;
margin: 0px;
width: 200px;
height: 300px;
border: 0px solid blue;
}

ul.port-graphics-nav4 li {
display: block;
text-align: left;
margin-bottom: 4px;
border: 0px solid black;
}

I added "padding: 0px" to <li> but it didn't help. Is that what you meant?

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6424
Re: Separate CSS for different browsers?
« Reply #6 on: May 23, 2012, 04:11:57 PM »
I don't believe that your <li> are inheriting either their padding or their margins from <ul>. You should explicitly give padding: 0 and margin: 0 in the li properties. Try
Code: [Select]
ul.port-graphics-nav4 {
position: relative;
padding: 0px;
margin: 0px;
width: 200px;
height: 300px;
border: 0px solid blue;
}

ul.port-graphics-nav4 li {
display: block;
text-align: left;
        padding: 0;
margin: 0 0 4px 0;
border: 0px solid black;
}

and see if anything changes.
Visit My Site

E-mail Me
-= From the ashes shall rise a sooty tern =-

Offline tech4all

  • Spaceship Captain
  • *****
  • Posts: 124
Re: Separate CSS for different browsers?
« Reply #7 on: May 23, 2012, 05:30:45 PM »
Thanks for the suggestion. I tried it but I get the effect when I change it to 8px for margin-bottom. Is there any else I could try?

I'll continue messing with it and check back here later.

Thanks again!