Thanks for the how to on rounded corners. It makes it so much easier!
I cannot tell you the frustration of not being able to do this without images.
I made some changes seen below and added a drop shadow and adjusted the text.
I noticed that in your original and my spinoff from there that in XP the boxes are square instead of having the rounded corners. I only noticed it as I use XP at work while my home computers are Windows 7.
Do you think this is XP? Is there a fix where I would not have to use images to get rounded corners?
XP is still in use in large numbers. I know that will change as people buy a new pc.
http://www.computerworld.com/s/article/9223094/Users_desert_Windows_XP _in_near_record_numbers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Corners</title>
<style type="text/css">
body {
background-color: #D2D2D2;
}
p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.1em;
text-align: left;
margin: 0px;
padding: 5px;
}
h1 {
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
color: #000;
}
#wrapper {
width:380px;
overflow:hidden;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.box1 {
float:left;
padding:0px;
width: 350px;
border: 0px solid #000000;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
background-color: #FFB062;
margin: 15px;
-webkit-box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);
}
.box2 {
color: #000;
text-align: center;
margin: 0px;
padding: 0px;
}
.box-content {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
vertical-align: top;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box1">
<div class="box2">
<h1>Rounded Corners</h1>
<div class="box-content">
<p>Rounded corners tested in my 2 Windows 7 computers looks the same in IE9 and Firefox 7 and 8.</p>
<p>Using IE8 in XP (my work pc).<br />
I see square corners. </p>
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<h1>Rounded Corners</h1>
<div class="box-content">
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty. </p>
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
