Problem with Layout - Caused by not Clearing?

[KarmaDungyu]

Hi all, I'm working on a new site design, and am experiencing problems in IE on PC. The design is fine and as desired in Firefox 2 (pc).

There's two problems, which I suspect might be related, and have guessed are due to clearing floats incorrectly(?) .... though can't nail it down.

My page is at:
http://www.shangpa.org/devotees/karm...vel/index.html
with the stylesheet at:
http://www.shangpa.org/devotees/karm...style/main.css

The first problem is a gap which appears between my <div id="head"> ... and my <div id="content"> in the secondary column on the right. I've attached screenshots of both FF and IE6. You can see the area which appears in IE6 which is a white stripe across the page. The issue is in IE5, 5.5 and 6.


The second problem is my box in the secondary column, which has 3 images, a box header image, a box bottom image, and a repeating image which should tile to allow the box to grow bigger vertically.

Again this displays fine in Firefox, but not in IE 5, 5.5, 6 and 7. For some reason I get bits of repeated tiled middle above the box, and no bottom of the box.

Having banged my head on these two problems, I'd be really grateful indeed if anyone could help me see what I'm missing.

many thanks in advance,

Karmadungyu

Full code is at the two links above, but, the XHTML for this box is:
<div id="quoteBox">
<h2>- Get a Quote -</h2>
<p>(quote engine here)</p>
<p class="last"></p>
</div>
The CSS is:
#quoteBox {
margin-top: 30px;
width:244px;
background: url("../_images/quote_box_middle.jpg") repeat-y top left #fff;
}
#quoteBox h2 {
padding: 10px 0px 10px 20px;
background: url("../_images/quote_box_top.jpg") repeat-y top left #fff;
color:#FFFFFF;
font-size: 17px;
}
#quoteBox .last{
padding-bottom: 10px;
background: url("../_images/quote_box_lower.jpg") repeat-y top left #fff;
}
#quoteBox h2, #quoteBox p{
padding-left:20px;
padding-right:20px;
}

[KarmaDungyu]

Hi all, I've been working away at this overnight, and still no progress with either issue. Tension is rising as my deadline on this site looms larger! I'm sorry I haven't posted more code trying to detail the issue as I really don't have much clue as to what is causing the problems.

Any clues as to what I should focus on in investigating this would be truly appreciated :-)

many thanks in advance,

Karmadungyu

[fredda]

1. add overflow: hidden; to #content to make sure everything stays inside.
2. Remove the padding-bottom: 10px and give #quoteBox .last a height of 10px instead.
3. the background image that gets repeated above the box comes from your h2 rules further up in your style sheet.

h2 {
	margin: 40px 0px 15px 0px;
	font-family: georgia, "times new roman", times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #143788;
	line-height: 1.25em;
	}

I would try and remove those rules to see how it will look. Perhaps check out the css reference for some explanation to why it inherits it.

[fredda]

Sorry diden't have my breakfast yet so a bit slow .
To fix number 3 just add:

#quoteBox h2{
	margin: 0;
}

[KarmaDungyu]

Hi Fredda, many thanks for your help with this. I've implemented your suggestions, and made some progress, though several problems still remain.

I've added overflow:hidden to #content div, but unfortunately the bar across the page still remains. I'm not sure where to go with that one. Any further ideas?

I was wondering, what is the rationale behind setting overflow to hidden here? Is this something to do with haslayout?

I made the changes you suggested to the quoteBox divs, and found that the repeated image above came from the margins set in the general h2 styles. Many thanks for that!

However, in IE6 and below, there's still a small part of the image attached to the quoteBox div showing below the bottom image attached to the .last <p> tag. Changing the margins doesn't remove the issue. Any suggestions as to how to remove that overlap?

Once again, many thanks with your help.

Karmadungyu

1. add overflow: hidden; to #content to make sure everything stays inside.
2. Remove the padding-bottom: 10px and give #quoteBox .last a height of 10px instead.
3. the background image that gets repeated above the box comes from your h2 rules further up in your style sheet.

h2 {
	margin: 40px 0px 15px 0px;
	font-family: georgia, "times new roman", times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #143788;
	line-height: 1.25em;
	}

I would try and remove those rules to see how it will look. Perhaps check out the css reference for some explanation to why it inherits it.

[KarmaDungyu]

Sorry diden't have my breakfast yet so a bit slow .
To fix number 3 just add:

#quoteBox h2{
	margin: 0;
}

Hi there ... thanks for that .... yep, I'd got that one :-)

[Erik J]

I think your original two problems also can be cured by changing the quotebox style a little.

/* Quotebox Styles */	
#quoteBox {
	margin-top: 30px;
 	width:244px;
	background: url("quote_box_middle.jpg") repeat-y top left #fff;
}
#quoteBox h2 {
	margin-top: 0;                 /* added */
	padding: 10px 0px 10px 20px;
	background: url("../_images/quote_box_top.jpg") no-repeat top left #fff;           /* no-repeat */
	color:#FFFFFF;
	font-size: 17px;
}
#quoteBox .last{
	height: 10px;                  /* added */
	/*padding-bottom: 10px;*/      /* removed */
	background: url("../_images/quote_box_lower.jpg") no-repeat top left #fff;           /* no-repeat */
}
#quoteBox h2, #quoteBox p{
	padding-left:20px;
	padding-right:20px;
}

[fredda]

Hi,
updating #quoteBox .last to:

#quoteBox .last{
	height: 10px;
	background: url("http://www.shangpa.org/devotees/karmadungyu/etravel/_images/quote_box_lower.jpg") no-repeat top left #fff;
}

will fix the bottom in IE6.
And removing width and height from #head will fix the space in IE6.

#head {
	background: url("http://www.shangpa.org/devotees/karmadungyu/etravel/_images/head_short.jpg") no-repeat top left #fff;
	}

The overflow: hidden; was added for clearing purposes. Paul wrote an excellent faq about floats and clearing them here: http://www.sitepoint.com/forums/show...5&postcount=15

[KarmaDungyu]

Hi Erik, changing the background images to no-repeat fixed the problems with the box .. many thanks to both of you :-)

Unfortunately, I've still got the bar across my page in IE6 and below - please see screenshot attached to this post.

many thanks once again,

Karmadungyu

I think your original two problems also can be cured by changing the quotebox style a little.

/* Quotebox Styles */	
#quoteBox {
	margin-top: 30px;
 	width:244px;
	background: url("quote_box_middle.jpg") repeat-y top left #fff;
}
#quoteBox h2 {
	margin-top: 0;                 /* added */
	padding: 10px 0px 10px 20px;
	background: url("../_images/quote_box_top.jpg") no-repeat top left #fff;           /* no-repeat */
	color:#FFFFFF;
	font-size: 17px;
}
#quoteBox .last{
	height: 10px;                  /* added */
	/*padding-bottom: 10px;*/      /* removed */
	background: url("../_images/quote_box_lower.jpg") no-repeat top left #fff;           /* no-repeat */
}
#quoteBox h2, #quoteBox p{
	padding-left:20px;
	padding-right:20px;
}

[fredda]

Did you try removing the width and height from #head?

[KarmaDungyu]

Did you try removing the width and height from #head?

Hi - I have, and the div background image doesn't show at all then.

However, I tried adding the overflow:hidden; you mentioned earlier directly to this div, and 'eureka' .... it fixes the image problem! So many, many thanks :-)

I've been looking at the 'haslayout' materials on the web ... is that what the issue was here?

best wishes,

Karmadungyu

[fredda]

I've been looking at the 'haslayout' materials on the web ... is that what the issue was here?

Yes i think so. I would read csswiz's IE6 bugs and fixes article for an explanation and how to easily solve them: http://www.dave-woods.co.uk/?p=143

[KarmaDungyu]

Nice reference :-)

once again - many thanks,

Karmadungyu

Yes i think so. I would read csswiz's IE6 bugs and fixes article for an explanation and how to easily solve them: http://www.dave-woods.co.uk/?p=143

[Erik J]

Unfortunately, I've still got the bar across my page in IE6 and below - please see screenshot attached to this post.

Sorry, don't know how missed that.
(Guess I thought it was caused by IE not collapsing margins when element has haslayout.)

It is old IE doesn't respect height setting, and h1-tags has a bottom margin that grows the head-height. You could hide #head overflow or remove the margin that causes it:

/* Page Headline Styles */
#mainHeadline {
	text-indent: -5000px;
	height: 89px;
	width: 350px;
	background: url("travel_with_confidence.gif") no-repeat;
	background-position: 40px 60px;
	margin-bottom: 0;
}