Another rendering issue

Status
Not open for further replies.

bucks

New Member
Hey all,

Im putting together this site for a family friend, he designed it the way he wanted it and im developing it for the web.

Everything looks fine in IE 7 but when i go to view it in Mozilla the white border stops at the bottom of the header instead of goin all around the body..

Any idea what part of the CSS could be causing this ?

::Tom Doherty Photography::

Css = http://tomdohertyphotography.ie/css/style.css

Any help would be appreciated, cheers.
 

louie

New Member
ad clear:both to the footer style
Code:
#footer {
 float: left;
 width: 760px;
 height: 75px;
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/footer.gif[/URL]");
 background-repeat: no-repeat;
 text-align: center;
 padding-top: 0px;
 padding-right: 0px;
 clear:both;
}
 

louie

New Member
there is the right code for your entire page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
  <head>
    <title>::Tom Doherty Photography:: </title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="Shortcut Icon" type="image/ico" href="/favicon.ico" />
    <!--link rel="stylesheet" href="[URL]http://www.tomdohertyphotography.ie/css/style.css[/URL]" type="text/css" /-->
<style type="text/css">
body { 
 background: url("[URL]http://www.tomdohertyphotography.ie/images/bg-black.gif[/URL]");
    background-repeat: repeat;
 padding: 0px;
}
p {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #464a4f;
 margin-top: 0px;
 line-height: 19px;
}
h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 color: #464a4f;
 margin-top: 0px;
    line-height: 20px;
}
#main_container{
 border: 1px #cccccc solid;
 width: 760px;
 margin: 25px auto 10px auto;
}
#header {
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/header.gif[/URL]");
 background-repeat: no-repeat;
 background-color: #ffffff;
 width: 760px;
 height: 60px;
    margin-top: 0px;
}

#container {
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/mainbg.gif[/URL]");
 background-repeat: repeat-y;
 background-color: #000000;
 width: 760px;
 float: left;
 margin-bottom: 0px;
}
#navcontainer ul{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #434343;
color: #000;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a{
text-decoration: none;
background-color: #434343;
color: #000;
padding: .2em 1em;
}
li a:hover{color: #fff;}
#mainbg {
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/mainbg.gif[/URL]");
 background-repeat: repeat-y;
 background-color: #ffffff;
 width: 760px; 
    float: left;
}
#middle {
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/middle.jpg[/URL]");
 background-repeat: no-repeat; 
 width: 760px;
 height: 340px;
}
div#photos{
width: 550px;
height: 400px;
position: absolute;
display: inline;
top: 25px;
left: 200px;
}
#main {
 float: left;
 width: 740px;
 padding: 10px;
 margin-top: 0px;
    padding-left: 100px;
    padding-right: 30px;
}
#main1 {
 float: left;
 width: 340px;
 padding: 0px;
 margin-top: 5px;
    padding-left: 5px;
    padding-right: 0px;
    padding-bottom: 2px;
}
#mainright {
 float: left;
 width: 360px;
 padding: 0px;
 margin-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 2px;
}
#mainright2 {
 float: right;
 width: 170px;
 padding: 0px;
 margin-top: 12px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 2px;
}
 
#left {
 float: left;
 width: 476px;
 padding: 0px 0px 0px 50px;
 border-right: 0px solid #cccccc;
 margin-top: 20px 0px 0px 0px;
}
#email {
 float: left;
 width: 476px;
 padding: 0px 0px 0px 50px;
 margin: 20px 0px 0px 0px;
}
#email a{
    color:#464a4f;
    text-decoration: none;
}
#footer {
 width: 760px;
 height: 75px;
 background-image: url("[URL]http://www.tomdohertyphotography.ie/images/footer.gif[/URL]");
 background-repeat: no-repeat;
 text-align: center;
 padding: 0px;
    clear: both;
}
</style>
    
  
</head>

<body>
<div id="main_container">
 <div id="header"></div> 
 <div id="navcontainer">
  <ul id="navlist">
   <li id="active"><a href="index.html" id="current">Home</a></li> 
   <li><a href="weddings.html" title="">Weddings</a></li>
   <li><a href="portraits.html" title="">Portraits</a></li>
   <li><a href="commercial.html" title="">Commercial</a></li>
   <li><a href="pictorial.html" title="">Pictorial</a></li>
   <li><a href="contact.html" title="">Contact</a></li>
  </ul>
 </div> 
 <div id="container">
  <div id="main1">
   <img src="[URL]http://www.tomdohertyphotography.ie/images/homepic.jpg[/URL]" width="326" height="338" alt="" title="" />
  </div>
  <div id="mainright">
   <p>Welcome...</p>
   <p>Tom Doherty is one of the top Wedding Photographers in Ireland today. 
   He received the Irish Professional Photographers Association / Royal Sun 
   Alliance Reportage Wedding photographer of the year 2006 and Pictorial Photographer of the year 2006 Award.</p>
   <p>Also in October 2006 he was presented an Award of Excellence by the Master Photographers Association UK and
   if all that wasnt enough he also received a Craftsman award from the Irish Professional Photographers
   Association along with countless awards from the Soceity of Wedding and Portrait Photographers UK.</p> 
  </div>  
 </div>
 <div id="footer">
  <div id="mainright2">
   <a href="[url=http://www.simplyweddings.com/]Simply Weddings - Irish Wedding Information for Brides and Grooms getting Married in Ireland. Full Supplier Directory.[/url]" target="_blank">
   <img src="[URL]http://www.tomdohertyphotography.ie/images/simplyweddings.jpg[/URL]" width="80" height="48" border="0" alt="" title="SimplyWeddings" /></a>
   <a href="[url=http://www.irishphotographers.com/]Qualified Irish Photographers - The Irish Professional Photographers' Association[/url]" target="_blank">
   <img src="[URL]http://www.tomdohertyphotography.ie/images/logo_ippa.gif[/URL]" width="49" height="48" border="0" alt="" title="IPPA" />
   </a>
  </div>
 </div>
</div>
</body>
</html>
 

louie

New Member
There was few things that needed sorted out and separated to achieve the layout you wanted, but hey glad to help.
 
Status
Not open for further replies.
Top