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 derfloh 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
Joined
Oct 23, 2002
Messages
536
Location
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 Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
931
PeDa
PeDa
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
537
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top