Horizontal blocks stack vertically only in IE7
Hey guys,
Ive been struggling with this for a while. Only in IE7 my horizontal blocks seem to stack vertically to the left of the page. I assume its just my css but i just cant figure out why it only does this in IE7. It works fine in ie8 and firefox
it should look like:
block1 | block2 | block 3 |
instead it looks like:
block1
block2
block3
(all over lapping each other)
here is my css for the horizontal blocks:
#bottombottom {
margin-left: 15px;
margin-top: -190px;
width: 100%px;
clear: left;
float: left;
padding-bottom: 0px;
}
#bottombottom .block {
float: left;
margin-right: 10px;
border: solid 1px #c0c0c0;
}
=-=-=-=-=
#block-block-14 {
background: #fff;
height: 235px;
width: 205px;
margin-right: 10px;
margin-top:
padding-top: -2px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
float: left;
}
#block-block-15 {
background: #fff;
height: 235px;
width: 477px;
margin-right: 10px;
margin-top:
padding-top: 3px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
float: left;
}
#block-block-16 {
background: #fff;
height: 235px;
width: 205px;
margin-right: 10px;
margin-top:
padding-top: -2px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
float: left;
}
What am i doing wrong?
I have come across problems
I have come across problems similar to yours in IE when using floats and margins/padding. Why are your margin-tops included but not defined? You may have to play around with your margins and padding and make sure they add up to less than the width of your containing div. Otherwise try a google search for IE7 float margin or IE7 float padding.
Sidenote, it makes it easier to read if you use CSS shorthand to combine the different padding. Ex.:
padding-top: -2px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
can be:
padding: -2px 10px 10px 10px;
the pattern is padding: top right bottom left;
Do you have a URL of the site
Do you have a URL of the site so we can see the problem and look at the source? That would make it much easier to locate your problem.
www.opstijgendenevel.nl