|
CSS - Firefox Css Bug Div Flickers Out Of Place On Link Rollover
I have had this bug in another web I built. I use a centered fixed layout with a relative positioned container and floated divs inside.
In Firefox, when I rollover on a link in the menu the contents of some divs show over all content as if they where triggered by the rollover. I have no idea why this happens. Please check this link and rollover the links on the left column to see the bug. You'll see how the comments show again over themselves and the rest of the content. Very weird! Thank you! Similar TutorialsHello CSS Readers & Experts, I have a very common problem that Ive done some searches on, but yet to find the solution. My Image Rollover flickers. You can view this problem at www.clickcolumbia.com/onlinecommunity im guessing it has somethin to do with my css, heres the code a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ffffff; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; } a.mainlevel:hover { background-position: 0px -25px; text-decoration: none; color: #333333; } Please help I am trying (with no luck) in trying to add a style ( a link in another color and size) to the bottom of my page but I already have a a: link up top. I will post the code below: a:link { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; padding-top: 4px; text-decoration: none; The "other" link I want to change below: .freshlink { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #999999; text-decoration: underline; } .freshlink a:link {color: #009900; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline;} .freshlink a:visited {color: #999999;} thank you very much for any help on this. /df When I view my Dreamweaver CS4 html page on Firefox, the AP elements I used on it are not viewing properly. They are getting bumped down a bit and thus misaligning with other elements on the page. Any suggestions? Thanks. OK, I've made this work in the past with no problem, but for some reason, I can't figure out this simple snippet of css for a navigation rollover with an image. Here's my code: Code:
a.creative_development{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title.gif');
}
a.creative_development:hover{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title_on.gif');
}
I've checked the paths, folder name, and image names, but it's not working. Can someone see what I'm doing wrong? thanks Hi everyone, I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears. I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers. Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site... spotabusiness dot com/new_spota1 (I apparently can't add URLs yet) I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly. Site URL is http://www.updatetechnology.ie here is the code i have for these links: <TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD> and the corrseponding css class: .grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff; } .grey A{ COLOR:#ffffff; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; font-variant: normal; text-transform: none; } .grey A:HOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none } .grey A:MOUSEOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE } In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined.......... has anyone come across this before?? and if so is there a solution out there. Thanks Hi, I'm developing a childrens story website, and ran into a problem with the layout in Firefox. Everything worked perfectly on my local server, but after I uploaded it to my hosting account I came across a strange problem. When I first go to the homepage everything looks, and works, fine. And if I refresh the page a few times, it still all looks fine. But if I click on the "Home" link a few times the whole layout breaks on every 3rd or 4th click of the home button. You can see the design at http://develDOTstephenhmDOTcom/bedtime/index.php. (Sorry for the link, but it's my first post and I can't add urls yet) This problem doesn't exist in IE7, just Firefox as far as I can tell. I know the rest of the sites layout is a bit messed up in IE7 at the moment, as I haven't gotten around to adding the IE7 only css info yet. I'm sure it's a stupid error on my part, but I was hoping somebody could point me in the right direction. Thanks a lot in advance to anyone who can help. For the image rollovers the basic html for each one is: <a class="happylarry" href="happylarry.php"> <div class="image_text"> Happy is an Irish Leprechaun who lives in the left-hand pocket of your child.<br /><br />And of course his real name is not 'Happy'. His real name is 'Larry'. But Larry Leprechaun is such a happy little fellow, and he gets up to so much mischief, that all of his friends and family call him 'Happy Larry'. </div> </a> and the relevant css is: a.happylarry { display: block; float: left; min-width: 222px; width: auto!important; width: 222px; height: 524px; background: url('images/happylarry.png') no-repeat 0 0; text-align: center; margin-right:13px; text-decoration:none; } a.happylarry:hover { background-position: 0px -524px; } .image_text{ color:#FFFFFF; max-width:180px; margin-left:25px; *margin-left:0px; margin-top:250px; text-align:left; font-size:12px; font-family: Arial, Helvetica, sans-serif; } Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>
<body>
<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>
</html>
The css menu I have here on my site flickers when the mouse is moved from a parent category to the sub page menu. For example, if I hover on 'The Academy' link and move to the drop down menu, the sub menu disappears for a second. Any ideas how I can remedy this? http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hi, im having problems with disjointed rollovers. It works fine in explorer but wont work in firefox. It seems to be about 10px lower in firefox. Someone please help!!!!!!!! Go to mediahost.aib.ac.uk/fdashow07/gibson/louise/coast.php to see the page im having truble with. This is my html code of the dis jointed rollovers, <div class="projtitle"><h1>Coast, 2007</h1></div> <div class="thumbnailscolumn"> <a class="thumbnail" href="coast.php"><img src="images/cliff1_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff1.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff2_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff2.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff3_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff3.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> <a class="thumbnail" href="coast.php"><img src="images/cliff4_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff4.jpg" border="none"/> <div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a> </div> This is my css, .projtitle{ float: left; width: 800px; height: 20px; padding-top: 27px; } .thumbnailscolumn{ float: left; padding-top: 0px; width:100px; height: 456px; margin-top: 24px; } .thumb{ margin: 0px 5px 5px 0px; } .thumbnailtwo{ margin: 0px 5px 5px 0px; } .thumbnailtwo:hover{ background-color: transparent; } .thumbnailtwo span{ position: absolute; visibility: hidden; text-decoration: none; } .thumbnailtwo:hover span{ top: 206px; visibility: visible; left: 610px; } Thanks Sam Hi, I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue. The HTML is as follows: <div id="db-overlay-popup-box" class="overlay-popup-box"> <div id="database-list-popup"><form>....</form></div></div> The CSS used for the div elements is given below. #db-overlay-popup-box { min-height: 200px; height: 400px; position: absolute; width: 40%; margin-left: 30%; top: 15em; border: 2px solid #3282b6; z-index: 999; padding: 10px; background-color: #fff; } #databaselist-databases { list-style-type : none; clear: both; overflow: auto; position: absolute; width: 90%; margin-left: 1em; padding-left: 1em; right: 1em; white-space: nowrap; } .overlay-popup-box { position: absolute; z-index: 999; width: 40%; margin-left: 30%; border: 2px solid #3282b6; padding: 10px; background-color: #fff; } Let's say I have this code: Code: <a href="test.html">underline <span style="text-decoration: none">don't underline</span></a> In IE this will not underline the span. In Opera 9 and Firefox 1.5 it will underline the span. Why? Any way to get around this? Hi! Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work! Its a little strange! Output at www.generating-sets.com Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly). CSS below: PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:160px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} Hi there. I have a blank space that appears as a link when my animated T-R MENU button is clicked. Click here to view the problem It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way. Opera, Safari and IE view it fine. Just FF3 that's doing it. Can anyone shed some light on why it's doing this or how to fix it? Thanks in advance. The problem: a link appears in the color i have set in IE, but in other (probably the default one) color in FireFox the explanation of the situation: attachment 1 that's how it looks in FireFox attachment 2 that's how it looks in IE, and the way it should look! cause that's the color i have set in the css file here is the code from the css file Code: A {
color: #D9E0EF;
text-decoration: underline;
}
A:HOVER {
color: #D9E0EF;
text-decoration: none;
}
here is the code around the link from the screenshots Code: <p align="center"><b><font size="7"><a href="index.php?p=join/index">JOIN</a></font></b></p> where may be the problem which doesn't allow to FireFox to see that there is set color for the links? 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 SO my site is starting to get somewhere and I am starting to test it on all browser and I already found a couple problems while looking at it through firefox and fixed some of the problems but there is still the issue of the link font is not working. I set the size on the font family and yet it is looking all ugly. You guys can view by going to this page. http://www.paragliderworld.com/flyingsites.php and then select places untill you get to the viewing page. Please let me know what is wrong with this. Here is the link to my style sheet http://www.paragliderworld.com/style.css Nick hi, i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ). I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links. i.e. a:visited {.......normal behaviour and a.actuator:visited {.......no changes to appearance this works fine in firefox (gotta love it!) but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!) any ideas? many thanks, jim. I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further: Many thanks Robert ______________________________ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content="test" content="test"> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" /> <link rel="stylesheet" href="testcss.css" TYPE="text/css"> </head> <body topmargin="0"> <div align="center"> <table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50"> <span class="menu"> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td> <td width="41" align="center" bgcolor="#243348" height="50"> <p align="center"><a href="item8.htm">item8</font></a></td> </span></table> </div> </body> ______________________________ .menu a {text-decoration:none; font-family: arial; font-size: 10pt } .menu a:link {color:#FFFFFF; } .menu a:visited {.color:#FFE2A8; } .menu a:hover {color:#FFE2A8; } .menu a:active {.color:#FFE2A8; |
|||||||