I thought that min-height and min-width would give be a button with the dimension i want. Somehow, this does not work.
What is wrong with my CSS?
A.button:link {
font-weight: bold;
font-size: 9px;
font-family: 'Lucida Grande' Geneva, Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
min-height: 30px;
min-width: 130px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
background-image:URL(button.gif);
background-position: middle;
background-repeat: no-repeat;
background-color: #edf3fe;
text-decoration: none;
color: red;
background-position: center;
border-width: 0px;
background-color: #edf3fe;
text-align: center;
text-transform: uppercase;
}
Thanks
(* sorry for posting 2 Q in row *)
JitseTwo problems arise here:
1. Only block-level elements, like DIVs, Paragraphs, Heading tags, List Item tags, etc can have a width specified. Add the following CSS to your <a> tag style declarations: display: block;. Inline elements like text and the <a> tag by default are inline elements, and thus cannot have a width specified. Inline elements are ONLY as wide and ONLY as tall as the stuff inside them.
2. The min-width and min-height properties do not work on any version of Internet Explorer.
It works on any other browser released after year 2000.
Also, I was able to save some code in your style sheet:
A.button {
min-height: 30px;
min-width: 130px;
margin: 0;
padding: 3px;
background: #edf3fe; URL(button.gif) no-repeat scroll center center;
font-weight: bold;
font-size: 9px;
font-family: 'Lucida Grande' Geneva, Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
color: red;
border-width: 0;
}
You also need to realize the different ways the browser implement the CSS box model:
According to the Standards
Total width of an element is:
Width +
left padding +
right padding +
left border +
right border +
left margin +
right margin
Internet Explorer/PC versions 4.0 - 5.5, 6.0 in Quirks mode; IE Mac versions 4.0 - 4.5
Total width of an element is:
Width + margin.
Padding and borders are absorbed into the "width: #px" declaration in CSS. So....
someHTMLtag {
width: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
The total width for the above element is 100 + 10 + 10 + 1 + 1 + 20 +20. It takes up 162 pixels in width in a standards compliant browser. In IE/PC 4.0 - 5.5 and IE 6.0 running in quirks mode, the total width of the above element is:
100 + 20 + 20 = 140 pixels.
The width of 100 pixels absorbs the 10 pixel left and right padding, and the 1 pixel left and right border.
It's just something to keep in mind. If you already knew this, my apologies
Thanks for your reply.
Unfortunantly i am not in my office (neither tomorrow), so i can not give it a try.
Will this treath is still hot verify:
What i want is a button with a fixed size.
I should make this statement to get it to work then
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:doit()" class="button" display:block>Login</a>
I that the right syntax ?
or should i be in my CSS somewhere ?
Thanks !
JitseOriginally posted by jitseschaafsma
I that the right syntax ?Nope. In this specific instance, you'd have to use the style attribute:<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:doit()" class="button" style="display: block;">Login</a>This, however, is not recommended. You should be adding that CSS to your button class should you want all of those elements to be interpreted as block-level elements. For example:.button {
/* ... */
display: block;
}
What is wrong with my CSS?
A.button:link {
font-weight: bold;
font-size: 9px;
font-family: 'Lucida Grande' Geneva, Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
min-height: 30px;
min-width: 130px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
background-image:URL(button.gif);
background-position: middle;
background-repeat: no-repeat;
background-color: #edf3fe;
text-decoration: none;
color: red;
background-position: center;
border-width: 0px;
background-color: #edf3fe;
text-align: center;
text-transform: uppercase;
}
Thanks
(* sorry for posting 2 Q in row *)
JitseTwo problems arise here:
1. Only block-level elements, like DIVs, Paragraphs, Heading tags, List Item tags, etc can have a width specified. Add the following CSS to your <a> tag style declarations: display: block;. Inline elements like text and the <a> tag by default are inline elements, and thus cannot have a width specified. Inline elements are ONLY as wide and ONLY as tall as the stuff inside them.
2. The min-width and min-height properties do not work on any version of Internet Explorer.
It works on any other browser released after year 2000.Also, I was able to save some code in your style sheet:
A.button {
min-height: 30px;
min-width: 130px;
margin: 0;
padding: 3px;
background: #edf3fe; URL(button.gif) no-repeat scroll center center;
font-weight: bold;
font-size: 9px;
font-family: 'Lucida Grande' Geneva, Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
color: red;
border-width: 0;
}
You also need to realize the different ways the browser implement the CSS box model:
According to the Standards
Total width of an element is:
Width +
left padding +
right padding +
left border +
right border +
left margin +
right margin
Internet Explorer/PC versions 4.0 - 5.5, 6.0 in Quirks mode; IE Mac versions 4.0 - 4.5
Total width of an element is:
Width + margin.
Padding and borders are absorbed into the "width: #px" declaration in CSS. So....
someHTMLtag {
width: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
The total width for the above element is 100 + 10 + 10 + 1 + 1 + 20 +20. It takes up 162 pixels in width in a standards compliant browser. In IE/PC 4.0 - 5.5 and IE 6.0 running in quirks mode, the total width of the above element is:
100 + 20 + 20 = 140 pixels.
The width of 100 pixels absorbs the 10 pixel left and right padding, and the 1 pixel left and right border.
It's just something to keep in mind. If you already knew this, my apologies
Thanks for your reply.Unfortunantly i am not in my office (neither tomorrow), so i can not give it a try.
Will this treath is still hot verify:
What i want is a button with a fixed size.
I should make this statement to get it to work then
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:doit()" class="button" display:block>Login</a>
I that the right syntax ?
or should i be in my CSS somewhere ?
Thanks !
JitseOriginally posted by jitseschaafsma
I that the right syntax ?Nope. In this specific instance, you'd have to use the style attribute:<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:doit()" class="button" style="display: block;">Login</a>This, however, is not recommended. You should be adding that CSS to your button class should you want all of those elements to be interpreted as block-level elements. For example:.button {
/* ... */
display: block;
}