Or should I say, it doesn't display correctly in good browsers, but IE　hashes it together.
here's the code... it's just a button. Also I'm just starting to play around with css, is anything I am doing here semantically wrong and hideous?
many thanks if you manage to sort this out for all browsers.
<!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=gb2312">
<title>Untitled Document</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"buttons.css" type="text/css">
<style type="text/css">
div#container{
width:312px;
height:100%;
text-align:center;
background-color:#eeeeee;
position:relative;
margin:0 auto;
}
div#buttonBox2 {
padding:10px;
border:1px solid #000000;
float:left;
margin-left:20px;
padding-top:37px;
background-color:#CCCCCC;
text-align:center;
width:124px;
height:97px;
}
div#area1 {
position:relative;
width:48px;
height:48px;
background-color:#B3ADC7;
padding:1px;
border:1px solid #C2BFCA;
}
div#area2 {
width:46px;
height:46px;
background-color:#9183C0;
padding:1px;
border:1px solid #A398C4;
}
div#area3 {
width:44px;
height:44px;
background-color:#7964BB;
padding:1px;
border:1px solid #8371BD;
}
a {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:9px;
}
div#area3 a {
width:42px;
height:42px;
display:block;
padding-top:4px;
border:1px solid #7964BB;
color:#7964BB;
}
div#area3 a:hover {
border:1px solid #6953AF;
background-color:#5B44A2;
}
</style>
</head>
<body>
<div id="container">
<div id="buttonBox2">
<div id="area1">
<div id="area2">
<div id="area3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">101<br>
101<br>
101</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>I imagine you wanted it off-center (padding-top :37px)?
The semantics of any empty div is questionable.
div#container{padding-left:20px;
width:312px;
/*height:100%;
text-align:center;*/
background-color:#eeeeee;
position:relative;
margin:0 auto;
}
div#buttonBox2 {
padding:10px;
border:1px solid #000000;
/*float:left;
margin-left:20px; */
padding-top:37px;
background-color:#CCCCCC;
/*text-align:center;*/
width:124px;
height:97px;
}
div#area1 {margin:auto auto;
/*position:relative;*/
width:48px;
height:48px;
background-color:#B3ADC7;
padding:1px;
border:1px solid #C2BFCA;
}
div#area2 {
width:44px;
height:44px;
background-color:#9183C0;
padding:1px;
border:1px solid #A398C4;
}
div#area3 {
width:40px;
height:40px;
background-color:#7964BB;
padding:1px;
border:1px solid #8371BD;
}
a {text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:9px;
}
div#area3 a {padding:1px;
width:36px;
height:36px;
display:block;
/*padding-top:4px;*/
border:1px solid #7964BB;
color:#7964BB;
}
div#area3 a:hover {
border:1px solid #6953AF;
background-color:#5B44A2;
}
Additions after opening brace
Deletions /* */
Changes made to height/width
Tested in IE6 FF1.0 Opera7.0
here's the code... it's just a button. Also I'm just starting to play around with css, is anything I am doing here semantically wrong and hideous?
many thanks if you manage to sort this out for all browsers.
<!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=gb2312">
<title>Untitled Document</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"buttons.css" type="text/css">
<style type="text/css">
div#container{
width:312px;
height:100%;
text-align:center;
background-color:#eeeeee;
position:relative;
margin:0 auto;
}
div#buttonBox2 {
padding:10px;
border:1px solid #000000;
float:left;
margin-left:20px;
padding-top:37px;
background-color:#CCCCCC;
text-align:center;
width:124px;
height:97px;
}
div#area1 {
position:relative;
width:48px;
height:48px;
background-color:#B3ADC7;
padding:1px;
border:1px solid #C2BFCA;
}
div#area2 {
width:46px;
height:46px;
background-color:#9183C0;
padding:1px;
border:1px solid #A398C4;
}
div#area3 {
width:44px;
height:44px;
background-color:#7964BB;
padding:1px;
border:1px solid #8371BD;
}
a {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:9px;
}
div#area3 a {
width:42px;
height:42px;
display:block;
padding-top:4px;
border:1px solid #7964BB;
color:#7964BB;
}
div#area3 a:hover {
border:1px solid #6953AF;
background-color:#5B44A2;
}
</style>
</head>
<body>
<div id="container">
<div id="buttonBox2">
<div id="area1">
<div id="area2">
<div id="area3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">101<br>
101<br>
101</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>I imagine you wanted it off-center (padding-top :37px)?
The semantics of any empty div is questionable.
div#container{padding-left:20px;
width:312px;
/*height:100%;
text-align:center;*/
background-color:#eeeeee;
position:relative;
margin:0 auto;
}
div#buttonBox2 {
padding:10px;
border:1px solid #000000;
/*float:left;
margin-left:20px; */
padding-top:37px;
background-color:#CCCCCC;
/*text-align:center;*/
width:124px;
height:97px;
}
div#area1 {margin:auto auto;
/*position:relative;*/
width:48px;
height:48px;
background-color:#B3ADC7;
padding:1px;
border:1px solid #C2BFCA;
}
div#area2 {
width:44px;
height:44px;
background-color:#9183C0;
padding:1px;
border:1px solid #A398C4;
}
div#area3 {
width:40px;
height:40px;
background-color:#7964BB;
padding:1px;
border:1px solid #8371BD;
}
a {text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:9px;
}
div#area3 a {padding:1px;
width:36px;
height:36px;
display:block;
/*padding-top:4px;*/
border:1px solid #7964BB;
color:#7964BB;
}
div#area3 a:hover {
border:1px solid #6953AF;
background-color:#5B44A2;
}
Additions after opening brace
Deletions /* */
Changes made to height/width
Tested in IE6 FF1.0 Opera7.0