one1up Posted March 11, 2010 Share Posted March 11, 2010 Hi everyone. I'm trying to use a pre-made layout, and it uses PNG's. I don;t liek the way it looks in internet explorer, and tried lots of things to make the png's backgrounds transparent, and have decided id rather convert the images to jpg's. However, there's an issue with the " comments " link, this is css for wordpress. The link is not functional in internet explorer 6 and lower, and it works in firefox and chrome. I no longer wish to use the alpha filters etc. and use jpg's, but i cant find what part of the css is actually causing the link glitch. i heard and read it was a "z-index"issue, but ive tried everything, can someone help me figure out what part of the CSS to delete to get rid of this alpha channel transparency? Here is where i did some reading, he says it's the z-index in his article but also says it could be something else. I've also tried changing all the properties from absolute to relative, and nothing. i jsut want to do away with all the IE fizxes in general, and have tried to remove chunks of coding for IE fixes within the CSS, but have yet to be successful. Thanks so much for your time. There is no live version of the layout up yet to show, i took it down. heres where i got some insight, but am terribly confused. http://24ways.org/2007/supersleight-transparent-png-in-ie6 Below is the CSS */ /* =RESET ----------------------------------------------------------------------------- */ html, body, h1, h2, h3, h4, h5, form, ul, ol, li, dl, fieldset, p, dd, td, th, blockquote, pre{ margin: 0; padding: 0; font-family: "Verdana", "Palatino Linotype", Georgia, serif; } select, input, caption, label, td, th, span, table, textarea{ font-size: 1em; font-family: "Verdana", "Palatino Linotype", Georgia, serif; } table{ border-collapse: collapse; } img, fieldset, table{ border: none; } ul, ol{ list-style-type: none; } textarea{ overflow: auto; } input, label{ vertical-align: middle; } acronym{ cursor: help; border: none; } hr{ display: none; } button, .button{ width:auto; overflow:visible; border:0; background:none; cursor:pointer; } .hideMe{ position: absolute; left: -900em; } .printOnly{ display: none!important; } html.msie6, html.msie7 { overflow-x: hidden;} /* FUCK YOU IE YOU FUCKING FUCK =() */ body{ font-size:70%; /* :INFO:1em = 12px */ text-align:center; margin:0; height:100%; line-height: 20px; overflow-x: hidden; color:#414242; background: #fff url(images/bg-1.png) repeat-x top center; } /* =LINKS ----------------------------------------------------------------------------- */ a{ color: #000; text-decoration: underline; cursor:pointer; } a:hover, a:focus{ text-decoration: none; } /* =GENERIC CONTAINERS ----------------------------------------------------------------------------- */ #mainContainer1{ background: url(images/bg-3.png) repeat-x bottom center; } #mainContainer2{ min-height: 619px; background: url(images/bg-2.png) no-repeat top center; } #mainContainer3{ background: url(images/bg-4.png) no-repeat bottom center; } #mainContent{ position: relative; width: 760px; margin: 0 auto; text-align: left; } /* =HEADER ----------------------------------------------------------------------------- */ #header{ z-index: 4; position: absolute; top: 0; left: 0; height: 210px; width: 810px; overflow: hidden; } #header h1{ position: absolute; top: 21px; right: 29px; } #header h2{ position: absolute; top: 87px; right: 33px; } #headerLink{ display: block; position: absolute; top: 0; left: 0; width: 760px; height: 125px; z-index: 5; } /* =FOOTER ----------------------------------------------------------------------------- */ #footer{ height: 137px; width: 760px; overflow: hidden; } #externalLinks{ float: right; display: inline; width: 120px; height: 38px; margin: 17px 30px 0 0; } #externalLinks li{ display: block; } #externalLinks li a{ position: relative; display: block; width: 120px; height: 19px; background: url(images/bg_sprites1.png) no-repeat; } #externalLinks li#vraiSite a{ background-position: 0 -354px; } #externalLinks li#vraiSite a:hover, #externalLinks li#vraiSite a:focus{ background-position: -133px -354px; } #externalLinks li#oldShop a{ background-position: -274px -354px; } #externalLinks li#oldShop a:hover, #externalLinks li#oldShop a:focus{ background-position: -406px -354px; } #externalLinks li a span{ position: absolute; left: -900em; } #footPrint{ font-family: Verdana; font-size: 10px; color: #000; margin-top: -40px; text-align: center; line-height:10px; padding-bottom: 20px; } /* =NAVS ----------------------------------------------------------------------------- */ .nav{ height: 59px; width: 510px; overflow: hidden; } .nav li{ z-index: 1; position: relative; float: left; height: 50px; background: url(images/bg_sprites1.png) no-repeat; } .nav li.on{ z-index: 2; } .nav li a{ position: relative; display: block; height: 59px; background: url(images/bg_sprites1.png) no-repeat; } .nav li a span{ position: absolute; left: -900em; } #nav1-1, #nav1-1 a, #nav2-1, #nav2-1 a{ width: 133px;} #nav1-1{ background-position: 0 -61px; } #nav1-1.on{ background-position: 0 0; } #nav2-1{ background-position: 0 -181px; } #nav2-1.on{ background-position: 0 -121px; } #nav1-1 a, #nav2-1 a{ background-position: 0 -241px; } #nav1-1 a:hover, #nav1-1 a:focus, #nav2-1 a:hover, #nav2-1 a:focus{ background-position: 0 -299px; } #nav1-2, #nav2-2{ margin-left: -22px; } #nav1-2, #nav1-2 a, #nav2-2, #nav2-2 a{ width: 141px; } #nav1-2{ background-position: -133px -62px; } #nav1-2.on{ background-position: -133px 0; } #nav2-2{ background-position: -133px -181px; } #nav2-2.on{ background-position: -133px -121px; } #nav1-2 a, #nav2-2 a{ background-position: -133px -241px; } #nav1-2 a:hover, #nav1-2 a:focus, #nav2-2 a:hover, #nav2-2 a:focus{ background-position: -133px -299px; } #nav1-3, #nav2-3{ margin-left: -13px; } #nav1-3, #nav1-3 a, #nav2-3, #nav2-3 a{ width: 132px; } #nav1-3{ background-position: -278px -62px; } #nav1-3.on{ background-position: -274px 0; } #nav2-3{ background-position: -280px -181px; } #nav2-3.on{ background-position: -274px -121px; } #nav1-3 a, #nav2-3 a{ background-position: -280px -241px; } #nav1-3 a:hover, #nav1-3 a:focus, #nav2-3 a:hover, #nav2-3 a:focus{ background-position: -280px -299px; } #nav1-4, #nav2-4{ margin-left: -15px; } #nav1-4, #nav1-4 a, #nav2-4, #nav2-4 a{ width: 130px; } #nav1-4{ background-position: -413px -62px; } #nav1-4.on{ background-position: -406px 0; } #nav2-4{ background-position: -415px -181px; } #nav2-4.on{ background-position: -406px -121px; } #nav1-4 a, #nav2-4 a{ background-position: -412px -241px; } #nav1-4 a:hover, #nav1-4 a:focus, #nav2-4 a:hover, #nav2-4 a:focus{ background-position: -412px -299px; } #nav1{ position: absolute; top: 139px; left: 30px; } #nav2{ float: left; display: inline; margin-left: 33px; } #rss{ z-index: 4; position: absolute; left: 670px; top: 145px; display: block; width: 70px; height: 100px; background: url(images/bg_sprites1.png) no-repeat -537px 0; } #rss:hover, #rss:focus{ background-position: -537px -118px;} #rss span{ position: absolute; left: -900em; } #navPage{ position: fixed; /*overflow: hidden;*/ top: 50%; margin-top: -85px; height: 230px; width: 760px; z-index: inherit; /* for Safari =______= */ } /*-- UGLY FUCKIN' HACK - WON'T YOU DIE IE6? IE7? --*/ .msie6 #navPage, .msie7 #navPage{ z-index: 3; position: absolute; top: 300px; /* top: 0; left: 0; top:expression(documentElement.scrollTop+body.scrollTop + 300);*/ } /* * html { -background:url(null) fixed } /* no fucking flickering! */ #prevPage, #nextPage{ z-index: 3; position: relative; display: block; width: 35px; height: 230px; } #prevPage a, #nextPage a{ position: relative; display: block; width: 35px; height: 230px; background: url(images/bg_sprites3.png) no-repeat; } #prevPage span{ position: absolute; left: -900em; } #nextPage span{ position: absolute; right: -900em; } #prevPage{ float: left; } #prevPage a{ background-position: 0 -230px;} #prevPage a:hover, #prevPage a:focus{ background-position: 0 0; } #nextPage{ float: right; } #nextPage a{ background-position: -35px -230px; } #nextPage a:hover, #nextPage a:focus{ background-position: -35px 0; } /* =404 ----------------------------------------------------------------------------- */ body#body404{ background: #fff; } #erreur404{ position: absolute; top: 50%; left: 50%; height: 116px; width: 410px; margin-top: -195px; margin-left: -380px; background: url(images/bg_404.png) no-repeat 0 0; text-align: left; padding: 275px 0 0 350px; } #demenagement{ position: absolute; top: 50%; left: 50%; height: 116px; width: 414px; margin-top: -195px; margin-left: -407px; background: url(images/bg_demenagement.png) no-repeat 0 0; text-align: left; padding: 275px 0 0 400px; } #erreur404 h1, #demenagement h1{ font-size: 2em; margin: 0; } #erreur404 p, #demenagement p{ margin: 10px 0 0 0; } /* =CORE ----------------------------------------------------------------------------- */ #core{ z-index: 1; position: relative; padding: 200px 0 0 0; margin-left: 55px; width: 650px; min-height: 565px; } #core img{ display: block; } #redac{ overflow: hidden; width: 620px; margin: 0 0 0 16px; } #whatAbout{ width: 620px; line-height: 1.5em; } #whatAbout p{ padding: 25px 16px 0 16px; } #whatAbout p:first-letter{ font-size: 3.5em; line-height: 0.7em; float: left; padding: 3px 3px 0 0; } .separator{ position: relative; width: 698px; height: 8px; background: url(images/bg_sprites2.png) no-repeat 0 0; overflow: hidden; margin: 25px 0 0 -22px; } #dateStuff{ float: left; background: url(images/bg_sprites1.png) no-repeat -570px -230px; min-height: 30px; padding-left: 50px; margin: 20px 0; } #dateStuff a{ font-weight: bold; text-decoration: none; color: #ADBF13; } #dateStuff a:hover, #dateStuff a:focus{ text-decoration: underline; } #commentLink{ font-size: 1em; } #commentLink a, #commentLink span{ float: right; padding: 10px 0 10px 20px; margin: 20px 0; background: url(images/bg_sprites1.png) no-repeat -600px -296px; font-weight: bold; text-decoration: none; } #commentLink a:hover, #commentLink a:focus{ text-decoration: underline; } #commentLink a.on, #commentLink span.on{ background-position: -600px -343px; } #commentsArea{ width: 620px; overflow: hidden; clear: both; } #commentsArea ol li{ display: block; width: 100%; overflow: hidden; border-top: 35px solid #fff; } #commentsArea ol li blockquote{ font-size: 0.84em; line-height: 1.4em; width: 100%; overflow: hidden; } #commentsArea ol li blockquote h3{ float: left; width: 155px; padding: 0 30px; font-weight: normal; font-size: 1em; } #commentsArea ol li blockquote h3 cite{ display: block; font-style: normal; font-weight: bold; font-size: 1.2em; } #commentsArea ol li blockquote h3 cite a{ display: block; width: 100%; text-decoration: none; } #commentsArea ol li blockquote h3 cite a:focus, #commentsArea ol li blockquote h3 cite a:hover{ text-decoration: underline; } #commentsArea ol li blockquote h3 cite a img{ display: inline; vertical-align: top; } #commentsArea ol li blockquote h3 small{ font-size: 1em; } #commentsArea ol li blockquote .what{ float: left; width: 375px; padding-right: 30px; font-size: 1.2em; } #commentsArea ol li.stpoCom{ background: url(bg_6.png); color: #fff; } #commentsArea ol li.stpoCom a{ color: #fff; } #commentsArea ol li.stpoCom .stpoComTop{ height: 6px; width: 100%; overflow: hidden; margin-bottom: 20px; background: url(images/bg_sprites2.png) no-repeat -78px -6px; } #commentsArea ol li.stpoCom .stpoComBtm{ height: 6px; width: 100%; overflow: hidden; margin-top: 20px; background: url(images/bg_sprites2.png) no-repeat -78px -14px; } #commentsForm{ border: 1px solid #ccc; background: url(images/bg_5.png) repeat 0 0; padding: 20px 30px; margin: 20px 0; } #commentsForm p{ width: 100%; overflow: hidden; margin-top: 5px; } #commentsForm label, #commentsForm .labelLike{ font-weight: bold; width: 160px; float: left; padding-top: 5px; padding-right: 25px; } #commentsForm input, #commentsForm textarea{ width: 180px; padding: 3px; border: 1px solid #000; } #commentsForm textarea{ float: left; width: 355px; max-width: 363px; height: 190px; margin: 0; } #commentsForm #commentsSubmit{ margin-top: 0; } #commentsForm #commentsSubmit small{ float: left; padding: 5px 0 0 185px; font-size: 1em; font-style: italic; } #commentsForm #commentsSubmit input{ float: right; margin-right: 10px; cursor: pointer; width: 100px; padding: 5px 0; border: 1px solid #000; border-top: none; background: #000; color: #fff; font-weight: bold; } .msie6 #commentsForm #commentsSubmit input, .msie7 #commentsForm #commentsSubmit input{ border-top: 1px solid #000; } #commentsForm #commentsSubmit input:hover, #commentsForm #commentsSubmit input:focus{ background: #fff; color: #000; } #commentsForm p.error input, #commentsForm p.error textarea{ border-width: 2px; padding: 2px; } #commentsForm p.error label, #commentsForm p.error .labelLike{ background: url(images/bg_sprites2.png) no-repeat 168px -8px;} #commentsForm p#errorMsg, #commentsForm p#errorMsg2{ display: none; background: url(images/bg_sprites1.png) no-repeat -600px -305px; width: 370px; padding-left: 20px; margin-left: 165px; font-weight: bold; } #commentsForm p#errorMsg2{ display: block; } /* pour le check back-end */ #commentsForm p.radioCollection input{ float: left; width: 14px; height: 14px; border: none; margin-top: 6px; margin-right: 5px; } #commentsForm p.radioCollection label{ width: auto; } #commentsForm p.radioCollection em{ float: left; padding-top: 5px; } #allEpisodes{ width: 100%; overflow: hidden; clear: both; } #allEpisodes h2{ border-bottom: 1px solid #666; padding-bottom: 2px; font-size: 1em; } #allEpisodes ul{ padding: 10px 0; width: 100%; overflow: hidden; } #allEpisodes li{ float: left; list-style-type: circle; margin-left: 3%; width: 45%; } /* =BONUS / LIENS / HIN ----------------------------------------------------------------------------- */ #redacPage{ width: 650px; margin-bottom: 20px; } #redacPage img{ display: block; margin: 0 auto; } #redacPage p{ margin: 35px 0 15px; padding: 0 20px; } #redacPage p#intro{ margin-top: 20px; } #redacPage p#intro:first-letter{ font-size: 3.5em; line-height: 0.7em; float: left; padding: 3px 3px 0 0; } #redacPage ul{ width: 100%; overflow: hidden; } #redacPage ul li{ float: left; } .msie6 #redacPage ul li img, .msie7 #redacPage ul li img{ float: left; } #redacPage.hin p{ margin: 10px 0 0 0; padding: 0 20px; } #redacPage.hin p.question{ margin-top: 25px; font-weight: bold; } #redacPage.hin p.signature{ margin: 30px; text-align: right; font-style: italic; } .hinVisual{ float: right; margin: 0 0 10px 20px; } /* =POPIN ----------------------------------------------------------------------------- */ .hasJS #allEpisodes{ display: none; } #mask{ position: fixed; z-index: 100; top: 0; left: 0; background: url(images/bg_mask.png) repeat; height: 100%; width: 100%; /*display: none;*/ cursor: pointer; } #popinContainer{ position: fixed; top: 50%; left: 50%; margin-left: -276px; margin-top: -169px; width: 552px; height: 338px; z-index: 101; text-align: left; background: url(images/bg_popin.png) no-repeat 0 -44px; } /*-- IE6 CRAP --*/ * html{height:100%;} * body{height:100%;} .msie6 #mask{ position: absolute; top:expression(documentElement.scrollTop+body.scrollTop); background-image: url(bg_mask-ie6.png); } /* position:fixed for IE6 */ .msie6 #popinContainer{ -position: absolute; -top:expression(documentElement.scrollTop+body.scrollTop+(documentElement.offsetHeight/2)-(this.offsetHeight/2))!important; margin-top: 0!important; /* "-..." is for stupid IE7 */ } /* ------------ */ #popinContent{ position: relative; width: 552px; height: 338px; } #closeButton{ position: absolute; left: 447px; top: 35px; width: 59px; height: 44px; background: url(images/bg_popin.png) no-repeat 0 0; } #closeButton:hover, #closeButton:focus{ background-position: -59px 0; } #ajaxLoad{ display: block; margin: 0 auto; padding-top: 150px; } .merci{ background: url(images/bg_popin.png) no-repeat 0 -382px; } .merci p{ position: absolute; left: 260px; top: 160px; width: 220px; } .episodes{ background: url(images/bg_popin.png) no-repeat 0 -720px; } #popinContent #allEpisodesSelect{ position: absolute; top: 100px; left: 150px; width: 350px; padding: 3px; border: 1px solid #000; } #popinContent #allEpisodesSelect option[selected]{ color: #ccc; } /* =ADMIN STUFF ----------------------------------------------------------------------------- */ #admin h1{ font-size: 2em; margin-bottom: 20px; } #admin h2{ font-size: 1.3em; margin-bottom: 10px; } #admin .error{ color: red; font-weight: bold; } #loginForm fieldset{ margin: 50px auto; color: #fff; width: 310px; } #loginForm p{ width: 100%; overflow: hidden; margin-bottom: 5px; } #loginForm label{ float: left; text-align: right; width: 150px; padding: 2px; } #loginForm input{ float: left; width: 150px; } #loginForm input[type=submit]{ float: right; width: auto; text-align: center; } #adminMain{ margin: 25px auto; padding-top: 25px; width: 750px; background: #fff; min-height: 530px; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } #adminMainCore{ width: 650px; text-align: left; border: 1px dotted #ccc; background: #eee; margin: 0 25px; padding: 25px; } #mainNav{ width: 100%; overflow: hidden; } #mainNav li{ float: left; } #mainNav li h2{ padding: 0 7px; border-left: 0px solid #ccc; } #mainNav li:first-child h2{ padding-left: 0; border: none; } #admin table{ width: 100%; } #admin table td, #admin table th{ padding: 5px; vertical-align: top; } #admin table th{ background: #666; border: 1px solid #666; color: #fff; } #admin table td{ background: #fff; border: 1px solid #ccc; } #admin table td a{ display: block; text-decoration: none; } #admin table td a:hover{ text-decoration: underline;} #admin .bigFields input[type=text]{ width: 350px;} #admin .bigFields textarea{ width: 100%; height: 150px; } /* Comments (comment) */ .comments, .comments ul, #comments li{ margin:0; padding:0; list-style:none; } .comments li{ margin:1.5em 0; position:relative; font-size:13px; background:url(images/bg_comments.png) no-repeat 0 0; overflow:hidden; } .comments a{color:#0A84A7; text-transform: uppercase; font-family: Verdana; font-weight: bold;} .comments a:hover{color:#555;text-decoration:none;} .comments .meta{ float:left; display:inline; width:100px; } .comments .meta li{ background:none; margin:0; } .comments .meta .date{ color:#999; font-size:11px; } .comments .meta img{ border:3px solid #FFCADE; } .comments .body{ float:left; display:inline; width:425px; padding:1em 0; font-family: Verdana; font-size: 11px; color: #414242; margin-left:47px; } .comments small{ font-family: Tahoma; color: #666; font-size: 10px; } #container{ margin:0 auto; background:#fff; width:600px; padding:20px 40px 0px -40px; text-align:left; } /***** COMMENTS FORMATTING *****/ h3#comments, h3#respondTitle { padding: 5px 5px 5px 10px; margin: 0px 0px 10px -5px; width: 100%; clear: both; font-size: 12px; color: #1AC5FD; font-weight: bold; -moz-border-radius: 13px; font-family: Century Gothic, "Chaparral Pro", Georgia, "Times New Roman", serif; background: #F9FCDD; text-transform: uppercase; } #commentform input { width: 226px; background: #ffffff; padding: 2px; color: #575757; border: 1px solid #cccccc; font-size: 11px; margin: 0px 0px 10px 10px; font-family: Verdana, Helvetica, sans-serif; } #commentform textarea { background: #ffffff; width: 360px; height: 100px; color: #575757; padding: 4px; border: 1px solid #cccccc; margin-left: 10px; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; } #commentform #submit { margin: 5px 0px; padding: 5px; background: #FEE3EC; width: 65px; border: none; text-align: center; cursor: pointer; font-family: Verdana, Helvetica, sans-serif; color: #FE76A3; font-size: 11px; font-weight: bold; margin-left: 10px; -moz-border-radius: 13px; } #commentform label { font-size: 11px; font-family: Verdana, Arial, sans-serif; font-weight: normal; color: #666; display: block; margin: 0px; margin-left: 10px; padding: 0px; } #logo { position: absolute; top: 60px; left: 60px; width: 500px; height: 150px; font-size: 26px; font-family: Cambria, "Chaparral Pro", Georgia, "Times New Roman", serif; color: #6a531c; margin: 0px; font-weight: normal; } #logo a:link, #logo a:visited { color: #6a531c; text-decoration: none; } #logo a:hover { color: #312406; } #logo img{ padding:4px 4px 4px 4px; border:#dddddd 1px solid; margin-right: 5px; } #core h2.headline a{ color: #FEA60D; font-family: Arial; background: url(images/side.png) top left no-repeat; font-size: 21px; text-decoration: none; padding-bottom: 20px; padding-left: 53px; } .details{ background: #FEFEEA; color: #1387D9; font: 10px Tahoma; padding-top:3px; padding-left:5px; padding-bottom: 3px; margin-top: 4px; margin-left: 50px; margin-bottom: 10px; text-align: left; width: 590px; height: 14px;} .details a{ color: #FB258A; } #tweet { position: absolute; width: 500px; padding-left: 60px; padding-bottom: 40px; padding-top: 30px; font-size: 10px; line-height: 15px; font-family: Verdana; color: #666; background:url(images/tweet.png) top left no-repeat; font-weight: normal; } #tweet p{ -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px solid #FEDCE8; background: #FDF4F7; padding: 5px; } #tweet a{ color: #FC73A0; font-weight: bold; } Link to comment https://forums.phpfreaks.com/topic/194840-links-not-working-in-ie6-delete-css-alpha-transparency/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.