2 replies [Last post]
Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Hi All,

Sorry to bother you but I really cant figure this one out. I'm building this site with a menu coming up from the bottom. Well to make a long story short, here is a demo: http://www.fabriekopzijnfrans.nl/test/index.htm

The menu works fine in FF, Opera, Safari and IE 7 (tested on PC). But (as you could guess) it does not work in IE 6 and 5. The different section in the 'dropdown' of the menu do not float next to each other. They do not seem to float at all. If I have them float to the right they will do so in all browsers accept IE 6/5.

And a last weird thing is that IE 6/5 does not seem to read the last iine in de CSS concerning the mouse overs (making the links white).

I just can't figure out what I'm doing wrong. Can anyone please help. Thanks a lot.

|||||||||| MY CSS ||||||||||

/* ----- ||||| GLOBAL RESET ||||| ----- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img,abbr {border:0;}
address,caption,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,strong,th,var {font-style:normal; font-weight:normal;}
ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:1.0em;}
a {text-decoration:none;}

/* ----- ||||| ALGEMEEN ||||| ----- */
body {background:url(../__images/body_back.jpg) no-repeat center 0px #000; behavior:url(csshover.htc); text-align:center; font-family:arial,sans-serif; font-size:0.75em; line-height:1.55; color:#fff;}
#wrapper {margin:0px auto; padding:0; width:996px; height:620px; text-align:left; background:url(../__images/wrapper_back_index.png) repeat-x;}

/* ----- ||||| MENU ||||| ----- */
#menu {position:absolute; top:565px; height:30px; padding:0 25px;}
#menu:hover {background:#000;}

#menu li {float:left; width:240px; margin:0; text-transform:uppercase; font-family:"arial narrow",arial,sans-serif; font-weight:bold; font-size:14px;}
#menu li.last {margin:0;}
#menu li a {color:#fff; padding:0 0 0 10px;}
#menu li a:hover, #menu li a.current, #menu li a.current:hover {color:#4d4d4d;}

#menu li ul {display:none;}
#menu li:hover ul {display:block; position:absolute; bottom:30px; left:0px; padding:0 25px 50px 25px; background:url(../__images/menu_black.gif) repeat-x;}
#menu li:hover ul li {width:170px; position:relative; float:left; margin:0 11px 0 0; padding:0 0 0 10px; text-transform:uppercase; font-family:"arial narrow",arial,sans-serif; font-weight:normal; font-size:14px;}
#menu li:hover ul li.last {margin:0;}
#menu li:hover ul li.gradient {width:996px; height:150px; margin:0 0 0 -25px; background:url(../__images/menu_gradient.png) repeat-x;}

#menu li:hover ul li ul {display:block; position:static; margin:0; padding:0;}
#menu li:hover ul li ul li {margin:0; padding:0;}

#menu li:hover ul li ul li a {margin:0; padding:0 0 0 7px; display:block; background:url(../__images/bullet.gif) no-repeat 0px 12px; text-transform:none; font-weight:normal; color:#808080;}
#menu li:hover ul li ul li a:hover {color:#fff; background:url(../__images/bullet_over.gif) no-repeat 0px 12px;}

|||||||||| MY HTML ||||||||||








  • About Amber

    •  

    • Partners

      • Ullamcorper libero

      • Mauris et dui eu dui rhon



    • Filosophy

      • Praesent suscipit ante

      • Suspendisse at justo in



    • Offices

      • Praesent suscipit ante

      • Suspendisse at justo in



    • Team

      • Praesent suscipit ante

      • Suspendisse at justo in



    • Jobs

      • Praesent suscipit ante

      • Suspendisse at justo in

      • Suspendisse elementum

      • Ullamcorper libero




  • Projects

    •  

    • Masterplanning

      • Praesent suscipit ante

      • Suspendisse at justo in

      • Suspendisse elementum

      • Ullamcorper libero

      • Mauris et dui eu dui rhon

      • Ullamcorper libero

      • Mauris et dui eu dui rhon



    • Architecture

      • Praesent suscipit ante

      • Suspendisse at justo in

      • Suspendisse elementum

      • Ullamcorper libero



    • Landscaping

      • Praesent suscipit ante

      • Suspendisse at justo in

      • Suspendisse elementum



    • Interior

      • Praesent suscipit ante

      • Suspendisse at justo in

      • Suspendisse elementum

      • Ullamcorper libero

      • Mauris et dui eu dui rhon




  • Downloads



  • Bertje
    Bertje's picture
    Offline
    Enthusiast
    Last seen: 12 years 29 weeks ago
    Timezone: GMT+2
    Joined: 2004-07-02
    Posts: 153
    Points: 0

    Anyone any clue? Thanks!

    Anyone any clue? Thanks!

    Bertje
    Bertje's picture
    Offline
    Enthusiast
    Last seen: 12 years 29 weeks ago
    Timezone: GMT+2
    Joined: 2004-07-02
    Posts: 153
    Points: 0

    Fixed it! Had to do with

    Fixed it!

    Had to do with the better definition of things. Final code for the menu:

    /* ----- ||||| MENU ||||| ----- */ #menu {position:absolute; top:565px; height:30px; padding:0 25px; z-index:10;}

    #menu li {float:left; width:240px; margin:0; text-transform:uppercase; font-family:"arial narrow",arial,sans-serif; font-weight:bold; font-size:14px;}
    #menu li.last {margin:0;}
    #menu li a {color:#fff; padding:0 0 0 10px;}
    #menu li a:hover, #menu li a.current, #menu li a.current:hover {color:#4d4d4d;}

    #menu li ul {display:none;}
    #menu li:hover ul {display:block; width:996px; position:absolute; bottom:30px; left:0px; padding:0 25px 50px 25px; background:url(../__images/menu_black.gif) repeat-x;}
    #menu li:hover ul li {width:170px; margin:0 11px 0 0; padding:0 0 0 10px; text-transform:uppercase; font-family:"arial narrow",arial,sans-serif; font-weight:normal; font-size:14px;}
    #menu li:hover ul li.last {margin:0;}
    #menu li:hover ul li.image img {margin:28px 0 0 0;}
    #menu li:hover ul li.gradient {width:986px; height:150px; margin:0 0 0 -25px; display:inline; background:url(../__images/menu_gradient.png) repeat-x;}

    #menu li:hover ul li ul {width:170px; position:static; margin:0; padding:0;}
    #menu li:hover ul li ul li {float:none; margin:0; padding:0;}

    #menu li:hover ul li ul li a {margin:0; padding:0 0 0 7px; display:block; background:url(../__images/bullet.gif) no-repeat 0px 12px; text-transform:none; font-weight:normal; color:#808080;}
    #menu li:hover ul li ul li a:hover {color:#fff; background:url(../__images/bullet_over.gif) no-repeat 0px 12px;}