|
CSS - Images Are Disappearing On Hover, Not Standard Solution
So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc.
My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? Similar TutorialsOk, Normally I have no problem centering divs, but somehow I cannot get this to work. I have the following code: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; } </style> </head> <body> <table width="800" border="1"> <tr> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> </tr> </table> </body> </html> It creates a CSS dropshadow and border around the image. That is working perfectly, but on my thumbspage I'd like to have three per row, neatly centered within the table cell. Because of the float:left; it won't center. Obviously removing the float:left; will mess up the drop shadow, so I am looking for another solution. Wrapping it in another div and center it, won't work as well. I am probably overlooking the obvious here, but I cannot see it. Can someone help me out here? Cheers, Ronald I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? Here's an odd behavior, and the last on my hit-list for this design. IE5/Mac (not extremely high on my compatibility needs list) is doing something strange: the nav links (which are bitmaps that utilize Petr Stanicek's Fast Rollovers Without Preload technique) are disappearing - god knows where - but only on the bottom row. The top row works great... The strange thing is, I figured it was the :hover, so I used the Sam Foster commenting hack to hide the :hovers. This worked, the hover effect was not read. But the bottom row vanishes anyway. If you have an IE5/Mac build handy, check it out: Website Template: http://www.spearsphotography.com/test_index.html CSS File: http://www.spearsphotography.com/css/style.css Again, I'm not concerned about fixing it, but it's a really strange behavior I haven't encountered before and my forum searches were unfruitful. I figured I would document the oddity in case someone else has the another piece of the puzzle. -- Aiden In IE7, the list <ul> is present on pageload, but once you go mouse over it, it disappears. The hover works fine in FF and IE6. I don't think the system matters, but my testing is IE6, and FF on XP and IE7 is on a Vista machine. I've searched all over for a fix to this problem, but all I've been able to find are some issues with IE7 on <ul> lists and whitespace. My CSS is not great and some of the fixes talked about a hasLayout() set to true - which I don't know how to do - or if I was just reading that wrong. I know the issue is with the hover - because when I remove the css for the hover - it works fine and does not disappear. On a side note - if I'm on IE7 and I go into Internet Options and just click in and out - the page works fine. (Crazy MS). Code: <style type="text/css">
ul#listmenu
{
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
/** unordered list item for top menu **/
ul#listmenu li
{
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
width: auto !important;
font-size: 14px;
line-height: 23px;
white-space: nowrap;
}
/** unordered list item link for top menu **/
ul#listmenu li a
{
padding: 0 17px 0 10px;
width: auto;
text-decoration: none;
color: #FFFFFF;
font-size: 14px;
background: url(../images/bullet_menu.gif) 0 6px no-repeat;
}
ul#listmenu li a:hover {
background: url(../images/bullet_menu_over.gif) 0 6px no-repeat;
text-decoration:none;
color: #FFA820;
}
table.tabletop {
margin: 20px 0 0 20px;
width: 100%;
}
</style>
<!-- start image header -->
<div style="position:relative; float:left;clear:left;width: 768px;height: 243px;background: #FFF;background: url(../images/banner.jpg) 0 0 no-repeat;">
<table cellpadding="0" cellspacing="0" class="tabletop">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td nowrap="nowrap">
<ul id="listmenu">
<li>
<a href="somelink.php" class="listmenu" >About Us</a>
</li>
<li>
<a href="somelink.php" class="listmenu" >Operations</a>
</li>
<li>
<a href="somelink.php" class="listmenu" >Customers</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- end image header -->
I've got navigation images disappearing in IE. I've looked at bugs and workarounds, but I can't work out what's going on. I'm very much a newbie at this, so I'm prepared to be roundly mocked for being a numpty Having tried with deleting and replacing some code, I think that the trouble might be with this bit of CSS Quote: div#leftcontent img {height: 7%; width: 200px; border-width: 0; background-color: #ecfffd; color: #000000;} div#leftcontent a:visited img {background-color: #EDEDED;color: #000000;} div#leftcontent a:hover img {background-color: #FF9; color: #000000;} I'm assuming, because if I put in some plain text with this CSS Quote: div#leftcontent a:hover {background-color: #FF9; color:#3300FF;} I get the effect I want with the images (and that I get fine in Firefox) Images will not appear in my leftcontent div at all; they're sized appropriately, and show up fine in the rightcontent div. All CSS and HTML validated, works great in Firefox etc. Thanks for any pointers! I am currently designing a website using CSS and I have a peculiar problem where some images are appearing and then disappearing in IE6. They are showing up fine in IE7 and Firefox. The image in question is not a background image. On another page I am using background images for bullet points and the first two on the page are appearing. The third appears and then disappears. This is only when viewing in IE6 and it is only happening with these two particular pages. The thing they have in common is both are running the body ID "page8" and each image that vanishes represents the last image in the content area. Can anyone shed any light on this for me? I figure it has to be a stylesheet problem with a peculiarity in IE6 for which I would need to write around it. Question is what am I suppose to write around? Code: http://lakesideint.server266.com/about/getting_here.php is the page where the image disappears. Code: http://lakesideint.server266.com/business/index.php is the page where the one bullet point appears and disappears. Cheers Terry Help please. When I add the extra <div> the background disappears. Background image appears behind "Testing" <body> <div id="siteinfo"> <div id="fullinfo"> <h1>Testing</h1> </div> </div> </body> Background image disappears <body> <div id="siteinfo"> <div id="fullinfo"> <div id="myinfo"> <h1>Testing</h1> </div> </div> </div> </body> Stylesheet entries: body { background-color: #DADADA; background-image: url(/background2.gif); background-position: center; background-repeat: repeat-y; } #siteinfo { position: relative; margin-right: auto; margin-left: auto; width: 800px; } #fullinfo { position: relative; top: 10px; padding-left: 0px; padding-right: 25px; } #myinfo { position: inherit; float: right; width: 600px; } All help appreciated. Hi, currently the css is set up to display a grey box behind whatever is rolled over...i would like to make it so that doesn't apply to images, kinda looks wonky. Here's the site, you'll see what i'm talking about, and the css code follows; Code:
.borders {
border: 1px solid #666666;
}
.footer {
border: 1px solid #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #333333;
}
.prodborders {
border: 1px dotted #999999;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
.headtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
font-weight: bold;
}
table.menu {
border:1px solid #666666;
background:#FFFFFF;
}
table.menu a, table.menu a:link, table.menu a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:12px;
color:#333333;
text-decoration:none;
}
table.menu a:active, table.menu a:hover {
color:#333333;
background:#CCCCCC;
}
.noborder {
border:0px;
margin-top:0px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 92px;
border-bottom: 1px solid #666666;
backgound-image: url(images/no-pic.gif);
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 91px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #CCCCCC;
background: #FFFFCC;
padding: 5px;
border: 1px solid #666666;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block;
}
Thanks! if i want style changes for text links, but not image links, how would it work? a:hover { mystyle } img a:hover { otherstyle } a img:hover { otherstyle } ..neither of these work A few people seem to have had the problem of the a:hover not working right in ie when applied to images. Mine is just applied to a standard bit of text. In my menu (CSS only, no javascript) the descriptions are "display:none" in the initial "a" state and then "display:block" in the a:hover state. Works in Firefox, but not ie. Any ideas? My page is at www.prioritypie.f2s.com/KSA/about.htm You can see the CSS by clicking on the first link on the left hand side of the page. Thanks to anyone who can take away the pain and swearing of the last couple of hours. what on hover effects for images CSS alows? for example can i make the image to turn in black and white on hover? or add a border? Hi, I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab). It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu. I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work. My CSS is: /* this is the bar where the menu is located */ .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } /*holder for the menu */ div.navigation { margin-left:30px; padding-top:10px; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { display: block; padding: 0px 20px 0px 10px; display: inline; height:2.19em; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; } .navigation ul li a:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; } I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync. I tried this altrnative code, to no avail: .menuholder { width:1001px; height:2.19em; background-color:#0f2763; } div.navigation { margin-left:30px; padding-top:10px; height:2.19em; } .navigation ul { list-style-type: none; position: relative; float: left; } .navigation ul li { padding: 0px 20px 0px 10px; display: block; float:left; height:2.19em; } .navigation ul li:hover { color:#0f2763; background-image:url(/images/menutab.gif); width:100px; height:2.19em; background-repeat:no-repeat; } .navigation ul li a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold; line-height:18px; width:100px; height:2.19em; text-decoration:none; display: inline; } Any ideas or pointers gratefully received! why won't this work on internet explorer a:hover img { }. This is exactly what i'm using, it works on firefox but doesn't work on IE. You can see it in action here. Code:
a:hover img { border: 2px solid #fff; }
Hi all, Erm, when you load a site, and then mouseover something, (css hover) the image, depending on the size, will not load straightaway, but perhaps after a .5 second flash, which makes it look a bit ugly. Does anyone know how to make the page load all the images, without having to mouseover first? Thanks! Robin I thought that setting properties for a and a:hover like this: PHP Code: a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; text-decoration: none; border-bottom: 1px dashed #960000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-bottom: 1px dashed #FFFFFF; } would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as: PHP Code: a.nav { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types? I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html. Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it? Thanks. C how is that some websites can make the standard toolbar and the address bar disappear upon entering the website I downloaded a pre built template (which I never do but I needed something fast) and after validating the website I noticed they used a lot of standard tags like figure, header, footer, and article. The validator does not like that one bit. Please see he Validator Is there a way around this as far as adjusting the doc type or anything? Will this at all hurt SEO rankings? Thanks! Hi, I was wondering if it is possible to make a div, where only the images have a margin. How would I do that ? Can anyone help me thx! greez Hi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. |
|||||||