|
CSS - A Link Not Working In Ie?
Hi all,
Code: .box1 {
position: absolute;
top: 20px;
left: 20px;
width: 220px;
height: 152px;
background: transparent url(../images/box-1_im-back.gif) no-repeat;
padding: 50px 54px 0px 25px;
}
I've got a div with position absolute on it, width, height, padding, etc. I've got an A tag inside it which I've also made position absolute, and expanded it to cover the whole div, so it acts as a button over the whole div and it works in everything BUT IE6 and as much as I'd like to forget about this browser, it's still quite common, so. Anyone know why this is happening or how I can fix it? Code: .box1 a {
position: absolute;
top: 0px;
left: 0px;
color: #0b54a9;
font-weight: bold;
padding: 126px 0px 0px 26px;
width: 260px;
height: 48px;
}
If I take the A tag out of the div and absolute position it over the div it works fine, the only trouble is I really need to keep the A tag inside the div. Similar TutorialsI generate the following in my PHP script and it seems to work in IE but not in FF or Chrome. It doesn't redirect to the pdf file nor does it appear in the status bar when I mouse over it. <div id="downloadts"><a href="URL address/Tearsheets/MP-160.pdf" class="button">Download Tear Sheet</a> </div> The downloadts looks like #downloadts { height:auto; width:150px; border:thin; background-color:#999999; position:absolute; top:365px; left: 15px; text-decoration:none; } and the button is in a separate style sheet as .button { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; font-size: 12px; color: #FFFFFF; font-weight: bold; font-style: normal; text-decoration:none; line-height: 20px; background-color: #999999; } I don't see what is wrong. It appears on the page as I expect it to. I am baffled and don't doubt it is something simple. It passes validation as well. You can see it in action at: mandp dot lamster dot org/product.php?coll=French%2040%27s&catno=MP-160 Thanks for any help. Hal Hello, My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all. I see this happenning with IE 6.x and FireFox 1.5 and netscape 7 Example HTML code where the unvisited link appears in Red and it should be in Grey: Code: <div class=medGray> <a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records). </div> Here's my snippet from my CSS file: Code:
a.medGray:link {
text-decoration: underline;
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }
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 Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc. I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated. If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future? The CSS lives at the above address /ladybird.css Thank you very much. Ant 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. Here is the page the > Enlarge link below the picture doesn't work in FF - but it does in IE. I was wondering if it was because it was an absolute position?? Or is something else going on?? Here is the css: Code:
#productPage .compact a {
text-decoration: underline;
position: absolute;
right: 175px;
top: 200px;
}
Here is the xhtml: Code:
<span class="productImg"><img src="../images/compact.jpg" width="249" height="205" alt="Vitalograph COMPACT spirometer" /></span>
<span class="compact"><a href="../images/compact_large.jpg">>Enlarge</a></span>
This code works in IE but not in FF. Does Firefox not support these? <style type="text/css"> <!-- A:link { text-decoration: underline; color:"#ffffff"; } A:visited { text-decoration: underline; color:"#ffffff"; } A:active { text-decoration: underline; color:"#ffffff"; } A:hover { text-decoration: none; color:"#fffffff"; } Body { background:url(http://n0madism.tripod.com/mbg.jpg); background-color:#000000; background-repeat: no-repeat; font-family:Georgia; color:#ffffff; font-size:10 pt; text-align:left; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #FFFFFF; } td { font-family:Georgia; color:#ffffff; font-size:10 pt; } --> </style> 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 Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MACK Insurance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
* html #wrapper {
background: url(images/body_t.gif) 24px 0px no-repeat;
backgro\und: none;
}
* html #ie {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
height: 39px;
width: 434px;
position: absolute;
margin-left: 24px;
}
* html #body {
background: url(images/body_bg.gif);
backgro\und: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}
.footerie {
display: block;
disp\lay: none;
}
.footer {
display: none;
disp\lay: block;
}
</style>
<![endif]-->
</head>
<body>
<center><table><tr><td> <div id="ie"></div>
<div id="wrapper">
<h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content"><div>
<font face="Arial" size="2"><b>Health, Life, Disability</b></font>
<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
</div></div><!-- end content -->
<div id="page_title">
<img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
</div><!-- end page_title -->
<div id="news"><div><div>
<font face="Arial" size="1"><b>Things to Consider</b></font>
<img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>04-20-2006</p>
<p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
</div></div></div><!-- end news -->
<div class="clear"></div>
</div><!-- end .inner -->
<div id="footer">
<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
</div><!-- end footer -->
</div><!-- end body -->
<div id="paper">
<div class="inner">
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
<p>A single plan can add peace of mind, all three together can insure stability.</p>
<center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
</div><!-- end .inner -->
</div><!-- end paper -->
</div><!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" >
</div></td></tr></table></center>
<center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>
Any help is appreciated~ I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options? Option 1 is he http://concrete-creative.com/temp/print/1.html **What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up. Option 1_B is he http://concrete-creative.com/temp/print/1_B.html **The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide. Can someone help me find the happy medium between these 2 solutions so it works the way I want it to? THANKS! 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! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } 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. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
Hi I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css". Code: <!--[if IE]> <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css"> <![endif]--> <LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css"> Just tested and it doesn't work... it only calls "menu.css" Tried it with "if IE7" and "if IE6" with no avail. -------------- IE Style: Code: #menu * {margin:0;}
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px}
All Others Style: Code: #menu * {padding: 0;margin:0}
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px}
Anyone know how this is done? hi everyone, im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers. what its suppossed to look like is: a:link.2{ color: white; text-decoration: none; font-weight: bold; } a:visited.2{ color:white; text-decoration: none; font-weight: bold; } a:hover.2{ color: #85ADC0; text-decoration: none font-weight: bold; } a:active.2{ color:white; text-decoration: none; font-weight: bold; } sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a> any help is greatly appreciated! thanks... I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different. How do i reference the sublinks? I did this which has no effect. <a href='".$mypath."' id='catsub2'>"; //these settings override it still. #blanksideboxContent.sideBoxContent a{ color: #000000; font-size:1em; font-family:verdana; font-weight:bold; text-decoration: none; border:2px outset #000000; background-color:#5ec82a; width:125px; display :block; margin-left:2%; } #catsub2 a{ width:80px; } Hey, I have the following in a CSS document: Code: /* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }
/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }
In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is: Code: <a class="classmember" href="user.php?id=1">$username</a> But, I also have a Color Key: Code: Color Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>. I thought I could do something like: a.classmember:link { color: #00CC00; font-weight: bold; } But that messes up the Color Key. So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses. Thanks for any suggestions! |
|||||||