PDA

View Full Version : Resolved Float and link problem IE



Kohina
Jan 20th, 2010, 02:27 PM
I've made a CSS menu and got it working just fine in Opera, Firefox and IE. After I added a link on one page (in the text area) the menu behaves very weird when clicking it. The subcategories are supposed to pop-up when you hover the main category on the menu but when I visit the linked page the subcategories stretches the menu and makes it look very ugly.

I've search for a solve to the problem but I have no clue what causes this. Since it only occurs when there is a link involved I figured it had something to do with that. Does anyone here have a tip on how I can make the menu better or what's wrong?

Thank you!

HTML code for the menu:



<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2>
</li>
</ul>

<ul>
<li><h2><a href="info.php">Info</a></h2>
<ul>
<li><a href="info2.php">Info 2</a></li>
<li><a href="info3.php">Info 3</a></li>
</ul>
</li>
</ul>


CSS code:



body {
behavior: url(csshover3.htc);
font-size: 100%;
background: #ccddff;
overflow-x:hidden;
}

/*Text area*/
#wi{
position:absolute;
top: 245px;
left: 170px;
width: 470px;
height:340px;
padding-top:15px;
padding-left:120px;
padding-right:50px;
padding-bottom:15px;
font: 14px/18px Bookman Old Style, serif;
overflow-x:hidden;
overflow-y:auto;
}

#wi a {
color: #000;
text-decoration: none;
font-weight: bold;
}

/*menu code*/
#menu ul li {float: right; width: 100%;}
#menu ul li a {height: 1%;}

#menu {
padding-top:165px;
width:100%;
width: 780px;
height:50px;
float: right;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 5.5em;
float: left;
display: block;
}

#menu a, #menu h2 {
font: bold 14px/16px Bookman Old Style, serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#menu ul ul a{
font: 14px/14px Bookman Old Style, serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #000;
text-align:center;
}

#menu a {
color: #000;
text-decoration: none;
}

#menu a:hover {
color: #000;
}

div#menu ul ul {
display: none;
font: 14px/16px Bookman Old Style, serif;
}

div#menu ul li:hover ul
{display: block;}

abduraooft
Jan 20th, 2010, 02:34 PM
Can we have a link to your page?

Kohina
Jan 20th, 2010, 02:38 PM
Can we have a link to your page?

http://classicsaabracing.com/for/Barnensark/foton.php

The first picture at that page is the link you can try

abduraooft
Jan 20th, 2010, 03:18 PM
Your document is incomplete. The first step to make a valid document is to have a DOCTYPE at the top, read http://www.alistapart.com/articles/doctype

I'd recommend
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> for your current document.
Also, your document is missing some tags like head,body etc.

PS: Validate your markup often while development using http://validator.w3.org

Kohina
Jan 20th, 2010, 03:27 PM
Thank you very much for your help!
The problem was that I had forgotten to add the correct doctype.

When I added -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - to the page it worked.

abduraooft
Jan 20th, 2010, 03:39 PM
Adding just a DOCTYPE isn't enough for your pages. It's missing the basic structure of a webpage.

Kohina
Jan 20th, 2010, 03:49 PM
Adding just a DOCTYPE isn't enough for your pages. It's missing the basic structure of a webpage.

I realised that and I've added the things I was advised when I used the validator. I didn't post them all here since I figured they were not the main problem. If you have time and/or feel like it I'll be glad if you could explain why all tags (like html, body, head, title etc) is needed. It's not necessary for the page to work in this case.