Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2007-11-22 20:38:31
- daikw
- Member
- Registered: 2007-10-06
- Posts: 39
Dotted underline frustrations!
Hi there,
1. I’m trying to get links on the collaborators page to show dotted or dashed underlines.
I’m using this CSS:
.collaboratorslink a:link {
font-family:georgia, helvetica, serif;
border-bottom: 1px dotted #333;
text-decoration: none;
}
But it doesn’t seem to show up. (currently using IE 5.x – will check on FF at home though)
Several articles have recommended adjusting text padding or “block elements” but nothing seems to do the trick so far.
2. On the naked shout page I want the vertical rule and “Download tracks” bar to line up horizontally with “About” bar.
I have created a “sidebar-4” div to house the text “formed in 2006…” and it is set to float: left; which seemed to do the trick for the image below, but not for the text.
Last edited by daikw (2007-11-22 20:39:55)
Offline
Re: Dotted underline frustrations!
.collaboratorslink a {
font: 1em Georgia, Helvetica, serif;
border-bottom: 1px dotted #333 !important;
text-decoration: none !important;
}Upper elements ids can overwrite rules of classes, so you need use !important to make them equal.
By the way, your markup is old-fashioned, and contains lot of wierdoes, like:
<span class="collaboratorslink"><a href="/collaboratorsmp3s/stiffupperlip.mp3" target="_blank">Stiff upper lip</a><br />-<br />
<span class="collaboratorslink"><a href="http://www.okband.co.uk/#" target="_blank">www.okband.co.uk</a></span></span>Two same classes crossed inside other… puff. Gosh, there is no point in that. And target="_blank" deprecated, you should use rel-attribute and javascript.
And afterall, these things have nothing to do with Textpattern (you know there is design forums out there – with people that know how to write valid-20century-clean-code – well there is too, but not so much of them. And some of people could give missleading tips – all at here ain’t professional-designers, I ain’t either).
Cheers!
Last edited by Gocom (2007-11-22 21:19:52)
Offline
Re: Dotted underline frustrations!
In response to number 1, the lack of true support for dotted borders in IE5 and IE6 is a known CSS issue. As far as I know, the only option is to create a 2-pixel wide image (dot and space) and then use it as a repeating background image on the element. You can either use this as the style for all browsers, or a separate IE-only style.
Offline
Re: Dotted underline frustrations!
!importantworks fine, but you could also use#parentNode .collaboratorslink a- Uh…Helvetica isn’t a serif font.
- As Gocom pointed out, you don’t need to class each link. Use descendant selectors.
Offline
Re: Dotted underline frustrations!
In response to number 1, the lack of true support for dotted borders in IE5 and IE6 is a known CSS issue. As far as I know, the only option is to create a 2-pixel wide image (dot and space) and then use it as a repeating background image on the element. You can either use this as the style for all browsers, or a separate IE-only style.
No, they work, but look different, as IE5.5-6 shows dotted borders as dashed, which is basically quite same looking.
Cheers!
Offline
#6 2007-11-22 21:33:04
- daikw
- Member
- Registered: 2007-10-06
- Posts: 39
Re: Dotted underline frustrations!
Okay, thanks for the advice guys, I’ve used !important, and seems to work a treat I will look up descendant selectors and try to update my coding!
Thanks again
- Can someone help me on part 2.?
Offline
Offline
#8 2007-11-22 21:37:42
- daikw
- Member
- Registered: 2007-10-06
- Posts: 39
Re: Dotted underline frustrations!
Hey, it’s my first project using CSS, okay! heh
Offline
#9 2007-11-22 22:50:57
- daikw
- Member
- Registered: 2007-10-06
- Posts: 39
Re: Dotted underline frustrations!
okay, I’ve figured it out: you can’t float: left two objects, so I got rid of the style for the image and inserted into the div above.
cheers!
Offline
Re: Dotted underline frustrations!
daikw wrote:
Okay, thanks for the advice guys, I’ve used !important, and seems to work a treat I will look up descendant selectors and try to update my coding!
Here are a couple tutorials:
Try this out:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
a {
/*---applies to all links*/
color: red;
}
li a {
/*---only applies to links that are children of a list item*/
color: blue;
}
ul a {
/*---only applies to links that are children of an unordered list item*/
color: green;
}
#music a {
/*---only applies to links that are children of #music*/
/*---you could write ul#music a too*/
color: orange;
}
</style>
<title>Descendant selectors</title>
</head>
<body>
<p>
<a href="#">Some link</a>
</p>
<ol>
<li>
<a href="#">Another link</a>
</li>
</ol>
<ul>
<li>
<a href="#">Some unordered list’s link</a>
</li>
</ul>
<ul id="music">
<li>
<a href="#demo">Stiff upper lip</a>
</li>
<li>
<a href="#band">www.okband.co.uk</a>
</li>
</ul>
</body>
</html>Offline
Pages: 1