SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
-
Mar 17, 2008, 14:26 #1
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Problem with Layout - Caused by not Clearing?
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;
}
-
Mar 18, 2008, 03:13 #2
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Mar 18, 2008, 03:56 #3
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code: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; }
-
Mar 18, 2008, 04:19 #4
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry diden't have my breakfast yet so a bit slow
.
To fix number 3 just add:
Code:#quoteBox h2{ margin: 0; }
-
Mar 18, 2008, 04:29 #5
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Mar 18, 2008, 04:37 #6
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 18, 2008, 04:46 #7
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think your original two problems also can be cured by changing the quotebox style a little.
Code CSS:/* 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; }
Happy ADD/ADHD with Asperger's
-
Mar 18, 2008, 05:03 #8
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
updating #quoteBox .last to:
Code:#quoteBox .last{ height: 10px; background: url("http://www.shangpa.org/devotees/karmadungyu/etravel/_images/quote_box_lower.jpg") no-repeat top left #fff; }
And removing width and height from #head will fix the space in IE6.
Code:#head { background: url("http://www.shangpa.org/devotees/karmadungyu/etravel/_images/head_short.jpg") no-repeat top left #fff; }
-
Mar 18, 2008, 05:17 #9
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 18, 2008, 05:19 #10
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Did you try removing the width and height from #head?
-
Mar 18, 2008, 05:33 #11
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Mar 18, 2008, 05:48 #12
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Mar 18, 2008, 05:52 #13
- Join Date
- May 2003
- Location
- Colchester
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 18, 2008, 06:22 #14
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Unfortunately, I've still got the bar across my page in IE6 and below - please see screenshot attached to this post.
(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:
Code CSS:/* 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; }
Happy ADD/ADHD with Asperger's
Bookmarks