IE8 aligning div at bottom

HTML & CSS
1

Hello,

Everything work ok between Chrome and FF except IE8.

The menu is not aligned all the way to bottom as in FF.

I have attached a img of the site.

You also can check the site here: http://testriva.com/f/

Thank you
EEE

2

Hi,

The problem is the curvy corners js you are using is adding extra elements into the page which is upsetting the stacking context. You will need to move the menu outside of those curvy corner routines like so.


                                &#1606;&#1589; &#1606;&#1589; &#1606;&#1589; &#1606;&#1589; &#1606;&#1589; &#1606;&#1589; </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   [B] <div id="menu-wrapper">
        <ul id="lower-menu">
            <li> <a href="#">&#1575;&#1604;&#1585;&#1574;&#1610;&#1587;&#1610;&#1577;</a> </li>
            <li> <a class="selected" href="#">&#1605;&#1606; &#1606;&#1581;&#1606;</a> </li>
            <li> <a href="#">&#1582;&#1583;&#1605;&#1575;&#1578;&#1606;&#1575;</a> </li>
            <li style="border:none;"> <a href="#">&#1573;&#1578;&#1589;&#1604; &#1576;&#1606;&#1575;</a> </li>
        </ul>
    </div>[/B]
    <div id="footer">
        <div id="softriva"> <img src="http://testriva.com/f/images/softriva.png" width="179" height="35"
          alt="" /> </div>
        <div id="faye-logo"> <img src="http://testriva.com/f/images/arabic_faye.png" width="108" height="36"
          alt="" /> </div>
    </div>
</div>
</body>
</html>

You should see that is on the same level as the footer now.

Next adjust the css to compensate for the new position.


#wrapper{position:relative}
div#menu-wrapper{
    bottom:55px;
}

Be careful with your code as you seem to want to give IE8 an ie5 stylesheet.


<!--[if IE 8]> <style type="text/css"> @import url(stylesheets[B]/ie5[/B].css); </style> <![endif]-->

Luckily the style sheet is empty :slight_smile: