|
CSS - Css Hover Safari Image Not Showing
I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css.
The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela Similar TutorialsHey...this may possibly be a dumb question; I'm still pretty much a complete n00b at HTML/CSS and this is only the second site I've really tried to code. I haven't tried to deal with cross-browser compatibility in IE yet so I'm sure it looks completely whack there, but I've been surprised by issues I've been having between FF, Safari, and Opera -- it was my understanding that those three browsers read things pretty much the same. Basically, the site has a bunch of horizontal dropdown menus (uls with li:hover functions). Here's the relevant code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Star Trek: Andromeda</title> <link rel="stylesheet" type="text/css" href="http://www.trekandromeda.com/home.css" /> </head> <body> <!-- Menu --> <div id="bg"> <div id="home"><ul id="menu"><li><a href="http://www.trekandromeda.com/home.html"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/home.html">Site Home</a></li> <li><a href="http://forums.sb254.com/index.php?f=686">STA Forums</a></li> <li><a href="http://www.sb254.com/">FSF Home</a></li> </ul></li></ul></div> <div id="news"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/news.html">Recent News</a></li> <li><a href="http://www.trekandromeda.com/awards.html">Game Awards</a></li> </ul></li></ul></div> <div id="info"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton2.png"></i></a> <ul class="margintwo"> <li><a href="http://www.trekandromeda.com/chat.html">Chat Room</a></li> <li><a href="http://www.trekandromeda.com/odysseyplot.html">STA Plot</a></li> <li><a href="http://www.trekandromeda.com/odysseycrew.html">STA Crew</a></li> <li><a href="http://www.trekandromeda.com/staff.html">STA Staff</a></li> <li><a href="http://www.trekandromeda.com/join.html">Join</a></li> </ul></li></ul></div> <div id="tech"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/ships.html">Ships</a></li> <li><a href="http://www.trekandromeda.com/equipment.html">Fleet Tech</a></li> <li><a href="http://www.trekandromeda.com/science.html">Science Docs</a></li> </ul></li></ul></div> <div id="andromeda"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/Temp/menubutton2.png"></i></a> <ul class="marginthree"> <li><a href="http://www.trekandromeda.com/races.html">Xenobiology</a></li> <li><a href="http://www.trekandromeda.com/maps.html">Stellar Cartography</a></li> </ul></li></ul></div> </div> </body></html> And the CSS: Code:
body
{background: #000000;
width: 1228px;
font-family: Arial;}
/* MENU */
#bg
{background: #000000;
background-image: url("http://www.trekandromeda.com/Temp/blue3.png");
background-repeat: no-repeat;
height: 700px;
}
#home
{position: absolute;
left: -7px;}
#news
{position: absolute;
left: 207px;}
#info
{position: absolute;
left: 420px;}
#tech
{position: absolute;
left: 725px;}
#andromeda
{position: absolute;
left: 925px;}
ul#menu{
position: relative;
top: 240px;
text-decoration: none;
opacity: 100;
list-style: none;}
ul#menu li {
float: left;
position: relative;
width: 108px;
list-style: none;
top: auto;
left: auto;}
ul#menu li a img {
position: relative;
opacity: 0;}
ul#menu li ul {
position: relative;
display: none;}
ul#menu li ul.marginone li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -43px;}
ul#menu li ul.margintwo li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: 25px;}
ul#menu li ul.marginthree li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -50px;
width: 240px;}
ul#menu li:hover ul {
position: relative;
display: block;
margin-top: -5px;
}
ul#menu li:hover ul li {
float: left;
position: relative;
padding: 5px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #000000;
height: 20px;
border: 1px solid #54A2E2;
z-index: 1000;
}
ul#menu li ul li:hover {
float: left;
position: relative;
display: block;
color: #000000;
background: #54A2E2;
border: 1px solid #54A2E2;}
/* Links */
a:link {text-decoration: none; color: inherit;}
a:visited {text-decoration: none; color: inherit;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
In Firefox (and in Opera, although the placement is a little funky) the dropdown menus have an li:hover effect which changes the color of the one which is being hovered over. However, this is not working in Safari and I'm not entirely sure why. Does anyone have any ideas on what I can do to fix this? Thanks! Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph Hi, I have a div that I've styled with CSS so that it will have an horizontal scrollbar. The CSS for it is: Code:
#thumbs {
position: relative;
width: 100%;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
text-align: center;
}
For some reason, this works on all browsers except Safari for Mac. Any help will be greatly appreciated. Thanks, Ralph I am trying to set up a simple hover event which shows a div when another div is hovered. Can anyone tell me why my code is not working? In the HTML: Code: <div id="package-tab1"> <h3>Basic Package</h3> </div> <div id="description1">asdfasdfasdf</div> In the CSS: Code: #package-tab1 {
width: 135px;
height: 100px;
border: solid 1px;
padding: 10px;
float: left;
margin: 10px;
}
#description1 {display:none;}
#package-tab1:hover #description1 {
display:block;
position:absolute;
left:0;
top:0;
width:300px;
height:500px;
border:1px solid #900;
background-color:#FFEFEF;
}
i can't seem to get my site to view properly in safari and ie, firefox seems to do a fine job (of course). the left and right sides should show a red shadowed bar but they are not in the browsers listed above. would someone check the css in firebug and tell me what's happening?? thank you in advance for any help! the site is greatfoodcoop.com Hi all, I have this piece of coding (which I'm pretty new at) that allows a "display:none;" span to appear on a link:hover. It works great in Firefox, but I can't for the life of me find why it isn't working in IE. I did this once with an Unordered List and it worked in IE, but now that I have used a table to structure the menu, it isn't working. here is the site: magicbeanz.blogsome.com I've attached the style sheet and html to this post. The relavent coding should be near the bottom. See #catmenu and the #books, #movies, #other, #hobbies, #games, divs. I really hope someone can help. Thanks in advance!! Oh, and I wouldn't mind some feedback on the coding and design. I'm back to working on my skills after a long break >< Hi Guys, I am having trouble working out how to line up the hover background image with the background image for a mouseover effect. It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif' HTML ---------- <div id="vertmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> CSS ---------- PHP Code: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(images/bullet.gif) left center no-repeat; padding-left: 15px; text-align: left; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold; text-decoration: none; color: #999; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a:hover { background: transparent url(images/x.gif) left center no-repeat; color: black; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a#current { background: transparent url(images/x.gif) left center no-repeat; color: #666; border-bottom: 1px dashed #FF9933; } Hello, My home page works fine on all browsers and platforms except safari. http://www.caillouette.com/EoLtest/ The two buttons below the main nav should be above the big blue "Request Information" button. Can anyone help? thanks -S I am wanting to add an hover option to my pictures and can not get it to work. I have each picture in a box div and was wondering how to add an hover to it. The link to the website is:-brushing with greatness. I just want the whole box to light up when you hover over the image. Would i have to use javascript or can i do this completely with css? Many thanks in advance. Code: #middleschool-image {
position:absolute;
left:498px;
top:389px;
width:274px;
height:86px;
}
.middleschool-image a:hover img {
background-image: url(images/mid_school_ovr.jpg);
}
Am I missing something? When I mouse-over nothing happens... I have a site that I have created in WordPress using a pre-designed theme that I heavily customized. http://www.newlivingwaygreenville.org/blog/ The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x. The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others. The image is using inline styles to overcome the limitations of this particular WordPress theme. Code: style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;" Any ideas why this doesn't work right in Safari and what I can do to fix it? Thanks! ks Hey, If you take a look at the site below - within Apples Safari web browser - you will see how the image on the home page is splintering. ANy ideas? Thanks in advance! I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is. The file validates (with some minor color warnings). I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg Another issue with the url for the page is that I can't seem to get the width of the right pane smaller. Any help would be appreciated. Thanks/Hal Hi, I have a menu of made of images, each one is a link to a certain page. I want to replace the current image with a new slightly different image when the user hovers on it. I have 5 menu items so 10 images. My question is, can I do this in CSS without having to make a CSS rule for each image? Thanks in advance I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it. Thanks Tim Hi there, I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right? Any ideas? Hello, I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image). So my HTML is: Code:
<table>
<tr>
<td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
<td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
</tr>
<table />
and my CSS is: Code:
.flights {
background:url(/images/buttons/f_h.gif) center top no-repeat;
width: 78px;
height: 41px;
/* background-image: url(/images/buttons/f_h.gif); */
margin-right: 1px;
}
.flights:hover img {
visibility: hidden;
}
.vacations {
/* background:url(/images/buttons/v_h.gif) top left no-repeat; */
background-image: url(/images/buttons/v_h.gif);
}
For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image. Any insights as to why this might be happening? I'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page). http://www.geocities.com/dbot69/page1.html It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link): http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing. I got the following error when i tried to validate my code: "Line: 21 Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included) I don't really know what that error means though or how to fix it Any help anyone could give me would be greatly appreciated! Thanks! Rob Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks Am trying to solve an annoying IE problem: I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas? The code is: Code: #item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }
|
|||||||