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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div broken into two sections in IE8

    Here's the page: http://hamptonkennels.com/dogs
    Screenshot: http://hamptonkennels.com/100611screenshot1.jpg

    It appears that in IE8 the div (#dogpage_pageheader) is broken in two. I thought it was a problem with the PNG rounded-corner backgrounds on the top and bottom divs, so I removed the PNGs, but the gap was still there. I then thought maybe it was that the background-color wasn't rendering fully, but I added that red border and it wraps around the two pieces. Also, clicking the "More" link does a jQuery thing which replaces the content div, but it seems it is re-rendered without the gap!
    Attached Thumbnails Attached Thumbnails Div broken into two sections in IE8-100611screenshot_cropped.jpg  

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    2 problems I can see atm are..

    #dogpage_pageheader_center is set to 598px when #dogpage_pageheader_center2 is set to 600px width, therefore logically it would be too large to fit inside so it could cause problems.

    Also on center2 you have:

    Code:
    #dogpage_pageheader_center2{ width:600px; position:relative; margin-top:-20px; margin-bottom:-20px; }
    I think this could be causing the IE8 problem is there any reason for the negative margin top and bottom?

    Have you tried adding the bg color to center2?

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm, yeah it's still gapped if I (1) remove the negative margins on #dogpage_pageheader_center2 and (2) change #dogpage_pageheader_center width to 600px, and (3) add a background-color to center2. Weird!

  • #4
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay! The gap disappeared when I removed the margin-bottom on the container div (dogpage_pageheader). I moved this spacing to an increase in height of the bottom div (dogpage_pageheader_bottom).

    It seems the margin-bottom was tearing the div at the center, into a top section and a bottom section, and this bottom section was pushed down to the end of the margin-bottom.

    Here is the HTML:
    Code:
    <div id="dogpage_pageheader">
      <div id="dogpage_pageheader_top"></div>
      <div id="dogpage_pageheader_center"> 
      <div id="dogpage_pageheader_center2">
        <div id="dogpage_pageheader_title">
          <span style="color:#333">H.K.</span> Dogs
        </div>
        <div id="dogpage_pageheader_text">
          We have <span style="font-weight:bold; color:#333;">five</span> puggles right now. &nbsp; Here's <span style="font-weight:bold; color:#333;">four</span> of them.
        </div>
        <div id="dogpage_prevnext">
          <div id="dogpage_next"><a href="/dogs/page/2">more &gt;</a></div>
        </div>
      </div>  
      </div>
      <div id="dogpage_pageheader_bottom"></div>
    </div>
    Here is the old CSS:
    Code:
    #dogpage_pageheader {width:600px; margin-left:50px; margin-bottom:20px;}
    #dogpage_pageheader_top {width:600px; height:20px; background: url(/pageheader_top.png) no-repeat; }
    #dogpage_pageheader_center {width:598px; background-color:#E9DFD0; border:1px solid #E9DFD0;}
    #dogpage_pageheader_center2 {width:600px; position:relative; margin-top:-20px; margin-bottom:-20px;}
    #dogpage_pageheader_bottom {width:600px; height:20px; background: url(/pageheader_bottom.png) bottom no-repeat;}
    #dogpage_pageheader_title {font:italic normal 20px Georgia,Times,serif; color:#776848;padding:10px; padding-bottom:0px;}
    #dogpage_pageheader_text {font:italic normal 16px Georgia,Times,serif; color:#6D695F;padding:10px; padding-bottom:0px; padding-top:5px;}
    #dogpage_prevnext {text-align:right; font:italic normal 20px Georgia,Times,serif; color:#6F6550; padding:10px;}
    #dogpage_prevnext a{color:#8B681B; text-decoration:none;}
    #dogpage_prevnext a:hover{color:#000; text-decoration:none;} 
    #dogpage_prev {padding-right:20px; display:inline;} 
    #dogpage_next {display:inline;}
    Here's the new CSS:
    Code:
    #dogpage_pageheader {width:600px; margin-left:50px;}
    #dogpage_pageheader_top {width:600px; height:20px; background: url(/pageheader_top.png) no-repeat; }
    #dogpage_pageheader_center {width:598px; background-color:#E9DFD0; border:1px solid #E9DFD0;}
    #dogpage_pageheader_center2 { width:600px; position:relative; margin-top:-20px; margin-bottom:-20px;}
    #dogpage_pageheader_bottom {width:600px; height:40px; background: url(/pageheader_bottom.png) top no-repeat;}
    #dogpage_pageheader_title {font:italic normal 20px Georgia,Times,serif; color:#776848;padding:10px; padding-bottom:0px;}
    #dogpage_pageheader_text {font:italic normal 16px Georgia,Times,serif; color:#6D695F;padding:10px; padding-bottom:0px; padding-top:5px;}
    #dogpage_prevnext {text-align:right; font:italic normal 20px Georgia,Times,serif; color:#6F6550; padding:10px;}
    #dogpage_prevnext a{color:#8B681B; text-decoration:none;}
    #dogpage_prevnext a:hover{color:#000; text-decoration:none;} 
    #dogpage_prev {padding-right:20px; display:inline;} 
    #dogpage_next {display:inline;}

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    If I copy your HTML and old CSS into a new document it works/looks as expected in IE8 and FF, so possibly either the JS or some other CSS was having an effect on it.

    The section itself has an overuse of DIV's tbh, I don't see what use the DIV's center and center2 have!

  • #6
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The section itself has an overuse of DIV's tbh, I don't see what use the DIV's center and center2 have!
    I don't either!


    But I used to think to myself, "Maybe if the inner content was nearer to the edges, riding up on the rounded corners by using negative margins, it would look tighter, and better." However, this was tried with only one center, and the background color rode up on the rounded corners too, so I put the text into center2, along with the negative margins, and put the background-color in the outer center.


  •  

    Posting Permissions

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