Small CSS problem

  DaveMal 22:30 12 Jul 2007
Locked

this is part of my css script.. used to just simply create 3 sections and have 3 images set to the background which line up to make one image... the other code does not affect this as i removed it and it still did the error.

what happens is, between the middlelogo and bottomlogo areas their is a gap i can not remove so the images do not line up.

any suggestions??

Thanks, Dave.

script>
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000FF;
margin:0px;
padding:0px;
background:#FFFFFF;
}

#toplogo {
position:absolute;
top:0px;
left:0px;
height:100px;
width:800px;
background:#FFFFFF url(images/bgtop.jpg) fixed;
}

#middlelogo {
position:absolute;
top:100px;
left:0px;
height:50px;
width:800px;
background:#FFFFFF url(images/bgmenu.jpg) fixed;
}

#bottomlogo {
position:absolute;
top:150px;
left:0px;
height:20px;
width:800px;
background:#FFFFFF url(images/bgbottom.jpg) fixed;
}
/script>

  brundle 23:17 12 Jul 2007

TOP: is inheriting the height/position from the last entry, works for me when

top:50px

is used in the #bottomlogo

ie 0 + 100 = 100 pixels (top and middlelogo), 100+150 pixels = 250 (middle and bottom logo)

  DaveMal 23:24 12 Jul 2007

i do not understand that...

are you saying that the top inherits from the pervious entry?? because that would just leave all of them at the top of the page...

and im lost to where the 100+150 comes from..

i have found that even though the bottom image is 20px high, and the bottomlogo is 20px high, when it is displayed... it does not fill the box, it is in the center of the box. so it leaves a gap between the middlelogo section...

im so confused to why it can do this... as the image height and bottomlogo's match at 20px

  brundle 23:39 12 Jul 2007

I mean the `top:` command - that's where the numbers come from. I'm using different background colour sections to represent the spaces where your images go, changing the last top command as I stated positions them with no gaps and at the correct height.
Have you measured the gap in pixels? It may provide a clue click here

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

WPA2 hack: How secure is your Wi-Fi?

Microsoft Surface Book 2 hands-on review – bigger and 5x faster

Best kids apps for iPhone & iPad

Que faire si son iPhone ou iPad est tombé dans de l'eau ?