Hi!

 

I have a serious problem with IE6 and floating. I try to make a full CSS skin with 3 panes layout based on Issue 25. When I use some of the new browsers (IE7, Firefox 2.x, Opera) the skin looks great, I got the same result what I want.

 

But IE6 completely ignores the pane’s width value, and it drops the modules under each other. I define the with property in pixels, and add 3 panes with floats just like in Issue 25.

 

I try to use the display: inline property, but it still not work under IE6. Do anybody know solution for this kind of behavior? In Hungary the IE6 still very common this time, that is why I need to solve the problem.

 

You can visit the site here: www.zenejatek.hu

 

The CSS code:

 

#leftside /* Group together the leftpanel and midpanel */

{

    float: left;

    width: 854px;

}

#rightside /* Contain the rightpane div */

{

    float: right;

    width: 160px;

}

#leftpanel /* Contain the leftpane div */

{

    float: left;

    width: 160px;

}

#midpanel /* Contain the contentpane, midpane1, midpane2, bottompane, footerpane */

{

    float: right;

    width: 694px;

}

.midpane1

{

    float: left;

    width: 340px;

}

.midpane2

{

    float: right;

    width: 340px

}

Thanx

Lajos

Hi!

I found the source of the problem!

The problem is in the container CSS file instead of skin CSS. The container’s padding property were set to 20px.  Normally, when the container CSS was applied on any element, the skin CSS already defined the space amount that available the particular element.

 

I set the PANEs width property in the skin CSS file, and I works correctly almost every browser. But (I don’t know why) IE6 stretch the space for the container, because It “think” the padding had to work like a margin. Incomprehensible.

 

Now I use this code in the page’s header to detect IE6, and set an alternative CSS for it.

 

<!--[if IE 6]>

 

Thanks for this site:

 

http://www.thesitewizard.com/css/excludecss.shtml

 

Do you have any clue, how to tell for IE6 that DO NOT stretch the available space for the container? How to get padding work?

 

Lajos

Hello,

It's due to the box model of IE - do a search in google on ie and box model and you will see quite a few articles discussing it. - Basically older versions of IE reads the border, padding, margin differently.

- You need to ensure you are using XHTML transitional DOC TYPE which fixes a lot of the problems in IE6.

hi,nlui:
my problem is that I do not make a two divs float at the same level, explained to me, I want to:

HTML code :

<div Id="LeftPane" runat="server">

<div Id="RightPane" runat="server">

Is your CSS typed with:

# wrapRightPane

or is it formatting from the forum? They should be:

#wrapRightPane

Also, look at the divs in the HTML - the floatleft and float right divs need to be next to each other, currently the float left is just insode the wrap div - to get floats to work would need:

<div id="wrapBody"> 
  <div Id="wrapLeftPane"> 
     <div Id="LeftPane" runat="server"> 
  div> 
<div id="wrapRightPane"> 
    <div Id="RightPane" runat="server"> 
    div> 
div> 

 

I misread the html above with the formatting - check yours is similar to this:
To give you an idea, I have added spaces between the tags so that it displays correctly in the forum:

< div id="wrapBody" >

      < div id="wrapLeftPane" >
 
            < div id="LeftPane" runat="server" > < / div >
 
      < / div >

      < div id="wrapRightPane" >

             < div id="RightPane" runat="server" >

If all is correct, try reducing the width of each to 40% and see if they display side by side, you can then increase the % to find the optimum value.