|
CSS - Text-decoration: Line-through
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! 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 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. 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 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> 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'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? Hello, I have a problem that hopefully someone has seen before and found a solution. I have some text being displayed. When the text includes a image, in IE, it will repeat the last line of the text twice. so if I have this html Code: <div id="dorm_room_article_text"> <strong>HI</strong><br /> <br /> <br /> <img alt="image" src="some_image" width="525" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> I love this game! </div> and this as the css Code: #dorm_room_article_text {
float: left;
clear: both;
width: 100%;
font-size: 95%;
margin: 0 0 20px;
}
it will display: I love this game! I love this game! at the end, only in IE. I assume it has something to do with floats and displays but can't figure it out. Any ideas? Thanks. Like on this page, under each of the photos: http://www.sdtars.com/development/events/camp.php What causes the text to appear like: Quote: Originally Posted by In IE Officers discuss TAR Days at an executive board meeting I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Usiing ONLY CSS, is it possible to "justify" a block of text and have the last line centered? For example: Code:
Fig. 13. Scatter diagram comparing two subspecies of
Nyctimene albiventer. One individual of specimens thought
to be intergrades is as large as specimens of Nyctimene a.
bougainville, whereas the other three intergrades are about
the same size as specimens of N. a. minor.
CSS seems to only offer one or the other text-align:justify; or text-align:center; Thanks. Hi, I'm trying to include some text within a div, but the last line always seems to fall outside the bottom border. An image of what it looks like is attached. Here's the html I'm using: Code:
<div class="tbl-row <?php echo ($intRow % 2 == 0) ? ("tbl-row-odd") : ("tbl-row-even"); ?>">
<div class="title-lbl">Site: </div>
<div class="title-text"><?php echo $aCols["site_name"]; ?></div>
<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />
<div class="contents-text"><?php echo nl2br($aCols["contents"]); ?></div>
<div>
<span class="subon-text"><?php echo $aCols["local_time"]; ?></span>
<span class="subon-lbl"> at: </span>
<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
<span class="subon-lbl"> on: </span>
<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
<span class="subby-lbl">Submitted by: </span>
</div>
</div>
and here's the css: Code:
.contents-text {
color : #F98537;
font-size : 15px;
text-align : left;
}
.tbl-row {
border-radius : 15px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
margin-left : auto;
margin-right : auto;
padding : 8px;
vertical-align : top;
width : 96%;
}
.tbl-row-even {
background-color : #FFEBCB;
}
.tbl-row-odd {
background-color : transparent;
}
.subby-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subby-text {
color : #F0F;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-text {
color : #F0F;
display : inline;
float : right;
font-size : 14px;
vertical-align : top;
}
After much testing, I've found that it's the floats that seem to be causing the problem. When I take them out, the row is included within the outside div, but when I put them back in, the row falls outside. I need to keep the floats, because I would like to have the "Submitted" row aligned to the right, unless there's another way to achieve the same effect. So, does anyone know how I can have the last row right-aligned and included within the surrounding div? Debbie i wish to have two bits of text show as described in subject this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code:
<style>
img.floatRight {
float: right;
margin: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
</style>
left text here<b class="floatRight"> right text here</b>
Hi How can I wrap a long line of text inside a fixed width div? Hello, I've been having trouble with a simple design I have been creating. I was wanting the footer text to display in a straight line, but it's displaying horizontally. Could you please look at my HTML and CSS coding and see if I had made an error: Code: www.wendyhenrichs.com/huy Thanks! Hey, Here is an example of code for one of my links where I attempted to align the link "Entry Form" to the middle of the image, what am I doing wrong? Code: <p class="NavigationOption" id="Nav_Entry" line-height=32px text-align=middle><img src="../links/entryform.jpg" border=0></img> <a class="NavigationLink" id="NavLink_Entry" href="<?= ptpr; ?>members/index.php"><font color= #555555>Entry Form</a></p> I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text: Yada yada For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field: Code: <td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px"> And the class for the span has the following characteristics: Code: .announcement_body
{
color: black;
font-size: x-small;
}
I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large. Any idea what I'm missing here? Stephen |
|||||||