CSS difference between two pages

[aschroder]

Hi,

I'm new here, and have a quick question I'm trying to make a Magento site and a Wordpress site look the same. To my eye the HTML and css is the same but there seems to be a fundamental difference in the way they are being rendered.

The WP site seems to let divs within other divs overflow - but no amount for FNE or overflow:auto seems to fix it (and these are not present in the Magento one yet it works fine). It seems the problem can be seen in the simple difference between the way header-container is displayed within firebug on the two sites. But I'm all out of ideas!

If anyone could take a quick look at these two sites and tell me what obvious mistake I'm making, I'd be highly grateful.

WP:
http://bit.ly/1a9HzI
Magento:
http://bit.ly/nF4RE

Thanks,
Ashley

[abduraooft]

In your blog page, have a try by changing the markup order of content and sidebar like

<div>
 <div class="col-left sidebar"></div>
 <div id="content"></div>
</div>

and then by changing CSS like

.col2-left-layout .col-left {/*style.css (line 583)*/
clear:left;
float:left;
margin-left:10px;
width:225px;
}
#content {/*style.css (line 142)*/
margin:0 10px 10px 230px;
padding:5px;
/*float:right;
width:680px;*/
}
.footer {/*style.css (line 547)*/
background:transparent url(images/bg_footer.png) no-repeat scroll 50% 0;
clear:both;
margin:0;
padding:10px;
}

[aschroder]

Hi,

Wow thanks for the speedy response, I've made the changes you suggested, which improves it, but breaks the header. Do I need to add a clear: both in the header to stop that now-not-floated #content div from jumping up there?

I'm not sure I understand why the HTML I had, which seems to work fine on the store, doesn't work on the blog, any clues? It seems related to the fact the divs such as .header-container don't seem to 'contain' their children - but I'm not sure what causes that.

Cheers,
Ashley

[abduraooft]

The following should fix...

.main {/*style.css (line 569)*/
background:#FFFFFF none repeat scroll 0;
clear:left;
margin:0;
min-height:600px;
}
.header {style.css (line 413)
background-color:#FFFFFF;
margin-bottom:0;
overflow:auto; /* refer www.quirksmode.org/css/clearing.html */
padding:0 10px 10px;
}

[aschroder]

Thanks mate! I added overflow:auto to .main to fix the gap between the main content and the footer bg-image. Is that what you'd suggest?

PM me your paypal email, I owe you a beer!

[abduraooft]

Originally Posted by aschroder

PM me your paypal email, I owe you a beer!

That's cool , though you'd need to add some hacks for IE (especially version 6), to get a satisfactory output, like

* html .header, * html .main{
height:1%;
}

[aschroder]

Cool looks good in IE7 to me. Thanks again for your help, you should now have a beer in your paypal account from me!