Safari / Chrome Bugs

Hi everyone, I'm having a couple of issues with Safari and Chrome.

I have a menu that I have styled with a CSS background image, this works fine in FF3.5, IE 8 and Opera 10, but not in Safari 3.2.1 or Chrome 3.

Instead of appearing below the link it appears behind. This is the CSS I am using for the navigation.

Code:
#nav {    background: #262626 url('../images/menu-bg.gif') repeat-x bottom left;    float: left;    width: 930px;    min-height: 14px;    margin: 0;    padding: 20px 15px;    border: none;    border-top: #660040 solid 10px;    border-bottom: #262626 solid 15px;    font-weight: bold;    text-transform: uppercase;}#nav .moduletable_menu ul.menu li {    display: inline;    height: auto;    padding: 0 15px;    color: #FFFFFF;}#nav .moduletable_menu ul.menu li.active a {    background: url('../images/menu-hover.gif') no-repeat bottom center;    padding: 0 0 29px 0;        text-decoration: none;    color: #FFFFFF;}#nav .moduletable_menu ul.menu li.active a:hover {    background: url('../images/menu-hover.gif') no-repeat bottom center;    padding: 0 0 29px 0;    text-decoration: none;    color: #FFFFFF;}#nav .moduletable_menu ul.menu li a {    text-decoration: none;    color: #666666;}#nav .moduletable_menu ul.menu li a:hover {    background: url('../images/menu-hover.gif') no-repeat bottom center;    padding: 0 0 29px 0;    text-decoration: none;    color: #868686;}
Not sure what I have/haven't done to cause this, so I am currently just using the following hack to turn off the background image. Obviously this isn't ideal as it invalidates the CSS.

Code:
@media screen and (-webkit-min-device-pixel-ratio:0) {#nav .moduletable_menu ul.menu li.active a,#nav .moduletable_menu ul.menu li.active a:hover,#nav .moduletable_menu ul.menu li a,#nav .moduletable_menu ul.menu li a:hover {    background: none;}}
Another issue I am having is on some images (with caption links) on my front page. In Safari/Chrome only, the captions are underlined the same as the a:link within the body text. But in FF etc they aren't...which is how I want them.

Not sure why this is happening either.

Here is that CSS:

Code:
#main a,#main a:link {    color: #660040;    text-decoration: none;}#main a:hover {    color: #660040;    text-decoration: underline;}
Code:
#main .article_column img {    border: 10px solid #161616;}#main .article_column a img { /* Front Page - Image Border */    border: 10px solid #161616;    text-decoration: none;}#main .article_column a:hover img {    border: 10px solid #333333;    text-decoration: none;}#main .article_column a p.img_caption { /* Front Page - Image Caption Background */    float: left; /* Required to sort Joomla! Caption Bug */    background: #161616;    margin: 0 0 30px 0;    padding: 5px 10px 15px 10px;    font-size: 2.0em;    text-align: left;    color: #DDDDDD;    text-decoration: none;}#main .article_column a:hover p.img_caption {    background: #161616;    color: #FFFFFF;    text-decoration: none;}#main a img.multithumb,#main a:hover img.multithumb {    margin: 0 0 0 -5px;}
I can't provide a link to the site at the moment as it is a Joomla install on Xampp on my laptop.

I seem to be going round in circles editing the CSS and with no luck so far, so any help would be very gratefully received.

Cheers,
Iain.
 
Hay can't see your first issue, still got it?
But for the rollover try this ~
#main div.column2 a:hover,#main div.column3 a:hover{text-decoration:none}

As this rule:
#main a:hover {
color: #660040;
text-decoration: underline;
}

Is the 1 u are having issues with. It will need to go under it as well.

If that doesn't fix it change this rule ~
#main a:hover {
color: #660040;
text-decoration: underline;
}


To ~
#main .column1 a:hover {
color: #660040;
text-decoration: underline;
}

As that then will only effect the left column though out the site.
Let me know if that fixes it.

Jaz

Key:
Green ~ CSS
 
Thanks for the reply.

#main div.column2 a:hover,#main div.column3 a:hover{text-decoration:none}

This did the trick with the underline, ta v.much for that!


I am still having the first issue, but I must have put the webkit hack back in whilst working on it.

I have removed it now, and noticed that the Nav background image doesnt work in IE6 or IE7 so it obviously isn't a webkit specific issue.

Mind you the whole site is a total mess in IE6 and I still have to work on some issues in 7 as well as FF2.
 
Well it's showing in Opera so it's not a referencing issue.
You have a fair bit of code that can be shortened. But try removing the bottom rules and see what you get in Safari, not sure TBH. But let us know what you get.

background: url('../images/menu-hover.gif') no-repeat bottom center;
 
Thanks, I've just given that a go, and all it does is move the image back up to just underneath the text within FF, and makes no change in Safari.
 
Back
Top