Log in

View Full Version : This simple test case doesn't work in Safari?


jlizarraga
07-27-2008, 06:06 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">

* {
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
}

#container {
width: 100%;
height: 100%;
background-color: #CCCCCC;
}

#box {
width: 300px;
height: 300px;
margin: auto;
position: relative;
top: 50%;
background-color: #999999;
}

</style>

</head>

<body>

<div id="container">
<div id="box"></div>
</div>

</body>
</html>

Does what it should in IE6 and FF2, but not in Safari? Or I'm doing it wrong? According to the w3c validators the html and css is valid, but #box doesn't change its vertical position in Safari.
Medyman
07-28-2008, 01:31 PM
It's the relative positioning. Try switching it to absolute. It should work the same in Fx and IE, but it'll also work in Safari.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
}

#container {
position: relative;
width: 100%;
height: 100%;
background-color: #CCCCCC;
}

#box {
position:absolute;
top :50%;
width: 300px;
height: 300px;
background-color: #999999;
}
</style>

</head>
<body>

<div id="container">
<div id="box"></div>
</div>

</body>
</html>
jlizarraga
07-28-2008, 05:55 PM
Thanks!
jlizarraga
07-29-2008, 12:30 AM
Just for clarification: The relative positioning in this case *should* work, right? As in, Safari is misbehaving here?
Medyman
07-29-2008, 02:41 AM
Just for clarification: The relative positioning in this case *should* work, right? As in, Safari is misbehaving here?

Yeah, I would say so. I've never encountered this particular problem, so I can't comment on why it's happening. I remember running into a relative positioning bug (http://snook.ca/archives/html_and_css/safari_bug_floa/) in Safari several years ago, but that's been fixed and different than this.