CodingForums.com - CSS difference between two pages

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - CSS difference between two pages (http://www.codingforums.com/showthread.php?t=174833)

aschroder

08-18-2009 09:06 AM

CSS difference between two pages

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

08-18-2009 09:17 AM

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

Code:

<div>

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

 <div id="content"></div>

</div>

and then by changing CSS like

Code:

.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

08-18-2009 09:31 AM

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

08-18-2009 09:38 AM

The following should fix...

Code:

.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

08-18-2009 09:43 AM

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

08-18-2009 09:53 AM

Quote:

Originally Posted by aschroder (Post 854774)

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

Code:

* html .header, * html .main{

height:1%;

}

aschroder

08-18-2009 10:26 AM

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

All times are GMT +1. The time now is 07:13 AM.