Forum Moderators: not2easy
First sorry, for my last post i didn't see the no url policy.
So let's try again :
In my site I wanted to shape a link so that it looks like a button.
I found at least two solutions to do exactly what i'm looking for under FIREFOX, but both triggered problems in IE. One about padding around a block, the other one about negative left margin that won't work under IE
Any advice would be greatly appreciated :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bouton</title><style>
* {
margin: 0;
padding: 0;
border: 0;
border-color:#999999;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.Bouton
{
border:1px solid #000000;
background-color:#FFFFFF;
font: bold 1.0em Verdana;
color: #8B2424;
text-align:center;
padding:5px 10px 5px 0px;
text-decoration:none;
}
.Bouton:hover
{
background-color:#8B2424;
color:#FFFFFF;
}
.Bouton .Fleche
{
padding:5px 5px 5px 5px;
margin-right:10px;
font:bold 1.0em Verdana;
text-align:center;
color:#FFFFFF;
background-color:#8B2424;
}
.Bouton2
{
border:1px solid #000000;
border-left:25px solid #8B2424;
background-color:#FFFFFF;
font: bold 1.0em Verdana;
color: #8B2424;
padding:5px 10px 5px 0px;
}
.Bouton2:hover
{
background-color:#8B2424;
color:#FFFFFF;
}
.Bouton2 .Fleche2
{
margin-left:-1.17em;
margin-right:15px;
font:bold 1.0em Verdana;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<br>
<br>
<a class="Bouton" href="#"><span class="Fleche">»</span>Lancer une consultation</a>
<br>
<br>
<a class="Bouton2" href="#"><span class="Fleche2">»</span>Lancer une consultation</a>
<br>
<br>
<br>
</body>
</html>
Under .Bouton1, you have:
.Bouton
{
border:1px solid #000000;
background-color:#FFFFFF;
font: bold 1.0em Verdana;
color: #8B2424;
text-align:center;
padding:5px 10px 5px 0px;
text-decoration:none;
}
and under .Bouton1 .Fleche, you have:
.Bouton .Fleche
{
padding:5px 5px 5px 5px;
margin-right:10px;
font:bold 1.0em Verdana;
text-align:center;
color:#FFFFFF;
background-color:#8B2424;
}
I also do not understand why you have a negative margin? Remember though, padding is applied to the inside of the block element while margins are applied to the outside. If you are trying to achieve the same size between two buttons, you have to add margin + width + padding + border for the overall size.
You might be better off making the buttons a fixed width
.bouton {
border:1px solid #000;
width: 200px; /* just an example */
margin: 0 0 0 10px; /* reads top - right - bottom -left */
padding: 5px; /* applied to all sides */
}
This will give you a button taking up 207px wide plus the margin.
Marshall
[edited by: Marshall at 2:41 am (utc) on Aug. 8, 2007]
Thanks for your answer.
I actually need the fact that the buttons streches with the size of the label inside it. That's the reason why i didn't fix a width.
On the first example, the reason for the contradicting padding is because if i don't feed the padding of the arrow in firefox, then the red block around the arrow is smaller in height than the white block around the link. But if i do strip off the padding in the arrow, the thing works in IE but not anymore in firefox.
And I can't seem to find a work around to have a consistency between ff and ie with that solution.
As for Button2, the red block effect is made by having a left border of 20px for the A block. So what i wanted to do is to shift the arrow inside the a block to make it overlap the red block. To do that i applied a negative margin. It worked under Firefox, but again to no avail in IE. I can't understand why though, since IE is suppose to understand negative margin.
One last constraint if anyone is actually still reading my poor english : I need the link to hover even when hovering the arrow. Just like a real button.
If anyone has an idea to get either one or the other to work consistently, i would be very grateful.
Regards.
Yahel.
Thanks Vince for this input.
But just so I know : The transitionnal doctype isn't suppose to trigger strict mode on newer browsers?
I'm a bit confused here.
And it sadly did not change any of my two problems : (
[edited by: Yahel at 6:34 am (utc) on Aug. 8, 2007]
Thanks for that clarification. I'll do that from now on.
Still, even with that, i don't have constistency between the two browsers. If someone can think of a hack, an ie comment, or anything that would help me here, that would save my day.
That Transitional Doctype shown above, is a Strict rendering Full one.
The differences between "strict" (in the doctype, not rendering mode) and 'transitional' are minimal. Transitional just allows you to use, in a W3C valid way, some deprecated HTML style attributes like "target, nowrap, align" and have your code still validate. There are more little nuances like being allowed to have an inline element as a child of a blockquote in Transitional but not Strict, but generally they come as part of learning good practice anyway, none of these usually make any difference to actual page rendering but may well have an effect or become redundant once CSS is used so you can gradually convert to a Strict Doctype, which is recommended good practice.
Basically Transitional is for those starting to make the conversion from legacy code to W3C valid code, by W3C valid I mean all style attributes are separated into the CSS. You can learn about validation while using a transitional Doctype if you so wish, and it's a good stepping stone to a Strict Doctype and meanwhile you can still have your page rendering in Standards Compliant Mode.
e.g. I would use a transitional Doctype quite a lot, especially in example code for these boards and sites which are perhaps just starting to separate out some of the code to work with CSS - as there is often no way of telling if the rest of someone's code is Strict or still contains deprecated values.
yahel, sorry for OT, but will have a look at the question now ;)
[edited by: SuzyUK at 10:19 am (utc) on Aug. 8, 2007]
The relative positioning has a condition, you can't get a perfect 10px margin between the span and the text, because the span is 1em (1 x character) wide, once you move its position left, to go over the border, it leaves/reserves a 1em wide space where it should have been. Don't know if that's an issue because you can match the 1em padding on the other side, but anyway here's code for both
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bouton</title>
<style type="text/css" media="screen">
.b1, .b2 {
font: bold 1.0em Verdana;
background:#FFFFFF;
color: #8B2424;
text-decoration: none;
border:1px solid #000;
}
.b1:hover, .b2:hover,
.b1 span, .b2 span {
background:#8B2424;
color:#FFFFFF;
}
.b1 {
padding: 5px 1em 5px 0;
*padding: 0 1em 0 0; /* IE hack values */
}
.b1 span {
padding: 5px 0.25em;
margin-right: 1em;
}
.b2 {
border-left: 1.5em solid #8B2424;
padding: 5px 1em 5px 0; /* right padding is 1em to match space reserved for span */
}
.b2 span { /* this span is 1em wide so that is the reserved space, or left padding for the text */
position: relative;
left: -1.2em;
}
</style>
</head>
<body>
<br><br>
<a class="b1" href="#"><span>»</span>Lancer une consultation</a>
<br><br>
<a class="b2" href="#"><span>»</span>Lancer une consultation</a>
<br><br>
</body>
</html>
.b1 is the hacked version, note that the asterisk before the padding attribute means that only IE, including IE7 will read it. I do not recommend actually using this hack and have done it like this for illustration only. It's not a forward compatible hack, IE8 may not honor parse hacks but still need the fudged value so I recommend putting it into a conditional comment which can be amended, if required, to incorporate IE8 in the future.
e.g.
<!--[if lte IE 7]>
<style type="text/css" media="screen">
.b1 {
padding: 0 1em 0 0; /* IE hack values */
}
</style>
added: sorry just realised I have also done button b1 with 1em right/left padding but that's the one you can change to 10px if you like ;)
[edited by: SuzyUK at 11:18 am (utc) on Aug. 8, 2007]
