|
CSS - Why On Earth Won't The Link Underlines Go Away?!
here's the page:
http://www.concrete-creative.com/sharecipe/addrecipe_tabs.html the links should NOT be underlined. here's the css: http://www.concrete-creative.com/sharecipe/tabs.css now why in the world would they be underlining? I put text-decoration:none underneath EACH SECTION and they still show a blue line! HELP!!!! Similar TutorialsI have tried everything I could find to try and it still underlines the links .. I don't want it to in any browser... Here's the CSS: Code: <style type="text/css">
<?php { ?>
.toggler { background-image:url('modules/mod_news/img/<?php echo $backgr ?>'); background-size:24px; background-repeat:repeat-x; text-decoration:none; cursor:pointer; color:<?php echo $backtext?>; font-weight:bold; margin: 0; padding:3px; font-size:<?php echo $fontsize?>px; font-family:Arial, sans-serif;}
<?php } ?>
.toggler:hover { background-image:url('modules/mod_news/img/silvergradient.gif'); font-family:Tahoma; font-size:16px; font-color:black;} .element{ padding:0 5px; }
.image { margin:10px 20px; } .tool-tip { float: left; background: #ffffcc; border: 1px solid #D4D5AA; padding: 5px; max-width: 200px;}
.tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: bold; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(modules/mod_news/img/arrow.png) no-repeat;}
.tool-text { font-size: 100%; margin: 0;}
</style>
I have put the text-decoration: none; in every place I can think of and it just doesn't work. If I put blink that works ... what am I missing here? Thanks!! Alright, so in the site I am designing, I have underline images (lines that are a bit longer then a typical underline). I am placing them directly under the text they are related to. All of the placement of text and the images is done using absolute positioning in CSS (this is done inside a div tag that is positioned relatively, so absolute positioning works properly). Anyways, this is the problem I am having, the underline image looks great in Firefox, and then in IE it is about 10px or so lower then it should be and it doesn't look near as good, so I was wondering if there is some problem in my code that I should correct. Anyways, here are some images to help describe the problem and the code that relates to this. This is what I want: This is what I get in IE This is the HTML for the placement Code:
<div id = "news">
<div id = "title">
<span class = "title">Latest News</span>
</div>
<div id = "news_underline">
<img src = "/testing/inertia/news_underline.JPG" alt = "Latest News" />
</div>
</div>
This is the CSS for "news" Code:
#news
{
position: absolute;
top: 5px;
left: 415px;
width: 185px;
height: 275px;
background-color: #519dbd;
background-image: url(/testing/inertia/news_gradient.jpg);
background-repeat: repeat-x;
border-bottom: #0e1f29 medium solid;
border-right: #0e1f29 medium solid;
}
And the code for "news_underline" Code:
#news_underline
{
position: absolute;
top: 25px;
left: 30px;
width: 122px;
height: 2px;
}
And the code of the div that these are both inside of Code:
#main
{
width: 608px;
height: 500px;
position: relative;
background-image: url(/testing/inertia/blue_gradient.jpg);
background-repeat: repeat-x;
background-color: #14495b;
margin-right: auto;
margin-left: auto;
}
Running IE 6... I can't seem to find out why this is happening!? http://www.triexa.com/ If you look at the small links below the menu... in IE I also see: "ware Client Area | Contact Us" I can't select this text, but if I hover over it, it changes the ACTUAL links colors, as if its appearing twice? How on earth can I fix this? Code: <div style=' height:600px; background-color:orange;margin:20px;'> <img style='display:block; vertical-align:middle' src='pics/gallery/some.jpg' /> </div> just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code:
<div id='leftcolumnmenusouter'><!-- left column menus -->
<div id='leftcolumnmenus'>
<?php include "columnmenus.php"; ?>
</div>
</div>
<div id='maincontentcolumnouter'><!-- middle column -->
<div id='maincontentcolumn'>
<?php
if (is("home")) {
include "home.php";
} else if (is("register")) {
include "register.php";
} else if (is("login")) {
include "login.php";
} else if (is("comment")) {
include "comment.php";
} else if (is("profile")) {
include "profile.php";
} else if (is("category")) {
include "category.php";
} else if (is("game")) {
include "game.php";
} else if (is("links")) {
include "links.php";
} else if (is("rules")) {
include "rules.php";
} else if (is("faq")) {
include "faq.php";
} else if (is("pp")) {
include "pp.php";
} else if (is("links")) {
include "links.php";
} else if (is("page")) {
include "page.php";
} else if (is("news")) {
include "news.php";
} else if (is("users")) {
include "users.php";
} else if (is("search")) {
include "search.php";
} else if (is("taf")) {
include "taf.php";
} /*else if (is("submit")) {
include "submit.php";
} */else if (is("pm")) {
include "pm.php";
} else if (is("play")) {
include "play.php";
} else if (is("request")) {
include "request.php";
} else if (is("contact")) {
include "contact.php";
} else {
include "error.php";
}
?>
</div>
</div>
CSS: Code: #maincontentcolumnouter {
width:75%;
margin:0px;
float:left;
}
#maincontentcolumn {
margin-top:8px;
margin-bottom:0px;
margin-left:4px;
margin-right:8px;
}
#maincontentcolumn .ocontentsection {
margin-bottom:8px;
}
#maincontentcolumn h2 {
text-indent:1em;
}
#leftcolumnmenusouter {
width:25%;
margin:0px;
float:left;
}
#leftcolumnmenusouter #leftcolumnmenus {
margin-top:8px;
margin-bottom:0px;
margin-left:8px;
margin-right:4px;
}
#leftcolumnmenus .ocontentsection{
margin-bottom:8px;
}
#leftcolumnmenus h2{
text-align:center;
}
#footer {
margin:0px;
padding:0px;
clear:both;
}
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}
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; } 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... 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, I am having trouble setting up different link styles in my site. My code is: Code:
.menu {
font-family: Helvetica;
font-size: 18px;
color: #FFFFFF;
}
a.menu:link {
color : #FFFFFF;
text-decoration : none;
}
a.menu:visited {
color : #FFFFFF;
text-decoration : none;
}
a.menu:hover {
color : #FFFFFF;
text-decoration : underline;
}
a:link {
color : #FFFFFF;
text-decoration : underline;
}
a:visited {
color : #FFFFFF;
text-decoration : underline;
}
a:hover {
color : #FFFFFF;
font-weight : bold;
text-decoration : underline;
}
From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class. So when I use the following code: <div class="menu"><I>01</I> <a href="">HOME</a></div> .. I would have thought the link would follow the style for .menu But it doesn't. It takes the style of the default links as well. How do I properly setup an alternate link style?? hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles. Code: <style type="text/css">
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;
width: 200px;
display:block;
}
a:visited
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:hover
{
text-decoration:none;
color:#000000;
width: 200px;
background: #A2D389;
display:block;
}
</style>
Any ideas? I know how to use the class etc but i can't get he link part right. Thanks Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? I'm having some problems getting rid of the border which appears around an image when you turn it to a link. What I'm after happening is like on this forum, where it says new topic there's no blue border around it. I've looked at the source but can't figure out the bit that controls it, so if anyone could help it would be great. I just wanted to know is it possible using css to add a link to a background image in a table or cell? if so how would you do that? I have set my 'a' tag as follows PHP Code: a { display:block; width: 100px; padding: 5px; border-style: solid; border-color: #B1B1AA; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; } a:hover { width: 100px; background-color: #CCCCCC; border: 1px; border-style: solid; border-color: #B1B1AA; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; } a:link { color: #000000; } a:visited { color: #000000; } here's the problem. I only want a certain menu to have this style and I want all the rest of my links to be another way but right now, all my links are like how I have above. Can someone tell me how I can assign different link styles to different links? I don't want them all the same. thanks |
|||||||