SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation OMG!!! IE/Mac Grrrrrrrr's!!!!!!!! Plz help...

    Title: OMG!!! IE/Mac Grrrrrrrr's!!!!!!!! Plz help...

    Ok, ok, this is soooo lame....

    Here is my problem (Internet Explorer 5.2.3/Macintosh-OS X):



    See that gap?

    Compare to this (Safari 1.2.2(v.125.7)/Macintosh-OS X):



    I am using a simple two column layout, the text links are in the sidebar div, and the images/text are in the main content div....

    Here is HTML code for side-bar links:

    Code:
    <div id="sidebar-a"><!-- /////////////// BEGIN DIV "SIDEBAR-A" /////////////// -->
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=3d" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{3D]">3D</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=art" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Art]">Art</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=audio" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Audio]">Audio</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=bitmap" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Bitmap]">Bitmap</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=fontography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Fontography]">Fontography</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=interactive" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Interactive]">Interactive</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=logotypes" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Logotypes]">Logotypes</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=misculaneous" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Misculaneous]">Misculaneous</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=photography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Photography]">Photography</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=playground" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Playground]">Playground</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=print" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Print]">Print</a>
    <br />
    <span class="arrow">&laquo;</span><a href="#" class="current" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Vector]">Vector</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=videography" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Videography]">Videography</a>
    <br />
    <span class="arrow_off">&rsaquo;</span><a href="folio.php?display=websites" title="&rarr;&nbsp;ambiguism&nbsp;&larr;&nbsp;{Websites]">Websites</a>
    <br />
    </div><!-- /////////////// END DIV "SIDEBAR-A" /////////////// -->
    And the code for my main content div looks like this:

    Code:
    <div id="content"><!-- /////////////// BEGIN DIV "CONTENT" /////////////// -->
    <div class="thumbs65">
    	<p  class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
    	<img src="../img/folio/photography/thumbs/tn_gm_ps_01.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_01.jpg" /></a></p>
    	<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_01/slideshow.php','','width=560,height=675')">
    	The Playground</a></p>
    	<p class="under_p6">Description: First time I picked up a camera in years.</p>
    	<p>Theme: Stay confined to small playground.
    	<br />Notes: none.</p>
    	<div class="clear">&nbsp;</div>
    </div>
    
    <div class="thumbs65">
    	<p  class="l_fl"><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
    	<img src="../img/folio/photography/thumbs/tn_gm_ps_02.jpg" class="img_border" width="65" height="65" border="0" alt="tn_gm_ps_02.jpg" /></a></p>
    	<p><a href="#" onmousedown="JavaScript:MM_openBrWindow('img/folio/photography/gm_ps_02/slideshow.php','','width=560,height=675')">
    	The Train Station</a></p>
    	<p class="under_p6">Description: My second photo outting in years.</p>
    	<p>Theme: Train station.
    	<br />Notes: none.</p>
    	<div class="clear">&nbsp;</div>
    </div>
    </div><!-- /////////////// END DIV "CONTENT" /////////////// -->
    So, if you are not confused as of yet, here is my CSS:

    Code:
    /* This is the main container div that holds #content and #sidebar-a: */
    #container {
    	width: 850px;
    	padding: 0px;
    	margin-top: 50px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    /* Main content DIV: */
    #content {
    	margin-left: 270px;
    	margin-right: 0px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding-top: 0px;
    	padding-right: 50px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    /* Sidebar DIV: */
    #sidebar-a {
    	float: left;
    	width: 200px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 50px;
    	margin: 0px;
    }
    /* Below for links: */
    .arrow {
    	color: #666600;
    	font-weight: bold;
    }
    .arrow_off {
    	color: #333333;
    	font-weight: bold;
    }
    /* And this is for text/images in content DIV: */
    div.thumbs65 {
    	float:left;
    	width: 480px;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 10px;
    	margin-left: 0;
    }
    .l_fl {
    	float:left;
    	display: block;
    	border:0;
    	padding-right: 10px;
    }
    .under_p6 {
    	margin: 6px 0 0 0;
    }
    .img_border {
    	border: 1px solid #000000;
    }
    p { 
    	margin: 0;
    }
    div.clear {
    	clear: left;
    	height: 0;
    	line-height: 0;
    }
    Hopefully that the above is not too confusing... better yet, hopefully the above is a quick fix!

    I did notice that if I put my sidebar-a after my content (in HTML), the content works fine in IE and Safari, but the sidebar links get pushed to bottom of main content DIV.... maybe I should do that and have the sidebar CSS clear right?

    Why do the contents of my content DIV get affected by the contents of the sidebar DIV?????

    Oh man, please help.....

    Thanks
    Cheers
    Micky

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

    It looks like the clear is clearing any floats previously in the html (as well it might) and clearing the side bar as instructed.

    Try wrapping everything that is insice the #content div in another div and give it these styles.
    Code:
    #innercontentwrap {
    width:99.9%;
    float:left;
    }
    Keep all the thumbs divs inside this innerwrapper. Hopefully this will contain the clear statements inside the stacking context because it is already in a float and will have a hard job to clear itself.

    I haven't had a chance to check your code but this is the usual solution I offer and seems to work.

    Paul

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Cool! Thanks Paul, that worked great! Phew, I really appreciate you input, thanks for sharing your expertise!

    Cheers!
    Micky


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
  •