CODEWITHSUNDEEP
htmlcssinternet-explorer-7css-float
Micheal
Micheal

Reputation: 71

IE7 float left and stacking problem

Quick question about floating elements left with IE7. Basically I have some HTML like this

<div><a href></a></div>
<div><a href></a></div>
<div><a href></a></div>
<div><a href></a></div>

The divs need to line up next to each other inline horizontally.

Right now the divs are floated left and the anchor tags inside them have background images, width, height and display:block.

As of now it works in all browsers except IE6 + 7. In those two browsers everything is stacked on each other like a pile vertically. Is there a quick way to fix for IE? I only have access to the CSS file. I cannot edit the HTML.

Upvotes: 7

Views: 9063

Answers (2)

Mike Grace
Mike Grace

Reputation: 16924

Make sure you have the width of the parent container wrapping your divs that you are floating left. Also set the width of each div that is floating left and it should work.

<div id='wrap-it'>
    <div><a href></a></div>
    <div><a href></a></div>
    <div><a href></a></div>
    <div><a href></a></div>
</div>
<style>
    #wrap-it { width: 200px; }
    #wrap-it div { float: left; width: 50px; }
</style>

Upvotes: 3

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

try using this: 

zoom: 1; // IE hack to trigger hasLayout
*display: inline; // IE hack to achieve inline-block behavior
*float: none;

it will only be read by IE, it's a hack, but since you can't access the html, might work.

Upvotes: 7

Related Questions