Footer Problem Links

HTML & CSS
1

Hi my hover states I put in my links don’t seem to be responding …Website

<a class="bottomlinks"  href="/CONTACT2.aspx">Contact Us</a>
<a class="bottomlinks"  style="font-weight: normal;" href="/sitemap.aspx">Sitemap</a>

.bottomlinks:hover{
   color: red;
}
2

The color set on “#footer a” is overriding it. Normal specificity still applies.

Do something like “#footer .bottomlinks{}”

1 Like
3

I see thanks.

4

im also trying to add a vertical slash in between but is going of for some reason

<a class="bottomlinks"  href="/CONTACT2.aspx">Contact Us</a>&#124;
<a class="bottomlinks"  style="font-weight: normal;" href="/sitemap.aspx">Sitemap</a>
5

Not sure why you are floating your anchors? Is it to get them all on the same line? Because that’s default inline behavior (which anchors take advantage of.)

Remove the float:left on #footer a{}. Any issues that arise now, we can handle. However I saw nothing break when I did that so it’s probably safe.

6

I do notice that maybe you did it to achieve the ability to use vertical paddings or margins on the #footer a{}? That’s the only thing I can see. If that’s the case, yes do remove the float:left; but add display:inline-block in its place.

7

Yes I did it for that reason and I was meaning to change it I was using the wrong syntax…

I get this weird gap however between the slash and “Sitemap”…

8

Part of the issue is the white space in the HTML. The anchors (since they are inline elements) need to be up against each other in hte HTML to reduce white space. That fixes Some of the space.

The rest of the space is due to the 10px left padding you set on #footer a{}

If you want that 10px to only target certain anchors, then you need to specify that.

9

I see thank you

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.