CSS - Firefox Slow/delayed Hover
Hi there,
I'm using a css navigation hover effect that's loosely based on this mark-up: http://css.maxdesign.com.au/listamatic/horizontal23.htm This works fine in opera 8, ie and reasonably well in firefox; but there's a 1 second delay on the firefox hover. I've used this before with success. Not really understanding why/how this could be happening. I should mention I'm using the AlphaImageLoader on an unrelated part of the page. Anyone else have this problem? Possible solutions? Thanks. H. Similar TutorialsI'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution? following is my css code. Code: #navigation { width:160px; font:bold 14px Arial, Geneva, Helvetica, sans-serif; } #navigation ul {list-style: none; margin: 0; padding: 0;} #navigation ul li a {display:block; background:url(button-menu2.png) no-repeat; vertical-align: bottom; font-size:12px; font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px; height: 20px !important; height: 20px; width: 100%; text-decoration: none; color: #ffffff; } #navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;} Hi, I have the following CSS: .class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;} for this javascript/HTML: menu1[0]='<span class="class2"><a href=""> About our trees</a></span><br>' It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good. AAUGH. Happy Thanksgiving to all who are celebrating! Kimber Hi All, I'm pretty confused by this. Work ins IE6 but not in Firefox 1.0.4 I've uploaded the offending page below... http://www.bertucci.net/nwhc/index2.php I moved the relavent CSS into the HTML and commented out the linking sheets. The problem... at seemingly random places the hover properties do not work. On hover, the link should be underlined. Some links will work right, while others do not. I've done many googles and a Dev Shed search with no answers so far, so I'm making a post here for help. The page is a mix of DIV and TABLE elements. I just think it's easier for me to work with. A Side question, is this an 'ok' practice or should sites be designed strictly DIV or TABLE only? (All styles for DIVs are right in the DIV I have not broken them out yet until the design is hammered down). Cheers, Fozzy Long title I know... My problem is that I want a particular style for a link BUT it seems that Firefox has a glitch with it. The css code is: Code: a, a:link, a:visited { color: #000; text-decoration: none; border-bottom: 2px solid #000; } a:hover { color: #28f; border-bottom: 0; } Basically Firefox starts "flashing" the cursor simply just by hovering over the link. It only does this if you hover over the "line" part of the link. Here's an image of what it looks like: You can view this yourself on the page http://www.jasonashdown.co.uk/css_glitch.html I did however find a way around it with css code: Code: a:hover { color: #28f; border-bottom: 2px solid transparent; } http://www.jasonashdown.co.uk/css_glitch_solution.html This works fine in Firefox and Opera without displaying the glitch. BUT now IE won't accept it (putting a Doctype in the file seems to make the bottom-border disappear). Can anybody explain to me why Firefox has this glitch? I couldn't find anything about this problem on this forum or through google. It has been bothering me for months. Many Thanks in advance Im novice to CSS, im makin my first one. I have this problem, i made my class and then i did the a:hover with that class but it is not shown in firefox and opera, works fine in IE. Am i forgetting something? how do i fix? here's my code: Code: body { background-color: #1A1852; background-image: url(../imagenes/fondo2.gif); } .menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #000000; text-decoration: none; } a:menu:link { text-decoration: none; } a:menu:active { text-decoration: none; } a:menu:visited { text-decoration: none; color: #000000; } a:menu:hover { font-weight: bold; text-decoration: none; color: #000000; } .actual { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #000000; font-weight: bold; text-decoration: underline; } .descarga { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFCC; text-decoration: none; } a.descarga:hover { font-weight: bold; text-decoration: underline; color: #FF9966; } .texto { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } .pie { font-family: Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; font-size: 10px; } .titulo { color: #CC66CC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; } .vinculo { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFCC; } .tabla { border-style: dashed; border-width: thin; border-color:#CC66CC; } Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html> Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;} Hi all, haven't had to post for awhile. Need some help! Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want Here's the code... CSS: Code: body { margin: 0; padding: 0; background: url(bodybg.jpg) repeat-x #000; } #header { position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: url(metalpipe2.png) bottom repeat-x; margin: 0; padding: 0; } #leftcontent { position: absolute; top: 110px; left: 0; width: 125px; height: 700px; margin-left: 15px; padding: 0; } /*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/ #leftcontent a { display: block; margin: 0; padding: 5px; font-weight: bold; font-size: 17px; background: #222; color: #C00; font-family: Arial; text-align: center; text-decoration: none; } #leftcontent a:hover { color: lightgrey; border: none; } /*had to add border: none; to make span box work in IE*/ #leftcontent a span { display: none; } #leftcontent a:hover span { display: block; position: absolute; top: 255px; left: 0; width: 135px; margin-left: -5px; padding: 5px; background: #000; color: lightgrey; font-size: 12px; border: 1px solid white; } #midcontent { position: absolute; top: 110; left: 155px; right: 25px; height: 700px; margin: 0; padding: 0; background: #F5F5F5; } #midcontent p { margin: 0; padding: 20px; } HTML: Code: <html> <head> <title>Test Page</title> <link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" /> <style type="text/css"> <!-- #leftcontent a#link1 { color: #C00; background: #444; border: none; padding: 5px; } --> </style> </head> <body> <div id="header"> <img src="x-fire_logo_t4.png" alt="X-Fire logo" /> </div> <!-- end #header --> <div id="leftcontent"> <a href="link" id="link1">Home</a> <a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a> <a href="link" id="link3">Fire Alarm Systems</a> <a href="link" id="link4">Burglar Alarm Systems</a> <a href="link" id="link5">Insurance<br /> Info.</a> <a href="link" id="link6">Contact Us</a> </div> <!-- end #leftcontent --> <div id="midcontent"> <p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p> <p>Could someone tell me what I'm overlooking?...Many Thanks!</p> <p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p> </div> <!-- end #midcontent --> </body> </html> Many Thanks, James I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img { margin:2px 5px 0px 0px; } #content a img, #content a:visited img, #content a:active img { border:2px solid #6FA6D9; } #content a:hover img { border:2px solid #ffffff; } This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code: .g2image_float_left { display:block; float:left; } .g2image_float_right { display:block; float:right; margin-left:5px; } Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * { margin:0; padding:0; } #nav { list-style:none; position:relative; } #nav li { float:left; text-align:center; } #nav a { display:block; text-decoration:none; } #nav a:active, #nav a:focus, #nav a:hover { background:#254563; } /* --------- Sub Nav --------- */ #nav li.current ul { left:0px; } #nav ul { position:absolute; left:-999em; list-style:none; padding:0 0 0; width: 500px; } #nav ul li { width: auto; margin: 3px 3px 0 0px; } #nav ul a { font-size: 12px; height: auto; padding: 5px 10px; background: #dfeec9; border-radius: 8px; -moz-border-radius: 8px; width: auto; } #nav li:active ul, #nav li:hover ul { height: 30px; left: 10px; position: relative; padding: 0px 3px 5px 3px; background: none; width: 500px; } .navi01 { display: block; padding-top: 0px; padding-left: 0px; width: 33px; height: 44px; text-decoration: none; background: url(images/navi_01.png); } .navi02 { display: block; padding-top: 0px; padding-left: 0px; width: 133px; height: 44px; text-decoration: none; background: url(images/navi_02.png); } .navi03 { display: block; padding-top: 0px; padding-left: 0px; width: 86px; height: 44px; text-decoration: none; background: url(images/navi_03.png); } .navi04 { display: block; padding-top: 0px; padding-left: 0px; width: 83px; height: 44px; text-decoration: none; background: url(images/navi_04.png); } .navi05 { display: block; padding-top: 0px; padding-left: 0px; width: 92px; height: 44px; text-decoration: none; background: url(images/navi_05.png); } .navi06 { display: block; padding-top: 0px; padding-left: 0px; width: 82px; height: 44px; text-decoration: none; background: url(images/navi_06.png); } .navi07 { display: block; padding-top: 0px; padding-left: 0px; width: 30px; height: 44px; text-decoration: none; background: url(images/navi_07.png); } HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> 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! Hello I have a serious problem with the speed of my website. Try: URL and wait........ for about 2 or 3 minutes!!! I am using the command include() four times on this site, it includes templates from the same site. I also use CSS in a separate file using LINK REL="" blah blah ... And now it goes sooo slow. Could someone tell me what could be the cause of this, or ask me what you need more to judge this problem. I thought myself it could be the border element in CSS because an other site works fine with this. Any help would be greatly appreciated! I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px: Code: #navlist2 a { width: 168px; /* extend the sensible area to the maximum with IE5 */ display: block; text-align: left; text-decoration: none; color: #fff; margin-top:5px; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; font-size: 12px; font-weight: bold; } #navlist2 a:visited { } #navlist2 a:hover { width: 163px; border-left: 5px solid #fff; border-right: 5px solid #fff; padding-left: 5px; } It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it? hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a { margin-left: 8px; margin-right: 8px; margin-bottom: 0px; margin-top: 4px; padding: 3px; text-decoration: none; width: 170px; float: left; background-color: #3A628A; color: white; font-family: arial, verdana, sans serif; font-size: 11px; } #links a:hover { text-decoration: none; background: #0A2F54; } that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links"> <a href="http://rollinlow54.com/">galleries (18)</a> <a href="http://rollinlow54.com/">site statistics</a> <a href="http://rollinlow54.com/">download my resume (pdf)</a> <a href="http://rollinlow54.com/">contact information</a> <a href="http://rollinlow54.com/">visit company site</a> </div> there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? I'm using CSS for style and positioning. I have this information in my style.css file. I import the file into my html file with this code: PHP Code: <head> <style type="text/css" title="currentStyle"> @import "style2.css"; </style> </head> When calling the page with the MS Internet Explorer, it first writes all the text out unformatted and then it applies the format. I know it does it this way because I can see it. It is too slow. Sometimes, it's just a flash, other times it's a whole second or two. Regardless, I don't even want to notice the flash from unformatted to formatted. I notice that other pages don't seem to do this. How do I accomplish this? What am I doing wrong? Hi All, I have a new site and it has a bug that I don't know how to fix. The navigation and sub navigation is done with a list that is styled with CSS to be horizontal. I am not an expert at this, but learned it from a site, but unfortunately can't remember where The thing is, the site works most of the time. But when pages load slow, sometimes the list gets displayed as a normal vertical list and the entire "look" of the navigation is ruined. I'm sure I've done something wrong, but I don't know what. Are there any CSS experts here who can set me straight? The site is http://www.thehousebreakingbible.com/training/index.htm Thanks for your time, Dana I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I know this has been discussed loads. And I have read a tonne of articles telling people it cannot be done in pure CSS. But I wanted a little clarification. I want a hover: over a <tr>. Now Im not fussed if it doesn't work in IE5/6 even 7 (although obviously it would be nice!) its a little feature to help users. My app is internal, so as long as the CSS doesn't break the page, then IE users just wont get the hover, while others will. This is what I have: .result_lines{ background-color:#EAEAEA; } .result_lines tr:hover{ background-color:#666666; color:#FFFFFF; } Now, having not done this, I wasn't even sure if the order of my syntax was correct, so a little direction would be perfect. Note: I don't want to use JS. I have the following css Code: #navigation li { display: inline; background: url(Images/greenbg.gif) repeat-x center top; text-align: center; padding: 0; margin-right: 4px; float: left; } for the following html Code: <div id="navigation"> <ul> <li><a href=""><span>Menu1</span></a></li> <li><a href=""><span>Menu2</span></a></li> <li><a href=""><span>Menu3</span></a></li> <li><a href=""><span>Menu4</span></a></li> <li><a href=""><span>Menu5</span></a></li> </ul> </div> <br style="clear: both" /> and I can't figure out how to get the background to change when I hover. Anyone have any ideas? I tried this to no avail Code: #navigation a:hover li { display: inline; background: url(Images/greenbghover.gif) repeat-x center top; text-align: center; padding: 0; margin-right: 4px; float: left; } |