|
CSS - Internet Explorer Problem With Opacity
Hi guys and gals.
I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz Similar TutorialsAny idea why in IE the images and form elements in the middle row of this table are 50% opacity, but none of the text is? The IE CSS: http://ezdispatch.org/css/ezd_ie.css The other CSS: http://ezdispatch.org/css/ezd.css As a note, The IE version of this page (see a larger version he http://ezdispatch.org/view_orders.php ) is already hacked beyond belief (ok, it's not THAT bad...but it's not cool either). Basically, to do the partially see-through background I used a .png with 50% alpha transparency (.grey & .important classes). The problem is that IE doesn't do PNG alpha transparency without their proprietary filters applied. Once I figured that out, it still didn't work. Turns out you can't attach the filtered png background to the tr...you must attach to the tds. So I did. Then I found out that the filtered background image stops propogation of clicks. You can fix the clicks that go to links by making the bg image 1x1...no problem. But, the table rows need to get clicks because they expand when clicked. To do that I added a clear 1x1 gif as the background image over the top of the filtered background image. For some reason that takes the click, and passes it through...even though there is still a filtered image. The reason for wanting opacity for the whole row (as you would see viewing the bigger page in Firefox) is either for rows that are "done" or rows that are "deleted" (rather than the ugly line-through). If you are confused...join the club. If you can find a solution, you are my hero. im using this currently for internet explorer on a mouse over but it doesnt do anything.. the mozilla one works just fine IE Code: filter.progid:DXImageTransform.Microsoft.Alpha(opacity=70); progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); Firefox Code: -moz-opacity: 0.7; Hello, I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html {
min-width: 750px;
}
body {
margin: 0;
padding: 10px 0px;
background: #ff0000;
}
div#wrap {
width: 750px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
div#innerwrap {
width: 720px;
margin: 0 15px;
padding: 8px 0;
border: 1px sold #ff0000;
}
#body {
padding-top: 10px;
}
#left {
display: inline;
width:510px;
height:510px;
}
#box {
border: 1px solid #d1c7ac;
float: left;
color: #000000;
font-size: 8pt;
overflow: hidden;
width:250px;
height:220px;
}
#right {
height:510px;
text-align: center;
border: 1px solid #d1c7ac;
}
</style>
</head>
<body>
<div id="wrap">
<div id="innerwrap">
<div id="body">
<div id="left">
<div id="box" class="top-left">
Box 1.
</div>
<div id="box" class="top-right">
Box 2
</div>
<div id="box" class="middle-left">
Box 3
</div>
<div id="box" class="middle-left">
Box 4
</div>
</div>
<div id="right">
This is the right text
</div>
<br>
last line
</div>
</div>
</div>
</body>
</html>
Is there maybe a hack I can do to internet explorer so that this element will be solved? or my css is completly wrong, and I need to change it? Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css. thanks for any sugestions, regards, sim085 I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine. Please check it he ucables.com/search/iphone css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine. Please check it he ucables.com css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Hello here, I am trying to make an opacity effect on my working site and I want to have the same effect in Internet Explorer as well in Mozilla browsers. I have been able to implement the correct code for both browser in the following page: http://www.looksheetmusic.com/test.html but for an "unknown" cause the same effect doesn't work in the complete page below: http://www.looksheetmusic.com/test2.html As you can notice, in Internet Explorer the opacity is not linear through the whole page. I left the CSS embedded in both pages for your review. Any idea or advice is very welcome! Thank you in advance. Sincerely, Fabrizio Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+. Here is the original code that IE works fine with. Code:
/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}
The last item, the hover, is what is changed. Code:
/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }
This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P i have a div on a page that i want to be centered. i am using in css as Code: margin: 0 auto that works fine and is centered in firefox, but is left aligned in internet explorer. how to accompalish it in iexplorer ?? Hi, I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox. http://pangeaadvisors.org/default.asp Code: #content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
My website, currently http://12.214.26.185 does not render correctly in IE. It renders in Mozilla and Konqueror. I am posting my css file. Any advice would be greatly appreciated. Hey people. i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he http://tagsoup.com/cookbook/css/fixed/ here is the website so far, try opening it in both IE and another brouser too see the difference. http://people.brunel.ac.uk/~dt08ajm/playgroundtest/ any ideas on how i can fix it? i can post the code if needed. thanks in advance. Good Evening Folks, I would like to discuss Transparent PNG files and Internet Explorer. I like to use 24-bit PNG files with transparency in my web work. I like to overlay transparent backgrounds onto images with text formatted over the top. I like to use transparent PNG's as backgrounds for buttons, text and boxes all over the place, I even like using them to mask out images. I am very keen on using 24-Bit transparent PNG files in web design. The only thing that really stops me or at least puts me off using them is compatability problems with IE6 and below. IE7 doesn't seem to have any problems with them. I have found away to make 24-Bit transparent PNG files work in IE6, It requires using a proprietary IE filter called AlphaImageLoader I am still experimenting with it, but It seems to work OK utilising a few @import hacks. But I can't make this filter work in IE5.5 or IE5, although Micro$oft's doccumentation says I should be able to make it work in 5.5. Anyway I could always use @import hacks to make IE5 browsers use GIF images instead or maybe even JPGs. Now to me this is a lot of mucking around, I accept that a lot of people still use IE6 but how many people are still using IE5.5 and IE5? Does anyone have any other theories or ideas on how to go about this? Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated. Site: www dot 21healthconsult dot com CSS: Code:
/* Generic Selectors */
div.wrapper {
height: 100%;
width: 950px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: none;
color: #000000;
border-bottom: 1px solid #E0E0E0;
}
/**************** Pseudo classes ****************/
:link {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li {
list-style-type: disc;
line-height: 150%;
}
li :link {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:visited {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li :visited {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:hover {
color: #0066FF;
padding-bottom: 5px;
font-weight: none;
text-decoration: underline;
}
li :hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
:active {
color: #0066FF;
font-weight: none;
}
/************************* ID's *************************/
#header {
position: absolute;
width: 900px;
height: 50px;
margin: 0;
margin-top: 15px;
padding: 0 0 50px 50px; /*top right bottom left*/
text-align: left;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 900px;
height: 50px;
margin: 0;
margin-top: 48px;
padding: 0 0 50px 300px; /*top right bottom left*/
font-weight: normal;
font-size: 11;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 15px;
padding: 0 0 0 300px; /*top right bottom left*/
width: 600px;
}
#search_box {
background-color: #F0F0F0;
width: 600px;
height: 28px;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0;
font-color: #000000;
}
#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 80px;
padding: 0 0 50px 50px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 300px; /*top right bottom left*/
margin-top: 80px;
width: 900px;
text-align: left;
}
OK basically this css code is causing problems in IE.5 OS/9 on the mac I was wondering if the Windows version caused the same problems when rendering these css buttons: #elButton a { color: white; font-size:10px; font-family:verdana; font-weight:bold; text-align:center; text-decoration: none; border:3px outset #99ccff; background-color: #3399ff; display: block; margin: 1px; width: auto; height: 2.5 em; padding: 3px 5px 0; } #elButton a:hover { background-color: #D43D2A; color:#ffffff; padding-left:5px; border:3px inset #ffffff; } ============================================== html code: <DIV id="elButton"> <DIV><A href="#" onclick="img(1)">Next</A></DIV> <DIV><A href="#" onclick="img(-1)">Prev</A></DIV> </DIV> THANKS GUYS !! |
|||||||