ie hates my menu

zro@rtv · 12-15-2005, 12:45 AM

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/

ecntrc · 12-15-2005, 12:47 AM

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..

zro@rtv · 12-15-2005, 12:50 AM

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.

ecntrc · 12-15-2005, 12:54 AM

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..

_Aerospace_Eng_ · 12-15-2005, 01:13 AM

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.

zro@rtv · 12-15-2005, 02:05 AM

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?

ecntrc · 12-15-2005, 11:14 AM

hey try reading this tut.. i think you might solve your problem..
http://www.javascript-fx.com/fade_ro...help/help.html