[CSS] Odstepy między divami a floaty

meg83 · 17 Października 2007

Hej!

Hmm...głowię się tym już jakiś czas, czytałam na necie o floatach, trybie Quirks i nie potrafię znaleźć rozwiązania, a mianowicie:

W IE 7.0, FF i innych wszystko jest ok, ale w IE 6.0 i niższych już nie:

Robi mi się przerwa 1 px między divami JUT_1, JUT_ 4 itd. Dodatkowo tylko w IE 5.0 JUT_3 pokrywa się z JUT_4.

Jeszcze jedno .TEKST ma nadane min-height i nie działa to pod IE 6.0 choć wydaje mi się że IE 6.0 to obsługuje.

Zrzuty ekranu

Z góry dziękuję za pomoc.

html, body {
background-color: #F5D78F;
scrollbar-base-color:#F5D78F;
scrollbar-highlight-color:#480000;
scrollbar-shadow-color:#480000;
scrollbar-3dlight-color:#F5D78F;
scrollbar-darkshadow-color:#F5D78F;
scrollbar-arrow-color:#480000;
scrollbar-track-color:#F5D78F;
scrollbar-face-color:#F5D78F;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, Lucida, sans-serif;
padding: 0px;
margin: 10px 0px 0px 0px;
}


div, img {
margin:0px; 
padding:0px;
border: none;}


a:link { color:#480000 }
a:visited { color:#8A2402 }
a:hover { color:#000000 }
a:active { color:#480000; font-weight:bold; }


div.Table_01 {
margin: 0px auto;
	border: 0px solid #480000; 
width:900px;
height: auto;
	overflow: hidden;
background-image: url('../Design/tlo_tv.jpg');
background-repeat: repeat;
color: #480000;

}

div.JUT-1 {
float: left;
width:316px;
height:234px;

}

div.JUT-2 {
float: left;
left:316px;
top:0px;
width:284px;
height:234px;

}

div.JUT-3 {
float: left;
left:600px;
width:300px;
height:234px;

}

div.JUT-4 {
float: left;

width:316px;
height:162px;
margin-top:-3px;

}

div.JUT-7 {
clear: left;
left:0px;
top:396px;
width:316px;
height:106px;

}


div.JUT-10 {
clear: left;
left:0px;
top:502px;
width:316px;
height:198px;
}


div.JUT-13 {
clear: left;
left:0px;
top:700px;
width:316px;
height:278px;
}

div.BOK {
float: left;
clear: left;
left:0px;
top:1016px;
width:296px;
height:100%;
overflow: hidden;
background-image: url('../Design/tlo_tv.jpg');
background-repeat: repeat;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
text-align: center;
  font-size: 12px;
  color: #480000;
margin: 0; 
border: 0;

}


.TEKST {

float: right; 
clear: none;
height: auto;
min-height: 1300px;
_height: 1300px;
width: 530px; 
background-color: #F5D78F;
border-width: 1px;
border-style: solid;
border-color: #480000;
margin-left: 0px;
margin-right: 15px;
margin-top: 35px;
margin-bottom: 30px;

}


div.STOPKA {
width: 896px;
height: auto;
background-color: #480000;
  clear: both;
  border-width: 1px;
border-style: solid;
border-color: #480000;
text-align: center;
vertical-align: middle;
  font-size: 11px;
  color: #F5D78F;
  margin-bottom: 2px;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 50px;
  word-break: break-all;
  overflow: auto;



}

div.BLOK {
float: left;
clear: left;
width:280px;
height:auto;
background-color: #F5D78F;
text-align: center;
vertical-align: text-top;
  margin-bottom: 2px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 60px;
text-align: center;
font-weight: normal;
font-size: 12px; 
padding: 5px; 
border: 0;
}

ul li {
margin: 0px; 
padding: 0px 0px 0px 10px; 
background: transparent url('../Design/lista.gif') no-repeat scroll left center; 
list-style-type: none; 
display: block; 
-moz-background-clip: -moz-initial; 
-moz-background-origin: -moz-initial; 
-moz-background-inline-policy: -moz-initial;
line-height: 18px;
font-size: 12px;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 6px;
padding-top: 6px;

}

h2 {
font-weight: bold;
font-size: 14px;
color: #480000;
}

p {
  	text-align: justify;
color: #480000;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 6px;
padding-top: 6px;

}

i {

color: #480000;
font-style: italic;
}

h1 {
text-align: center;
font-weight: bolder;
font-size: 16px;
color: #480000;
}

h3 {
text-align: left;
font-weight: bold;
font-size: 14px;
color: #480000;

}

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

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<meta http-equiv="PICS-Label" content='(PICS-1.0 "https://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" by "admin_m@gazeta.pl" for "https://jut.katolicki.eu" on "2007.08.20T13:45+0100" exp "2010.12.31T23:59+0100" r (n 0 s 0 v 0 l 0))'>
<meta name="Author" content="meg83">
<meta name="Copyright" content="JuT" >
<meta name="Robots" content="index, follow" >
<meta name="Googlebot" content="Noodp" >
<meta name="revisit-after" content="3 Days" >
<link rel="stylesheet" href="../style.css" type="text/css" >
<link rel="Shortcut icon" href="../Design/ikona.ico" >
<script type="text/JavaScript" src="../rounded_corners_lite.inc.js"></script>

<?php
define('DATA_DIR', 'data');
if (!isset($_SERVER['PATH_INFO']) || !eregi('^(/[0-9A-Za-z_-]+)+\.html$', $_SERVER['PATH_INFO'])) $_SERVER['PATH_INFO'] = '/index';
else
{
$_SERVER['PATH_INFO'] = eregi_replace('\.html$', '', $_SERVER['PATH_INFO']);
if (!file_exists(DATA_DIR . $_SERVER['PATH_INFO'] . '.php')) $_SERVER['PATH_INFO'] = '/index';
}
$DIR = str_repeat('../', substr_count($_SERVER['PATH_INFO'], '/') - 1);
if ($_SERVER['PHP_SELF'] != $_SERVER['SCRIPT_NAME'] . $_SERVER['PATH_INFO'] . '.html') echo '<base href="' . htmlspecialchars('https://' . $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'] . $_SERVER['PATH_INFO']) . '.html" />
';
include DATA_DIR . (file_exists(DATA_DIR . $_SERVER['PATH_INFO'] . '.h.php') ? $_SERVER['PATH_INFO'] : '/index') . '.h.php';
?>

</style>
<script type="text/JavaScript">

 window.onload = function()
 {
  settings = {
	  tl: { radius: 20 },
	  tr: { radius: 20 },
	  bl: { radius: 20 },
	  br: { radius: 20 },
	  antiAlias: true,
	  autoPad: true
  }

  /*
  Usage:

  newCornersObj = new curvyCorners(settingsObj, classNameStr);
  newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
  */
  var TEKSTObject = new curvyCorners(settings, "TEKST");
  TEKSTObject.applyCornersToAll();

  var BLOKObject = new curvyCorners(settings, "BLOK");
  BLOKObject.applyCornersToAll();

 }

</script>

</head>

<body>

<div class="Table_01">

<div class="JUT-1">
	<img src="../Design/JUT_1.jpg" width="316" height="234"  border="0" alt="" usemap="#JUT_1_Map">
</div>
<div class="JUT-2">
	<img src="../Design/JUT_2.jpg" width="284" height="234"  border="0" alt="" usemap="#JUT_2_Map">
</div>
<div class="JUT-3">
	<img src="../Design/JUT_3.jpg" width="300" height="234"  border="0" alt="" usemap="#JUT_3_Map">
</div>
<div class="TEKST">

<?php
include DATA_DIR . $_SERVER['PATH_INFO'] . '.php';
?>

</div>

<div class="JUT-4">
	<img src="../Design/JUT_4.jpg" width="316" height="162" border="0" alt="" usemap="#JUT_4_Map">
</div>

<div class="JUT-7">
	<img src="../Design/JUT_7.jpg" width="316" height="106" border="0" alt="" usemap="#JUT_7_Map">
</div>

<div class="JUT-10">
	<img src="../Design/JUT_10.jpg" width="316" height="198" border="0" alt="" usemap="#JUT_10_Map">
</div>

<div class="JUT-13">
	<img src="../Design/JUT_13.jpg" width="316" height="278" border="0" alt="" usemap="#JUT_13_Map">

</div>
<div class="BLOK">
 <?php include "quote.php"; ?>

</div>
	<div class="BOK">
<p> </p>
<p> </p>

<form action="https://www.google.pl/search" method="get">
<input type="text" name="q" size="10" style="color: #480000; border-style: solid; border-width: 0; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; background-color: #F5D78F; font-family:Times New Roman; font-size:12pt" />
<input type="hidden" name="ie" VALUE="iso-8859-2" />
<input type="hidden" name="sitesearch" value="domena" />
<input type="submit" value="Szukaj" style="color: #480000; font-size: 10px; border: 0px solid #F5D78F; background-color: #F5D78F" />
</form>
<p> </p>
<p> </p>
<!-- stat.4u.pl NiE KaSoWaC -->
<a target=_top href="https://stat.4u.pl/?meg83">
<img alt="" src="https://adstat.4u.pl/s4u.gif" border="0" width="60" height="22"></a>
<script language="JavaScript" type="text/javascript">
<!--
function s4upl() { return "&r=er";}
//-->
</script>
<script language="JavaScript" type="text/javascript" src="https://adstat.4u.pl/s.js?meg83"></script>
<script language="JavaScript" type="text/javascript">
<!--
s4uext=s4upl();
document.write('<img alt="" src="https://stat.4u.pl/cgi-bin/s.cgi?i=meg83'+s4uext+'" width="1" height="1">')
//-->
</script>
<noscript><img alt="" src="https://stat.4u.pl/cgi-bin/s.cgi?i=meg83&r=ns" width="1" height="1"></noscript>
<!-- stat.4u.pl KoNiEc -->
</div>


	<div class="STOPKA">

© Redakcja JuT 2003-2007	|   Wszelkie prawa zastrzeżone	|	Aktualizacja strony: <?php echo date('d.m.Y', filemtime($_SERVER['SCRIPT_FILENAME'])); ?>
</div>


</div>

<map name="JUT_1_Map">
<area shape="poly" alt="" coords="258,221, 246,252, 251,281, 272,282, 290,255, 293,226, 283,206" href="../zycie.html">
<area shape="poly" alt="" coords="307,178, 333,166, 350,159, 371,159, 386,166, 375,186, 353,206, 321,206, 303,195" href="milosierdzie.html">
</map>

<map name="JUT_2_Map">
<area shape="poly" alt="" coords="-9,178, 17,166, 34,159, 55,159, 70,166, 59,186, 37,206, 5,206, -13,195" href="milosierdzie.html">
<area shape="poly" alt="" coords="96,186, 127,166, 154,166, 174,178, 169,196, 141,206, 106,206, 98,198" href="sylwetki.html">
<area shape="poly" alt="" coords="195,159, 228,140, 262,140, 279,159, 260,178, 208,182, 194,166" href="modlitwy.html">
</map>

<map name="JUT_3_Map">
<area shape="poly" alt="" coords="4,178, 30,166, 67,166, 82,178, 81,186, 61,206, 23,206, 6,195" href="intencje.html">
<area shape="poly" alt="" coords="107,150, 138,140, 169,142, 187,158, 179,176, 142,178, 110,174" href="poezja.html" >
<area shape="poly" alt="" coords="212,172, 252,166, 274,179, 285,189, 278,203, 244,206, 216,200, 204,189, 207,170" href="czytelnia.html">

<area shape="rect" alt="Dodaj stronę JuT do ulubionych" coords="278,12,292,28" href=# onclick="window.external.addfavorite('https://www.jut.katolicki.eu', ' JuT- Twój serwis religijny ')">

<area shape="rect" alt="Strona główna" coords="252,8,274,29" href="index.html">
</map>

<map name="JUT_4_Map">
<area shape="poly" alt="" coords="246,91, 236,132, 255,151, 278,137, 283,100, 277,81, 269,73" href="galeria.html">
<area shape="poly" alt="" coords="258,-13, 246,18, 251,47, 272,48, 290,21, 293,-8, 283,-28" href="zycie.html">
</map>

<map name="JUT_7_Map">
<area shape="poly" alt="" coords="246,23, 236,54, 246,82, 259,97, 283,75, 283,45, 283,23, 259,12" href="https://www.ksiega.4free.pl/ksiega.php?uid=131149">
</map>

<map name="JUT_10_Map">
<area shape="poly" alt="" coords="200,117, 188,153, 193,186, 213,184, 236,158, 236,130, 222,109" href="linki.html">
<area shape="poly" alt="" coords="224,26, 212,62, 223,83, 259,69, 269,41, 259,16, 246,14" href="news.html">
</map>

<map name="JUT_13_Map">
<area shape="poly" alt="" coords="195,23, 188,56, 200,90, 226,90, 236,53, 231,26, 212,12" href="kontakt.html"></map>

</body>
</html>

Flanker · 19 Października 2007

Ja zawsze robię to tak, że źle wyświetlające się divy pod IE 6 ustawiam w dodatkowym pliku css. Wstawiam go na stronę za pomocą polecenia:

<!--[if lt IE 7]>
<link rel='stylesheet' href='style2.css' type='text/css' />
<![endif]-->

w sekcji head. Dzięki temu poleceniu przeglądarki starsze od 7.0 dodatkowo używają style2.css.

Jednak nie wiem czy jest to najlepsze rozwiązanie.

yavaho · 19 Października 2007

Po co tyle kodu tu wlepiłeś?

Może to coś zmieni?

Wstaw te style na samym początku w pliku ze styami.

* {
padding: 0;
margin: 0;
border:0;
}

matkro · 20 Października 2007

Z tego co mi wiadomo to ie6 nie obsługuje min-height

Lexy · 25 Października 2007

Jeśli chodzi o wysokości, nadaj je w poniższy sposób:

.jakas_klasa {

min-height:600px;

}

* html .jakas_klasa {

height:600px;

}

Powinno działać w różnych przeglądarkach.

A jak masz problem z dodawaniem przez IE paru pikseli, wyzeruj padding i nadaj sam margin.

Zaloguj się

[CSS] Odstepy między divami a floaty

Rekomendowane odpowiedzi

meg83

Odnośnik do komentarza

Udostępnij na innych stronach

Flanker

Odnośnik do komentarza

Udostępnij na innych stronach

yavaho

Odnośnik do komentarza

Udostępnij na innych stronach

matkro

Odnośnik do komentarza

Udostępnij na innych stronach

Lexy

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

Ostatnio przeglądający 0 użytkowników

Polecamy

Senuto

netBOMB.pl
dariuszjurek.pl
noclegi.biz.pl
www.zgred.pl

Współpracują z nami

SEOsklep24.pl
Zdalny Admin

Przeglądaj

Cała aktywność

Twoje kanały aktywności

Powiadomienie o plikach cookie