FORUMS: list search recent posts

IE 8 does not honor "overflow:hidden"

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Jeffrey GardnerIE 8 does not honor "overflow:hidden"
by on Sep 1, 2009 at 4:18:32 pm

Hi guys,

I've been working on a site design, and I'm stuck on an issue with IE8. I've got an image that appears fine in all other browsers, but IE8 appears to be somehow repeating a few pixels of that image into a lower element of the page... The really odd thing is that I've read up on how the "overflow:hidden;" CSS technique should resolve this, but it does nothing. Any ideas? Here are two screen shots to give an example:




J Gardner
Total Computing Solutions


Return to posts index

Curtis ThompsonRe: IE 8 does not honor "overflow:hidden"
by on Sep 1, 2009 at 5:06:34 pm

hello...

hard to say not seeing your css, but overflow:hidden is not really meant to control height in an element, but rather not showing a scrollbar if a block element has content in it that exceeds its' fixed height...

if the content in the div below that one is there but just underneath the overlap, you could try just not repeating the background on the y axis of that top element. otherwise, we'd have to see the actual css probably to offer much more...

sitruc


Return to posts index

Jeffrey GardnerRe: IE 8 does not honor "overflow:hidden"
by on Sep 1, 2009 at 5:39:28 pm

I'm actually thinking it might have something to do with a C#.net control that we're using... It's really strange that this is occurring in IE8. Anyway, here are my .HTML (site.master) and .CSS files (3 CSS files in total)

1.

(see image for html)




2.


/* CSS Document */

#smudge
{
background-image:url("ieHack.png");

}

* {
margin: 0;
padding: 0;
}

a, a:hover {
text-decoration: none;
}

body {
text-align: center;
background: #666666 url(main-back.gif) repeat-x top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
color: #333333;

}

.skip {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}


/* HEADER */

#header-outer {S
background: transparent url(header-outer-back.gif) repeat-y center top;
}
#header-inner {
width: 960px;
height:auto;
margin: 0 auto;
background: url(header-inner-back.jpg) no-repeat center top;

overflow:auto;
}
#header-left {
width: 240px;
float: left;
padding: 0px;
}
.wordmark {
display: block;
}
#header-right {
float: right;
color: #fbc48a;
width: 685px;
text-align: right;
padding-right: 20px;
}
#header-right-links {
padding-top: 46px;
line-height: 1.9em;
font-size: 1.1em;
width: 680px;
}
#header-right-links h2 {
/*display: none; */
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#header-right-links ul {
list-style: none;
}
#header-right-links ul li {
display: inline;
}
#header-right-links a {
color: #ffffff;
}
#header-right-links a:hover {
color: #ffffff;
text-decoration: underline;
}
#header-right-search {
float: right;
padding-top: 5px;
}
#header-right-search h2 {
/*display: none; */
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
.searchbox {
width: 111px;
font-size: .9em;
margin-top: 4px;
padding: 1px 2px 1px 2px;
}
.searchtext {
width: 75px;
font-size: .9em;
}
.hide-search {
display: none;
}


/* CONTENT */

#content-outer {
background: url(content-outer-08.gif) repeat-y center top;
background-color: #ffffff;
}

#content-inner {
width: 960px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}

/* LEFT MENU */

#content-left {
width: 240px;
float: left;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 2.3em;
font-weight: normal;
vertical-align:top;
background-color:#ff9829;
}
#content-left-user {
width: 239px;
background: #f77f00 url(content-left-user-back.gif) no-repeat left top;
border-right: #ed7a00 1px solid;
}
#content-left-user h2 {
/*display: none; */
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#content-left-user ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#content-left-user a {
color: #ffffff;
display: block;
width: 209px;
padding: 0px 15px;
border-top: #fd9d38 1px solid;
border-bottom: #ed7a00 1px solid;
}
#content-left-user a:hover {
background-color: #d66d00;
border-bottom: #fd9d38 1px solid;
border-top: #b25c00 1px solid;
}

#content-left-nav {
width: 239px;
text-align: left;
}
#content-left-nav h2 {
/*display: none; */
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#content-left-nav ul {
list-style: none;
}
#content-left-nav a {
color: #d06000;
display: block;
width: 209px;
padding: 0px 15px;
border-top: #ffffff 1px solid;
border-bottom: #d3d2ca 1px solid;
}
#content-left-nav a:hover {
background-color: #ffffff;
display: block;
border-bottom: #ffffff 1px solid;
border-top: #c1c0bb 1px solid;
}
#content-left-quick {
width: 210px;
padding: 15px;
font-size: 1.1em;
line-height: 2.3em;
}
#content-left-quick h2 {
font-size: 1.1em;
color: #555555;
}
#content-left-quick ul {
list-style: square;
margin-left: 15px;
}
#content-left-quick li {
color: #d06000;
}
#content-left-quick a {
color: #444444;
padding-bottom: 2px;
border-bottom: 1px solid #bbbbbb;
}
#content-left-quick a:hover {
color: #d06000;
padding-bottom: 2px;
border-bottom: 1px solid #d06000;
}

/* MAIN CONTENT AREA */

#content-right {
float: left;
text-align: left;
width: 719px;
padding: 0px 0px 20px 0px;
}

/* LEFT COLUMN */

#content-right-leftcol {
float: left;
}

/* MIDDLE COLUMN */

#content-right-midcol {
float: left;
}

/* RIGHT COLUMN */

#content-right-rightcol {
float: right;
}

/* FOOTER */

#footer-orange-outer {
background: #f77f00 url(footer-orange-back.gif) repeat-y center top;
width: 100%;
}
#footer-orange-inner {
width: 960px;
margin: 0 auto;
text-align: center;
height: 3px;
}
#footer-grey-outer {
background: #666666 url(footer-grey-back.gif) no-repeat center top;
width: 100%;
}
#footer-grey-inner {
width: 930px;
margin: 0 auto;
color: #eeeeee;
line-height: 1.7em;
font-size: 1.1em;
text-align: center;
padding: 15px 15px 50px 15px;
text-align: left;
}
#footer-grey-inner a {
color: #eeeeee;
border-bottom: 1px solid #aaaaaa;
padding-bottom: 2px;
}
#footer-grey-inner a:hover {
border-bottom: 1px solid #eeeeee;
padding-bottom: 2px;
}


/* IMAGE STYLES */
.bw-border {
border: 1px solid #999999;
padding: 4px;
}





3.

/* HEADER */

#header-left h1 {
display: none;
}

/* MAIN CONTENT AREA */

#content-right-title {
float: left;
display: inline;
padding: 10px 0px 0px 10px;
}
#flashcontent {
width: 240px;
display: inline;
float: right;
text-align: right;
padding: 10px 9px 0px 0px;
}
#content-right ul {
padding: 10px 0 0 9px;
margin-left: 10px;
font-size: 1.1em;
line-height: 1.636em;
}
#content-right li {
list-style-type: square;
color: #777777;
line-height: 1.636em;
}

/* TWO COLUMN SPAN */
#twocol-span {
display: inline;
float: left;
width: 440px;
padding-left: 20px;
}
#twocol-span h2, #rftw h2 {
/*font-size: 1.1em;
line-height: 1.636em;
border-bottom: 1px solid #aaaaaa;
margin-bottom: 5px;*/
font-size: 1em;
line-height: 1.8em;
border-bottom: 1px solid #b7bbbc;
margin-bottom: 5px;
color: #444444;
letter-spacing: .5px;
text-transform: uppercase;
}
#twocol-span p, #rftw p {
font-size: 1.1em;
line-height: 1.636em;
padding: .5em 0;
}
#twocol-span a, #rftw a {
color: #9f4003;
}
#twocol-span a:hover, #rftw a:hover {
color: #333333;
}


/* LEFT COLUMN */

#content-right-leftcol {
width: 210px;
padding: 3px 0px 0px 0px;
}


/* MIDDLE COLUMN */

#content-right-midcol {
width: 210px;
padding: 3px 0px 0px 20px;
}


/* RIGHT COLUMN */

#content-right-rightcol {
width: 240px;
text-align: left;
padding: 0px 9px 0px 0px;
}
#rftw {
padding: 3px 15px 0 15px;
}
#future h2 {
display: none;
}
#future h3 {
font-size: 1.2em;
line-height: 2em;
text-align: center;
}
#future-middle {
background: transparent url(images/future-middle-back.gif) repeat-y center top;
padding: 6px 25px 3px 25px;
text-align: left;
}
#future-middle p {
font-size: 1.1em;
line-height: 1.636em;
color: #444444;
padding: .5em 0;
}
#future-middle a {
color: #444444;
border-bottom: 1px solid #cccccc;
padding-bottom: 1px;
}
#future-middle a:hover {
color: #9f4003;
border-bottom: 1px solid #f79555;
}



/* SPECIAL FEATURES */

#special-green {
background: url(http://www.utk.edu/images/green-fact.jpg) no-repeat center top;
padding:3px 0px 0px 20px;
width:460px;
height:66px;
display:block;
text-align: left;
}

#special {
width: 418px;
margin: 25px 0px 10px 0px;
padding: 5px 15px 15px 5px;
border: 1px dotted #78b27e;
/* font-size: 1.1em;
line-height: 1.5em; */
}

.left-padding {
margin-left: 23px;
}

#special h2 {
font-size: 1.1em;
line-height: 2em;
border-bottom: 1px solid #78b27e;
margin-bottom: 5px;
}

#special a {
color: #9f4003;
}

#special a:hover {
color: #006600;
}



/* TWO COLUMN CONTAINER */

/*for special features inclusion only, to wrap the columns for proper alignment with Future box*/

#content-right-twocol {
float:left;
display:inline;
width:460px;
}


/* SOCIAL MEDIA */


#social {
background: url(http://www.utk.edu/images/social-bg2.jpg) no-repeat center top;
width:240px;
height:100px;
margin-top:10px;
}

#social img {
margin-right:20px;
margin-top: 50px;
}

#social img.alt {
margin-left:30px;
margin-right:20px;
margin-top: 50px;
}









4.

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}

.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}

#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}

#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}

#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}

#TB_title{
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
padding:15px;
}

#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}

#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}



J Gardner
Total Computing Solutions


Return to posts index


Curtis ThompsonRe: IE 8 does not honor "overflow:hidden"
by on Sep 1, 2009 at 6:05:06 pm

hello...

ooph - that's a lot of css and html to match up to each other. i was thinking more a link to the actual site or just the specific css/html bits...

from what i can see on a quick pass, your top (offending) div doesn't have a height attribute - does it? if not, also set that and it will help..

sitruc



Return to posts index

Abraham ChaffinRe: IE 8 does not honor "overflow:hidden"
by on Sep 1, 2009 at 5:07:48 pm

I have had trouble with different browsers messing up with overflow: scroll; which using overflow: auto; seemed to fix. But haven't had any trouble with overflow: hidden; not working properly.

Abraham


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]