|
CSS - Msie - Can't Display Png With Alpha On Table Backgrounds?
I'm sure this can be fixed... But I'm not sure how!
I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. Similar TutorialsSorry for a link and not pasting but code but I want to be sure not to miss anything out ... There should be a menu item at the top of the page of: http://egg.epicdesigns.co.uk/home/index.php It shows up fine in Mozilla and Opera but not MSIE. Code: #menu {
z-index:1;
left:auto;
top:272px;
position:absolute;
width:631px;
margin:0px 0px 0px 12px;
padding:0px;
font:normal 110% agency fb,arial,sans-serif;
}
I notice that if I remove the <HEAD> tag int he HTML or the FLOAT:RIGHT styling on #sidebar then thigns show up as expected. Thanks in advance. As expected, Firefox displays my website perfectly, but I have a couple of major problems with MSIE and one or two with Chrome, but I'm hoping there's an easy to fix for these issues. The site is cinemasight.com In MSIE, there is a "scroll bar" over on the right. I do not know what's causing it or how to get rid of it. The other item is the <h2> headers are overlapping the comment "bubbles" (these have a link to the comment section of the post and list the number of comments there) on the right-hand side of the individual posts both on the front page and within each post individually. Another issue is in the post labeled Film Fun Friday #19 (and all previous ones tmk. In Chrome and Firefox, the two posters in the Identify the Poster game are centered in their table cells, but in MSIE, they are left-aligned. The final problem (that I can think of/identify at the moment) is in Chrome. Whereas in MSIE, the comments bubble is hidden behind the <h2> tag, in Chrome, it's actually sitting above, largely because in order to get it to display correctly in firefox, I had to use negative margins to pull it up to display on top of the header tag. So, I don't know if this can be resolved separately and individually with Chrome or if there's a better way to do it to display correctly in both it and Firefox. Any help that you guys can provide would be appreciated. Actualy, while I'm at it, there are a couple of other Two issues I could use some help on, if anyone is willing to assist: One: I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win). Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div. The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line. This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer). But in IE 6, I noticed a gap at the bottom of the page even with 0 margin. I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not. Two: Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether. Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick. If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof Here's the code: Click here to see the template. Click here for CSS. Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP -- Aiden Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it. Hi! I have a css file (validated) which contains: Code: TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); }
this works properly with Opera 7.54, Mozilla, but it doesn't work with MSIE! Only in MSIE I can't see the background image. Does anybody knows what may be wrong? MSIE version: 6.0.2600.0000 Greetings. I have an annoying strange behaviour with MSIE 6.0 (unfortunately, this is the official browser in our company..). When a div object appears (with a list of valid values), select tags will stay in front. With Firefox 2.0 and Safari this doesn't arrives.. all is perfect. I am working on Windows XP sp2. I prepared a simple page to show you, but here I cannot insert urls nor images.... :-( I will be very happy to receive your feedback. Safe paths, Stefano Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. Hiya, been playing around with trans PNGs and appreciate Firefox more and more with each passing hour!! What's the best way to get PNGs with alpha channel transparency to work in IE6, so far I've tried the .htc script mehod which works OK, except, on my PC it asks if I want to execute the script each time I open or refresh the page. Don't know if it would do this on my web server and haven't tried it yet. Is there another equally straight forward way to deal with this? I thought about browser sniffing and then giving IE6 a nasty transparent GIF and everything else a PNG. What does everyone else think? John. Well, I have a couple png images that are using a transparent background. As most of you probably know, it looks great in every browser except IE for the PC. It looks like complete *** in that browser. Now I looked all over the net for a fix for this and found this in Microsoft's library of fixes for their products and found the AlphaImageLoader. Tried using their own code and the same code I found on a dozen other sites and it still isn't loading the transparency, so I'm just curious what I am doing wrong. Here is the code: Image HTML Code: <div id = "welcome_image"> <img src = "/testing/inertia/images/home/welcome.png" alt = "Welcome" /> </div> Image CSS Code:
#welcome_image
{
position: absolute;
top: 10px;
left: 10px;
width: 168px;
height: 216px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/testing/inertia/images/home/welcome.png", sizingMethod="scale");
}
hi | i'm setting alphas and this code: filter:alpha(opacity=50); is working fine on: IE on a PC IE on a MC Mozilla on a PC Mozilla on a MAC but it doesn't work on: FireFox on a MAC Safari on a MAC is the filter tag not supported by these 2 browsers? anyone have any suggestions? any help is greatly appreciated. thanks. fu-meng. Hello, im new to this forum ( A pleasure to meet everyone! ) I was browsing through the forum and could not find exactly what my problem is. I am trying to make a filter for my CSS code with the dropshadow effect on text. Eg: .content { color: White; text-align:justify; line-height:12px; font-family:tahoma,arial narrow,arial; font-size:9px; Filter: Alpha(Opacity=70) DropShadow(Color=#8F5A3A, OffX=1, OffY=1, Positive=1); } The problem is its just not working Its hard for me to get the colors correct to begin with because of the BG the text is on. But If I could get the Alpha(Opacity) to work with the DropShadow the text will be significantly more visible and would work fine. Any suggestions? or Solutions? Keep in mind im NOT very knowledgable in a lot of new things yet Help much appreciated- Thanks a lot! I have an image link which I want to display at 50% opacity and when the user hovers over it I want it to be 100%. My code doesnt seem to be working tho? Please could someone help me... <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .fadein { } a.fadein { filter: alpha(opacity=50); } a.fadein:link { filter: alpha(opacity=50); } a.fadein:hover { filter: alpha(opacity=100); } --> </style> <head> </head> <body> <a href="gfdg.html" class="fadein"><img src="First.gif" width="257" height="130" border="0"></a> </body> </html> If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d. Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style. I couldn't find any other mention of this anywhere. Does anybody know what causes this bug, or if there's a way to fix it? Here is some code to reproduce: Code:
/* CSS */
#qform ol {
list-style-type:lower-alpha;
}
#qform ol li {
color:#333;
height:25px;
margin:10px 0;
padding:0 0 0 20px;
}
#qform ol li input {
margin:3px 5px 0 0;
}
#qform ol li label {
margin:0;
}
<!-- HTML -->
<form id="qform" action="index.php" method="post">
<fieldset>
<ol>
<li>
<input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
</li>
<li>
<input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
</li>
<li>
<input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
</li>
<li>
<input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
</li>
</ol>
<input type="submit" value="OK" />
</fieldset>
</form>
In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should. Thanks, I'm working on a site that's a single php page with CSS file. The site uses the same rotating image script, in 2 locations. In the one location, it rotates the background image of a div. I've set the opacity to 0.7, alpha filter at 70. This is working properly - it is affecting the opacity of the background image as I want. The problem is that it is also affecting the opacity of static images that are contained within that same div. Any ideas on how I can keep the opacity of the rotating background image, without affecting the opacity of the static images that are on top of the background? Site is triple-w . visitchester . ca Relevant code he FROM INDEX.PHP (IT'S THE JPG'S IN THE BIZCARDS FOLDER THAT I WANT TO BE SOLID) <div id="rotator2" style="background-image:url(link to rotate2.php); opacity:0.7; filter:alpha(opacity=70); padding-top:20px;"> <a href="link here" target="_blank"><img src="bizcards/mecklenburghinn.jpg" height="170" width="207" style="border:#FFF; margin-left:5px; border-style:double;" /></a> <a href="link here" target="_blank"><img src="bizcards/ropeloft.jpg" height="170" width="207" style="border:#FFF;border-style:double; " /> <img src="bizcards/banner3.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> <img src="bizcards/banner4.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> </div> FROM MAIN.CSS: #rotator2 { width: 900px; height: 655px; font-family:"Courier New", Courier, monospace; font-size:16px; color:#FFF; } Thanks in Advance! Regards, ChesterNerd I have a problem involving the ie only filter alpha(). My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! Is there Opera compatible code for filter:alpha or -moz-opacity? Is it possible to overlay a colour onto a grayscale image to make it that colour with css? Such as using the alpha channel? Image in question would be a transparent background gif file. I am trying to organize some DIV's like a table, because the data being rendered is a series of footer menu's, not a table. It works fine in Firefox 7 alpha Google Chrome 12 Opera 11.50 Safari 5.1 But... as usually, Internet Explorer 8 and Internet Explorer 9 suck the big one and display my list as a straight vertical list, where the rest display it horizontally. Anyone have any recommendations? my css code: Code:
div#footer-menu {
display:table;
width:960px;
}
div#footer-menu-row {
display:table-row;
}
div#footer-menu-row div.footer-menu-cell {
display: table-cell;
}
in my HTML I have Code: <div id="footer-menu"> <div id="footer-menu-row"> <div class="footer-menu-cell"> <h2><a href="#">Cat 1</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 2</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 3</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 4</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 5</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 6</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 7</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> </div> </div> I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row... div.bg_tp_lt = row 1 @ 105px div.bg_ct_lt = row 2 @ 53px div.bg_bt_lt = row 3 @ 68px So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated. Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$var</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles2.css" media="screen" />
</head>
<body scroll="no">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td bg_tp_lt"></div>
<div class="td bg_tp_ct"></div>
<div class="td bg_tp_rt"></div>
</div>
<div class="tr">
<div class="td bg_ct_lt"></div>
<div class="td bg_ct_ct"><div class="content">$content</div></div>
<div class="td bg_ct_rt"></div>
</div>
<div class="tr">
<div class="td bg_bt_lt"></div>
<div class="td bg_bt_ct"></div>
<div class="td bg_bt_rt"></div>
</div>
</div>
</div>
</body>
</html>
Code:
div.table {
display: table;
border: 1px solid #DDDDDD;
padding: 0px;
width: 404px;
}
div.thead {
display: table-header-group;
}
div.tbody {
display: table-row-group;
}
div.tr {
display: table-row;
}
div.td {
display: table-cell;
border: 0px solid #DDDDDD;
padding: 0px;
}
div.bg_tp_lt {
width: 105px;
height: 60px;
background-image:url(images/stl.jpg); no-repeat;
background-color: #000000;
}
div.bg_tp_ct {
width: auto;
height: 60px;
background-image: url(images/st.jpg); repeat-x;
background-color: #000000;
}
div.bg_tp_rt {
width: 105px;
height: 60px;
background-image: url(images/str.jpg); no-repeat;
background-color: #000000;
}
div.bg_ct_lt {
width: 53px;
height: 150px;
background-image: url(images/sl.jpg); repeat-y;
background-color: #000000;
}
div.bg_ct_ct {
width: auto;
height: auto;
background-color: #000000;
}
div.bg_ct_rt {
width: 53px;
height: 150px;
background-image: url(images/sr.jpg); repeat-y;
background-color: #000000;
}
div.bg_bt_lt {
width: 68px;
height: 64px;
background-image:url(images/sbl.jpg); no-repeat;
background-color: #000000;
}
div.bg_bt_ct {
width: auto;
height: 64px;
background-image: url(images/sb.jpg); repeat-x;
background-color: #000000;
}
div.bg_bt_rt {
width: 68px;
height: 64px;
background-image: url(images/sbr.jpg); no-repeat;
background-color: #000000;
}
/* Little hack for IE */
* html div.td { display: inline; }
I want to have the functionality of this page
Code: <!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>
<title>Bug Tracker | View All Active Bugs</title>
<script type="text/javascript">
function toggleCard(card) {
var o = document.getElementById(card);
o.style.display=(o.style.display == "none")?"block":"none";
}
</script>
<style type="text/css">
h2 {
border: 1px 0 0 0 solid #000;
background-color: #eee;
margin: 0px;
padding: 2px 2px 2px 15px;
font-size: 1.0em;
}
p {
margin: 2px;
padding: 0px;
}
</style>
<script src="inc/js/sorttable.js"></script>
</head>
<body>
<h2 id="head1" onclick="toggleCard('card1')">Click Me</h2>
<div id="card1" style="border: 1px solid #000; display: none"><p>Click should display me!</p></div>
</body>
</html>
But instead of using a heading element (h2) I would like to use a table row to display the new div. However, when I do this, the newly displayed division messes with the spacing for the table columns and also in firefox it will leave the display space for the div blank and continue to repeat this each time the row is clicked. I've looked for similar problems with google, but haven't dug anything up. Any pointers? |
|||||||