...

View Full Version : Scroll Bars Appearing in Opera and IE8



jihanemo
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?

abduraooft
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/)!

jihanemo
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:

http://www.americanchic.net/home2.html

... 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...

Excavator
12-29-2009, 08:34 PM
Hello jihanemo,
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 -
#outterwrapper {
margin: 10px auto 25px;
width: 867px;
background: #fff;
overflow: auto;
}

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.

jihanemo
12-29-2009, 11:24 PM
Aahh, gotcha. Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum