This simple test case doesn't work in Safari?

**jlizarraga** · 07-27-2008, 06:06 PM

Code:

<!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:

Code:

<!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

Originally Posted by jlizarraga

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 in Safari several years ago, but that's been fixed and different than this.

Thread: This simple test case doesn't work in Safari?

Thread Tools

Search Thread

This simple test case doesn't work in Safari?

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions