Targeting Chrome and Safari Independently From Each Other?

[lcorbett]

I'm troubleshooting a client's website for a Safari and Chrome positioning issue. I've never ran across the -webkit targeting one and not affecting the other.

The -webkit targeting fixed the issue in Safari, but Chrome is still a few pixels off. Is there a way to target each independently?

Here's the link to the test page:
http://www.ravensheart.biz/GSC/index10c.html

Here's the -webkit code in the head section:
<style type="text/css">
<!--
/* Safari Fix */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#sidebar-left { left:314px;}
}
-->
</style>


here's my main css. the part I'm having the problem with is #sidebar-left

/* CSS Document */

/*general structural styling*/

body {
margin: 0;
background-color: #174059;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 88%;
}

#container {
width: 778px;
background-color: #fdf6ee;
margin: 0 auto;
text-align: left;
}

#topbar {
height: 15px;
background-color: #174059;
margin: 0 auto;
}

#banner {
background-color: #174059;
height: 162px;
width: 778px;
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
}


.right-content {
margin-left: 160px;
margin-top: -15px;
padding: 0 20px 15px 25px;
text-align: left;
}

.right-content-text{
margin-left: 165px;
margin-top: 0px;
padding: 0 20px 0px 25px;
text-align: left;
}


.footer {
clear: both;
background-color: #1C827A;
height: 22px;
}

.footertext {
color: #EDED8A;
font-size: 10px;
font-weight: bold;
padding-top: 0px;
text-align: center;
position: relative;
top:2px;
}

a:link {
color: #174059;
}
a:hover {
color: #06AC9B;
}
a:visited {
color: #1c827a;
}
a:active {
color: #1c827a;
}

/*text*/

h1 {
font-family:Georgia, serif;
color: #1A9890;
font-size: 200%;
font-weight: bold;
padding-top: 35px;
margin-top: 155px;
text-align: center;
}

h2, h3 {
font-family:Georgia, serif;
color: #1C827A;
text-align: center;
}


h2 {
font-size: 150%;
margin: 0.75em 0 0 0;
}

h3 {
font-size: 110%;
font-family:Georgia, serif;
font-weight: bold;
margin-bottom: 1.2em;
color: #1C827A;
}

p {
font-size: .95em;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 12px;
line-height: 19px;
}

h2 + h3 {
margin-top: 0.5em;
}


.small-text {
font-size: .85em;
vertical-align: middle;
}


.firstline {
padding-top: 10px;
}

.caption {
font-size: .85em;
font-weight: bold;
text-align: center;
}


#sidebar-left {
width: 157px;
position:absolute;
top:177px;
left:324px;
background: url(../images/sidebar700.gif) no-repeat;
min-height: 636px;
}

/* homepage navigation*/
.left_nav {
height;100%;
float: left;
width: 126px;
padding: 7px 0 0 20px;
font-size: 0.8em;
font-weight: bold;
line-height: 13px;
}

.left_nav a, .left_nav a:active {
text-decoration: none;
display: block;
width: 105px;
padding: 4px;
border: 2px solid #d99c9f;
color: #174159;
background-color: #eded8a;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}

.left_nav a:visited {
color: #000;
text-decoration: none;
background-color: #eded8a;
background-image: none
}

.left_nav a:hover {
color: #000;
background-color: #e5da0e;
background-image: none;
text-decoration: none;
}

/* page navigation */
.left_page_nav {
float: left;
width: 212px;
min-height: 500px;
padding: 10px 0 0 24px;
font-size: .85em;
font-weight: bold;
}

.left_page_nav a, .left_page_nav a:active {
text-decoration: none;
display: block;
width: 130px;
padding: 3px;
border: 1px solid #fdf6ee;
margin: 10px 5px;
color: #fdf6ee;
background-color: #174159;
text-align: center;
}
.left_page_nav a:visited {
color: #fdf6ee;
text-decoration: none;
background-color: #174159;
background-image: none

}
.left_page_nav a:hover {
color: #fdf6ee;
background-color: #9a7277;
background-image: none;
text-decoration: none;
}
/* end page nav */


/*positioning*/
.ctr {
text-align: center;
margin: 0 auto;
}
.rt {
float: right;
}

.centeredImage {
text-align:center;
display:block;
margin-top:175px;
margin-bottom:20px;
padding:0px;
}



Thanks in advance!
Lori

[Coyotelab]

I wrote an article about this, which can be find here (http://coyotelab.org/blog/css/css-browser-hack)

[lcorbett]

Thank you Coyotelab!

[opifex]

I'm checking from a Linux box and the ONLY browsers the design-layout works in are FF3.0 and Konqueror.
Falls apart in FF3.5, Opera 10 and latest build of Chromium.

So you don't have a "webkit" problem... you have a general problem.

Do you have an exceptionally good reason for #sidebar-left to NEED position:absolute ?? or are you just copying this from a broken template?
I just noticed the DW comments in the "template." Work in "code view" only and you might have better results.

[lcorbett]

I inherited the code. My client built the design on DW then handed it over to me to sort out. I've since ditched the code and essentially started over with no absolute positioning. Things are playing nicely now, except for Opera, which I'm tinkering with now.

Thanks again.