SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot KarmaDungyu's Avatar
    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;
    }
    Attached Images Attached Images
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  2. #2
    SitePoint Zealot KarmaDungyu's Avatar
    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
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  3. #3
    SitePoint Guru
    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;
    	}
    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.

  4. #4
    SitePoint Guru
    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;
    }

  5. #5
    SitePoint Zealot KarmaDungyu's Avatar
    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

    Quote Originally Posted by fredda View Post
    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;
    	}
    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.
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  6. #6
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    Sorry diden't have my breakfast yet so a bit slow .
    To fix number 3 just add:
    Code:
    #quoteBox h2{
    	margin: 0;
    }
    Hi there ... thanks for that .... yep, I'd got that one :-)
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    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

  8. #8
    SitePoint Guru
    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;
    }
    will fix the bottom in IE6.
    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;
    	}
    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

  9. #9
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


    Quote Originally Posted by erik.j View Post
    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;
    }
    Attached Images Attached Images
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  10. #10
    SitePoint Guru
    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?

  11. #11
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    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
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  12. #12
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KarmaDungyu View Post
    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

  13. #13
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice reference :-)

    once again - many thanks,

    Karmadungyu

    Quote Originally Posted by fredda View Post
    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
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    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.
    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:
    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

Posting Permissions

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