iain_darkflare
Member
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.
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.
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:
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.
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;}
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;}}
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 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.