Jump to content
php.lv forumi

Probleemas ar <div> augstumu ieksh IE

Estipois

By Estipois
in Draza

 Share

Recommended Posts

Estipois Newbie

Estipois

Posted
Posted (edited)

Sveika tauta!

 

Saskaaraos ar vien probleemu kur netieku gudrs kas pa vainu! Itkaa vienkaarsha tabula, tachu probleemas shaadas:

1)<div> ieksh pirmaa <td> augstmam jaabuut 8px - FF un Operaa - viss bumbaas, IE murgs - izmeegjinaajos visaadi ... nu idejas ir beigushaas!

 

2)Javascript gradient fons <div>-iem pa vidu uz FF un Operas ziimeejas kaa naakas - a uz IE nekaa!

 

Kods shaads:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang=lv>

<head>

<title>NKL</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="Content-Language" content="LV">

 

<!-- Gradient div bgr -->

 

<script language="javascript" type="text/javascript">

 

var setGradient = (function(){

 

//private variables;

var p_dCanvas = document.createElement('canvas');

var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function');

var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;

var p_isIE = /*@cc_on!@*/false;

 

 

//test if toDataURL() is supported by Canvas since Safari may not support it

 

try{ p_dCtx.canvas.toDataURL() }catch(err){

p_useCanvas = false ;

};

 

if(p_useCanvas){

 

return function (dEl , sColor1 , sColor2 , bRepeatY ){

 

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);

if(!dEl) return false;

var nW = dEl.offsetWidth;

var nH = dEl.offsetHeight;

p_dCanvas.width = nW;

p_dCanvas.height = nH;

 

 

var dGradient;

var sRepeat;

// Create gradients

if(bRepeatY){

dGradient = p_dCtx.createLinearGradient(0,0,nW,0);

sRepeat = 'repeat-y';

}else{

dGradient = p_dCtx.createLinearGradient(0,0,0,nH);

sRepeat = 'repeat-x';

}

 

dGradient.addColorStop(0,sColor1);

dGradient.addColorStop(1,sColor2);

 

p_dCtx.fillStyle = dGradient ;

p_dCtx.fillRect(0,0,nW,nH);

var sDataUrl = p_dCtx.canvas.toDataURL('image/png');

 

with(dEl.style){

backgroundRepeat = sRepeat;

backgroundImage = 'url(' + sDataUrl + ')';

backgroundColor = sColor2;

};

}

}else if(p_isIE){

 

p_dCanvas = p_useCanvas = p_dCtx = null;

return function (dEl , sColor1 , sColor2 , bRepeatY){

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);

if(!dEl) return false;

dEl.style.zoom = 1;

var sF = dEl.currentStyle.filter;

dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=, +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')].join('');

 

};

 

}else{

 

p_dCanvas = p_useCanvas = p_dCtx = null;

return function(dEl , sColor1 , sColor2 ){

 

if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);

if(!dEl) return false;

with(dEl.style){

backgroundColor = sColor2;

};

//alert('your browser does not support gradient effet');

}

}

})();

 

</script>

 

 

<!-- kopeejaa tabula -->

 

<STYLE TYPE="text/css">

<!--

table.bg

{

border: 0px;

background-color: #151515;

}

-->

</STYLE>

 

<!-- teksta stili -->

 

<STYLE TYPE="text/css">

<!--

p.a

{

color: white;

font-size: 11px;

font-family: "calibri";

font-weight: lighter;

list-style-type: disc;

text-align: center;

white-space: normal;

}

-->

</STYLE>

 

<!-- divu stili -->

 

<STYLE TYPE="text/css">

<!--

div.d

{

margin: 0px 0px 0px 0px;

padding: 88px 48px 88px 48px;

border: 0px;

}

-->

</STYLE>

 

<!-- Skripts divam ar slaideri -->

 

<style TYPE="text/css">

div.a

{

border: 0px solid black;

width: 450px;

height: 430px;

overflow: auto;

margin-left: auto;

margin-right: auto;

text-align: center;

color: white;

font-size: 12px;

font-family: "calibri";

font-weight: lighter;

list-style-type: disc;

text-align: left;

white-space: normal;

float: left;

display: block;

}

</style>

 

<style TYPE="text/css">

div.b

{

border: 0px solid black;

width: 12px;

height: 315px;

text-align: center;

color: white;

font-size: 12px;

font-family: "calibri";

font-weight: lighter;

list-style-type: disc;

text-align: left;

white-space: normal;

float: left;

display: block;

margin: 0px 0px 0px 0px;

border-width: 1px;

border-style:solid;

border-top-style: none;

border-bottom-style: none;

border-left-color: #434240;

border-right-style: none;

}

</style>

 

<style TYPE="text/css">

div.c

{

border: 0px solid black;

width: 12px;

height: 315px;

margin-left: auto;

margin-right: auto;

text-align: center;

color: white;

font-size: 12px;

font-family: "calibri";

font-weight: lighter;

list-style-type: disc;

text-align: left;

white-space: normal;

float: left;

display: block;

}

</style>

 

<style TYPE="text/css">

div.e

{

border: 1px solid black;

width: 1px;

height: 8px;

padding: 0px 0px 0px 81px;

border-width: 1px;

border-style:solid;

border-top-style: none;

border-bottom-style: none;

border-left-style: none;

border-right-color: #434240;

float: left;

}

</style>

 

 

</head>

 

<body>

<table width="737px" bgcolor="#282828" cellspacing="0" cellpadding="0" align="left" border="0">

<tr>

<td colspan="4"><div class="e"></div></td>

</tr>

<tr style="display:block; border: 1px solid #434240;">

<td width="255px" height="306px" bgcolor="#282828"></td><td><div class="c" id="a3"></div></td><td><div class="b" id="a2"></div></td>

<td height="306px" bgcolor="#151515"><div class="d"><p class="a">Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!Viskas daudz saraxtiic!

</p></div></td>

</tr>

</table>

</body>

</html>

<script language="javascript" type="text/javascript">

setGradient('a2','#2e2e2e','#151515',1);

</script>

<script language="javascript" type="text/javascript">

setGradient('a3','#282828','#2e2e2e',1);

</script>

 

 

PLz HLp!

 

Reku buus links vizualizaacijai: http://www.fshtours.lv/prob

Edited by Estipois
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...