I have a list of links I am trying to style. Example code:
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
font-family: helvetica:
font-size: 0.85em;
background-color:#333300;
width: 20em;
color: red;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
margin-top: 2em;
}
<div id="links">
<dl>
<dt><h1 id="header1">Title</h1></dt>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header2">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header3">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header4">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
<dt><h1 id="header5">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
</dl></div>
I am on a Powerbook and am using the Safari browser. The headers follow every style rule except the font-family and font-size. The links follow the style rules except the margin-top rule. Why is this happening? Does it have to do with the Def. Lists? Or what? Please help out.
Also, the final header when shown in the browser is a smaller font than the previous headers and has turned into a link that goes to the last link, link3, in the previous category. Why is that happening?
Thanks for all your help, I can not yet figure out the remedy.font-family: helvetica: "you end in a colon there, it should be a semi colon"
for font-size, have you tried using px instead of em?font-family: helvetica: "you end in a colon there, it should be a semi colon"
for font-size, have you tried using px instead of em?
use em rather than an absolute px value, for usability reasonswhat does em mean?This page is badly designed, but it should answer your question. (<!-- m --><a class="postlink" href="http://www.wise-old-man.com/cssproperties.htm#units">http://www.wise-old-man.com/cssproperties.htm#units</a><!-- m -->)Yea prolly the colon. Even if you need those H1 IDs for scripting, you don't need them in your selector. Try replacing
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
with
#links h1 {em (<!-- m --><a class="postlink" href="http://en.wikipedia.org/wiki/Em_(typography">http://en.wikipedia.org/wiki/Em_(typography</a><!-- m -->))Thanks for the help. I changed the colon to a semi-colon and that fixed the problem but my links are still not following the margin-top style rule. Any ideas why?
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
font-family: helvetica;
font-size: 0.85em;
background-color:#333300;
width: 20em;
color: red;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
margin-top: 2em;
}
<div id="links">
<dl>
<dt><h1 id="header1">Title</h1></dt>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header2">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header3">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header4">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
<dt><h1 id="header5">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
</dl></div>Maybe you need to set the margin on the dd instead.Thanks. That did it. Whew.
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
font-family: helvetica:
font-size: 0.85em;
background-color:#333300;
width: 20em;
color: red;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
margin-top: 2em;
}
<div id="links">
<dl>
<dt><h1 id="header1">Title</h1></dt>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header2">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header3">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header4">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
<dt><h1 id="header5">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
</dl></div>
I am on a Powerbook and am using the Safari browser. The headers follow every style rule except the font-family and font-size. The links follow the style rules except the margin-top rule. Why is this happening? Does it have to do with the Def. Lists? Or what? Please help out.
Also, the final header when shown in the browser is a smaller font than the previous headers and has turned into a link that goes to the last link, link3, in the previous category. Why is that happening?
Thanks for all your help, I can not yet figure out the remedy.font-family: helvetica: "you end in a colon there, it should be a semi colon"
for font-size, have you tried using px instead of em?font-family: helvetica: "you end in a colon there, it should be a semi colon"
for font-size, have you tried using px instead of em?
use em rather than an absolute px value, for usability reasonswhat does em mean?This page is badly designed, but it should answer your question. (<!-- m --><a class="postlink" href="http://www.wise-old-man.com/cssproperties.htm#units">http://www.wise-old-man.com/cssproperties.htm#units</a><!-- m -->)Yea prolly the colon. Even if you need those H1 IDs for scripting, you don't need them in your selector. Try replacing
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
with
#links h1 {em (<!-- m --><a class="postlink" href="http://en.wikipedia.org/wiki/Em_(typography">http://en.wikipedia.org/wiki/Em_(typography</a><!-- m -->))Thanks for the help. I changed the colon to a semi-colon and that fixed the problem but my links are still not following the margin-top style rule. Any ideas why?
h1#header1, h1#header2, h1#header3, h1#header4, h1#header5 {
font-family: helvetica;
font-size: 0.85em;
background-color:#333300;
width: 20em;
color: red;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
margin-top: 2em;
}
<div id="links">
<dl>
<dt><h1 id="header1">Title</h1></dt>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header2">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header3">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
<dt><h1 id="header4">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</dd>
<dt><h1 id="header5">Title</h1></dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link1.com">link1.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link2.com">link2.com</a></dd>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"link3.com">link3.com</a></dd>
</dl></div>Maybe you need to set the margin on the dd instead.Thanks. That did it. Whew.