CODEWITHSUNDEEP
cssscrollbar
Slavez
Slavez

Reputation: 239

Inconsistent scrollbars between different browsers

IE: http://666kb.com/i/c6fufhslm58tzh66k.jpg Chrome: http://666kb.com/i/c6fufwh0ebfrcgwi4.jpg

php code:

echo"<div id='anamain'>";
echo"<iframe frameborder=0 scrolling=yes width=100% height=100% src='duello.php'></iframe>";
echo"</div>";

css code:

#anamain
{
    position:absolute;
    background-color:#f2f2f2;
    left:25%;
    top:205px;
    border-width:1px;
    width:50%;
    height:auto;
    color:#9db4bd;
}

How can I solve this difference issue? I want the way of Chrome view.

Upvotes: 1

Views: 2411

Answers (1)

Chris Baker
Chris Baker

Reputation: 50612

Each browser has a slightly different default state for page elements. Typically, one uses a "CSS Reset" to mitigate these differences.

Check out http://www.cssreset.com/ for more info

That being said, the differences are not all going to be addressed by a reset stylesheet. Some elements just behave differently in different browsers, especially when you're dealing with that maniacal, child-eating deviant known as Internet Explorer.

Understanding this, for your purposes you can force scrollbars by using the css overflow properties

#anamain
{
    /* ... previous styles ... */
    overflow: scroll;
    /* OR overflow: hidden; to hide */
    /* OR overflow-y: scroll; */
    /* OR overflow-x: scroll; */
}

Specific to your problem, it looks like you'll actually need to apply the overflow style to the iframe, rather than the containing div. I've put together a sample:

http://jsfiddle.net/WqJYG/

As you can see, applying the overflow: hidden; style to both the wrapping div AND the iframe ensures you don't get any scroll bars.

Documentation

Upvotes: 3

Related Questions