|
CSS - Pseudo-class A:hover Strange Problem In Ie
Hey guys.
I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim Similar TutorialsForgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet: Code:
<style>
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all: Code:
<style>
a:hover { visibility: inherit }
a:hover span { color: Green }
</style>
<a href="#"><span>link</span></a>
But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important. I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags. Confirm/deny/comment? check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I have another problem with IE for Windows: I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear) the relevant styles: <style type="text/css"> a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } </style> the relevant html: <h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3> <ul class="newsList"> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite> </span></a></li> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite> </a></li> anyone have any idea for a workaround? Thanx Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! I'm currently making some site about webmaster resources, etc... The site displays fine in firefox, but looks really fu/cked up in IE. Can someone help me fix this? I was trying to make all 3 column to have equal height, and i found some way which works only in FF&Opera. Still, i have problem when i have too much text. Hey, Check out the attachment. (I had to spray paint out the important parts that would highly violate the NDA) Here is some of the CSS: Code:
.currentprojects{
margin-top:10px;
margin-left:8px;
width:245px;
}
.currentprojects .proj_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/leftside_midsect_mid.gif);
font-size:18px;
padding-bottom:5px;
}
.currentprojects .proj_content{
padding-left:8px;
background-image:url(../images/leftside_midsect_mid.gif);
}
.rssfeeds{
margin-top:10px;
background-image:url(../images/leftside_midsect_mid.gif);
margin-left:8px;
width:245px;
}
.rssfeeds .rss_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
padding-bottom:5px;
}
.rssfeeds .rss_content{
padding-left:8px;
color:#000000;
}
img{
margin-bottom:0;
vertical-align:text-bottom;
}
Now, the projects one is the top. And the rss is the bottom. Here is the HTML code Code:
<div class="currentprojects">
<img src="images/leftside_midsect_top.gif" />
<div class="proj_heading">
Heading
</div>
<img src="images/leftside_midsect_midsplit.gif" />
<div class="proj_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
<div class="rssfeeds">
<img src="images/leftside_midsect_top.gif" />
<div class="rss_heading">
Heading
</div>
<div class="rss_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
Does anyone have any idea why this is doing that in IE? FF it works fine (like that's really a surprise anymore). Hi all, Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html It's full of tests, but here's the problem.. The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it... Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean: http://www.jaysonsgroup.com/ztest/ntc/zie.gif The code is simple: Code: <div class="fieldname_long">Do you need more than one NTC Card</div> <div class="fieldvalue">(input field will come here)</div> <div class='spacer_1px'> </div> <div class='fieldname_text'>(To share the Modem with friends)?*</div> The CSS: Code:
.spacer_1px {
clear: both;
height: 1px;
overflow:hidden;
background: blue;
}
.fieldvalue {
float: left;
background: #ccc;
display: inline;
margin: 0;
}
.fieldname_long {
float: left;
width: 120px;
line-height: 13px;
padding-right: 15px;
color: #B30000;
font-weight: bold;
background: #eee;
display: inline;
margin: 0;
}
.fieldname_text {
color: #B30000;
font-weight: bold;
}
Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove. Sorry this is a really small thing but I just can't figure it out! Any ideas? Many thanks! Hi, I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl) http://www.ntcjapan.com/languages/arabic/dindex.html On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it. Code: #main {
width: 590px;
padding-top: 115px;
padding-left: 4px;
padding-right: 5px;
background: url(../../../images/0_logo.gif) no-repeat;
float: left;
margin: 0px 3px 0px 0px;
}
I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE. Any ideas how to make this work? Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know. Thanks very much in advance! If you take a look at the following site... http://www.impulsive-solutions.co.uk/test/test.htm In the central column you will see a grey border. On the left of that border there is a gap between the left border and the connecting top and bottom bits. Why is this happening? and secondly why is it only happening on the left hand side. Furthermore, in firefox it works fine, there is no gap. Andy Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc.. Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea? I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? Help! I've been holding my head on this one for a couple days. I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it. Any help would be greatly appreciated! www dot sccustomfacade dot com slash site Thank you! I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone. I would like to make a layout that fills the entire window but not more. The content of the page i want to display in a container that is always on a certain distance from the window border. I came up with this code which works perfectly in FF but not in IE. html4strict Code: Original - html4strict Code <html> <head> <title>layouttest</title> <style type="text/css"> body { margin: 0px; } table { empty-cells: show; } #container { position: absolute; top: 38px; bottom: 27px; left: 161px; right: 19px; overflow: auto; background: maroon; } </style> </head> <body> <table cellspacing="0" cellpadding="0" style="height: 100%; width: 100%;"> <tr> <td style="width:142px;height:100%;" bgcolor="green"></td> <td style="height:100%;" bgcolor="blue"><table width="100%" height="100%" cellspacing="0"> <tr><td colspan="3" style="height:37px"></td></tr> <tr> <td style="width:16px;"></td> <td bgcolor="red" valign="top" style="overflow: hidden;"><div id="container"> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> </div></td> <td style="width:16px;"></td> </tr> <tr><td colspan="3" style="height:26px"></td></tr> </table></td> </tr> </table> </body> </html> <html> I have looked through various threads here and found a lot of ideas for making it work in IE but it never did. So if you could help me with this i would be very thanksful. thx - HoB How do you fix this hover problem http://www.svprosquad.com/test.htm It's the top nav that's the problem that's the one that is done using CSS. |
|||||||