Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by aschroder View Post
    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%;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool looks good in IE7 to me. Thanks again for your help, you should now have a beer in your paypal account from me!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •