Grow your CSS skills. Land your dream job.

Menu problem in IE

  • # November 9, 2009 at 8:12 pm

    I’m new to coding, well, actually to web design in general. I have no background in programing, but started learning from some video tutorials on this website about a month ago. I have learned a lot, but can’t figure this one out. I’m designing the website for my small church, and was successful in coding what I want for Firefox, but when I look at it the site in IE the menu falls apart. I’m hoping somebody can help me.

    Here is the link:
    http://www.upperroomcf.org/Test

    If you take a look at it in IE you will see what I mean. I haven’t really tried anything to trouble shoot this as I have no idea what is going on. Any help would be appreciated.

    Basically the problem is with the 1 level drop down menus that I’m trying to implement. Something goes very wrong in IE. I have done validation on my html and css. The html came up with some errors, but not anything major, and the css was perfect.

    Thank you

    Here is the relevant portion of the index.htm file:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

  • Welcome
  • Location
  • Calendar
  • About Us
  • Media

And the relevant portion of the style.css file:

Code:
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: “Comic Sans”;
background: url(images/seamlessupper-bg.jpg);
margin: 0;
padding: 0;
}

h1 { font-size: 1.7em; line-height: 1em; margin-bottom: 0.8em; padding-top: 10px; text-align: center; }

h2 { font-size: 1.4em; margin-bottom: 0.8em; margin-top: 0.8em; }

div#right-col h3 {
font-size: 1.2em; margin-top: 0.8em; margin-bottom: 0.5em; color: #00488F; }

div#left-col h3 {
font-size: 1.2em; margin-top: 0.8em; margin-bottom: 0.5em; }

.clear { clear: both; }

div#right-col p {
margin-bottom: 0.3em;
}
div#middle-col p {
text-indent: .3in;
}
div#page-wrap {
width: auto;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
div#header-bg {
height: 30px;
background-color: #008f48;
}
div#header-image {
margin: 0 auto;
height: 205px;
width: 100%;
background: url(images/header-bg2.png) no-repeat;
background-position: center;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
div#menu{
padding: 0;
margin: 0;
}
div#menu ul{
padding: 0;
margin: 0;
}
div#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
div#menu ul a{
display: block;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 2em;
width: 130px;
color: black;
font-weight: bold;
text-decoration: none;
}
div#menu ul ul a{
background-color: #008f48;
padding: 0;
margin: 0;
}
div#menu li a:hover{
color: #00488F;
}
div#menu ul ul{
margin-top: -2px;
position: absolute;
top: 30px;
z-index: 500;
visibility:hidden;
}
div#menu ul li:hover ul {
visibility: visible;

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".