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 3 of 3
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    IE8: min-height, background, margin, padding BUG

    Take a look at the following page:

    http://www.pudgywebguy.com/pwgcomput...hp/customize/1

    If you view the page in FF3.6.3, Opera 9.64, or Safari 4.0.2, you will see a normal right-floated div with a yellow background. In IE8, you see that yellow div double the height it should be, repeating the background image.

    The settings for this div are:

    Code:
    #rightbar {
    	width:300px;
    	min-height: 480px;
    	float:right;
    	color: #444;
    	 padding: 10px; 
    	 margin: 19px 1px 1px 20px; 
    	background-color: #555;
    	background-image: url("../img/price_box_bg.png"); 
    	background-repeat: no-repeat;
    	background-position: center top;
    }
    Developer tools shows me the height of the div is 1020px, double what it should be.

    If I remove the min-height setting, the height of the div shrinks up, but it still too long and shows the margins (bottom then top) and then about 15 pixels of the background image again. The same thing happens when I remove the background image settings; it shows 15 pixels of the background color.

    I am finally able to get a normal div (no bugs) only by removing the min-height and the margin settings.

    I have no idea what's going on with this and an Google search didn't give me the answer... any ideas?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not a bug. You never closed your rightbar div. Also a meta element should go in the head tags. I see what you are trying to do but <noscript> shouldn't go in the head tags either.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Fumigator (06-06-2010)

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Gah thanks, I'm embarrassed to miss the obvious. There was actually a </div> for the rightbar (I checked that a thousand times because the goofiness just looked like an unclosed div) but the real problem was my <form> and </form> tags were overlapping wrong (<form> was inside leftbar and </form> was inside its sibling rightbar) and that was absolutely the problem. I kept thinking I need to run the validator on the page but never at the right moment I guess.

    Anyways thanks for pointing in the right direction!


  •  

    Posting Permissions

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