CODEWITHSUNDEEP
cssinternet-explorer
Nunoestrada
Nunoestrada

Reputation: 25

CSS - Class selector not working in IExplorer

I dinamically create the following div structure:

<div id=Box>
   <div id=outer>
       <div id="inner1" class="split_right">
          some 
       </div>
       <div id="inner2" class="split_left">
          some 
       </div>
          .....
          .....
       <div id="inner(n)" class="split_right">
          some 
       </div>
       <div id="inner(n+1)" class="split_left">
          some 
       </div>

   </div>
</div>

The number of divs is dependent on the number of s passed in one array. The problem is, that I want to give a css rule to split_right and split_left like this:

.split_left {
float: left;
margin: 0px 10px 5px 10px;
}
.split_right {
float: right;
margin: 0px 10px 5px 10px;
}

This works fine on chrome and safari but doesn't work in any IE6+

What am I doing wrong??

UPDATE

This is what I am trying to do:

http://postimage.org/image/g2t4qsq4v/

The outer div has a fixed width equal to 2*inner div width + 50pixels so that 2 s fit together in the same line.

Upvotes: 0

Views: 154

Answers (2)

Huangism
Huangism

Reputation: 16438

Not sure exactly what is not working in IE and I don't know if you have a wrapper with a defined width that fits those just perfectly. But there is a famous bug in IE 6.. maybe 7 too I am not sure. If you have float left and margin in the same direction for example float left, and margin left xx number of pixels in IE 6 it will double the margin. So if you do have a define spaced that those boxes supposed to fit into, in IE it will most likely wrap to the next line making it look like it is not floating

add

display: inline;

to the css of each split class

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

Try it with this:

<div id=Box>
   <div id=outer>
       <div id=inner1 class="split_right">
          some image
       </div>
       <div id=inner2 class="split_left">
          some image
       </div>
          .....
          .....
       <div id=inner(n) class="split_right">
          some image
       </div>
       <div id=inner(n+1) class="split_left">
          some image
       </div>

   </div>
</div>

You have forgotten the quotes

Upvotes: 1

Related Questions