CSS Forum

**mightyjoeape** · 12-28-2009, 05:29 PM

First of all I would like to say that my site is a combination of html, css, and javascript codes. Some javascript is used for the menus and this COULD be at fault. I am hoping for a CSS fix... seeing as I know how to create an override for IE. You'll have to let me know if I am posting to the wrong area.

The (incomplete) site that works fine in both safari and firefox is:
www.aeoliaphotography.com

Unfortunately the drop down menus do not work properly in Internet Explorer 8...

Oddly enough the first drop down appears great, but of course the one with some "horizontal pop-out" menus doesn't work and for some reason gets shoved to the far left side of the website. From what I see I am suspecting that IE is not recognizing the block item and wants to place it inline before "Clients" and "Contact"...but there isn't enough room. That is my best guess and I am still uncertain about how to fix it.

Since I am sure you are interested in seeing the code for the menu this is it (according to the IE hack.CSS, which I have been messing with some):

Quote:

body {margin:0px; font:11px helvetica,arial; background: whitesmoke} #container a img{border:none;} a:active{outline:none;} a:focus{outline:none;} #container{ width: 900px; height: 650px; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: black; } #container2{ width: 900px; height: 650px; margin-top: 20px; margin-left:0px; background: #000000 url(studio/red.png) no-repeat; } #text{ line-height: 1.9; color: #ffbbd0; font-size: 12px; font-family:"HelveticaNue",MankSans,"GeosansLight", "Helvetica", "Arial"; margin-top:100px; margin-left: 720px; width: 150px; height: 500px; } #menubar{ width: auto; height: 31px; background-image: url(images/menubar.png); }
ul.menu {list-style:none; margin:0; padding:0; float:left}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#fff;font-size: 11px; text-decoration:none; list-style:none}
ul.menu li {position:relative; float:left; margin-right:2px; margin-top: 0;}
ul.menu ul {position:absolute; top:0px; left: 43px; margin-top: 20px; display:none; opacity:0; list-style:none; display:inline;}
ul.menu ul li {position:relative; border-top:none; width:148px; margin:0px} ul.menu ul li a {display:block; padding:3px 7px 5px; font-family:"GeosansLight", MankSans, "Helvetica", "Arial"; font-size: 17px; color:#fff; list-style:none}
ul.menu ul li a:hover {}
ul.menu ul ul {left:148px; top:-1px; postion:absolute;}
ul.menu .menulink {margin-top: 0px; padding-left: 0px; padding-top: 0px; padding-bottom:0px; margin-bottom:0px; font-size: 20px; font-family: "MankSans", GeosansLight", "Helvetica, Ariel; width: 134px;}
ul.menu .menulink:hover, ul.menu .menuhover {}
ul.menu .sub {background:url(images/arrow.gif); line-style:none; text-decoration:none; width:auto; height:auto; no-repeat}
ul.menu .topline {margin-top: 0;} ul, li {list-style-type: none;} #studio a{line-style:none; text-decoration:none; list-style-type:none; color:#fff;}

I can't imagine that you would need any more of the css since the rest is working fine.

**mightyjoeape** · 12-28-2009, 05:30 PM

And here is the html:

Quote:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Portfolio of April Cummings</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>  </head> <body> <div id="container"> <div id="container2"> <div id="menubar"> <ul class="menu" id="menu"> <li><div id="home"><a href="index.html" class="menulink">Home</a></div></li> <li><div id="about"><a href="#" class="menulink">About</a></div> <ul> <li><div id="objectives"><a href="objective.html">Objective</a></div></li> <li><div id="blog"><a href="http://aprilcummings.blogspot.com/">Blog</a></div></li> </li> </ul> <li><div id="portfolios"><a href="#" class="menulink">Portfolios</a></div> <ul> <li><div id="product"><a href="product.html">Product</a></div></li> <li><div id="location"><a href="location.html">Location</a></div></li> </li> <li> <div id="people"><a href="#" class="sub">People</a></div> <ul> <li class="topline"><div id="studio"><a href="studio.html">Studio</a></div></li> <li><div id="seniors"><a href="seniors.html">Seniors</a></div></li> </ul> </li> <li> <div id="travel"><a href="#" class="sub">Travel</a></div> <ul> <li class="topline"><div id="china"><a href="china.html">China</a></div></li> <li><div id="france"><a href="france.html">France</a></div></li> <li><div id="italy"><a href="italy.html">Italy</a></div></li> <li><div id="spain"><a href="spain.html">Spain</a></div></li> <li><div id="switzerland"><a href="switz.html">Switzerland</a></div></li> <li><div id="united"><a href="us.html" clas="sub">United States</a></div></li> </ul> <li> <div id="love"><a href="#" class="sub">Love</a></div> <ul> <li class="topline"><div id="engagements"><a href="engagements.html">Engagements</a></div></li> <li><div id="weddings"><a href="weddings.html">Weddings</a></div></li> </ul> </li> </ul> </li> <li><div id="clients"><a href="clients.html" class="menulink">Clients</a></div></li> <li><div id="contact"><a href="contacts.html" class="menulink">Contact Me</a></div></li> </ul> </div>

Please let me know what you think. I am trying my best to get this site up and running so that I can send it to possible employers.

Thank you so much! April

**LadynRed** · 01-01-2010, 02:35 PM

My first suggestion to you would be to VALIDATE YOUR CODE and fix the errors that you have, that might solve the problem right there.

My other suggestion is that you do not need the divs inside the <li>, just use a nested list for your drop-down menu - no divs needed.

**mightyjoeape** · 01-10-2010, 09:10 PM

Thank you for your help.... I attempted to validate my html, but the W3C site said that it could not validate it... I believe it was saying something about my introductory line being wrong... the one that says what kind of a file it is (strict, transitional, etc.) But every time I go to try to find those introductory lines on the W3C website I can never find them. Perhaps you could look it over and tell me if anything is wrong with it (or send me a link) and then I will go and verify it!

Otherwise, I am sure you are right about the divs, but if I delete them things shift and I would have to rearrange some code.... are the divs a problem or just "messy"?

Also... I did have the container at a set width and height... Though I wanted my page to extend on the "about me" page. For some reason if I set the container's height to "auto" it stays behind the menu bar and will not extend to contain the other divs that are supposed to be inside of it! (I use CSSEdit and it has a feature that says what divs are inside other divs) Do you have any idea why this might be the case??? I thought that the div would extend past all of its content if there was no specified height?

Again, thanks so much!!!
April

**mightyjoeape** · 01-10-2010, 09:12 PM

P.S. The reason that I had the divs in the menu in the first place is because those <a> links are images... and I don't know how to replace the text without using div tags.

**LadynRed** · 01-11-2010, 04:17 PM

Quote:

I don't know how to replace the text without using div tags.

You can use image replacement methods on anything, it doesn't have to be a div.

This is your DOCTYPE and it is ALWAYS the FIRST thing in your HTML file:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

You have an invalid tag in your code:

Quote:

That <img> tag is all wrong - it should be

Quote:

There is no </img> closing tag.

Check the nesting on your menu list, something there is not nested correctly.

**mightyjoeape** · 01-13-2010, 04:05 PM

Thank you for your input, but I am afraid that I still don't understand how to fix my problem. My html code is invalid on the drop down menu (I got cut and paste javascript code and I am pretty sure it was already supposed to be like that... it has <li> items outside of <ul> items and I believe that to be the primary problem), but some of it comes up correctly even in explorer 8- only the dropdown menu that shoots out horizontally as well is not displaying correctly. This leads me to wonder if I can "patch it up" so it works right in that area and fix it so it validates at a later point in time... I am trying to use this site right away as a portfolio site and I really don't have the time that it will take to totally remake the menu. Perhaps I just have something simple wrong with my list? Is there any way to salvage what I already have up? An example would be much appreciated.

Thank you for clearing up the issue I had with my DOCTYPE and for pointing out that I can replace any "called out" item... I am still fairly new to the web coding game.

Also, I asked another question that never got answered. I wondered if you would be willing to address this problem:

I did have the container at a set width and height... Though I wanted my page to extend on the "about me" page. For some reason if I set the container's height to "auto" it stays behind the menu bar and will not extend to contain the other divs that are supposed to be inside of it! (I use CSSEdit and it has a feature that says what divs are inside other divs) Do you have any idea why this might be the case??? I thought that the div would extend past all of its content if there was no specified height?

Thanks!!!

**LadynRed** · 04:33 PM

Setting height to "auto" is rather pointless, actually. In order to CLEAR a float, adding overflow: auto to the CSS for the div that holds the floats will clear the floats. However, if you nail it down with a fixed height at the same time you'll get scrollbars. So, if all you're doing is containing floats, and allowing the page to stretch vertically as it does by default depending on what's IN it, then no set height is needed. The other alternative, is to float the containing div itself, as it will automatically clear any floats within it.

I might be able to get your menu fixed, but I can't do it until later this evening once I get home.