...

View Full Version : Div broken into two sections in IE8



StacyR
06-11-2010, 07:12 PM
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!

Scriptet
06-11-2010, 07:30 PM
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:


#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?

StacyR
06-11-2010, 07:56 PM
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!

StacyR
06-12-2010, 05:48 PM
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:

<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:

#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:

#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;}

Scriptet
06-12-2010, 10:49 PM
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!

StacyR
06-13-2010, 02:00 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum