|
CSS - Text Decoration None Question
I have:
td.a1 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; } how do I alter so I can hyperlink the text spanned by the above so that no usual underlines, change of color etc. occur when the text is hovered, clicked. The below added to the css above doesn't work... link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none ie: td.d0 { background-color: white; color: #003399; width: 120px; height: 30px; font-family: "MS Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center; link text-decoration: none; visited text-decoration: none; active text-decoration: none; hover text-decoration: none } doesn't stop the underlining, change of color etc. Similar TutorialsPage coding: Code: <div class='btn'><div class='btntxt'><A HREF="#"><nobr>Harness in Art</nobr></A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Jewelry</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Wearable</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Decorative</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#">Glass</A></div></div> <div class='btn'><div class='btntxt'><A HREF="#"><nobr>More Fun</A></nobr></div></div> CSS coding Code:
.btn {
float: left;
width:80px;
min-width:40px;
max-width:129px;
height: 42px;
margin: 2px;
padding: 3px 3px 2px 34px;
border-bottom: 4px solid #<?= $basea->bg['-1'] ?>;
border-left: 3px solid #<?= $basea->bg['+3'] ?>;
border-right: 4px solid #<? echo $darka; ?>;
border-top: 3px solid #<?= $basea->bg['+4'] ?>;
background: #<?=$basea->bg['+2']; ?> url(images/LinkBtnTN.jpg) 0 0 no-repeat;
}
.btntxt {
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 15px 0 0 0;
}
.btntxt a:link {color: #<?= $baseb->bg['+5'] ?>; text-decoration: none;}
.btntxt a:hover {color: #<?= $basea->bg['+5'] ?>; text-decoration: none;}
Ignore the embedded PHP, please. Why does the hover work and the a:link not? This is driving me nuts! Everything else rocks. Thanks. HeadElf I'm making my images links, but I keep getting the blue and purple links around the images. I have the text-decoration:none; everywhere I can think. What am I doing wrong. markrobinsondesign.com is my website so you can go and look at the source code. If you need me to post the code here let me know. hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself PHP Code: <ul> <li><a href="?action=abouUs">about us</a> <ul> <li><a href="?action=press">press</a></li> <li><a href="?action=tellFriend">tell a friend</a></li> <li><a href="?action=feedback">feedback</a></li> </ul> </li> <li><a href="?action=new">fitting room</a></li> <li><a href="?action=offers">best sellers</a></li> <li><a href="?action=col">useful info</a> <ul> <li><a href="?action=pay">payment options</a></li> <li><a href="?action=delCharge">delivery charges</a></li> <li><a href="?action=retPol">returns policy</a></li> </ul> </li> </ul> PHP Code: /* LEFT NAV */ #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } #leftNav a { border-bottom: 1px solid #000; text-decoration: none; width: 120px; } #leftNav ul li ul a { border-bottom: none; } #leftNav ul { list-style: none; margin: 0; padding: 10px 0 0 10px; display: block; border: none; } #leftNav ul li { margin: 0; padding: 0 0 10px 0; width: 110px; font-size: 14px; font-weight: bold; } #leftNav ul li ul { margin: 0; padding: 5px 0 0 10px; } #leftNav ul li ul li { margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 300; width: 95px; } /* END OF NAV */ thanks for your help How do I remove the text decoration (make underline invisible) in table by CSS? text-decoration: none; cannot work in my CSS..... <style type="text/css"> table { font-family: Verdana; font-size: 12px; text-decoration: none; } </style> I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag. Why isn't it picking up the #gt_links li a tag. here is the code: 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>NONE</title>
<style>
#gt_links {
position: relative;
top: 139px;
height:auto;
width: 138px;
margin: auto;
font-size: 12px;
font-weight:bold;
color: #ffcc66;
text-decoration: underline; // believe is culprit
margin-top: 5px;
}
#gt_links li, ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#gt_links li a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}
</style>
</head>
<body>
<div id="gt_links">Grepolis Tools
<ul>
<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
<li><a id="w_toggle" href="#">Show/Hide</a></li>
</ul>
</div>
</body>
</html>
Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue. Please help. Thanks Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF. Here's the HTML: Code: <div class="prod_container"> <div class="leftprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div> </div> <div class="rightprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div> </div> </div> Here's the CSS: Code:
.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }
.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }
.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }
.prod_container a:hover { text-decoration:underline; }
Thanks. To emphasis a link I put a small image (its an "X") before the link. See attached picture. GOOD this works well for text links: Code: <a href="...">text</a> ---> X text BAD I integrate a picture and define the picture as link Code: <a href="..."><img src="..."></a> ---> X <image> How can I avoid to show the X in front of the picture? Here is my CSS code: Code: #content a {
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;}
#content a:hover {
text-decoration: underline;}
Something like this does not solve the problem Code: 01 #content img a { background-image: none; }
02 #content img>a { background-image: none; }
Any idea is greatly apreaciated. Thanks. I want some text aligned left, then some text aligned center, then some more text aligned right all on the same line. Should I use tables, divs, or is there a better way? Thanks This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance. Code: <!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" >
<style type="text/css">
#quikcontainer
{
position: absolute;
top: 120px;
left: 30px;
height: 650px;
width: 143px;
background: white;
border: orange 2px solid;
margin: 0 auto;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;
}
ul#quiklist
{
text-align: center;
color: #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}
ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}
#quikcontainer>ul#quiklist li a { width: auto; }
ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top: 2px solid;
}
</style>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="quikcontainer">
<p><strong>Quick Links</strong></p>
<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>
<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>
<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>
<li><a href="#">Aaa A-A Aaaa</a></li>
<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
how can i make a blinking text in the css file? as i make a text decoration, i didn't blink! my browser was ie 6 already... Hello everyone, I am trying to layout a small "table-like" system. I am running into problems formatting the text properly to fit in my design. Here is a link to my current progress: http://www.suicidenote.net/csshelp/test.html Here is a link to my css: http://www.suicidenote.net/csshelp/default.css I would be very pleased if anyone has any sugestions on how to make the text to vertically fit in the div. I would rather use css as I want a variety of pages to follow the style sheet, as well as database integration Thanks, Case Hi all, I've got an div set up for images, which just has a style of padding-right 15px; . Now, I've got a text div with a style of padding-right 5px; . Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)? Cheers. Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece |
|||||||