Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    ie hates my menu

    http://zro.redtv.org/files/cf/godard/

    I swear i've gotten this menu to work before, but something is tripping me up here...
    In ie i actually have two problems, the width is too long and the menu (at the bottom... ) is obviously messed.

    probably something stupid im overlooking, but its really irkin me... (sortof a rush job, sorry)

    I think it might have something to do with the way im doin the header graphic? (the width problem that is)

    THANKS FOR LOOKIN !

    http://zro.redtv.org/files/cf/godard/
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #2
    Regular Coder
    Join Date
    Jun 2003
    Location
    hawaii.washington state
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it might be width problems it might be placement of things.. I was trying to view your code but couldnt.. um.. are you using tables? if i saw your code i might be able to help more..

  • #3
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    couldnt see my code?
    thats weird.... huh...

    No no tables...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>
    Jean Luc Godard
    </title>
    
    <!-- Meta Tags -->
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    
    
    <meta name="description" content="The Great Filmmaker, Jean Luc Godard " />
    <meta name="keywords" content="French New Wave Cinema Godard" />
    <meta name="author" content="zro" />
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="" />
    
    <!-- CSS -->
    <link rel="stylesheet" href="main.css" media="screen,projection" type="text/css" />
    <link rel="stylesheet" href="menu.css" media="screen,projection" type="text/css" />
    <link rel="stylesheet" href="" media="print" type="text/css" />
    
    <!-- RSS -->
    
    <link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />
    
    </head>
    
    <body>
    
    <div id ="container">
    <div id="godard">
    <div id="film">
         <div id="head">
              <h1><a href=""><span>Jean Luc Godard</span></a></h1>
    
         </div> 
    
         <div id="content">
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero metus, ullamcorper id, sollicitudin id, iaculis quis, quam. Duis et lacus a lacus laoreet fermentum. Nunc dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras porta, augue vitae dignissim pretium, tellus felis cursus arcu, quis luctus lorem dui quis nunc. Donec convallis, sapien sit amet vestibulum nonummy, justo velit egestas mi, vitae pellentesque ligula quam non sapien. Ut augue turpis, ullamcorper vitae, tincidunt vel, fermentum nec, odio. Donec sed odio sed felis vulputate blandit. Phasellus nulla velit, pretium eget, sollicitudin et, volutpat sed, sapien. Etiam lectus. Cras ac justo. Curabitur ut tellus vitae justo euismod euismod. Vivamus vestibulum. Proin auctor, felis ac pulvinar ullamcorper, mauris enim venenatis nulla, eget lacinia sapien eros vitae ligula.
         </div>
         
    <ul id="menu">
      <li><a href="#nogo"><em>home</em></a></li>
      <li><a href="#nogo"><em>films</em></a></li>
      <li><a href="#nogo"><em>about</em></a></li>
      <li><a href="#nogo"><em>links</em></a></li>
      <li><a href="#nogo"><em>news</em></a></li>
    </ul>
    
    
    </div>
    </div>
    </div>
    
    
    
    </body>
    
    </html>



    MENU.CSS

    Code:
    #menu {
      padding:0;
      margin:10px 0px 0px 25px;
      list-style:none;
      }
    #menu li {
      width:75px; 
      height:20px;
      float:left;
      border:1px solid #000;
      margin-right:2px;
      }
    #menu a em {
      font-style:normal;
      font-size:1em;
      line-height:1.5em;
      }
    #menu a {
      text-decoration:none;
      color:#000;
      position:absolute; 
      width:75px;
      height:20px; 
      display:block;
      text-align:center;
      }
    
    #menu a:hover {
      width:120px; 
      height:28px;
      z-index:200;
      background:transparent url(images/opaque.gif);
      }
      
    #menu a:hover em {
      font-size:1.5em;
      line-height:1.1em;
      overflow:hidden;
      cursor:pointer;
      background:#fff; 
      border:1px solid #000;
      position:absolute; 
      width:120px; 
      height:25px;
      left:-12px; 
      top:-4px;
      }

    MAIN.CSS

    Code:
    *{
    margin:0;
    padding:0;
    }
    
    body{
    text-align:center;
    font-size:10pt;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    }
    
    #container{
    width:800px;
    height:600px;
    margin:25px auto;
    border:3px solid black;
    }
    
    #godard{
    background:url(images/godard.gif) no-repeat top right;
    height:100%;
    }
    
    #film{
    background:url(images/foot.gif) repeat-x bottom;
    height:100%;
    padding-right:359px;
    }
    
    #head{
    height:60px;
    width:584px;
    text-align:left;
    }
    
    h1{
    display:block;
    width:584px;
    height:60px;
    position:absolute;
    background:url(images/h1.gif) no-repeat top left;
    }
    
    h1 a {
    display:block;
    width:584px;
    height:60px;
    }
    
    h1 a span {
    display:none;
    }
    
    #content {
    width:350px;
    text-align:justify;
    margin:0 auto;
    height:425px;
    padding:10px;
    overflow:auto;
    border:1px solid black;
    }

    what do ya mean couldnt see my code?
    thats sounds really weird.
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #4
    Regular Coder
    Join Date
    Jun 2003
    Location
    hawaii.washington state
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah i right clicked and couldnt see your code.. maybe you have one too many divs or its placed in the wrong place.. maybe width is off just a tad bit.. i cant find the exact solution to your problem but what I think you should do is trial and error.. X the things out that you know wouldnt be causing your problem and the ones you think that would be.. trial and error.. change here and there.. and keep doing that until you have figured your problem out.. sorry i cant be more of help..

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for menu.css, its better but not perfect.
    Code:
    #menu {
      padding:0;
      margin:10px 0px 0px 25px;
      list-style:none;
      }
    #menu li {
      width:75px; 
      height:20px;
      float:left;
      border:1px solid #000;
      margin-right:2px;
      }
    #menu a em {
      font-style:normal;
      font-size:1em;
      line-height:1.5em;
      }
    #menu a {
      text-decoration:none;
      color:#000;
      width:75px;
      height:20px; 
      display:block;
      text-align:center;
      }
    
    #menu a:hover {
      width:120px; 
      height:28px;
      z-index:1;
      background:transparent url(images/opaque.gif);
      position:absolute;
      }
      
    #menu a:hover em {
      font-size:1.5em;
      line-height:1.1em;
      overflow:hidden;
      cursor:pointer;
      background:#fff; 
      border:1px solid #000;
      position:absolute; 
      width:120px; 
      height:25px;
      left:-12px; 
      top:-4px;
      z-index:2;
      }
    Now the problem is its a little misaligned, to try and fix this I made the li position:relative; this worked okay but no the em becomes transparent.

  • #6
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    cool... tht helps a bit.... still a little whack, tho.

    I'm confused.... basically same thing here works:
    http://www.cssplay.co.uk/menus/expand.html

    some of my other code seems to be tweakin it?
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #7
    Regular Coder
    Join Date
    Jun 2003
    Location
    hawaii.washington state
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey try reading this tut.. i think you might solve your problem..
    http://www.javascript-fx.com/fade_ro...help/help.html


  •  

    Posting Permissions

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