Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Safari and CSS Position

Status
Not open for further replies.
rrsub

rrsub

MIS
Oct 23, 2002
536
US
So I'm using nested Div tags and striving to be XHTML1.0 Strict.

I had a div tag with

Code: 
#subhead{
	position: relative;
	top: 81px;
}

which gave me the position I wanted for my nested Divs.

IE, Opera, and Gecko based browsers were fine.

Safari didn't adhere to it even though is is listed here:

I got around it by making spacer divs and border classes but I would rather just get the position right.

Has anyone else had position problems with Safari?
 
Sort by date Sort by votes

I have never experienced that. Post some code as an HTML test page that shows this happening (or a URL)...

Jeff

 
Upvote 0 Downvote
What's weird is works on Konqueror (with FC 2).
The Safari version is 1.0.3

Here the previous code with the Safari bug.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Properties</title>
	<style type="text/css" title="Default" media="screen">
body{
	margin: 0px 0px 30px 0px;
	text-align: center;
	font-family: Arial, sans-serif;
}
img {border: 0;
}
#container {
	text-align: center;
	margin: 0px auto;
	padding: 0px;
	width: 800px;
}
#header {
	height: 107px;
	border-bottom: 1px solid #392400; 
}
#header h2{
	position: relative;
	top: 81px;
	left: 220px;
	font: bold 18px Arial, sans-serif;
	margin: 0;
}

#left {
	width: 190px;
	float: left;
}
#left_cont{
	border-right: 1px solid #392400;
}
#body {
	width: 610px;
	float: right;
}
#left_nav {
	background: #E0DC9F;
	font-weight: bold;
	font-size: 12px;
	text-align: right;
}

#left_nav div{
	padding: 0px 10px 0px 0px;
	border-bottom: 1px solid #392400;
	height: 26px;
	line-height: 26px;
}
#ln_contact{
	background: #E0DC9F;
	text-align: left;
	padding: 37px 4px 18px 14px;
	font-weight: bold;
	font-size: 10px;
}

#prop_sub_head {
	background-image: url(Xsubhead.jpg);
	background-repeat: no-repeat;
	border-bottom: 1px solid #392400;
	height: 134px;
	text-align: left;
}
#prop_sub_nav{
	position: relative;
	top: 81px;
	float: right;
	padding: 0px;
	width: 140px;
	margin: 0px auto;
}
#prop_sub_nav div{
	padding: 0px 0px 0px 2px;
	border-bottom: 1px solid #392400;
	font: bold 12px;
	height: 26px;
	line-height: 26px;
}

#footer {
	margin: 30px;
	padding-top: 15px;
	border-top: 1px solid #DADFA5;
	text-align: left;
	font-weight: bold;
	font-size: 10px;
	line-height: 16px;
	color: #28280E;	
}
#footer span {
	padding: 0px 4px 0px 4px;
}
#footer a {
	text-decoration: none;
	color: #28280E;	
}
#footer a:hover {
	text-decoration: underline;	
}
	
	</style>
</head>

<body>
<div id="container">
	<div id="header">
		<h2></h2>
	</div>

	<div id="left">
		<div id="left_cont">
			<div id="left_nav" style="background: #eeeeee;">
				<div><a href="/">LN</a></div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
			</div>
			<div id="ln_contact">
	
			</div>
		</div>
	</div>
	
	<div id="body">
	
		<div id="prop_sub_head">
			
			<div id="prop_sub_nav">
				
				<div>RN</div>
				<div>RN</div>
				
			</div>
		</div>
		

		</div>		
		
	</div>
</div>
</body>
</html>

Here is my fix
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Properties</title>
	<style type="text/css" title="Default" media="screen">
body{
	margin: 0px 0px 30px 0px;
	text-align: center;
	font-family: Arial, sans-serif;
}
img {border: 0;
}
#container {
	text-align: center;
	margin: 0px auto;
	padding: 0px;
	width: 800px;
}
#header {
	height: 107px;
	border-bottom: 1px solid #392400; 
}
#header h2{
	position: relative;
	top: 81px;
	left: 220px;
	font: bold 18px Arial, sans-serif;
	margin: 0;
}

#left {
	width: 190px;
	float: left;
}
#left_cont{
	border-right: 1px solid #392400;
}
#body {
	width: 610px;
	float: right;
}
#left_nav {
	background: #E0DC9F;
	font-weight: bold;
	font-size: 12px;
	text-align: right;
}

#left_nav div{
	padding: 0px 10px 0px 0px;
	border-bottom: 1px solid #392400;
	height: 26px;
	line-height: 26px;
}
#ln_contact{
	background: #E0DC9F;
	text-align: left;
	padding: 37px 4px 18px 14px;
	font-weight: bold;
	font-size: 10px;
}

#prop_sub_head {
	background-image: url(Xsubhead.jpg);
	background-repeat: no-repeat;
	border-bottom: 1px solid #392400;
	height: 134px;
	text-align: left;
}
#prop_sub_nav{
	float: right;
	padding: 0px;
	width: 140px;
	margin: 0px auto;
}
.sn_space1{
	height: 27px;
}
.sn_space2{
	height: 54px;
}
.sn_space3{
	height: 81px;
}
#prop_sub_nav div{
	padding: 0px 0px 0px 2px;
	font-weight: bold;
	font-size: 12px;

}
.rnav{
	border-bottom: 1px solid #392400;
	height: 26px;
	line-height: 26px;
}
.rnav_last{
	height: 26px;
	line-height: 26px;
}

#footer {
	margin: 30px;
	padding-top: 15px;
	border-top: 1px solid #DADFA5;
	text-align: left;
	font-weight: bold;
	font-size: 10px;
	line-height: 16px;
	color: #28280E;	
}
#footer span {
	padding: 0px 4px 0px 4px;
}
#footer a {
	text-decoration: none;
	color: #28280E;	
}
#footer a:hover {
	text-decoration: underline;	
}
	
	</style>
</head>

<body>
<div id="container">
	<div id="header">
		<h2></h2>
	</div>

	<div id="left">
		<div id="left_cont">
			<div id="left_nav" style="background: #eeeeee;">
				<div><a href="/">LN<span class="ro"></span></a></div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
				<div>LN</div>
			</div>
			<div id="ln_contact">
	
			</div>
		</div>
	</div>
	
	<div id="body">
	
		<div id="prop_sub_head">
			
			<div id="prop_sub_nav">
				<div class="sn_space3"></div>
				<div class="rnav">RN</div>
				<div class="rnav_last">RN</div>
				
			</div>
		</div>
		

		</div>		
		
	</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
815
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
639
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top