|
CSS - Problem On Ie8; When Background Set To Transparent, Overflow:hidden Shows Extra 1px!
Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating.
I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. Similar TutorialsHello, I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution. In this page http://www.cracowflats.com/index.php/search/show/id/181 there is a Details area (bottom left) where titles have a green background. For some reason this green background appears in other parts of the page. In other browsers, the whole page has a white background, as it should. 1) With this code in theme.css a {color:#62860b; } h3, h4 { color: #70af1d;} .color_title { background: #76a637;color:#fff;} .logo h1 a { color: #62860b !important;} it appers everywhere and the whole background of the page is green (should be white). 2) when I add an "overflow: hidden;" here .color_title { background: #76a637;color:#fff; overflow: hidden;} it gets better, as the main area is white. But I still have a lot of green on the footer (and tabs). If I could find out to which bug it refers, it would be easier to find a solution. Any hint would be appreciated! Thanks! Luca Hi, The page in question can be found he http://serve5.net/xcage/. Basically, if you view it in Firefox/Mozilla, the background png for the element that contains the date is transparent with a tint to it. However, if you view the page in Internet Explorer, it is gray rather than transparent. Could someone take a look and tell me what's wrong? The CSS can be found he http://serve5.net/xcage/css/standard.css. Thanks, Rob. hello mates, for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color. But i can't make the two cohabitate peacefully. :'( i've tried with divs, span and p, no matter what it does not work. here is the way i first thought it would work: Code: <div id="footer" style="clear:both;width:100%">
<div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div>
<div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div>
</div>
any idea how to make this happen ? I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible. [code] <html> <head> </head> <body> <div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden"> <img src="images/700/900-pixel-height-image.jpg"> </div> </body> </html> This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow. This is working fine in FF, but IE ignores it. I have large bottom margin and large negative bottom padding contained in a wrapper with overflow set to hidden, to keep my columns the same length for different content, which seems to be ignored in IE. Other than that I'm pretty happy with the site, but I don't really know what I'm doing, so I don't really know what I'm doing wrong.. Can anyone help? Structure; Code: <div id="divBranding">
</div>
<div id="divWrapper">
<div id="divSidebar">
</div>
<div id="divContainer">
</div>
</div>
<div id="divFooterWrapper">
<div id="divInfo">
</div>
</div>
CSS for body; Code: body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
CSS for wrapper; Code: #divWrapper {
overflow: hidden;
*html overflow:scroll;
display: block;
}
CSS for Sidebar; Code: #divWrapper #divSidebar {
float: left;
width: 198px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Content; Code: #divWrapper #divContainer {
float: right;
width: 598px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Footer Wrapper; Code: #divFooterWrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
clear: both;
}
For some reason overflow hidden is not working in chrome, ff and ie both seem to work as expected. I am totally lost here? Code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
div.menuMaster {
position:absolute;
height: 450px;
width:200px;
margin-top:52px;
border-right-style:solid;
border-right-color:#FFFFCC;
background-color:#323B45;
-webkit-border-top-right-radius: 100px 400px;
-moz-border-radius-topright: 100px 400px;
border-top-right-radius: 100px 400px;
border-width:2px;
overflow:hidden;
z-index:50;
}
.sublink1 {
display:block;
float: left;
height:30px;
width:200px;
padding-top:10px;
font-family:georgia;
vertical-align:left;
text-align:left;
}
.sublink1 a {
display:block;
height:30px;
padding-top:10px;
padding-left:20px;
align:left;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
}
.sublink1 a:hover {
display:block;
height:30px;
align:left;
padding-left:20px;
color:#fff;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
background-color: #293D51;
}
.sublink1 a:link {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
.sublink1 a:visited {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
</style>
</head>
<div class="menuMaster">
<div class="sublink1"><a href="../admin/index.php">link1</a><br></div>
<div class="sublink1"><a href="../index.php">link2</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link3</a><br></div>
<div class="sublink1"><a href="../index.php?location=involved">link4</a><br></div>
<div class="sublink1"><a href="../index.php?type=sets">link5</a><br></div>
<div class="sublink1"><a href="../index.php?location=external_links">link6</a><br></div>
<div class="sublink1"><a href="../index.php">link7</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link8</a><br></div>
</div>
Is there a way to have overflow content of a DIV hidden at the top of the DIV instead of the bottom? For instance, if I have a DIV that is 200px in height and the content within the DIV ("My top content ... my bottom content.") exceeds 200px: Code: <div style="height: 200px; overflow: hidden;"> My top content<br><br><br><br><br><br><br><br><br> My bottom content. </div> I want the "My bottom content." to always show at the bottom of the DIV, but the "My top content..." to be hidden. I hope this makes since. Thanks! -Chris http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden. Does anyone know why overflow:hidden does not work when height is given in percentage? The following example does not work and all values from 1 to 20 are shown on screen ... Code: <div style="overflow:hidden;height:10%;border:1px solid green;"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> </div> Changing height:10% to height:50px makes the overflow:hidden works fine. Does anyone know how I can make the overflow:hidden css rule with height rule given in percentage? While trying to get text-overflow: ellipsis going with list items, I noticed that bullets were disappearing in Webkit (Safari and Chrome) and Opera browsers. I narrowed the problem down to overflow: hidden. I understand why putting overflow: hidden on a list item can hide the bullets (firefox also hides them in that case), but I'm putting it on a div inside the list item, and the bullets are still going away in those browsers (firefox and ie still show them, but not webkit and opera). This illustrates what I'm trying to do: http://sethsticco.net/files/possiblebug.html ..and this narrows the problem down to overflow: hidden: http://sethsticco.net/files/simpler.html The first list is normal, with no styling. The second one has overflow: hidden applied to the <li> tags. The bullets disappear for firefox, webkit, and opera, but not ie. The third list is the important one. It only applies overflow: hidden to the <div> tags inside the <li> tags, but bullets still disappear for Webkit and Opera. The fourth list is only there to show what happens if I try using <span> tags. They act like divs when they get display: block, and they don't get the ellipsis when they're inline. I feel like I've found a bug, but regardless, I really just want to get text-overflow: ellipsis going on list items. Does anyone have any ideas? Overflow:hidden, is supposed to expand a box (unless a height is set) to it's contents (just another quirky, stupid CSS rule). I have this working on all browsers except IE6 in one area. I've placed a green box around the problem area, which is the footer of this page: http://www.poweredpages.com/newtarget/ctia/ You'll see it looks fine in most places but is a skinny line in IE. I need it to render correctly because it has some padding attributes. Here it is in the css file: .footer{ padding:10px 35px 10px 35px; overflow:hidden; } Any thoughts why it's not working in IE6? Title sounds a bit contradictory, I know, but please bear with me... I'm building a simple chat application with html, javascript php and mysql. The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here http://chris.loyaltymatters.co.uk/chat-demo/ This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments. Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom html: Code: <div id='container'> <div id='chatRoom'> </div> </div> css Code: #container {
width:500px;
height:500px;
margin:50px auto;
border:1px solid black;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
}
#chatRoom {
position:absolute;
bottom:0px;
margin:5px;
width:100%;
}
To summarise, all I need now is a scroll bar so that I can scroll up many thanks in advance I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. Hello all I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden? Thanks Tom yes my friend has on her site scrollable screen separate from the fixed background but in the code its listed <style type="text/css"> table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:91A4F3; now what would the optional choice of turning the transparent off? opaque? Hello, Tried searching and couldn't find anything. I want my header's background to match that of the body. Essentially, a "see-through" header. Shouldn't this be some easy markup? Thanks. I have divs layering on top of each other, and they have background images (gifs). In Firefox, the transparency looks fine, but in IE the transparent areas are colored in. How can I fix this? thanks. Hi, I'm doing a simple one page layout for a friend which is just an iframe over a picture. The iframe can contain alot of data and the picture isn't supposed to repeat. So... I've got the background image fixed in place with the iframe positioned over it, and it looks fine in firefox and netscape, but the background of the iframe is white in IE. Nevermind, I figured it out... Thanks, Hope Hello I have a background image in my web site which is centered and fixed with no repeat. I would like to make it some what transparent. I know that it can be done by manipulating the image itself, but I need to do it dynamically using CSS. I tried adding the filterpque(alpha=0.5 style=0) attribute to the body but that made all the elements in the body (except for background image) transparent. does anyone know how I can do it? |
|||||||