Margin-top not Working

HTML & CSS
1

Hey Guys,

Not sure why the margin-top is not working on my buttons

http://modocom.ca/gillons/

If you go down to the MAke a Claim, Get a Quote, View All buttons I put a margin-top: 20px on them but its not working.

Any ideas?

Thanks,

Mike

2

Hi Mike,
It’s more or less a typo. :wink:
The links have the appearance:

<a class="but claimbut" href="#">Make a Claim</a>
...
<a class="but quotebut" href="#">Get a Quote</a>
...
<a class="but newsbut" href="#">View all</a>

But nor the class=“but”, nor the classes “claimbut”, “quotebut” or “newsbut” have the margin-top of 20px in it (and in general an <a> link has also no margin-top).

The class=“button” has the margin-top of 20px! :slight_smile: (but has also other properties).

By adding …

.but {
    ...
    margin-top: 20px;
}

… the first 2 columns are o.k., but not the last one. That’s because the element above it is floated.
Then you can float the buttons too (without harm for the other two):

.but {
    ...
    float: left;
    margin-top: 20px;
}

BTW: “Hey Guys” > Girls are welcome too? :wink:

3

[ot]

:lol:

As I understand it, the phrase has come to mean both sexes - which I find quite amusing, given that more “traditional” terms, such as “mankind” are now considered sexist. :rolleyes: I don’t understand it - but then, I’m a bear, so what do I know about humans? ;)[/ot]

4
Off Topic:

“Guys” these days can be used for both sexes, while “guy” still applies to a male.