PDA

Zobacz pełną wersję : Dwie kolumny(div table) - problem pod IE6&7


m3ss
24-11-2008, 20:34
Witam,
szukałem na forum i niestety nie mogę znaleźć odpowiedzi (może za długo siedzę na tematem :confused:). Niestety, mam nóż na gardle i potrzebuje pomocy...
Otóż, mam dwie kolumny w szablonie i standardowo pod FF działa OK, niestety problem się pojawia pod IE6 i 7. Poniżej umieszczam kod:


<?php

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

</head>
<body>


<div id="page">
<div align="center">
<div id="container">


<div id="top_box">
<div id="logo"></div>
<div id="search"><jdoc:include type="module" name="search" /></div>
</div><!--end of top_box-->


<div id="header_box">
<div id="header_menu"><jdoc:include type="modules" name="top" style="xhtml" /></div>
<div id="header_photo"></div>
</div><!--end of top_box-->


<div id="header_tab">
<div id="box_left"></div>
<div id="breadcrumbs"><span>Oglądasz teraz:&nbsp;</span><jdoc:include type="module" name="breadcrumbs" /></div>
<div id="date" align="right"><?php echo JHTML::Date($this->date_field, "%A, %d. %B %Y"); ?></div>
</div><!--end of header_tab-->


<div id="main_box">
<div id="left_column"><jdoc:include type="modules" name="left" /></div>
<div id="right_column"><jdoc:include type="component" /></div>
</div><!--end of main_box-->


<div id="bottom_box">
<div id="bottom_left"></div>
<div id="bottom_right"></div>
</div><!--end of bottom_box-->


<div id="footer_box">
<div id="footer_left"><a href="http://bip.pl" target="_blank"><img src="/templates/xxx/images/bip_logo.png" alt="bip_logo"></a></div>
<div id="footer_right" align="right"><br /><br />&copy;&nbsp;2008 Firma Krzak SA.&nbsp;</div>
</div><!--end of footer_box-->

<div id="author_info" align="center">Projekt graficzny<a href="http://www.blabla.pl" target="_blank">Bla bla </a>Jan Kowalski&nbsp;&copy;&nbsp;2008</div>

</div> <!--end of container-->
</div>
</div> <!--end of page-->



</body>
</html>Plik template_css.css


html, body {
margin: 0;
padding: 0;
background: #fff;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 2.0;
color: #2d2a2a;
}


#container {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 938px;
background-color: #ffffff;
display: table;
padding: 10px 10px 10px 10px;

}

#top_box {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 918px;
height: 124px;
background:url(../images/top_bg.jpg);
display: table;
}

#header_box {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 918px;
height: 313px;
background:url(../images/header_bg.jpg);
}

#header_tab {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 918px;
height: 43px;
background:url(../images/header_tab_bg.jpg);
display: table;
}

#main_box {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 918px;
background:url(../images/main_bg.jpg) repeat-y;
display: table;
}

#footer_box {
margin: 0 auto; /* centering */
overflow: hidden; /* clearance */
width: 918px;
height: 101px;
background:url(../images/footer_bg.jpg);
display: table;
}

#logo, #search {
display: table-cell;
vertical-align: top;
}

#box_left, #breadcrumbs, #date {
display: table-cell;
vertical-align: top;
}

#left_column, #right_column, #header_menu, #header_photo, #bottom_left, #bottom_right, #footer_left, #footer_right {
display: table-cell;
vertical-align: top;
}

Plik ie6only.css

#left_column {
-iexp: expression(
this.parse ? 0 : (
this.style.height = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.style.height < this.parentNode.offsetHeight) ? 0 : (
this.style.height = this.previousSibling.offsetHeight
)
);
}Plik ie7only.css

#left_column {
-iexp: expression(
this.parse ? 0 : (
this.style.minHeight = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.offsetHeight < this.previousSibling.offsetHeight) ? (
this.style.minHeight = this.parentNode.offsetHeight
) : (
this.style.minHeight = this.previousSibling.offsetHeight
)
);
}Wzorowałem się na artykule:
http://perfectionorvanity.com/2007/03/07/rowne-kolumny-layoutu-css/

Pomóżcie, bo osiwieje :eek:


pozdr.
m3ss
moje
24-11-2008, 20:42
A gdzie link go strony???
m3ss
24-11-2008, 21:01
Niestety strona jest jeszcze na localhost :/

Pod IE wszystkie div'y są wycentrowane :(
moje
24-11-2008, 21:07
Napisz tego css'a od początku, tym razem z użyciem float'ów, clear'ów i przede wszystkim z position. Zostaw w spokoju expresion, a zamiast table-cell użyj block ;)
m3ss
24-11-2008, 21:16
Dzięki za odpowiedź - zabieram się do pracy :)
m3ss
24-11-2008, 22:29
moje: wszystko działa jak należy :D zarówno pod FF jak i pod #%@# IE. Należy się Tobie duuuuuży browar. Jeszcze raz wielkie dzięki :)