sirka divu vo Firefoxe a IE

newboy1 · Napísal **newboy1**: 09.12.2008 16:50

Nazdarek.Prosim poradte, lebo uz som na pokraji zufalstva.. :cry:

Mam spraveny klasicky layout a problem je ze ked jednotlivym stlpcom nastavim border tak v IE sa to vykresli normale, ale vo Firefoxe mi to stredny stlpec hodi pod lavy. Aby boli pri sebe, tak som musel zmensit sirku stredneho stlpca..Co malo samozrejme za nasledok, ze sa to zle vykreslilo v IE. Poradte ako to upravit, aby som to mal v oboch prehliadacoch rovnake a mohol upravovat border.. Tu je kod:

index.php:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta http-equiv="content-language" content="sk" >
<title>www.only4web.com</title>
<link rel="stylesheet" type="text/css" href="ladenie.css">
</head>
<body style="background-color: #333333; text-align: center; height: 100%; margin: 0px">

 <div id="center">
<div id="head">hlavicka</div>

<div id="navlist">
<ul id="menu">
<li><a href="?site=odkazovac">1.odkaz</a></li>
<li><a href="?site=odkazovac">2.odkaz</a></li>
</ul>

</div>
<div id="left">lavy stlpec</div>
<div id="middle">stredny stlpec</div>
<div id="bottom">Päta.</div>
</div>
</body>
</html>

ladenie.css:

Kód:

#center {
height: 100%; width: 800px; margin: 0px auto; padding: 0px; align: center
}


#head {
text-align: center; height: 160px; width: 800px; margin: 0px; clear: both; background-color: NavajoWhite; 
border-width: 1px ; border-style: solid; border-color: #222222  
}

#navlist {
text-align: right; height: 28px; width: 800px; clear: both; background-color: DodgerBlue; 
border-width: 1px; border-style: solid; border-color: #222222  
}

#left {
text-align: center; height: 100%; width: 200px; margin: 0px; float: left; background-color: pink; 
border-width: 1px ; border-style: solid; border-color: #222222 
}

#middle {
text-align: center; height: 100%; width: 600px; margin: 0px; float: left; background-color: brown; 
border-width: 1px ; border-style: solid; border-color: #222222   
}

#bottom {
text-align: center; height: 30px; width: 800px; margin: 0px; clear: both; background-color: silver; 
border-width: 1px; border-style: solid; border-color: #222222  
}


ul#menu { 
font-size: 14px; font-weight: bold; font-family: Tahoma, Verdana, Arial; margin: 4px; padding: 4px
} 

ul#menu li { 
color: #c5c5c5; display: inline 
} 

ul#menu li a { 
color: #c5c5c5; text-decoration: none 
} 

ul#menu li a:hover { 
color: #c70304; 
}

mariachi · Napísal **mariachi**: 09.12.2008 17:16

Tak sprav dva .css. Napr. ladenie.css a ladenie_ie.css, kde ladenie.css bude obsahovat štýli pre FF/Operu a ladenie_ie.css pre IE. Index.php potom bude vyzerať dáko takto:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" > 
<meta http-equiv="content-language" content="sk" > 
<title>www.only4web.com</title> 
<link rel="stylesheet" type="text/css" href="ladenie.css" >
<!--[if lte IE ]>
<link rel="stylesheet" type="text/css" href="ladenie_ie.css" >
<![endif]-->
</head> 
<body style="background-color: #333333; text-align: center; height: 100%; margin: 0px"> 
.
.
.
</body> 
</html>

newboy1 · Napísal autor témy **newboy1**: 09.12.2008 17:42

mariachi..Dik za odpoved..Ale toto je fakt jedine riesenie ako to spravit?? Nemam totiz este nejake bohate skusenosti s tymto tak sa hned opytam.. Je viacej takych veci co sa inac vykresluju v IE a vo Firefoxe..To vzdy riesite tymto spôsobom..?? Tzn. 2 css subormi?? Sorry ak je to blba otazka, ale radsej sa spytam, kedze to neviem.. :-)

don jebot · Napísal **don jebot**: 09.12.2008 17:58

skus vyhodit bordery a pozriet sa ce FF pomcou Firebugu kde mas divy mozno treba sirsi content najlepsie by bolo keby si to dal na server a hodil link..

newboy1 · Napísal autor témy **newboy1**: 09.12.2008 18:09

No ked som vyhodil bordery, tak sa to zobrazilo spravne..Ale ako nahle tam pridam border, tak uz to vo FF nefunguje spravne..

don jebot · Napísal **don jebot**: 09.12.2008 18:33

takze rozsir content o velost bogderov cize kazdy div ma zlava a z prava po 1px tak si to vynasom a o to rozsir tych 800px

newboy1 · Napísal autor témy **newboy1**: 10.12.2008 14:37

mariachi..pouzil som tvoj spôsob (kedze jedine tak to fungovalo spravne) ale mam mensi problem.. Vo FF sa vsetko zobrazi normalne ako ma, ale v IE mi nad header vypise:

Ako to zapisat aby mi to nevypisovalo??

don jebot · Napísal **don jebot**: 10.12.2008 14:58

zabudol si dat od ktoreho ie asi si myslel 7

newboy1 · Napísal autor témy **newboy1**: 10.12.2008 15:06

Diky . Uz to funguje..

mariachi · Napísal **mariachi**: 10.12.2008 16:01

JJ, soráč, zabudol som tam dať 7, resp. môžeš tam pridať aj ďalší štýl IE6, lebo ten debilný Explorer zobrazuje v každej verzii stránku inak. Treba to odskúšať, ešte stále je veľa ľudí čo používa aj 6ku.

Veľmi dobrý je nato program IE Tester, skutočne fasa vec.
http://www.my-debugbar.com/wiki/IETester/HomePage
Má to dáke muchy (je to len Alpha verzia), ale občas sa to zíde.

don jebot · Napísal **don jebot**: 10.12.2008 16:14

mne ie tester stale pada a niekedy som aj zistil ze mi to nezobrazuje prehliadace korektne, skus nejaky standalone verziu (tie tiez blbnu google > MultipleIE)alebo virtual PC(co bude asi najlepsie)..
http://browsershots.org

sirka divu vo Firefoxe a IE

Podobné témy