Overflow:hidden being ignored in Chrome and IE

HTML & CSS
1

I have a Twitter button embedded on my page like so:


<object class="tweetit" type="text/html" width="96" height="20" data="button_url"/>

The problem was there were both vertical and horizontal scroll bars, so I added the following CSS:


object.tweetit {
    border: hidden;
}

This has cleared everything up in Firefox, but has changed nothing in Chrome and IE9.

2

Uh, ok. Sitepoint may be the first forum I’ve come across that doesn’t allow you to edit your original post.

IMPORTANT: I made a mistake in my original post. The CSS I meant to post was this:


object.tweetit {
    overflow: hidden;
}
3

I think the only way you can do it is to apply overflow:hidden in the actual page you are linking to - which may not always be possible.

For example in your button_url page you would add this to the page.


html{overflow:hidden}

Obviously with third party code you can’t do that.

Maybe you could hide the scrollbar with an oversized object element.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.tweetit {overflow:hidden!important}
div {
	width:96px;
	height:20px;
	overflow:hidden;
	position:relative;
}
</style>
</head>
<body>
<div>
	<object class="tweetit" type="text/html" [B]width="115" height="40" [/B]data="test9.htm"/>
</div>
</body>
</html>

Uh, ok. Sitepoint may be the first forum I’ve come across that doesn’t allow you to edit your original post.

There is a short time limit for corrections but is mainly a spam prevention technique as spammers would make multiple reasonable posts and then later go back and insert spam. It also stops users from deleting their posts and making threads useless.

4

Yeah, unfortunately it’s a 3rd party api, so I can’t change their code. I think that Mozilla is doing the right thing here, but unfortunately Chome and IE9 aren’t following suit.

Since I’m dynamically adding the object with JavaScript anyway, my solution is to detect Firefox and add an object like normal, or add an iframe instead with scrolling=“no” for other browsers.

I doubt I’d have any chance of convincing Google or Microsoft that this is a bug. :unhappy:

5

Yes that should work.

[/quote]
I doubt I’d have any chance of convincing Google or Microsoft that this is a bug. :unhappy:[/QUOTE]

You could file a bug report and hope.:slight_smile: