Need help with CSS Please (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

fredecd -> Need help with CSS Please (9/21/2007 11:18:26)

Hi,

I am in the beginning phase of build a site for my son's school. I am using the PageOneResults CSS drop down menu that I got from this forum.

Everything tests well in FF and IE7, but earlier versions of IE drops down the page banner when I hover over the menu.

Can anyone see where I went wrong?

Page:http://d9866.a38.highendhost.com/prospective_main.htm

CSS sheet: http://d9866.a38.highendhost.com/horiz_menu.css

Thanks in advance,



Tailslide -> RE: Need help with CSS Please (9/21/2007 13:10:21)

Oooh freaky!

Been through it item by item and can't figure out what's causing the menu div to expand downwards pushing the image down too.

The only solution I can come up with isn't marvellous by any means but here goes:

If you make the menu position:absolute, remove it's background colour, make the wrap position:relative and give the banner image a margin-top of around 20px then that seems to fix it.

I'm not a huge fan of using a lot of absolute positioning so personally if it was me I'd stick these rules in a little conditional comment so that only IE5 (or 5.5 too?) get them and the more modern browsers get the original version.

But maybe the originator of the script can help more?



1eagle -> RE: Need help with CSS Please (10/14/2007 1:46:52)

Hello Chris,

I have looked at your coding and found the culprits causing the image to be pushed down.

In your on page styling you have no ending bracket on the body element and you have font-size: 100%; #menu ul li {float: left; width: 100%;}
The font-size: 100% is in front of the css command element. This is confusing IE as it does not see the #menu ul li command.

Delete this or move it inside the brackets.

In addition I believe this styling should be placed inside an IE conditional statement; 

<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior:url("csshover.htc");}
#menu ul li {float: left; width: 100%;} 
#menu ul li a {height: 1%;} 

#menu a, #menu h2 { 
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
} 
</style>
<![endif]-->



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625