SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 aligning div at bottom

    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
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
                                    نص نص نص نص نص نص </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="menu-wrapper">
            <ul id="lower-menu">
                <li> <a href="#">الرئيسية</a> </li>
                <li> <a class="selected" href="#">من نحن</a> </li>
                <li> <a href="#">خدماتنا</a> </li>
                <li style="border:none;"> <a href="#">إتصل بنا</a> </li>
            </ul>
        </div>
        <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.
    Code:
    #wrapper{position:relative}
    div#menu-wrapper{
        bottom:55px;
    }
    Be careful with your code as you seem to want to give IE8 an ie5 stylesheet.

    Code:
    <!--[if IE 8]> <style type="text/css"> @import url(stylesheets/ie5.css); </style> <![endif]-->
    Luckily the style sheet is empty


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •