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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts

    don't know where extra padding is coming from

    Please see URL: http://080.108.myftpupload.com/what-...d/wood-stoves/ - This has the correct amount of padding-right.

    Then see: http://080.108.myftpupload.com/what-...place-inserts/

    This page has about 30px of extra padding on the right and I don't know why. See attached.
    Attached Thumbnails Attached Thumbnails don't know where extra padding is coming from-padding.gif  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello johndove523,
    Your use of ap is not helping you at all. See the pitfalls of absolute positioning here.

    Just to illustrate, look at a screencap of that page at a larger resolution-
    Attached Thumbnails Attached Thumbnails don't know where extra padding is coming from-clipboard01.jpg  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Excavator,

    Yeah, I forgot about that. I set the styles in question back to what they were before:

    Code:
    .two-thirds {
     	width: 64%;
    	padding:0 10px 0 0;
    	margin:0;
    	float: left;
    }
    
    .one-third-sidebar {
        float: left;
        padding-left: 42px;
        width: 24%;
        margin-top:-66px;
    }
    That sets me back to my original question, except the degree of padding-right varies wildly, depending on the product page and they're all coded exactly the same. Same thing (to a lesser degree) with the product columns below. I don't know what's going on here. - ?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    But you still have 235px wide .products-nav ap'd in 24% wide .one-third-sidebar? That breaks the box model rule. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


    Not sure the reason for using % widths in a set width #wrap.

    Your left floated .one-third-sidebar is moving with the different widths your .two-thirds is getting from it's content.

    I think your .products-nav is divitis because it does nothing. Getting rid of that and float .one-third right might fix your gap but I doubt it since you'll still have the content driven % widths.



    .../edit

    If you look around a little with firebug, you'll see the different widths when you compare the two pages. I'm not sure why but you have #content floated left. I never float full width elements since floating is how we put things beside each other and full width elements, by definition, don't have anything beside them.

    This might cure the problem for now but does not fix the cause at all -
    Code:
    .full-width-content #content {
        padding: 10px;
    }
    #content {
        /*float: left;*/
        padding: 10px;
    }
    Last edited by Excavator; 02-04-2014 at 03:37 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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