SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to target safari and not chrome?

    Hi,

    Safari is rendering the margins (and possibly the list-style-positions) of my ordered and unordered lists one way and chrome another (chrome looks like FF and IE).

    Safari:


    Chrome (FF, IE):


    The CSS looks like this:
    ul {
    list-style-image: url('images/bullet.png');
    list-style-position: outside;
    margin: 4px 0 10px 30px;
    }

    ol {
    list-style-type: decimal;
    list-style-position: outside;
    margin: 4px 0 10px 30px;
    }


    Webkit hacks don't work because they target both Safari and Chrome. I've tried some other things I've found on the web like...
    ::root (prepend)
    # (prepend)
    (perhaps these are webkit hacks, idk)
    ...but success has eluded me.

    Anyone know how to target Safari and not Chrome so that I can make Safari's rendering look like Chrome, FF, and IE?

    Thanks so much!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    HI, the problem is that some browsers use padding to space out the list bullets.

    Some use margins. You are assuming all browsers use magins.

    Safari probably uses padding to space it out. So it has approximately 46px of space (16px padding+30 you set) compared to the 30 to normal browsers.

    Set the paddin to 0 for those elements and see if that helps . But to answer your question there is no pure CSS way to target only Safari and not Chrome (or vice versa)

    If that doesn't fit it I'll need to see a live site or at the very least full HTML/CSS (link is preferred )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    HI, the problem is that some browsers use padding to space out the list bullets.

    Some use margins. You are assuming all browsers use magins.

    Safari probably uses padding to space it out. So it has approximately 46px of space (16px padding+30 you set) compared to the 30 to normal browsers.

    Set the paddin to 0 for those elements and see if that helps . But to answer your question there is no pure CSS way to target only Safari and not Chrome (or vice versa)

    If that doesn't fit it I'll need to see a live site or at the very least full HTML/CSS (link is preferred )
    Worked like a charm! Thanks, dude! You rock!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Glad to help .
    PS-The list-style properties (not hte image) you are settting in your CSS (in post 1) are defaults. You could remove them. The list-style image you set should really be a background-image because browsers v ary on the vertical palcement of the image. A more consistant result would be on a background-image
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •