hi everyone,
I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to chnage even a pixel. As I am not too good so I though why not ask you. I am using dreameweaver for my ease in design. The problem is "expanding box problem and cruel appearance in IE and site looks better in FFox".
I am not usinf any image bigger than the size of DIV(I am using Div for layout purposes). I do see error saying expanding box problem in one division. But I assure you none of the images is bigger than size of DIV at all. Still I get this error. I don't have any borders etc. Pelase help me it is very urgent to fix.
here is my code and css file.:
Css file:
code fo rone the pages:
I get error in outer_middle DIV. As a result it splits the border of outer_right to the next line. If I leave extra pixels around each DIV by increasing the sizes that would look ugly.
I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to chnage even a pixel. As I am not too good so I though why not ask you. I am using dreameweaver for my ease in design. The problem is "expanding box problem and cruel appearance in IE and site looks better in FFox".
I am not usinf any image bigger than the size of DIV(I am using Div for layout purposes). I do see error saying expanding box problem in one division. But I assure you none of the images is bigger than size of DIV at all. Still I get this error. I don't have any borders etc. Pelase help me it is very urgent to fix.
here is my code and css file.:
Css file:
Code:
body{
font-size: 12px;
text-align:center;/* for ie5.+*/
background:#97999c;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
height: 738px;
border:0;
}
.outer{
background-color:#1c2e5d;
width:1024px;
margin:0px;
border:0px;
padding:0px;
}
.outer_left{
background-color:#97999c;
background-image:url(../images/outer_left_bgr.jpg); /* image size 30*5 */
border:0px;
background-repeat:repeat-y;
width: 32px;
float: left;
height: 770px;
margin:0;
padding:0;
}
.outer_right{
background-color:#97999c;
background-image:url(../images/outer_right_bgr.jpg); /* image size 30*5 */
background-repeat:repeat-y;
width: 32px;
float:left;
height: 770px;
margin:0;
padding:0;
border:0px;
}
.outer_middle{
background-color:#1c2e5d;
border:0px;
width: 960px;
float: left;
height: 738px;
margin:0;
padding:0;
}
.header{
background-image:url(../images/header.jpg);
background-color:#1c2e5d;
background-position:center;
background-repeat:no-repeat;
height:107px;
width:960px;
margin:0;
padding:0;
border:0px;
}
.nav{
background-color:#FFFFFF;
background-image:url(../images/nav_bar.jpg);
background-repeat:no-repeat;
background-position:center;
height:37px;
width:960px;
font: Tahoma, Arial, Helvetica, sans-serif;
margin:0;
padding-left:0px;
text-align:left;
}
.main{
background-color:#1c2e5d;
width:960px;
height:500px;
margin:0;
padding:0;
}
.main_left{
background-color:#1c2e5d;
width:580px;
float:left;
height: 510px;
margin:0;
padding:0;
}
.main_right{
background-color:#1c2e5d;
width:380px;
float:left;
height: 500px;
margin:0;
padding:0;
}
.main_right_top{
background-color:#1c2e5d;
height: 200px;
margin:0;
padding:0;
}
.main_right_bottom{
background-color:#1c2e5d;
height: 300px;
margin:0;
padding:0;
}
.footer{
background-image:url(../images/footer.jpg);
margin:0;
padding:0;
width:960px;
height:94px;
}
.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;
}
Code:
<!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">
<script language="javascript">
services_on = new Image ( 99, 37 );
services_off = new Image ( 99, 37 );
services_on.src = "../public_html/images/navbar/services_on.gif";
services_off.src = "../public_html/images/navbar/services_off.gif";
faq_on = new Image ( 80, 37 );
faq_off = new Image ( 80, 37 );
faq_on.src = "../public_html/images/navbar/faq_on.gif";
faq_off.src = "../public_html/images/navbar/faq_off.gif";
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Trend Auto Group</title>
<link href="../public_html/css/main.css" rel="stylesheet" media="screen, projection" type="text/css" />
<link href="../public_html/css/print.css" rel="stylesheet" media="print" type="text/css" />
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css" />
<![endif]-->
</head>
<body id="home">
<div class="outer">
<div class="outer_left"></div><!-- End of div[outer_left] -->
<div class="outer_middle">
<div class="header"> </div> <!-- End of div[header] -->
<div class="nav" >
<!-- TemplateBeginEditable name="Nav_bar_editable" -->
<!-- <img src="../public_html/images/navbar/nav_bar_left_space.gif" /> -->
<a href="services.html"
onmouseout="button_off('services');"
onmouseover="button_on('services');"> <img src="../public_html/images/navbar/services_off.gif"
style="border: none;" width="99" height="37" name="Services"/>
</a>
<!-- TemplateEndEditable -->
</div>
<!-- End of div[nav] -->
<div class="main">
<div class="main_left"><!-- TemplateBeginEditable name="left_editable" -->
<p>Content for class "main_left" Goes Here</p>
<!-- TemplateEndEditable -->
<p> </p></div><!-- End of div[main_left] -->
<div class="main_right">
<div class="main_right_top"><!-- TemplateBeginEditable name="Right_top_edirable" -->
<p>Content for class "main_right_top" Goes Here</p>
<!-- TemplateEndEditable --></div>
<!-- End of div[main_right_top] -->
<div class="main_right_bottom"><!-- TemplateBeginEditable name="right_bottom_editable" -->
<p>Content for class "main_right_bottom" Goes Here</p>
<!-- TemplateEndEditable --></div>
<!-- End of div[main_right_bottom] -->
</div> <!-- End of div[main_right] -->
</div>
<!-- End of div[main] -->
<br><br>
<div class="footer" ></div>
</div>
</div> <!-- End of div[outer] -->
<div class="outer_right"></div>
</div>
</body></html>
Comment