|
CSS - Link And Visited Pseudo Class In Ie (windows)
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 Similar TutorialsUsing 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. Forgive 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? 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 Good Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue: I have a CSS rule: a:link, a:visited { display:block; font-weight:bold; color:#000; background-color:#FFF; width:200px; text-align:left; padding:10px; text-decoration:none; text-transform:uppercase; } The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.! Thanks for all your help! -Chris Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Thanks for taking the time to read my question. It's been a while since I last tried making a page. I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have link, visited, and active all the same color. Only hover is different, and none of them are purple. I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working. HTML Code: <a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a> CSS Code: a.NavButtons:link {
border-color: green;
border-width: 2px;
border-style: solid;
} /* unvisited link */
a.NavButtons:visited {
border-color: green;
border-width: 2px;
border-style: solid;
} /* visited link */
a.NavButtons:hover {
border-color: Red;
border-width: 2px;
border-style: solid;
} /* mouse over link */
a.NavButtons:active {
border-color: green;
border-width: 2px;
border-style: solid;
} /* selected link */
Hi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? 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 I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? my layout is pretty simple... Code: <div class="container"> <div class="topbar"> <div class="list"> <div class="gametitle"></div> <div class="percentage"></div> <div class="system"></div> </div> </div> i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work... Code: .gametitle {
float:left;
width:250px;
color:#FFF;
}
.gametitle a:link,
.gametitle a:visted,
.gametitle a:hover {color:#FFF;}
.percentage {
float:left;
color:#FFF;
}
.percentage a:link,
.percentage a:visited,
.percentage a:hover {color:#FFF;}
.system {
float:right;
color:#FFF;
}
.system a:link,
.system a:visited,
.system a:hover {color:#FFF;}
here is the page where all this code is going down... Mini Catalog I'm using the following code to create a CSS button: <a href="equipment.shtml"><span class="menubutton">Rental</span></a> .menubutton { color: white; text-decoration: none; font-family: Helvetica, Verdana, sans-serif; font-size: small; background-color: #666666; width: 110px; height: 20px; border-bottom:2px white solid; float:left; padding-top:5px; } .menubutton:hover { background-color: #1B1B1B; border-bottom: 2px #2E844A solid; cursor: hand; } IE six doesn't use the hover seudo class for some reason. Any suggestions? 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. 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! 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 Is it possible to inline a :hover... something like this: <a href="loc" style="color: blue;" style:hover="color: red;">Click here</a> Now that in particular doesn't work, but can you do something like that by editing the style=""? (I know it's best to just have a separate css file. I'm just wondering if it can be done) I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? Does anybody know how to simulate the :after pseudo-element for msiepc? I want to add a small image icon on at the end of a regular anchor tag which MUST stay as an inline element and therefore can't use a background image to accomplish this (as this doesn't work over multiple lines in ie.) More specifically. Does anybody know a reliable cross-browser way of adding a small image (such as an arrow) to the end of an <a> tag that wraps over multiple lines? Cheers dudes 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 I've run into a situation that I've never encountered before. I want to add em dashes to the content of my pseudo-classes, but apparently it isn't working. I'm using regular hyphens for now, like so: Code: #secondary h2:before {content: "- "}
#secondary h2:after {content: " -"}
I've tried the hex and dec values for the em dash, and those don't work either. Is there something easy that I'm missing, or is this a limitation of these pseudo-classes? Thanks for your time. |
|||||||