Cross Browser CSS Positioning Problem

Question

spookies 0 Newbie Poster

13 Years Ago

Hi All

I have a cross browser problem aligning a logo - in ie it is a little higher than in firefox and safari - I will attach the code - appreciate any help.

thanks - rich

http://www.lyndalehousekeeping.co.uk/site

<!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" />
<link rel=StyleSheet HREF="css/style.css" TYPE="text/css">
<title>Lyndale Housekeeping Service - North Devon</title>
<style type="text/css">
<!--
html {
	font-family:Helvetica,Arial,sans-serif;
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg.jpg);
	
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
}


#header {
	position:relative;
	left:0px;
	width:960px;
	height:287px;
	z-index:1;
	margin-top: 0px;
}

#logo {
	position:absolute;
	left:-160px;
	width:316px;
	height:217px;
	z-index:1;
	margin-top: 0px;
}

#maincontentarea {
	position:relative;
	left:0px;
	width:960px;
	/*height:392px;*/
	z-index:2;
	background-image: url(images/body-bg.gif);
}

#leftcol {
	float:left;
	padding-left:15px;
	padding-right:15px;
	top:0px;
	width:286px;
	text-align:left;
	padding-bottom:15px;
}

#leftcoltext{
	padding-left:30px;
	padding-right:20px;
	/*padding-top:50px;*/
	margin-top: 0;
}

#rightcol {

	float:right;
	padding-left:15px;
	padding-right:15px;
	top:15px;
	width:614px;
	text-align:left;
	padding-bottom:15px;
}

h1 {
	color:#25385e;
	font-family:Georgia,serif;
	font-size:22px;
	font-weight:normal;
	line-height:28px;
	margin-top: 0px;
}
h2 {
	color:#25385e;
	font-family:Georgia,serif;
	font-size:18px;
	font-weight:normal;
	line-height:18px;
	
	text-align: left;
}

p {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:16px;
	text-align: left;
	color:#838383;
	margin-top: 0px;
	margin-bottom: 0px;
}

li {
font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:24px;
	text-align: left;
	color:#838383;

}


a:link { 
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#3e81c5;
	text-decoration: none; 
}
a:visited {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#3e81c5;
	text-decoration: none; 

}
a:hover { 
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#838383;
	text-decoration: none; 

}
a:active { 
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#3e81c5;
	text-decoration: none; 

}




a.footnav:link {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#ffffff;
	text-decoration: none;
	cursor:pointer;
}
a.footnav:visited {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#ffffff;
	text-decoration: none;
	cursor:pointer;
}
a.footnav:hover {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#949494;
	text-decoration: none;
	cursor:pointer;
}
a.footnav:active {
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: left;
	color:#ffffff;
	text-decoration: none;
	cursor:pointer;
}


img {
	border-style: none;
}


p.footer{
	color:#ffffff;
	font-size: 12px;
}

#container {
	padding: 0px;
	width: 960px;
	margin-top: none;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;
}

#logo {
	position:absolute;
	left:13px;
	top:0px;
	width:198px;
	height:116px;
	z-index:101;
}
#introtextbox {
	position:absolute;
	width:380px;
	height:246px;
	left: 49px;
	top: 172px;
	text-align: left;
	margin-top: 0px;
	border-color: #FFFFFF;
	border: 1px;
}
#phone {
	position:absolute;
	width:225px;
	height:25px;
	left: 0px;
	top: 197px;
	z-index:101;
	margin-top: 0px;
}
#siteimages {
	position:absolute;
	width:462px;
	height:327px;
	left: 494px;
	top: 42px;
	z-index:101;
	margin-top: 0px;

}

#footerbg {
	position:relative;
	/*text-align:center;*/
	width:100%;
	height:220px;
	background-color: #4985fc;
	left:0px;
	top:0px;
	background-repeat:repeat-x;
	background-image: url(images/.gif);
}

#footer {
	position:relative;
	margin: auto;
	width:960px;
	padding-top:20px;
	/*top:0px;*/
	left:0px;
	height:200px;	
	background-repeat:repeat-y;
	background-image: url(images/footer-bg.gif);
	/*background-color: #3e81c5;*/
}

#footerleft {
	position:absolute;
	left: 60px;
	top: 20px;
	margin: auto;
	width:400px;
	height:auto;
	background-color: #4985fc;
	text-align:left;
}


#clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;


/*#footerright {
	position:relative;
	margin: auto;
	width:900px;
	top: 0px;
	height:auto;
	background-color: #3e81c5;
	text-align:right;
}*/

.style2 {color: #FFFFFF}
-->
</style>
</head>

<body> 	
<div id="container">
	<div id="header">
    	<div id="logo">
 			<img src="images/logo.jpg" alt="Lyndale Housekeeping Service" />        </div>
  </div>
    
    <div id="maincontentarea">
    	<div id="leftcol">
           	<div id="leftcoltext">
                
            </div><!--endleftcoltext-->
        </div><!--endleftcol-->
    	<div id=rightcol>
<h1>Welcome to Lyndale House Keeping Service in North Devon.</h1>
                <p>
                Lorem ipsum nibh probo nostro no sea. Eu nostrud numquam intellegebat sit. Et nec agam dolorem urbanitas, vix causae liberavisse accommodare ut, possim aliquam referrentur mea ne. Laudem equidem pro id, an inermis repudiandae eam. Eam erant numquam in. Est ei quidam appellantur contentiones.</p>
                <br />
                <h1>Latest News </h1>
                <p>
               Lorem ipsum nibh probo nostro no sea. Eu nostrud numquam intellegebat sit. Et nec agam dolorem urbanitas, vix causae liberavisse accommodare ut, possim aliquam referrentur mea ne. Laudem equidem pro id, an inermis repudiandae eam. Eam erant numquam in. Est ei quidam appellantur contentiones.
                </p>        
        </div><!--endrightcol-->
	</div><!--endmaincontentarea-->
</div><!--endcontainer-->

<div id=clearfloat>
</div>



<div id="footerbg">
  <div id="footer">
  	<div id="footerleft">  
		<p class="footer">Copyright &copy; 2011 Lyndale Housekeeping Service</p>
		<p class="footer">&nbsp; </p>
		<p class="footer">Design</p>
    </div>
  </div>
  <!--<div id="footerright">
		<a href="index.php" class="footnav">home |</a> <a href="services/index.php" class="footnav">services |</a> <a href="#top" class="footnav">contact</a>
  </div>-->
</div><!--END footerbg DIV-->


</body>
</html>

web-design

3 Contributors
2 Replies
137 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by gogreen1

All 2 Replies

ko ko 97 Practically a Master Poster

13 Years Ago

Add 'top' property and set it to '0' to reset for all browser.

Edited 11 Years Ago by Nick Evan because: Fixed formatting

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gogreen1 -1 Junior Poster in Training · Answer 1 · 2011-04-20T16:01:18+00:00

i found one more problem too ...in the boby BG ..you css is
:
body {
background-attachment: fixed; remove it
background-image: url("images/bg.jpg");
background-position: center top;
background-repeat: no-repeat;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

Cross Browser CSS Positioning Problem

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers