Small CSS problem

  DaveMal 22:30 12 Jul 07
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 07

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 07

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 07

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.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

This abstract video touches on division in our technologic world

Best alternatives to iTunes for Mac | Best music players for macOS: Free your music from the…