Layout falling apart in ie6

HTML & CSS
1

Hi everyone,

I have a layout that works perfectly in internet explorer 7 and 8 but it seems to be falling apart a bit in ie6.

example.com

I wondered if anyone could take a quick look to see what the problem might be. I’m not sure if it’s a double margin problem. I’m using the ie7-js script which fixes transparency issues in this browser but apparently it also fixes the double margin bug so I’m not sure that that’s the problem.

If anyone has any idea what the issue might be, could you let me know.

As always, appreciate the assistance.

2

Hi,I haven’t looked at the code yet but I see that IE6 is showing a missing image icon which is probably the blank image that most pngfix solutions require. Check whether you have missed this out (and whether your script requires it).

3

Ignore the above - you do have a missing image (/images/consumer_flash_static.jpg) but its not from the pngfix.

The problem in IE6 is the double margin bug on the floats (see faq on floats) and the fact that you have placed inner elements inside info-consumer which are the same width as the parent but you have added 20px margins to them making them 40px too big.

add/change as follows:


[B]* html div#nav_main {top: 260px}[/B]/* not sure why this is 10px out but there's probably a reason*/

div#content {
    background-color: rgb(22,50,92);
    min-height: 476px;
    overflow: auto;
     [B]   width:100%;[/B]
}

div#content_main {
    width: 696px;
    min-height: 436px;
    margin: 20px;
    float: right;
    background-color: #fff;
      [B]  display:inline;[/B]
}
div#flash {
    width: 318px;
    height: 396px;
    margin: 20px;
    float: left;
        [B]display:inline;[/B]
}
div#info_consumer {
    width: 318px;
    min-height: 396px;
    float: right;
    margin-right: 20px;
    font-size: 12px;
       [B] display:inline;[/B]
}
div#info_wrapper_top {
    width: 318px;
    height: 188px;
   [B] margin: 20px 0 0 0;[/B]
}
div#info_wrapper_bottom {
    width: 318px;
    height: 188px;
  [B]  margin: 20px 0 0 0;[/B]
}
4

Thanks very much for that - now I know about the double margin bug.

Could I ask another question? As mentioned before I’m using the ie7-js script to fix transparency problems on the page for ie6. I have some links in the sidebar with some images in the background. I’m also using a:hover for some rollover effects, eg.

div#sidebar li#formal a {
    display: block;
	background: url(../images/formal_btn-trans.png) no-repeat top center;
    width: 148px;
    height: 53px;
}
div#sidebar li#formal a:hover {
	    height: 53px;
    background-position: center -53px;
	background-image: url(../images/formal_btn-trans.png);
    background-repeat: no-repeat;
}

It all works perfectly well in all browsers except ie6. When you hover in this browser, the image all gets squashed into the <a> tag even though I’ve created a rule that should offset it -53px - just showing the rollover portion of the image.

Is this another bug in ie6 and if so, is there a workaround? Or could it be a transparency issue that’s not fixed by the script I’m using.

5

Hover changes for png images using the position property don’t usually work for IE6. For ie6 you would need two different images and swap the whole image on hover.

I didn’t check which png script you were using but the one I usually use is this one.

6

I had to create separate images for ie6 (bit of a pain) as you suggested and this has worked so thank for that.

I used the code at the following address:

http://code.google.com/p/ie7-js/

Since there was background repeat transparent images in the layout the code fixed this. I’m not sure if the twinhelix code supports tiling for transparent images, does it?

7

It supports every kind of image :). I wouldn’t use that IE7 js code. It can massively slow down your site and there are a few quirks with it

8

You know the page in question has a semi-transparent png image loading over the top of another image which gives the illusion that the image behind the semi-transparent one is fading to transparency. Currently, the fully opaque image is loading first and then the semi-transparent one. This isn’t a good look because I wanted the viewer to see the effect of the transparency right from the beginning. Is there a way to force the semi-transparent image to load before the opaque one? Would the twinhelix code ensure this?

9

If you are talking just about IE then no the filter image will always load afterwards.

Why don’t you just use a single transparent image instead of 2 if it worries you? Obviously that won’t allow you to change the image without creating another transparent one.

10

I can’t believe I didn’t think of using just one image in the first place. I’ve actually got 3 images making up that top banner. This would have simplified the layout so much. If I do make just the one and say put it in the body tag, will this affect the sticky footer? I mean I’d be removing these elements which are currently holding all those images:

<div id=“fullWidthHeader”>
<div id=“tile_trans”>
<div id=“inner”> </div>
</div>
</div>

I’d also be removing fullWidthFooter_inner, ie. inside fullWidthFooter as below:

</div>
<div id=“fullWidthFooter”>
<div id=“fullWidthFooter_inner”> </div>
</div>

11

Putting an image on the body element won’t affect the sticky footer whatsoever :). It’s just an image after all.

If the fullWidthHeader contains the border-top (or whatever) equal to the footers height/the negative top margin on the wrapper element (or container) then that will pose a problem.

Otherwise let it kick the bucket ;).

12

I just found that I only needed to adjust the negative top margin of the outerWrapper then everything worked.

Thanks again for all the help.

13

Sorry to come back to this. Just regarding the sticky footer, I noticed that I had to adjust the margin-top in the following style rule:

div#outerWrapper {
    min-height:100%;
    background-color: transparent;
    margin: 0 auto 0;
    margin-top:-260px;
    text-align: left;
    width: 900px;
  position: relative;
    z-index: 3;
}

And then I had to adjust the top setting in the following style rules to get it to work:

div#branding {
    position: relative;
    height: 124px;
    padding-top: 260px;
}

div#nav_main {
    position: absolute;
    top: 350px;
    left: 260px;
    bottom: 0;
    right: 0;
    background: url(../images/nav_grad.jpg) repeat-x 0 0;
    z-index:99
}

div#nav_sub {
    position: absolute;
    top: 253px;
    left: 570px;
    z-index:99;
    color: #00274c;
}

The only problem with this is that for it to work it depends on the height of the outerWrapper div. So even though I got it to work on the home page, on some of the inner pages where the div expands due to there being more content, there’s still some white space below the footer on these pages. So does that mean that I have to create different style rules for all these different pages in order for the sticky footer to work on all of them? Surely there must be an easier way to do this?

14

Hi, the point of a sticky footer is to stick to teh bottom of the browser if there isn’t enough content. If there is enough content then it will push the footer down.

The inners of the structure of the sticky footer code (where the content is) can’t be absolute positiioned. It gets removed from the flow of the document and thus broken easily :).

15

But the following two elements need to be positioned relative to the outerWrapper:

div#nav_main {
position: absolute;
top: 350px;
left: 260px;
bottom: 0;
right: 0;
background: url(…/images/nav_grad.jpg) repeat-x 0 0;
z-index:99
}

div#nav_sub {
position: absolute;
top: 253px;
left: 570px;
z-index:99;
color: #00274c;
}

I can’t do this any other way except with absolute positioning. So does that mean this layout is impossible if I want a sticky footer to work on all pages?

example.com

16

It doesn’t matter that you have absolutely placed the above 2 elements because they are not interrupting the normal flow of the page.

You shouldn’t need to change anything as the sticky footer height and the negative margin are the only things that should match and will never change.

The page is always a minimum of 100% high but will grow as required when there is more content and the footer will move down accordingly like a normal footer.

It makes no difference what content you add. On pages where there is not content the sticky footer stick to the bottom of the viewport. On longer pages it sist at the bottom of the document.

Now that you have removed the images from the top you can simplify the page a bit and use a negative bottom margin instead and that will allow the footer to overlap a bit as you seem to have it too far away.

This is the revised 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<style>
/* Normalizes margin, padding */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin : 0;
    padding : 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
    font-size : 100%;
}
/* Removes list-style from lists */
ol, ul {
    list-style : none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
    font-style : normal;
    font-weight : normal;
}
/* Removes list-style from lists */
table {
    border-collapse : collapse;
    border-spacing : 0;
}
/* Removes border from fieldset and img */
fieldset, img {
    border : 0;
}
/* Left-aligns text in caption and th */
caption, th {
    text-align : left;
}
/* Removes quotation marks from q */
q:before, q:after {
    content :'';
}
/*---------site colours--------------

beige: #ded5b3;
navy: #00274c

*/
  
html, body {
    height:100%; /* for sticky footer*/
}
body {
    background-color: #fff;
    color: #00274c;
    font: 75%/1.3 Arial, Helvetica, sans-serif;
    text-align: center;
    position: relative;
    background: url(http://example.com/test/images/top_repeat.jpg) repeat-x;
}
html {
    min-width: 1000px
}
/*Opera Fix*/
body:before {/* for sticky footer*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* - negate effect of float*/
}
#outerWrapper:after {/* for sticky footer &#150; instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
div#outerWrapper {
    min-height:100%; /* for sticky footer*/
    background-color: transparent;
    margin: 0 auto 0;
    margin-bottom:-240px;/* for sticky footer*/
    text-align: left;
    width: 900px;
    /*min-height: 476px;*/
  position: relative;
    z-index: 3;
}
* html #outerWrapper {
    height:100%; /* for sticky footer */
}
/*h2, h3, h4, p, ul, { 
margin : 0 20px .75em; }
*/
h2, h3, h4 {
    font-weight : bold;
}
h3 {
    font-weight : normal;
}
strong {
    font-weight: bold;
}
p {
    font-size : 100%;
    padding-bottom: 10px;
}
/*---------------------Links---------------------*/

a {
    color: #00274c;
    text-decoration: none;
}
a:visited {
    color: #00274c;
}
a:focus, a:hover, a:active {
    color: #ded5b3;
}
ul#nav_bar a:link, ul#nav_bar a:visited {
    color: #ded5b3;
}
ul#nav_bar a:hover {
    color: #fff;
}
div#nav_sub ul#nav_bar a:hover {
    color: #fff;
}
/*---------------------Branding---------------------*/

div#branding {
    position: relative;
    height: 124px;/*padding-top: 260px;  for sticky footer*/
}
div#branding h1 {
    width: 224px;
    height: 114px;
    background: url(http://example.com/test/images/kc_logo.png) no-repeat left bottom;
    margin-bottom: 10px;
}
div#branding h1 a {
    display: block;
    width: 224px;
    height: 124px;
    text-indent: -9999px;/*outline: none;*/
}
/*---------------------Main Navigation---------------------*/


div#nav_main {
    position: absolute;
    top: 90px;
    left: 260px;
    bottom: 0;
    right: 0;
    background: url(http://example.com/test/images/nav_grad.jpg) repeat-x 0 0;
    z-index:99
}
ul#nav_bar {
    padding-left: 20px;
}
ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274C;
    text-decoration: none;
}
ul#nav_bar li.last {
    border-right: 0;
}
div#nav_main h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Sub Navigation---------------------*/

div#nav_sub {
    position: absolute;
    top: -7px;
    /*left: 368px;*/
    left: 570px;
    z-index:99;
    color: #00274c;
}
/*ul#nav_bar {
padding-left: 20px;
}
*/

div#nav_sub ul#nav_bar li {
    display: inline;
    width: auto;
    list-style: none;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
}
div#nav_sub ul#nav_bar a {
    line-height: 35px;
    font-weight: normal;
    color: #00274c;
    text-decoration: none;
}
div#nav_sub ul#nav_bar li.last {
    border-right: 0;
}
div#nav_sub h2 {
    position: absolute;
    top: -9999px;
}
/*---------------------Supplementary Navigation---------------------*/

div#nav_supp {
    width:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:99;
}
div#nav_supp h4 {
    text-indent: -9999px;
}
div#nav_supp ul li {
    text-indent: -9999px;
}
div#nav_supp li#site_entry a {
    position: absolute;
    left: 0px;
    top: 280px;
    display: block;
    background: url(http://example.com/test/images/site_entry_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
div#nav_supp li#business_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/consumer_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
div#nav_supp li#consumer_site a {
    position: absolute;
    top: 280px;
    right: 0px;
    display: block;
    background: url(http://example.com/test/images/business_site_btn.gif) no-repeat top left;
    width: 30px;
    height: 127px;
    z-index:99;
}
/*---------------------Content---------------------*/


div#content {
    background-color: rgb(22,50,92);
    min-height: 476px;
    overflow: auto;
}
div#content_main {
    width: 696px;
    min-height: 436px;
    margin: 20px;
    float: right;
    background-color: #fff;
}
div#sidebar {
    width: 164px;
    min-height: 456px;
    float: left;
    background-color: #00274c;
    background-image:url(http://example.com/test/images/sidebar_fade.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;/*background-image: url(http://example.com/test/images/pattern.gif);
    background-repeat: repeat;
    background-position: left top;*/
}
div#sidebar h3 {
    height: 40px;
    text-indent: -9999px;
    background: url(http://example.com/test/images/sidebar_h3.jpg) no-repeat 0 0;
}
div#sidebar ul#consumer_nav li {
    text-indent: -9999px;
    padding-bottom: 12px;
}
div#sidebar li#formal a {
    display: block;
    background: url(http://example.com/test/images/formal_btn.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#formal a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/formal_btn.png);
    background-repeat: no-repeat;
}
div#sidebar li#formal {
    padding-top: 10px;
}
div#sidebar li#boys {
    padding-bottom: 12px;
}
div#sidebar li#suits a {
    display: block;
    background: url(http://example.com/test/images/suits_btn.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#suits a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/suits_btn.png);
    background-repeat: no-repeat;
}
div#sidebar li#leather a {
    display: block;
    background: url(http://example.com/test/images/leather_btn.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#leather a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/leather_btn.png);
    background-repeat: no-repeat;
}
div#sidebar li#boys a {
    display: block;
    background: url(http://example.com/test/images/boys_btn-trans.png) no-repeat top center;
    width: 164px;
    height: 53px;
}
div#sidebar li#boys a:hover {
    background-position: center -53px;
    background-image: url(http://example.com/test/images/boys_btn-trans.png);
    background-repeat: no-repeat;
}
div#garment_display {
    width: 664px;
    height: 198px;
    margin: 20px 12px 10px 20px;
    background: url(http://example.com/test/images/garment_display.jpg) no-repeat 0 0;
}
div#garment_display h2 {
    text-indent: -9999px;
}
div#flash {
    width: 318px;
    height: 396px;
    margin: 20px;
    float: left;
}
div#info_consumer {
    width: 318px;
    min-height: 396px;
    float: right;
    margin-right: 20px;
    font-size: 12px;
}
div#info_consumer p {
    margin: 0;
    padding: 0;
}
div#info_consumer p#learn {
    paddong-top: 5px;
}
div#info_wrapper_top {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_top p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_top div#mtm {
    width: 149px;
    float: left;
}
div#info_wrapper_top div#ready_made {
    width: 149px;
    float: right;
}
div#info_wrapper_top div#mtm h2 {
    height: 100px;
    background: url(http://example.com/test/images/mtm_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_top div#ready_made h2 {
    height: 100px;
    background: url(http://example.com/test/images/suits_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom {
    width: 318px;
    height: 188px;
    margin: 20px 20px 0 0;
}
div#info_wrapper_bottom p {
    line-height: 14px;
    padding-top: 10px;
}
div#info_wrapper_bottom div#boys {
    width: 149px;
    float: left;
}
div#info_wrapper_bottom div#formal {
    width: 149px;
    float: right;
}
div#info_wrapper_bottom div#boys h2 {
    height: 100px;
    background: url(http://example.com/test/images/boys_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
div#info_wrapper_bottom div#formal h2 {
    height: 100px;
    background: url(http://example.com/test/images/formal_cons_home.jpg) no-repeat 0 0;
    text-indent: -9999px
}
/*---------------------Hours of Opening---------------------*/

body#hours {
    background-color: #10284b;
}
div#tablewrap {
    width: 400px;
    height: 210px;
    font-size: 13px;
    background-color: #10284b;
    padding-top: 45px;
}
div#tablewrap table {
    width: 300px;
    font-size: 11px;
    color: #fff;
    margin: 0 auto;
}
div#tablewrap td, th {
    border: 1px solid #fff;
    background-color: rgba(22, 50, 92, 0.9);
}
div#tablewrap table td {
    width: 50%;
    text-align: center;
    padding: 7px 0;
}
div#tablewrap table th {
    text-align: center;
    padding: 7px 0;
    font-weight: bold;
}
div#tablewrap table {
    border-collapse:separate
}
div#tablewrap th {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:10px;
}
/*--------------Catalogue Navagation Tips ----------------------*/


body#tips {
    background-color: #10284b;
}
#cat_nav_tips {
    background-color: #00274c;
    padding: 30px;
    min-height: 200px;
    width: 340px;
    text-align: left;
    color: #fff;
}
#cat_nav_tips h4 {
    font-size: 14px;
    padding-bottom: 5px;
}
#cat_nav_tips ul {
    margin-left: 15px;
    padding-left: 0;
    list-style-position: outside;
    list-style-type: disc;
}
/*--------------Newsletter Form ----------------------*/

div#newsletter {
    font-size: 11px;
    line-height: 12px;
    color: #fff;
    width: 144px;
    padding: 0 10px 0;
}
div#newsletter input {
    width: 150px;
    height: 15px;
    margin-bottom: 10px;
    font-size: 11px;
}
div#newsletter input.submit {
    height: 20px;
    width: 100px;
    margin: 0;
}
div#newsletter input#fullname {
    height: 15px;
}
div#newsletter label {
    position: absolute;
    left: -9999px;
}
/*---------------------Footer/Site_info---------------------*/


#siteinfo {
    color: #00274c;
    clear:both;
    padding:10px 0 75px;/* space before footer*/
}
#fullWidthFooter {
    width:100%; /*for sticky footer */
    clear:both; /*for sticky footer */
    background: url(http://example.com/test/images/bottom_repeat.jpg) repeat-x;
    height: 240px;/* + for sticky footer */
}
.clear {
    clear:both; /*for sticky footer */
}
</style>
<!--[if lte IE 8]>
 <script src="http://example.com/test/ie7/IE8.js" type="text/javascript"></script>
 <script src="http://example.com/test/ie7/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 7]>
<link href="css/IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="http://example.com/test/../diva/divaCommon.js"></script>
<script type="text/javascript">
<!--
var gDivaPOP=";.html|hours|x|c,c,400,210|x||localhost:8888/New_Site";
//-->

</script>
<script type="text/javascript" src="http://example.com/test/../diva/divaPOP/divaPOPgold.js"></script>
<link href="../diva/divaPOP/divaPOP    gold.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav_supp">
    <h4>Supplementary navigation</h4>
    <ul id="nav_supp">
        <li id="site_entry"><a href="../index.php">Site entry</a></li>
        <li id="consumer_site"><a href="../business/index.php">Consumer site</a></li>
    </ul>
</div>
<div id="outerWrapper">
    <div id="branding">
        <h1><a href="index.php">Site</a></h1>
        <div id="nav_main" class="round">
            <h2>Main navigation</h2>
            <ul id="nav_bar">
                <li ><a href="#">Link 1</a></li>
                <li ><a href="#">Link 2</a></li>
                <li ><a href="#">Link 3</a></li>
                <li ><a href="#">Link 4</a></li>
                <li ><a href="#">Link 5</a></li>
                <li ><a href="#">Link 6</a></li>
                <li id class="last"><a href="#">Link 7</a></li>
            </ul>
        </div>
        <div id="nav_sub">
            <h2>Sub navigation</h2>
            <ul id="nav_bar">
                <li id="contact"><a href="contact.php">Contact us</a></li>
                <li id="map"><a href="map.php">Location map</a></li>
                <li id="hours" class="last"><a href="hours.html">Store opening hours</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="content_main">
            <div id="flash">
                <div id="garment_display_cons"> <img src="http://example.com/test/../images/consumer_flash_static.jpg" width="318" height="396" alt="" /> </div>
            </div>
            <div id="info_consumer">
                <div id="info_wrapper_top">
                    <div id="mtm">
                        <h2>Subject 1</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="mtm.php">Learn more...</a></p>
                    </div>
                    <div id="ready_made">
                        <h2>Subject 2</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="ready_made.php">Learn more...</a></p>
                    </div>
                </div>
                <div id="info_wrapper_bottom">
                    <div id="boys">
                        <h2>Subject 3</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="boyswear.php">Learn more...</a></p>
                    </div>
                    <div id="formal">
                        <h2>Subject 4</h2>
                        <p>Loriti quatemo loremporibea nem as deroreroviti ommolori int fugita atae et.</p>
                        <p id="learn"><a href="formalwear.php">Learn more...</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="sidebar">
            <h3 class="round2">Categories</h3>
            <ul id="consumer_nav">
                <li><a href="/index.php?subcatID=6&itemTypeID=1">Link1</a></li>
                <li><a href="/index.php?subcatID=7&itemTypeID=1">Link2</a></li>
                <li><a href="/index.php?subcatID=8&itemTypeID=2">Link3</a></li>
                <li><a href="/index.php?subcatID=9&itemTypeID=1">Link4</a> </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div id="siteinfo">
        <p>&copy; 2010. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
    </div>
</div>
<div id="fullWidthFooter"> </div>
</body>
</html>

All you need to is add content. There is no need to change any of the settings. :slight_smile:

17

Thanks for the revised code,

I copied and pasted it into a test document and viewed in the browser but it seemed to be all over the place. I took a screenshot so you can see what I mean. Not sure what happened to the code?

18

You must have copied it wrong or mixed the code somewhere along the line :slight_smile:

I’ve just copied what I posted above and then viewed in straight in my browser it looks like the attachment.

You’ll have to put an online version of it if you want me to debug again :wink:

19

example.com

If you wouldn’t mind taking a look, I’d be grateful.

Thanks

20

Read my comments for explanation

div#content_main, div#info_consumer, div#flash{display:inline;}/*IE6 double float margin bugs*/
div#info_wrapper_top,div#info_wrapper_bottom{width:298px;}/*You set 318px width on these to match the parent. But you add 20px right margin thus making these two elements 20px too wide. Decrease the width 20px*/

Also be aware you are having PHP errrors. Example, (taken from your source)

<style type="text/css">

<br />
<b>Warning</b>:  include_once(__ROOT__/includes/breadcrumbs_cons.inc.php) [<a href='function.include-

once'>function.include-once</a>]: failed to open stream: No such file or directory in 

<b>/home/example.com/www/files/test/index.php</b> on line <b>32</b><br />
<br />
<b>Warning</b>:  include_once() [<a href='function.include'>function.include</a>]: Failed opening 

'__ROOT__/includes/breadcrumbs_cons.inc.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in 

<b>/home/example.com/www/files/test/index.php</b> on line <b>32</b><br />

</style>