CSS - Hover Effects Aren't Working Correctly.
Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing.
I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css Similar TutorialsHello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. 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 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, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. Here's the site: http://www.whitecapgraphics.com/APP/index.php Here's the CSS: Code: @import url("shadows.css"); * {margin:0; padding:0;} body { background-image:url(images/background.gif); color:#450109; behavior:url(scripts/csshover.htc); width: 100%; } img { behavior:url(scripts/pngbehavior.htc); } img#yap { width:167px; height:145px; border: 0; } a { color:#D6970C; text-decoration:none; font-weight:bold; font-variant:small-caps; font-family:Georgia, "Times New Roman", Times, serif; font-size:.9em; } a:visited { color:#D6970C; text-decoration:none; font-weight:bold; font-variant:small-caps; font-family:Georgia, "Times New Roman", Times, serif; font-size:.9em; } a:hover { color:#450109; text-decoration:underline; } a:active { color:#450109; text-decoration:underline; } div#main { background-color: #FFFFFF; margin: auto; border-width: 0px 5px 0px 5px; border-style: solid; border-right-color: #450109; border-left-color: #D6970C; border-bottom:15px solid #450109; min-width:980px; width: 95%; width: expression((documentElement.clientWidth < 1000) ? "980px" : "95%" ); } #main #logo { background-image:url(images/headerbg.gif); background-position: top center; background-repeat:no-repeat; background-color:#71001E; } #logo #logoimage { text-align:center; margin:auto; margin-left:193px; } #main #leftflourish { float:left; } #main #rightflourish { float:right; } div#navigation { background-color:#400000; float: right; margin: 0; width: 100%; min-height: 24px; border:0; } div#navigation ul { margin-left: 193px; padding-left: 5px; padding-right: 5px; background-image:url(images/logob.jpg); background-position:center; background-repeat:no-repeat; } div#navigation ul li { float: left; list-style-type:none; width: 25%; position: relative; z-index:99; } div#navigation a { text-decoration:none; font-variant:normal; color: #DFCDB6; text-align:center; display: block; width: 100%; line-height: 25px; font-family: serif; font-size:1.1em; font-weight:normal; letter-spacing:-.05em; } div#navigation a:hover { color: #FFCC00; } div#navigation ul li ul { width: 90%; padding: 0; margin:0; margin-left:5%; margin-right: 5%; position:absolute; display: none; background-image:url(images/uldropback.jpg); background-position:bottom; background-repeat:no-repeat; background-color:#DAC4A5; } div#navigation ul li ul li { width: 100%; background:transparent; background-image:url(images/lidropback.jpg); background-position: left center; background-repeat:repeat-y; } div#navigation ul li ul li a{ color:#660000; background-image:url(images/adropback.jpg); background-position:right; background-repeat:repeat-y; line-height:1.8em; } div#navigation ul li ul li a:hover{ color:#71001E; font-weight:bold; text-decoration:underline; } /* shows drop down on hover */ div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;} div#lcolumn { width: 190px; float: left; margin: 0; padding: 0; position: relative; top: -66px; z-index:999; } div#lcolumn ul{ padding:0; margin-bottom:2em; } div#lcolumn ul li { list-style-type:none; text-align:center; width: 167px; margin-bottom: .1em; background-image: url(images/yapdropback.jpg); background-color:#660000; background-repeat: repeat-y; } #main #body #lcolumn ul li a { color:#DFCDB6; text-decoration:none; font-family: Georgia, "Times New Roman", Times, serif; font-size:.9em; line-height: 24px; letter-spacing: -.02em; font-variant:small-caps; margin: 0; } #main #body #lcolumn ul li a:hover { color: #ffcc00; } #main #body #lcolumn #featureContent { padding-top: 114px; background-image: url(images/featurestitle.jpg); background-repeat: no-repeat; width: 190px; } #main #body #lcolumn #featureContent div{ padding-right: 30px; padding-left:10px; background-image:url(images/featuresback.jpg); background-repeat:repeat-y; color:#FFFFCC; } #main #body { background-image:url(images/chaser.jpg); background-position:bottom right; background-repeat:no-repeat; position: relative; margin-bottom:3em; /*1.25 + 1.75*/ clear:both; height: 100%; } #main #body #content { padding-left: 210px; /*fix for IE - it's including from side of L Column*/ position: relative; top: 48px; z-index:1; padding-bottom:200px; } #content img { border: 1px solid black; padding: 5px; margin: 0px 10px; } h1 { font-family: "Times New Roman", Times, serif; font-size: 1.3em; line-height:1.1em; text-transform: uppercase; color: #350000; width: 50%; } #main #body #content div ul li { float: right; list-style-type:none; padding-left: 2%; line-height:2em; display:block; font-weight:bold; font-size:.9em; } h2 { position:relative; width: 98%; background-image:url(images/navback.jpg); background-repeat:repeat-x; padding-top:1%; font-family: "Times New Roman", Times, serif; font-size: 1.2em; text-indent: 2em; padding-bottom: 1.5em; } #main #body #content div ul { width: 46%; position: absolute; top: .2em; right:0; padding-right:4%; } h1:first-letter { font-size: 1.7em; } div#h1line { background-image:url(images/divider.gif); background-position:right; height:65px; width: 97%; } h3 { font-size: 1.2em; padding-left: 4%; } h4 { font-size: 1em; font-weight:bold; padding-left: 6%; line-height:1em; font-family:Georgia, "Times New Roman", Times, serif; } .h3line { background-image:url(images/smdivider.gif); background-position: top right; background-repeat:no-repeat; min-height: 2em; } hr { color:#660000; margin-left: 4%; width: 90%; } #content p { padding: .5em 20px 1.5em 2%; margin: 0 8% 0 4%; font-family:Georgia, "Times New Roman", Times, serif; } ul.contentlist{ padding: 0px 20px 1.5em 2%; margin: 0 8% 0 4%; font-family:Georgia, "Times New Roman", Times, serif; } p.center { text-align:center; } table { width: 80%; font-family:Georgia, "Times New Roman", Times, serif; } form table { padding-left:6%; margin-bottom:1.5em; } form td { font-weight:normal; } td { font-weight:bold; } .right { text-align:right; padding-right: 2%; width:59%; } div.table { top: -1.5em; width:auto; position:relative; } div.iframe { display: block; width: 92%; margin-left: 4%; height:60em; } span.leftcell{ display:block; width:47%; text-align:right; float:left; padding-right:1%; font-family:Georgia, "Times New Roman", Times, serif; } span.rightcell{ display:block; width:49%; float:left; text-align:left; padding-left:1%; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; } span.question { font-weight:bold; } span.package { width:55%; float: left; } #main #footer { text-align: center; position:relative; top: -1em; padding: 0 3% 0 3%; } div#logoBottom { border:0px; padding:0; margin:auto; text-align:center; } /* Hack Zone - KILL INTERNET EXPLORER! & Aslett Clearing */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* backslash hack hides from IE mac \*/ * html .clearfix {height: 1%;} * html #main #body #content {padding-left:10px;width:80%;} * html #main #body #content div ul { top: .6em; } * html a:hover {text-decoration:underline;} * html #main #body #lcolumn ul li a { font-size: .8em; } * html hr { text-align:left; } * html div#h1line { width:98%; } .clearfix {display:block;} /* end backslash hack */ I have two little questions. One, the logo is divided into three parts, and they just don't seem to be lining up correctly. I think they should be right though? Can anyone see why? Second, I found some CSS styling that is supposed to provide a text shadow in any browser. I'm using it because the text for the main links is blending in too much with that background bit. It works in IE6, but it doesn't seem to be working for Firefox, where it's supposed to be using :before I think. I'm unable to test any other browsers except IE7 which I just haven't yet. Here is the attached shadows style sheet code: Code: /* CSS Document */ /* default setup that everything sees */ .shadow { /* needed for Internet explorer */ height: 1em; filter: Shadow(Color=#666666, Direction=135, Strength=5); /* Needed for Gecko */ line-height: 2em; white-space: nowrap; } /* * used by browsers which know about * :before to create the shadow */ .shadow:before { display: block; margin: 0 0 -2.12em 0.15em; padding: 0; color: #666666; } #shadow_1:before { content: 'In shadow'; } #second_2:before { content: 'Happy Shadowing!'; } /*\*/ html*.shadow { [color:red;/* required by Safari * so that [] is correctly * begun. associated with * the property, yet hiding * it. Seen by IE6 */ /* * seen by IE6 and Safari, but hidden * from Gecko */ text-shadow: #666666 5px 5px 5px; ]color:auto; /* resets color for IE6 */ }/**/ /* * end hack using dummy attribute selector * for IE5 mac */ .dummyend[id]{clear: both;} /*\*/ html*.shadow:before { [color:red;/* required by Safari. seen by IE6 */ /* * seen by IE6 and Safari, but hidden * from Gecko */ display: none; ]color:auto; /* resets color for IE6 */ }/**/ /* * end hack using dummy attribute selector * for IE5 mac */ .dummyend[id]{clear: both;} Any assistance is of course greatly appreciated. Thanks! I need to put tables in my website that I am designing but thought about using css instead. The tables I wanted were similar in design to these ones :http://www.visionman.com in the middle of the page (about 300px down) but I wanted them to change color when the mouse pointer goes over them also. I would appreciate someone showing me how to do this please. I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code: <ul> <li>About Us</li> <ul> <li><a href="#">Locations</a></li> etc..etc..etc.. Here is the css: Code: /*Begin Content of drop down menu*/ a { outline:none; } * html div#dropdownmenu ul { float: left; } * { margin: 0; padding: 0; } div#dropdownmenu { float: left; background-color: #C8C6C6; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; } div#dropdownmenu ul li { list-style-type: none; float: left; background-color: #000000; position: relative; } div#dropdownmenu ul li:hover { list-style-type: none; background-color: #000000; } /*Hides drop downs when not overed over and reveals them when they are hovered over.*/ body div#dropdownmenu ul li ul { display: none; } body div#dropdownmenu ul li:hover ul { display: block; } div#dropdownmenu ul li ul { margin: 0; width: 13em; position: absolute; left: -1px; } div#dropdownmenu ul li ul li { width: 100%; background-color:#bdb35e; color: #660000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; padding: 3px; } div#dropdownmenu ul li ul li:first-child { border-top: 1px solid #000; } div#dropdownmenu ul li ul li:hover { color: #FFFFFF; background-color: #000000; } div#dropdownmenu ul li ul li a { color: #660000; text-decoration:none; outline: none; } div#dropdownmenu ul li ul li a:hover { color: #FFFFFF; background-color: #000000; text-decoration:none; outline: none; } div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover { display: block; } Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! I can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/. I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time?? Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css Please help! Hello everyone, Thanks in advance for any help you can offer. I have a single page for a site I'm creating located he simplethoughts.com/test/index.html The css file for the page is located he simplethoughts.com/test/css/screen.css The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why. Thanks again for any help...it's extremely appreciated! -Neil Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code: <div id="searchbox"> <h2 id="searchbox_header">Browse Bus Rates and Amenities</h2> <p style="padding-left: 5px; ">Search by Bus Type:<br /> <select name="bustype"> <option selected value="">All Bus Types</option> <option value="1" >Deluxe Motor Coach</option> <option value="7" >Double Decker</option> <option value="4" >Entertainer</option> <option value="5" >Executive</option> <option value="9" >Limo Bus</option> <option value="2" >Minibus</option> <option value="3" >School Bus</option> <option value="0" >Tour Operator</option> <option value="6" >Trolley</option> <option value="8" >Van</option> </select></p> <p style="padding-left: 5px; ">Departure State / Province:<br /> <select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option> </select></p> <p style="padding-left: 5px; ">Departure City / Metro Area:<br /> <select name="city"> <option value="">Entire State</option> </select></p> <div id="searchboxrightcol"> <p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p> <p>Browse local rates & inventory. Locate specific bus types</p> <p><a href="#">Search</a></p> </div> <div id="searchbox_footer"> <p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p> </div> </div> CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } I am using a transparent png file for a background, obviously this will not work in IE so I am using the AlphaImageLoader hack. Unfortunately I am not sure why but the results are not as expected. Here is my CSS: PHP Code: .wrap[class] { margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.png); text-align: left; } * html .wrap { height:100%; padding-bottom: -20px; margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/content_bg.png'); text-align: left; } The first attachment is IE and the second is Firefox (the correct one). I can't seem to find out how to solve this. Some reason, the body/html/whatever the hell IE uses as its root, doesn't auto-expand past 100%, meaning vertical scrolling can't occur. What could be going wrong here? Attached is html and css, the relevant css is at top, and is readable, the unreadable css isn't relevant Hello, I'm having a problem getting my drop-down to appear in IE7. Works in IE8. Any suggestions? http://www.mo-pca.org Thanks, -Jamie 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; } 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. i am having trouble with a hover button. it works fine in just an HTML page but when i put it on a CSS & php page nothing happens when i hover over it can anyone advise me on how to resolve this please.....thank you here is the code i am using for the button.... Code: <a href="productinfo.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Add Button','','images/buttons/infoover.jpg',1)"><img src="images/buttons/info.jpg" name="Add Button" width="32" height="31" border="0"></a> Thanks in advanced to any replies RF I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan Hi, I am trying to make a dropdown menu by using only CSS and no Javascript. Here is my HTML Code: <ul id="nav"> <li> <a href="/family-flowers.html"><span>Family Flowers</span></a> <ul> <li> <a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a> </li> <li> <a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a> </li> <li> <a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a> </li> <li> <a href="/family-flowers/new-baby.html"><span>New baby</span></a> </li> </ul></li> <li class="level item-2 nav-congratulation"> <a href="/congratulation.html"><span>Congratulation</span></a> </li> <li class="level item-3 nav-corporate"> <a href="/corporate.html"><span>Corporate</span></a> </li> <li class="level item-4 nav-get-well"> <a href="/get-well.html"><span>Get Well</span></a> </li> <li class="level item-5 nav-love"> <a href="/love.html"><span>Love Bouquets</span></a> </li> <li class="level item-6 nav-mixed"> <a href="/mixed.html"><span>Mixed</span></a> </li> <li class="level item-7 nav-monthly"> <a href="/monthly.html"><span>Monthly</span></a> </li> <li class="level item-8 nav-funeral"> <a href="/funeral.html"><span>Funeral</span></a> </li> <li class="level item-9 nav-window"> <a href="/window.html"><span>Window plants</span></a> </li> </ul> and this is my CSS Code: #nav { list-style:none; margin:0; padding:0; width:150px; } #nav li ul { position: absolute; left: 149px; top: 0; display: none; } #nav li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */ #nav li:hover ul { display: block; } everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover. can anybody help with this please? thank you very much [edit] in fact it is working in FF but not in IE [/edit] 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 >< |