2 replies [Last post]
mhulse
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-10-06
Posts: 5
Points: 0

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:

<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:

<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:

/* 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! Laughing out loud

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????? Sad

Oh man, please help.....

BTW, I have not even had a chance to test on any other platform/browsers exept for the ones mentioned...

Thanks
Cheers
Micky

studavis
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-10-05
Posts: 5
Points: 0

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

have you tried floating your main content div right?

mhulse
Offline
newbie
Last seen: 17 years 16 weeks ago
Joined: 2004-10-06
Posts: 5
Points: 0

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

studavis wrote:
have you tried floating your main content div right?

Thanks for the quick reply stu, I appreciate you input... actually, paul over at sitepoint was able to help me out with this code:

Paul O'B wrote:
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.
#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.

Thanks again!
Cheers
Micky