Results 1 to 2 of 2

Thread: M$ needs to be slaped in the face. CSS problems

  1. #1
    Join Date
    Sep 2007
    Posts
    10

    M$ needs to be slaped in the face. CSS problems

    Hey there guys, i'm trying to finished up a site and it looks perfect in Safari, FF but when IE comes to town, you want to pull your hair out.

    So my current woes is in IE 6,7.

    IE6
    1. The navigation floats right I(Its suppose to be center with margin: 0 auto, and there is no rule that says float right.
    2. The left side of my sliding doors ( rounded nav) does not show up.
    3. Drop down menu doesn't work as well.
    4. In my 3 main boxe ( they absolute position) The content inside (h2, ul list) are pushed way up.


    IE7
    1. Nav stays center, just sliding doors left side img does not appear
    Same as 4 in IE6 problem


    I've been trying to figure out different solutions to make these elements work the way there suppose to but no luck. The only alternative i have at the moment is to write IE6, IE7 only css rules. Thats something i really dont want to do. I still need to clean up alot of the css so please excuses the mess.

    Heres the css and xhtml filenotaless.net/ie_problems.zip

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I've managed to get IE7 and IE6 to show the menus better but I haven't cured all the problems. I did it the easy way by inserting conditional comments as the styles are so complicated I couldn't quickly find a solution that worked for all browsers.

    Insert this in the index.html file head section after the main stylesheet link just before the </head> tag:-

    <!--[if ie]>
    <style type="text/css">
    #nav ul ul { margin:1em 0 0 -72px; }
    #topPanel ul { display: block; position: relative; top: 100px; }
    </style>
    <![endif]-->

    <!--[if ie 6]>
    <style type="text/css">
    body {behavior:url(csshover.htc);}
    #nav_container { width: 980px; }
    #nav_ul_one { margin-left: 100px; }
    #nav_ul_one li { float: left; }
    </style>
    <![endif]-->

    You need to download csshover.htc file Version 1.42.060206 from near the bottom of this page:-
    http://www.xs4all.nl/~peterned/csshover.html
    There's no need to open it and look at it, just put it in the same folder as the html file.

    Firefox and IE6 show the second level nav links side by side under item 1 and I haven't found a solution for that.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Problems Positioning with CSS
    By kirstybandm in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 17 Jan 2006, 05:33 AM
  2. Having Problems with CSS Positioning
    By kirstybandm in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 13 Jan 2006, 09:28 AM

Posting Permissions

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