12-29-2009, 03:48 PM
Please check my home page: http://www.americanchic.net/
You'll see that in IE8, scroll bars are appearing at the bottom and right sides of the contentwrapper div. In Opera, a scroll bar is appearing at the bottom of the contentwrapper div. Why is this happening?
12-29-2009, 04:24 PM
It might be due to the overflow:auto; applied to that div. If you are using that property for clearing the floats, you may need to switch the other method which uses an extra element, see http://www.codingforums.com/showthread.php?p=617640#post617640
btw, I'd recommend you to use a CSS based layout like http://bonrouge.com/2c-hf-fixed.php, since the use of tables for layout is stupid (http://www.hotdesign.com/seybold/)!
12-29-2009, 05:47 PM
Thank you for the tip. At this point of designing the website, I can hardly go back and remove the tables. It would require too much work. Everything was fine before I added that image to the bottom of table.contentindex (this is the image: http://www.americanchic.net/home_page_images/continue_shopping.jpg ).
Here is the same page that does NOT contain that bottom image:
... and there are no scroll bars... ?
(Actually there is still a scroll bar in Opera 10.10) What's important are the scroll bars in IE8...
12-29-2009, 08:34 PM
It seems your box model (http://www.w3.org/TR/CSS2/box.html)is off a few pixels. I think the math works on all the elements inside #outerwrapper so there must be some IE bug being invoked.
*/edit - on further inspection I'm pretty sure it's your imagemaps that are causing this. <map name="homepageimage"> and <map name="continueshopping">
If you try adding a few pixels to the width of #outerwrapper, the x scrollbar goes away. Try this once -
margin: 10px auto 25px;
Ab is right, at this point the easiest fix might be removing overflow:auto and placing a 1px high clearing div at the end of the content of #outerwrapper.