...

View Full Version : <a> tag styling with CSS, OK with one, color doesn't hold when 2nd is added?



JrBcnChz
11-30-2012, 10:08 PM
(The question is after the code)

In HTML I Have:



<div style="text-align: center;">
<a href="/page/2.html">Next</a>
</div>


and the CSS is:



a {
border-style: solid;
border-width: 2px 2px 2px 2px;
background: #faf8ec;
text-decoration: none;
padding: 10px;
border-color: #6a6651 #6a6651 #6a6651 #6a6651;
}

a:link {
border-style: solid;
border-width: 3px 3px 3px 3px;
text-decoration: none;
padding: 1px;
border-color: #6a6651 #6a6651 #6a6651 #6a6651;
}

a:hover {
border-color: #ffffff;
}


and it works fine on my index.html. On page 2, however, I need a Back and a Next, so I did this in HTML:



<div style="text-align: center;">
<a href="/index.html">Back</a>
<a href="/page/3.html">Next</a>
</div>


with the same exact CSS for <a> in my "subsequent pages" stylesheet.

Thing is, on page 2, the border-color on the 'Back' link is correct, but the border around 'Next' is blue, it's supposed to be #6a6651...

Anyone know why the border color isn't applying to the second <a>?

And btw I have them in a text-align div style because i couldn't get the CSS to cooperate in centering it properly.

Thank you!

LearningCoder
11-30-2012, 10:58 PM
Try this:


<div id="buttons">
<a href="/index.html">Back</a>
<a href="/page/3.html">Next</a>
</div>


CSS:


#buttons
{
width: 30%;
margin: auto;
text-align: center;
}

a
{
background: #faf8ec;
text-decoration: none;
padding: 10px;
border: 3px solid #6a6651;
text-decoration: none;
padding: 1px;
color: blue;
}

a:hover {
border-color: #ffffff;
}


To center an element you need to declare a width BEFORE declaring the margin. We use margin: auto; to center things, but it must have a width declared first.

I weren't 100% with what you were trying to achieve but I've had a go and cleaned up your CSS.

Hope this helps.

Come back and let me know how you got on.

Kind regards,

Lc.

resdog
12-01-2012, 12:04 AM
Is that all the CSS you have? What you have should work, <a> tags don't have a border around them to start off with. So if it wasn't working correctly, then there wouldn't be a border at all. I wonder if you have another css call somewhere further down.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum