|
CSS - How Can I Remove The Hover Flickering In Ie?
I created this code for document lists, and have recently been trying to tighten up my code.
But one issue I cannot figure out, is how to fix the flickering I get when viewed in IE. The flickering doesn't happen in Firefox. css style sheet example page html: Code: <a class="listurl" href="http://www.yahoo.com" target="_blank"><div class="listitem"><div class="listtitle"><ul><li> <strong>Link Example</strong><br> <br>Click here to open a pop-up window to yahoo.com </li></ul></div><div class="listimage" style="background-image: url(http://www.mycodez.org/images/icon-netlink.gif);"></div></div> </a><div style="clear:both;"></div> related css: Code:
div.listitem {
float: left;
width: 500px;
background-color: White;
height: auto;
a: expression(onmouseover=new Function("this.style.backgroundColor='#B0C4DE'; this.style.color='#000000';"),
onmouseout=new Function("this.style.backgroundColor='#ffffff'; this.style.color='#000000';"));
margin-bottom: 0px;
cursor:pointer;
z-index: 2
}
div.listitem:hover {
background-color: #B0C4DE;
color: #000000;
margin-bottom: 0px;
z-index: 2
}
div.listtitle {
float: left;
width: 400px;
height: inherit;
margin-top: 5px;
margin-bottom: 0px;
position: relative;
vertical-align: middle;
z-index: 1
}
div.listimage {
float: right;
width: 100px;
height: 60px;
background-position: center;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 10px;
background-repeat: no-repeat;
z-index: 1;
}
any help will be greatly appreciated. Similar TutorialsHi, I have a link in my page. When the user hovers over the link, the page is flickering. This is the code I have used Code:
a
{
color: #42C0FB; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
}
a:hover
{
color: #6C757A; background: inherit;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
<a href="WelcomePage.asp?UserName=User_nm" id="Welcome" title="Home Page" target="_blank">Welcome to my Page</a>
I am checking in IE 6 and IE 7. How to avoid the flickering, when user hovers over the link. Thank you Basically the home button is fixed and flickers where it is fixed and also where it is placed in the html code, when you hover over it. Also when you hover over the javascript sliders the image in the slider moves way to the right. Neither of these issues are happening in any other browser. I'm looking at FF9... I would really appreciate it if you could take a look at the issue and think of anything that could help - or point me in another direction... The website is: caradinleydesigns.com.au I can provide further bits if you need? THANKS ONE HUNDRED MILLION IN ADVANCE ( I can up it if need be....?!) I have a div absolutely sized with a wrapper div sized to take up 100% of both the width & height of the afore-mentioned div. The wrapper div has it overflow set to auto. Inside is several divs & anchors making up a tree. In the CSS the anchors have hover effects that only alters the background color. Everything seems fine, but the scrollbar flickers on each anchor mouseover. This only happens in IE. It seems that IE wants to recalculate the overflow on each mouseover. Has anyone had similar results? Or any suggestions to solving this irritating effect? 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'm working on a custom MovableType site for a sports news company, and after including FCKeditor into the backend to allow for more freedom in styling, etc, I've found that the css styles for the blog entries and the output from the editor just don't mix. Is there some way I can clear all the inherited css definitions and just let the text display as itself? How can I remove the space between an image bottom and a td in Mozilla? <!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' xml:lang='en' lang='en'> <head><title></title> <style type='text/css'> td,img { padding:0px; border-width:0px; margin:0px; } </style> <script type='text/javascript'> </script> </head><body> <table border='1'><tr><td> <img src='http://www.kallery.net/Q_strg/kallery/85_153_1_1155924038.jpg' /> </td></tr></table> </body></html> I'd like to be able to remove all unused css styles on a website and the FireFox add-on "Dust-me Selectors" is highly recommended, only that it doesnt support FireFox 4 which is what is installed for me at the moment, can you please confirm if I can have more than 1 instance/version of a web browser/FireFox on my machine, or if you could recommend another way of finding unused css on the whole of a website, and not just one page, thanks plenty in advance.. Thanks for taking the time to read my question. I'm having a bit of a brain stall here. I want to get rid of the border around the href image, using css. How???? Code:
<div class="Valid">
<p>
<a class="ValidLink" href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</div>
Thanks, Brad Hello. There is a small gap between my input and image, see attached screenshot. i thought it might be the image dimensions but it isn't; and I've removed margins, padding, etc. What property should I be looking for please? Here's some css: Code: html, body, div, p, form, fieldset, input, img {
margin: 0; border: 0; padding: 0;
line-height: 1;
}
input {
border: 1px solid gray;
}
. txtImage {
vertical-align: text-bottom;
}
#frmCourse {
width: 500px;
height: 500px;
margin: 5px; padding: 5px;
outline: 1px solid gray;
}
#fldCourse {
width: 80%;
padding: 5px;
margin: 0 auto;
border: 1px solid #808080;
}
# inpCourse {
height: 20px;
border: 1px solid #808080;
vertical-align: text-bottom;
}
Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance http://users.wpi.edu/~sigep/goron2.html How would I remove the space around the images in the navbar so that they are all right next to one another and line up properly on the page? This is driving me crazy!!! The headings elements (h1, h2, etc) have this padding or margins above them, and I can't get rid of it. here's an example http://my-test-site.comli.com/high-type.html I've tried to reset the padding and margins to 0. With no change. Any ideas Below is some code I scraped from a page in my application using firebug. The current code displays a series of row with what appears to be a blank row in between. I'm trying to figure out how I can reduce the vertical space. Thanks In Advance! <tr> <td class="PTSection"> <table class="PTSectionTable" cellspacing="0"> <tbody> <tr> <td class="PTSection"> <table cellspacing="0"> <tbody> <tr> <td cid="saw_11382_14" s="-1" l="0" e="3"> <table id="saw_11382_14_3_0" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="0" e="3"> <tbody> <tr align="right" style="width:10px;"> <tr align="right" style="width:10px;"> <tr align="right" style="width:10px;"> </tbody> </table> </td> <td id="saw_11382_14_3_0_Grp" class="PTCLDC" style="visibility:collapse"> </td> <td> <table id="saw_11382_14_3_0_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="0" e="3"> <tbody> <tr> <td class="PTPSHLC" style="font-family:Arial Black;">Non-Sponsored Description:</td> <td> </td> <td class="PTSC OOLT">Stein IREE "Co2 Recycling"</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="PTSection"> <table cellspacing="0"> <tbody> <tr> <td cid="saw_11382_14" s="-1" l="1" e="3"> <table id="saw_11382_14_3_1" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="1" e="3"> <tbody> <tr align="right" style="width:10px;"> <td class="PT_CHPHT"> </td> <td class="PT_VGHL" rowspan="3" style="display:none">Fund Code:</td> </tr> <tr align="right" style="width:10px;"> <tr align="right" style="width:10px;"> </tbody> </table> </td> <td id="saw_11382_14_3_1_Grp" class="PTCLDC" style="visibility:collapse"> </td> <td> <table id="saw_11382_14_3_1_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="1" e="3"> <tbody> <tr> <td class="PTPSHLC" style="font-family:Arial Black;">Fund Code:</td> <td> </td> <td class="PTSC OOLT">Business and Industry</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> When I allow scripts and active x to run in IE I get a dotted border around each letter of hyperlinked text. It looks fine in other browsers and also in IE if I block scripts. Does anybody have any ideas how to fix this or if it really is a CSS problem? Thanks Hi, Is it possible to remove the border from a select box? Many thanks Hi, I need to lay down two images side-by-side in an absolutely positioned div, but they always have a gap between them. I am guessing there is some inherent padding in an image, much like in a <p>, but I can't get rid of it. Qualifiers: 1. The containing DIV is absolutely positioned, but I do NOT want to absolutely position the images within. I want them to be inline, so they lay across the div horizontally. 2. As follows from above, I want the images inline, not block. Basically, I want to control the images, I think there is padding there I cant see, I would like to know how to remove the padding. Here is my test page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<title>Mind the Gap</title>
</head>
<body>
<p style="position: absolute; top: 250px;">Desired code style</p>
<div id="bottomAds" style="position: absolute; left: 0px; top: 297px; background-color: orange; width: 760px; height: 90px;">
<img id="leftImage" alt="sorry cnn" style="border-width: 0; padding: 0; margin: 0; border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
<a style="border: none; margin: 0; padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="adImage" style="margin: 0; padding: 0; border: none; border-width: 0; " src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
</div>
<p style="position: absolute; top: 450px;">Desired Result</p>
<div id="Div1" style="position: absolute; left: 0px; top: 497px; background-color: orange; width: 760px; height: 90px;">
<img id="Img1" alt="sorry cnn" style="display: block; float: left;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
<a style="border: none; margin: 0; padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="Img2" style="border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
</div>
</body>
</html>
Thanks for looking at this, and for any tips. CJB Is it possible to remove the embossed bored from a select box. That is just destroying the whole look of my page and i there is a way please let me know. Nick Hi guys, I know most of you are probably not familiar with the blogger code, but I wanted to see if I code post some bits of code and maybe you can help me with my problem. My problem is, is that I'm trying to add a google adsense search bar in the header of my blog (www.mytechnicalinterviewexperience.com). Here is the piece of code that initially defines the header: Code: #header-wrapper {
background:$titleBgColor url("http://www.luckyninedesign.com/tech/header.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
height:105px;
}
So in blogger, you can make it so you can add a "widget" to the header, and in that widget is where I'll be able to put my adsense code. However, when I add the widget, the adsense search bar appears, but it also puts the background image that I have defined for #header-wrapper. Here is the code that appears after I add the widget: Code: <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> Basically, I just want to add a new widget to the header without having the header background appear again. Is there any code I can add here that says, don't have the background appear? I've tried removing the if statement but it does not work. If there is anything else I can provide you with, let me know. Any help would be much appreciated, thanks. Joe Hi, I have a list inside a div section. However for some reason there is some space srounding this list. The div has a padding of 5px. I want to remove the space of the list so that the actual list is only 5px away from the div border. Here is some html and CSS code of what I did so far: Code:
<html>
<head>
<style>
#box {
width: 200px;
border: 1px solid #000000;
padding: 5px;
}
#box ul li{
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</body>
</html>
I also tried margin: 0px, however that was a disaster. And also tried clear:both but did not work either. Does anyone have any sugestions? thanks and regards, sim085 Hey all, I'm hoping someone can help me! Basically i've been setting up this website (using e107) and the theme I am using isn't exactly what I want, there are a few pages that don't quiet work. Anyway I have tried to modify this and I have just been unsuccessful, I did manage to do a little bit but just reverted back as the chances were it wasn't right!! All I need is to remove 2 areas of the page and make the center piece fill the page. If you think you can help me reply here and ill talk to you either via IM or PM as I will have to give you login details and URLs etc Thanks, Ben |
|||||||