Solved

How to override overflow:hidden without changing parent style

Posted on 2008-10-03
7
7,381 Views
Last Modified: 2013-11-19
I have a column on my blog that looks something like this:

<div class="column" style="overflow:hidden;">
  <div>My expandable banner</div>
</div>

The div with the overflow:hidden cannot be changed (for many reasons - please accept in this situation it cannot be changed). Is there a style or hack or something I can add to the child div to make it pop out of the parent's overflow:hidden style?

For context - this is an expandable banner - when the size expands... if it is inside the overflow:hidden parent div, the banner is cropped. I need to get it out somehow.

Ideas? :)
0
Comment
Question by:systemride
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22639812
If you cannot style the tag in line, using javascript after the page is loaded (you need a tag ID to do this), then no, you cannot do it.  Why use overflow:hidden anyway.  Should you not be using overflow:visible?  Remember that these work opposite of what they appear to do.  Are you trying to crop the overflow or not?
0
 
LVL 2

Author Comment

by:systemride
ID: 22642178
Because it will  published across many blogs - where I have no control over how people build their sites. And to alter the column, might break their site layout as many people use overflow:hidden as a hack for IE bugs.

That is why I'm looking for a hack for this, if there isn't one, then I guess we're all screwed and the world will soon be bountiful with plagues and disease. We will all rot and die.

Please... for god's sake. Help.
0
 
LVL 42

Accepted Solution

by:
David S. earned 125 total points
ID: 22642936
What you want is simply not possible.  An element can not overflow an ancestor that has overflow:hidden.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22647154
Please... for god's sake. Help.

Simply edit the page TEMPLATE and CSS for the blog and get rid of overflow hidden.  If you are running the blog, you should be able to edit the template, surely?  If not, tell the person owning it to edit it.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 22686123
can you post the column class css please
0
 
LVL 2

Author Comment

by:systemride
ID: 22744845
There isn't a way to do this unfortunately.

@scrathcyboy - seriously dude? You think I didn't think of that? As I mentioned, this was going across various blogs which makes it impossible to just simply "change". Please read all messages before you post something so lame.
0
 

Expert Comment

by:MRothstein1
ID: 25337301
Here is a roundabout way of doing something similar to what you want.

Positioning the element absolutely will release it from the overflow constraint, but not in IE. This may also cause some issues with your banner being placed in other blogs where you do not know the position of the div relative to the page. Floating the elements inside did not help.

The screenshots show how the code renders in IE7 and Firefox 3.

In the example code, there are two overflow: hidden styled divs because making the floats and the positioned elements play nice in one div would have required needlessly complicated css.

I hope that this helps in some way.
<html>
<head>
    <title>overflow: hidden style test</title>
    
	<style type="text/css">
		div { margin-bottom: 20px; }
	
		.no-overflow-div { border: 2px purple solid; height: 300px; width: 300px; overflow: hidden; }		
		
		.abs-pos-elem { position: absolute; width: 500px; height: 100px;  background-color: #EEE; }
		.rel-pos-elem { position: relative; width: 500px; height: 100px;  background-color: #EEE; }
		.float-elem { width: 500px; height: 100px; background-color: #EEE;}
		.left { float: left; }
		.right { float: right; width: }
		
		.red { border: 3px red solid; }
		.blue { border: 3px blue solid; }
		.green { border: 3px green solid; }
		.darkgrey { border: 3px #333 solid; }
		
	</style>
</head>
 
<body>
 
	<div id="no-floats" class="no-overflow-div"> 
        <div class="rel-pos-elem darkgrey"> position: relative </div>
        <div class="abs-pos-elem red"> position: absolute </div>
    </div>
    <div id="floats" class="no-overflow-div">         
        <div class="float-elem left blue"> float: left </div>
        <div class="float-elem right green" style="text-align: right"> float: right </div>
    </div>
    
</body>
</html>

Open in new window

overflow-hidden-ie7.gif
overflow-hidden-ff.gif
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Programming Language for Wordpress 7 67
Make a website not indexable by google 6 29
Make page layout not change with page 1 24
Custom WordPress pages? 4 15
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question