Why does this not display correctly?

HTML & CSS
1

Hey,

Take a look at this page:-

http://kidsunlimi2.eweb102.discountasp.net/default.aspx

Why does the flash panel appear over the navigation. I need it to appear about 10px higher to lessen the gap from top and not appear over the nav bar…

Hope some one can help…

Regards

2

Hey,

i have had a bit of a play around with it but it doesnt look right in all browsers…

Can anyone help me get this formatting right?

Regards

3

I assume you are talking about IE7?

if so add clear:both here:


    <div style="position:relative;margin-left:-7px; height: 313px;[B]clear:both"[/B]>
                    <div id="shadow"> Welcome to <strong>kids</strong>unlimited nurseries...

And then adjust the margin-top and that should align FF and IE7.


#shadow
{
width:343px; 
height: 139px;
background:url('http://kidsunlimi2.eweb102.discountasp.net/images/shadow.png');
padding-left:20px;
[B]margin-top:122px;[/B]
color:#fff;
line-height:18px;
position:absolute;
z-index:100;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 12px;
}
4

Hey Paul,

Thanks. I tried playing around with it and i think it looks ok in all browsers…

Can you take a look?

I just need to reduce the margin between the #bottom-div and #upper-div as its currently too much but i cant get it to work…

Can you help mate?

5

Hi,

Check the height of your flash. It looks as though the height should be 275px (approx) and not 313px.

If you add a background colour there:


#lower-div
{
[B]background:red;[/B]
margin-left:-7px; height: 313px; clear:both
}

You can see that the element does start in the right place but the flash is moved downwards. Changing the height in 3 places to 275px seems to make it all line up.