SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    & now for some bugz...

    Hi folks,

    Getting close to what I want with this page which is here:
    http://www.kevinthebath.com/test/

    Here's a summary of problems that I don't know how to fix...

    Firefox: All OK

    Netscape 7: All OK

    IE 6:
    The space/margin between the "little toe on the Contact Us button" and the first "header_cell" is 50px (it should be 20px).
    There's also an extra 20px space between the bottom of "cell_title" border and the image.
    Lastly there's a 20px gap between the the second "header_cell" and second "middle_cell_outer".

    IE 5.5:
    The same error as in IE 6 where there's a 20px gap between the the second "header_cell" and second "middle_cell_outer".
    The "right_text_outer" should be vertically aligned at the top (as in the other browsers), but it being pushed down to line up with the bottom of the "left_text_outer".

    Opera:
    So close... the border of the "middle_cell_outer" is extending out 2px too far to the right.

    All help & input much appreciated...

    Cheers,
    kamm...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres a couple of fixes for you for ie6.

    The white gap is caused by your spacer element so change the css to this.

    Code:
    .spacer{
    height:10px;
    overlow:hidden;
    }
    p.spacer {margin:0;padding:0}
    The 50px gap in ie is caused by a whitespace bug in the html. All those commenst tags are adding space to the layout so you will have to remove them or find positions that don't affect anything.

    This sets the gap to 20px as in mozilla.
    Code:
    	 <div id="bodymiddle"> 
    		<div id="content"> 
    		 <div class="header_cell"></div>
    		 <div class="middle_cell_outer"> 
    			<div class="middle_cell_inner"> 
    			 <div class="left_text_outer"> 
    				<div class="left_text_inner"> 
    				 <div class="cell_title"> 
    					<ul>
    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    That worked a treat...

    I'm still at a loss to know why the right_text_outer is being pushed down the way it is in ie 5.5 - any clues on that one..?

    Thanks again for taking the time to help...

    uncommented version here:
    http://www.kevinthebath.com/test/index.php
    commented version here:
    http://www.kevinthebath.com/test/indexBAK_04.php

    Cheers,
    kamm...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In ie5 its the 100% in the float that is throwing it off.

    Code:
    .cell_title {
    float:left;
    font-size:110%;
    line-height:normal;
    }
    Try it without the width and see if it cures the problem. Check it doesn't upset other browsers or you may have to hack it for ie only. Or give it the width in pixels which you should be able to work out.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    pa
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What a nice looking site!

  6. #6
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Yup - removing "width" fixed it - didn't seem to mess anything else up either (phew)...

    I thought it was a width problem, but wasn't looking deep enough...

    Thanks again Paul, couldn't possibly have got this far without your assistance...

    ==================

    summertime, thanks for compliment...

    hasta later,
    kamm...


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
  •