Internet Explorer css help please

[kilps]

Hi all - I'm getting very close to giving up on this - hopefully someone here knows what's going on

Basically if you look at the website http://www.sailing360.co.za/ in Firefox everything looks fine - but if you look at it in internet explorer the sidebar on the right drops to bellow the main content...

The html layout is something like:

<div class="content">
	
	<div id="primary">
		main content
	</div> <!-- #primary -->
 
	<div class="secondary"> 
         <div class="lsidebar">
                 left part of sidebar
          </div>
          <div class="rsidebar">
                 right part of sidebar
         </div>
         </div>
</div>

The css file which should be causing any issues is http://www.sailing360.co.za/wp-content/themes/3columnk2/styles/jolie/jolie.css - and the bit which should be getting this all to work is:

#page {
background: white;
padding: 0 0 10px;
border: 5px solid #474747;
border-top: none;
width: 950px !important;
}

#primary { /* Left and Right margins to the primary content */
margin: 0 20px 0 20px !important;
}

.secondary { /* CSS for the margins to the sidebar and the whole sidebar width */
margin: 0 0 20px 545px !important;
width: 405px !important;
top:0px;
}

.lsidebar { /* CSS for left sidebar */
margin: 0 !important;
width: 180px !important;
float: left !important;
padding: 0 9px 0 9px !important;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
overflow: hidden;
}

.rsidebar { /* CSS for right sidebar */
margin: 0 !important;
width: 180px !important;
float: right !important;
padding: 0 15px 0 10px !important;
overflow: hidden;
}

thanks
kilps

 

[icyrus]

Good old IE CSS display bugs.

My first suggestion is put a clear: none; in the right sidebar and see if that helps at all.

If not, we can try something else.

 

[Moederloos]

IE + CSS = ball ache.
You can also try google variations of
"IE CSS <div>" There is a special workaround that I once had.

You can also try google "IE sucks so bad, need CSS help with DIV"

Oh - BTW, I also recall needing something special to get the scrolling inside the div to work with FF or Opera.

 

[kilps]

Good old IE CSS display bugs.

My first suggestion is put a clear: none; in the right sidebar and see if that helps at all.

If not, we can try something else.

Nope that doesn't work

I've been playing around with it with the firefox web developer toolbar - and it seems the secondary div is being stretched past it's 405px even though the ff extension still labels it's width as 405 (the ruler tells me otherwise) - but it doesn't seem like anything is causing it to stretch like that - so maybe it's a bug ... but I did read something about ie treating sizes differently so things drop down...

I did try quite a few work arounds other people have put up - thats how I got the lsidebar and the rsidebar to be next to each other (I had the same problem) - using the overflow:hidden; ...

thanks

 

[cybershark]

First problem is this image:
http://www.sailing360.co.za/wp-content/uploads/2007/06/belgium_oppies.jpg
is show at different sizes in Firefox and IE 6 for me:
Firefox 500 X 375 px
IE 6 648 X 488 px

 

[kilps]

First problem is this image:
http://www.sailing360.co.za/wp-content/uploads/2007/06/belgium_oppies.jpg
is show at different sizes in Firefox and IE 6 for me:
Firefox 500 X 375 px
IE 6 648 X 488 px

Oh my bad ... fixed but didn't make a difference (I only added that post last night...)

thanks though

 

[cybershark]

In http://www.sailing360.co.za/wp-content/themes/3columnk2/styles/jolie/jolie.css change .secondary to this:

.secondary { /* CSS for the margins to the sidebar and the whole sidebar width */
float:right;
margin: 0 0 20px 0px !important;
width: 405px !important;
top:0px;
}

 

[kilps]

In http://www.sailing360.co.za/wp-content/themes/3columnk2/styles/jolie/jolie.css change .secondary to this:

.secondary { /* CSS for the margins to the sidebar and the whole sidebar width */
float:right;
margin: 0 0 20px 0px !important;
width: 405px !important;
top:0px;
}

It works!

thanks so much

 

[cybershark]

You welcome