Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Png прозрачность в IE Не работают ссылки


Автор: Dronnikkl 1.12.2007, 00:19
Здравствуйте!
В коде
 
Код

<? include 'news/head.php';?>
<html>

            <!-- [if IE]


<style type="text/css">

#boardleft {position:absolute; top:18em; left:0px; width: 200px; height: 105px;}

#boardright {position:absolute; top:18em; right:0px; width: 200px; height: 105px;}

</style>

-->

    <head></head>

 

        <!--[if gte IE 5.5]>

<![if lt IE 7]>

<style type="text/css">

#boardleft img, #pict img, #svet img, #boardright img, #logo img, #price img, #about img, #study img, #filial img, #niz img, #layer1 img,#logo img, #link1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }

#price,#link1 { display: inline-block; }

#boardleft { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='board.png',sizingMethod='scale'); top:18em;  }

#boardright{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='board.png',sizingMethod='scale'); }

{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='price.png',sizingMethod='scale'); }
#link1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='price.png',sizingMethod='scale'); }
#about { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='about.png',sizingMethod='scale'); }

#study { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='study.png',sizingMethod='scale'); }

#filial { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filial.png',sizingMethod='scale'); }

#niz { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='niz.png',sizingMethod='scale'); }

#layer1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pict.png',sizingMethod='scale'); }

#logo { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='scale'); }

#pict { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pict.png',sizingMethod='scale'); }

#svet{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='svet.png',sizingMethod='scale'); }

</style>

<![endif]>

<![endif]-->

    <meta http-equiv="content-type" content="text/html;charset=windows-1251" />
        <meta name="generator" content="Adobe GoLive" />

        <title>Untitled Page</title>



        <style type="text/css" media="all">

.fon {top: 0px; left: 0px; min-width:806px;

width:expression((document.documentElement.clientWidth

 || document.body.clientWidth) < 1500? "61em":

 "100%");}

#pict { background: url(fon1.jpg) repeat-y left top; position: absolute; z-index: 1; left: 0; top: 0; width: 102%; height: auto;  min-width:61em;}

#boardleft {position:absolute; top:13em; left:0px; width: 200px; height: 105px;z-index: 3; }

#boardright {position:absolute; top: 13em; right:0px; width: 200px; height: 105px;z-index: 3;}

* html #boardleft {position:absolute; top:15.4em; left:0px; width: 200px; height: 105px;z-index: 3;}

* html #boardright {position:absolute; top: 15.4em; right:0px; width: 200px; height: 105px;z-index: 3;}

#logo {position:absolute; top:0px; left:0px; width: 217px; height: 119px;z-index: 3;}

#price {position:absolute; top: 0px; left: 25%; width: 150px; height: 221px;z-index: 3; }
* html #price  { background: none; position:absolute; top: 0px; left: 25%; width: 150px; height: 221px;z-index: 3; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='price.png');}


#about { position: absolute; top:0px; width: 153px; height: 238px; left:43%;z-index: 3; }

#study { position: absolute; width: 173px; height: 222px; left: 63%;z-index: 3;}

#filial { position: absolute; width: 153px; height: 211px; top:0px; left: 84%; z-index: 3;}

#niz { float: left; bottom: 0px; left: 0px; width: 100%; height: 69px;z-index: 3; }

p {margin-top:-16px; color: white;z-index: 3;}

#text {position: absolute; top:55%; left:26%; text-indent: -4px; margin-top:-1px;z-index: 3;}

.three{z-index: 3;}
.link{float:left; width: 170px; height: 59px;}

.tho{margin-left: 26%;z-index: 3;}

.svet{position: absolute; top:55%; left:1%;text-indent: -4px;z-index: 3;}

#text2{position: absolute; top:20%; left: 52px; z-index: 3;}

#text3{position: absolute; top:20px; left: 9px; z-index: 3;} 
#bloglinks { position: absolute;  top: 16%; left: 0px; width: 170; height: ; }

</style>
</head>
<body >
<div id="pict">

<div id="text"><div class="three">
<?
$category = "main";
include rootpath.'/show_news.php';
?>
</div></div>
<div id="svet" class="svet">    <img src="svet.png" alt="" height="48" width="48" border="0"><div id="text2"><font color="white" size="2.4">
<b>Базовая подготовка</b>
</font></div></div>
<div id="boardright"><img src="board.png" alt="" height="105" width="200" border="0" />
<div id="text3"><font color="white" size="2.4">
</div></div>

                <div id="boardleft"><img src="board.png" alt="" height="105" width="200" border="0" /></div>
<A HREF="http://www.kalita-school.ru/study.php">
                        <div id="study">

                <img src="study.png" alt="" height="222" width="173" border="0"></div></A>

                <div id="logo">

        <img src="logo.png" alt="" height="119" width="217" border="0"></div>

<div id="price" >
<A HREF="http://www.kalita-school.ru/price.php"><img  src="price.png" alt="" height="221" width="150" border="0"></A></div>
<div id="about">
<a href=http://www.kalita-school.ru/about.php>
<img src="about.png" alt="" height="238" width="153" border="0"></a></div>
<div id="filial">
<a href=http://www.kalita-school.ru/filials.php>
<img src="filial.png" alt="" height="211" width="153" border="0"></a></div>
<img class="fon" src="pict.png" alt="" height="625" width="100%" border="0" />
<div id="niz">
<img src="niz.png" alt="" height="69" width="100%" border="0"></div>
</div>
<p></p>
</body>
</html>

Не работают ссылки картинок png в IE. В чем проблема?
http://www.kalita-school.ru

Автор: Castro 1.12.2007, 12:22
Чесно говоря лень читать код, но если у Вас есть ячейка с пнг фоном и Вы туда прицепили ссылку, то она действительно не будет работать. Благо все современные решения в области исправления пнг-бага это легко решают.

Автор: Dronnikkl 1.12.2007, 12:29
Код

#price {position:absolute; top: 0px; left: 25%; width: 150px; height: 221px;z-index: 3; }
* html #price  { background: none; position:absolute; top: 0px; left: 25%; width: 150px; height: 221px;z-index: 3; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='price.png');}



Код

<div id="price" >
<A HREF="http://www.kalita-school.ru/price.php"><img  src="price.png" alt="" height="221" width="150" border="0"></A></div>


Автор: SelenIT 1.12.2007, 15:14
Код

* html #price a { position: relative; }
должно помочь...

Автор: Dronnikkl 1.12.2007, 18:17
Не помогло подскажите какие еще есть варианты и как лучше размещать картинки png? 

Автор: Castro 1.12.2007, 21:36
Тут смотрели?
http://tigir.com/alpha_png.htm

Автор: Dronnikkl 1.12.2007, 21:45
Тоесть сделать png фоном , а ссылку просто сдлеать <a href=""></a>??

Автор: Castro 2.12.2007, 05:10
Dronnikkl, там есть совершенно разные варианты, точнее все. Можете сделать и так как писАли

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)