how to target safari and not chrome?

[jamesTbaker]

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!

[RyanReese]

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 )

[jamesTbaker]

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!

[RyanReese]

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