0

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>
3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by gogreen1
0

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

Edited by Nick Evan: Fixed formatting

0

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;
}

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.