newbie needs help with divisions

kdrew922 · Joined: 06 May 2008 Posts: 3

Hello, everyone. I'm relatively new to XHTML/CSS... been learning for about a week. I'm a musician trying to set up my own website.

First, here's the code relevant to my problem:

XHTML:

<div id="main">
<p><a href="music.html">
Music</a></p>
<p><a href="mailinglist.html">
Mailing List</a></p>
<p><a href="contact.html">
Contact</a></p>
<p><a href="resonantreeds.html">
Resonant Reeds</a><p/>
</div>

<div id="footer">
<p id="webdesignby">
Web Design by Drew Keller © 2008</p>
<p id="termsofuse"><a href="termsofuse.html">
Terms of Use</a></p>
<p id="privacystatement"><a href="privacystatement.html">
Privacy Statement</a></p>
</div>

CSS:

#main {position: absolute; top: 260px; left: 50px;
font-size: 30px}

#main a {text-decoration: none}

#main a:link, a:visited {background-color: #acacac;
color: #000; padding: 5px 10px; border-color: #555;
border-style: solid; border-width: 2px}

#main a:focus, a:hover {background-color: #555;
color: #fff; padding: 5px 10px; border-color: #acacac;
border-style: solid; border-width: 2px; width: 100px}

#main a:active {color: #acacac}

According to what I've read, an indication such as "#main a:focus, a:hover" should only affect the focus and hover links in the division main. Is this correct? But for some reason the specifications I include after such a designation are also affecting links in other divisions. Can anyone tell me what I'm doing wrong?

Thanks,
Drew

kdrew922 · Joined: 06 May 2008 Posts: 3

Sorry that turned out looking awfully disorganized. I guess indentation doesn't show up in this forum.

Drew

kdrew922 · Joined: 06 May 2008 Posts: 3

Dang. I had been looking at this only in Safari, and I just took a look with Opera, Firefox, and Camino. There are even more problems in the other three. In all three of other browsers, some of the link boxes behave as intended, and some just don't do anything at all when the mouse hovers over them. So I must have a bunch of errors in there somewhere.

Drew

AssaultM16 · Joined: 20 Mar 2008 Posts: 10

I can help you with (maybe) 2 problems. The a:hover, a:link, etc do not work in the older browser (correct me if I am wrong). For the problem of the #main a:hover, etc you should try giving the main div a class atribute( <div class="main"> )

Good Luck,

AssaultM16