Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Menu problem in IE

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • November 9, 2009 at 8:12 pm #26712
    calebplettner
    Member

    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:


    Welcome

  • 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;

  • Author
    Posts
    • Viewing 1 post (of 1 total)