Weird Roll Over and Missing Height

[purplefish]

pls refer to:

http://www.myshops.com.sg/atomio/
http://www.myshops.com.sg/atomio/screen.css

Spent all night trying to solve two problems.

1. When mouse over the second image, the weird spacing disappeared. It doesn't happen for the first or third image, although I just duplicate the DIV code.

2. Height:100% for the side color boxes doesn't seen to be working after a certain length?

Thanks.

[zro@rtv]

not totally sure what your desired effect is and im not seeing the first problem in FF, only ie...

Height 100% expands an object to fill the height of a containing object, and if there is none... it's body. But Body can be interpreted differentally across browsers and "mode"... see here:
http://www.quirksmode.org/css/100percheight.html

Also when in doubt validate (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.myshops.com.sg%2Fatomio%2F) ... I believe that you have some cross closed B tags.... (which by the way i think are deprecated. use strong)

ALSO... why not use CSS (:hover) for the mouse over action instead on the mouseover event?

[purplefish]

thanks for the reply. i have reverted back to a simplified version.
both the html and css passed validation.

after adding html,body{height:100%}, however, it still doesn't fill up the screen 100%.

other than height, another problem is the width. there are 5 blocks all together,

#left_space { width: 1%; }
#sidebar { width: 20%; }
#main { width: 50%; }
#right_space { width: 2%; }
#right_end { width: 23%; }

which add up to 96% of total width. if i increase the width of the last block, it will flow to the bottom. is it a problem with the use of borders? if so, how can i "stretch" the page fully in both vertical and horizontal direction? thanks!!

[_Aerospace_Eng_]

The 100% is doing its job. IE resizes its containing elements to fit its content. 100% in Firefox is only 100% of the browser not the window. You will need to have a background image of some sort creating the borders. This isn't going to be easy because you are using percentages for your widths. Also borders count for overall width as well.