Ситуация следующая: шаблон свёрстан таблицей, и первая колонка включает в себя рисунок (логотип), который при просмотре в IE6 (IE-7) обрамляется лишними отступами. Что интересно, происходит это как-то выборочно, не на всех страницах. Пример:
Верное отображениеНеверное отображениеКод HTML:
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!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">
<!--author: raduga http://mambasana.ru copyright: GNU/GPL-->
<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) {initEditor();} ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
$myway = $GLOBALS['mosConfig_live_site']."/templates/".$mainframe->getTemplate();
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/splitcssmenu.php");
echo "<link rel=\"stylesheet\" href=\"$myway/css/template_css.css\" type=\"text/css\"/>" ;
echo "<link rel=\"shortcut icon\" href=\"$myway/politazbuka.ico\" />" ;?>
</head>
<body id="body"><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="80%" height="120px">
<a href="http://politazbuka.ru" title="ПолитАзбука - книги и фильмы по политологии, социологии и философии"><img src="images/logo.png" border="0" width="100%" height="120px" title="ПолитАзбука - книги и фильмы по политологии, социологии и философии" alt="ПолитАзбука - книги и фильмы по политологии, социологии и философии"></a>
<div id="top_bar_1"><h2>(495) 509-7617<h2></div>
<div id="top_bar_2"><h2>admin@politazbuka.ru</h2></div>
<div id="counters">(коды счётчиков - удалены из приводимого кода; удаление их из кода вообще, вместе с "дивами", ни к чему не приводит)</div>
<?php echo $mycssONLY_PRI_menu ?>
</td>
<div class="clear"></div>
<td width="20%" rowspan="2" valign="top" class="rightcol">
<?php if (mosCountModules('right')) { ?>
<div>
<?php mosLoadModules ( 'right',-3 ); ?>
</div>
<?php } ?>
</td>
</tr>
<tr width="100%" border="0" align="justify" cellpadding="0" cellspacing="0" id="centertb">
<td valign="top" width="100%" id="contenttb">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="centertb">
<tr>
<td valign="top" width="100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<?php if (mosCountModules('top')) { ?>
<tr valign="top" >
<td colspan="3" align="center" class="contentmod">
<div>
<?php mosLoadModules ( 'top'); ?>
</div>
</td>
</tr>
<tr><td colspan="3"></td></tr>
<?php } ?>
<?php if (mosCountModules( "user1" )>0 or mosCountModules( "user2" )>0) { ?>
<tr>
<?php if (mosCountModules('user1')) { ?>
<td valign="top" class="contentmod">
<div>
<?php mosLoadModules ( 'user1' ); ?>
</div>
</td>
<?php } ?>
<?php if (mosCountModules( "user1" )>0 && mosCountModules( "user2" )>0) { ?>
<td><div class="mod"></div></td>
<?php } ?>
<?php if (mosCountModules('user2')) { ?>
<td valign="top" class="contentmod">
<div>
<?php mosLoadModules ( 'user2' ); ?>
</div></td>
<?php } ?>
</tr>
<tr><td colspan="3"></td></tr>
<?php } ?>
<tr>
<td colspan="3" class="pw" ><div><?php mosPathWay(); ?></div></td>
</tr>
<tr align="left" valign="top">
<td colspan="3" style="padding: 5px 0;">
<div class="main">
<?php mosMainBody(); ?>
</div>
</td>
</tr>
<?php if (mosCountModules('bottom')) { ?>
<tr>
<td colspan="3" valign="top" style="padding-top: 3px;text-align: left;">
<div>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
</td>
</tr>
<?php } ?>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
<!-- == Футер == --><div id="footer">
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</div><!-- == /// Футер == -->
</div>
</body>
</html>
Код CSS:
/**
author: rgb(raduga) http://mambasana.ru
**/
/**#################### DEFAULT and FORMS CSS ####################**/
body,html {
padding : 0 0 0 0;
margin : 0 0;
}
td, tr, p, div {
font-family : Tahoma, Arial, Helvetica, sans-serif;
color : #333333;
font-size : 13px;
margin : 0px;
padding : 0px;
}
hr {
width: 95%;
text-align: center;
}
a:link, a:visited {
color : #af2222;
text-decoration : underline;
}
a:hover {
color : #000000;
text-decoration : underline;
}
ul {
margin : 2px;
padding-left : 10px;
list-style : none;
}
li {
line-height : 14px;
padding-left : 14px;
padding-top : 2px;
background-image : url(../images/strelka.gif) ;
background-repeat: no-repeat;
background-position: 0px 5px;
}
form {
margin : 0;
padding : 0;
}
.inputbox {
color : #000000;
background : #ECEEEF;
border : 1px solid #cccccc;
margin : 3px 0;
}
form select.button{
color : #000000;
background : #ECEEEF;
}
option {
background : #ffffff;
}
/**#################### Joomla CSS ####################**/
/** Buttons **/
.back_button {
font-size : 12px;
font-weight : normal;
border : 1px solid #a20000;
margin : 3px 0;
padding : 2px;
float : right;
line-height : 20px;
}
div.back_button a{
text-decoration : none;
}
.button {
font-size : 11px;
color : #EDF1F3;
border : 1px solid #EDF1F3;
margin : 3px 0;
padding : 2px;
cursor : pointer;
background : url(../images/button.gif) repeat-x top left;
}
/** Contact **/
.contact_email {
width : 100%;
}
.contact_email .inputbox {
}
/** Module table **/
table.moduletable {
margin : 0 0 0 0;
width : 100%;
}
table.moduletable th {
font-family : Tahoma, Arial, Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
text-align : center;
width : 100%;
color : #EBEFF2;
padding : 0;
margin : 0 0 0 0;
line-height : 25px;
background : url(../images/mod_left.gif) #414141 repeat-x top left;
height: 29px;
}
table.moduletable td {
padding-top: 2px;
}
div.module{
text-align: left;
margin : 0 6px 6px 0;
padding-bottom : 6px;
border-bottom: 1px solid #aaaaaa;
}
div.module h3 {
font-family : Tahoma, Arial, Verdana, Helvetica, sans-serif;
color: #BE0101; /* Color */
font-size: 14px;
font-weight: bold;
text-align: left;
border-bottom: 1px solid #BE0101; /* Color */
margin: 0 5px 6px 5px;
}
.contentmod {
text-align : left;
padding : 3px;
}
.contentmod td {
padding : 3px;
}
.contentmod table.moduletable {
margin : 0 0 0 0;
width : 100%;
border : 1px solid #DDE1E3;
background : #ECEEEF;
}
.contentmod table.moduletable th{
font-size : 14px;
font-weight : bold;
text-align : center;
width : 100%;
color : #AF2222;
padding : 1px;
line-height : 25px;
background : #DDE1E3;
border-bottom : 1px solid #DDE1E3;
}
/** Read more **/
a.readon:link, a.readon:visited {
color : #af2222;
font-size : 12px;
white-space : normal;
font-weight : normal;
padding : 1px 0px 1px 1px;
float : right;
line-height : 15px;
text-decoration : none;
}
a.readon:hover {
color : #000000;
font-size : 12px;
background : url(../images/indent1.png) no-repeat;
white-space : normal;
font-weight : normal;
padding : 1px 0 1px 10px;
line-height : 15px;
text-decoration : none;
}
/** Pagenavigation **/
.pagenavcounter {
font-size : 11px;
color : #999999;
}
.pagenavbar {
border-top : 1px solid #999999;
padding : 2px;
}
.pagenav, .pagenav_prev, .pagenav_next {
font-weight : normal;
}
a.pagenav:link, a.pagenav:visited {
font-size : 11px;
color : #999999;
text-decoration : none;
}
a.pagenav:hover {
font-size : 11px;
color : #af2222;
text-decoration : none;
}
table.contenttoc {
border : 1px solid #dcdcdc;
background : #f3f5f6;
padding : 0;
margin-left : 2px;
margin-bottom : 2px;
}
table.contenttoc th{
margin : 0;
padding : 2px;
background : #000000;
color : #333333;
}
table.contenttoc td{
margin : 0;
padding : 3px 4px;
border-bottom : 1px solid #dcdcdc;
background-image : url(../images/strelka.gif) ;
background-repeat : no-repeat;
background-position: 4px 7px;
}
table.contenttoc td a:link, table.contenttoc td a:visited{
padding-left : 12px !important;
padding-left : 0;
text-indent : 12px;
text-decoration : none;
}
/** Pathway **/
.pathway {
font-size : 13px;
color : #333333;
}
a.pathway:link, a.pathway:visited {
font-size : 13px;
padding-left : 0;
font-weight : bold;
text-decoration : underline;
}
a.pathway:hover {
font-size : 13px;
padding-left : 0;
font-weight : bold;
}
.pathway img{
padding-top : 5px;
}
/** Content **/
.sectiontableheader {
font-weight : bold;
letter-spacing : 1px;
color : #ffffff;
background : #414141;
padding : 3px 5px;
border : 1px solid #ffffff;
}
.sectiontableentry1 {
vertical-align : top;
background : none;
line-height : 20px;
}
.sectiontableentry1 td, .sectiontableentry2 td{
padding : 2px 5px;
line-height : 20px;
}
.sectiontableentry2 {
vertical-align : top;
background : none;
line-height : 20px;
}
.sectiontableentry1 img{
margin: 0 4px;
}
.sectiontableentry2 img{
margin: 0 4px;
}
a.category:link, a.category:visited {
font-size : 12px;
color: #ABABAB;
font-weight : normal;
padding: 5px;
}
.small {
font-size: 10px;
color: #ABABAB;
line-height: 11px;
padding: 2px;
}
.smalldark {
font-size: 10px;
color: #000000;
height: 10px;
line-height: 10px;
text-align: justify;
}
.createdate, .modifydate {
font-size : 11px;
color : #444555;
font-weight : normal;
text-align : left;
width : 100%;
}
.content_vote {
font-size : 11px;
height : 22px;
padding : 2px 0;
}
.content_rating {
font-size : 11px;
color : #999999;
}
table.content{
width : 100%;
padding : 0;
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 10px;
}
table.contentpane {
width : 100%;
border-spacing : 0;
padding-left : 0;
padding-right : 0;
margin-bottom : 0;
}
table.contentpaneopen {
width : 100%;
border-spacing : 0;
padding-left : 6px;
padding-right : 6px;
margin-bottom : 6px;
}
.contentheading {
font-family : Tahoma, Arial, Verdana, Helvetica, sans-serif;
width : 100%;
font-size : 17px;
font-weight : bold;
line-height : 21px;
text-align : left;
text-indent : 0;
color : #303030;
padding : 3px;
margin : 3px 0;
background : #F3F5F6;
}
.contentheading a {
text-decoration:none;
}
.componentheading {
font-family : Tahoma, Arial, Verdana, Helvetica, sans-serif;
width : auto;
font-size : 17px;
font-weight : bold;
line-height : 21px;
text-transform : uppercase;
text-align : left;
color : #303030;
padding : 3px;
margin : 5px !important;
margin : 5px 1px;
background : #ECEEEF;
}
.contentdescription {
width : auto !important;
margin : 0;
padding : 0;
padding-top : 5px;
text-align : justify;
}
.blog_more {
margin : 10px 0 7px 7px;
}
.buttonheading {
padding : 0 2px;
}
.blog {
width:100%;
}
/** Polls **/
.poll {
color : #333333;
line-height : 13px;
font-weight : normal;
text-align : center;
}
.pollstableborder{
border-color : #999999;
}
/** "Tab" buttons for Joomla frontend **/
.ontab {
border-left : 1px solid #666666;
text-align : center;
font-weight : bold;
color : #333333;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.offtab {
border-left : 1px solid #666666;
text-align : center;
color : #999999;
font-weight : normal;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.tabpadding {
border-left : 1px solid #666666;
}
/** CSS for Mainmenu **/
a.mainlevel {
color: #BE0101; /* Color */
font-size: 13px;
font-weight: normal;
text-decoration: none;
margin: 0 0 2px 0;
padding: 5px 0 3px 0;
display: block;
width: 163px; /* Для IE5 */
voice-family:"\"}\""; /* IE5 Hack */
voice-family:inherit; /* IE5 Hack */
width: 165px; /* Для всех */
}
html>body a.mainlevel { } /* IE5 Hack Fix :-) */
a.mainlevel:hover, a.mainlevel#active_menu {
text-decoration: none;
background-color: #F1F1F1;
}
a.sublevel {
color: #BE0101; /* Color */
font-size: 12px;
font-weight: normal;
line-height: 18px;
text-decoration: none;
padding: 0 0 0 11px;
margin: 0 0 2px 3px;
display: block;
width: 150px; /* Для IE5 */
voice-family:"\"}\""; /* IE5 Hack */
voice-family:inherit; /* IE5 Hack */
width: 136px; /* Для всех, кроме IE5 */
}
html>body a.sublevel { } /* IE5 Hack Fix :-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
padding: 0 0 0 11px;
margin: 0 0 2px 3px;
width: 150px; /* Для IE5 */
voice-family:"\"}\""; /* IE5 Hack */
voice-family:inherit; /* IE5 Hack */
width: 136px; /* Для всех, кроме IE5 */
}
html>body a.sublevel:hover, a.sublevel#active_menu { } /* IE5 Hack Fix :-) */
/** Topmenu styles for BOTTOM navigation **/
ul#mainlevel-nav {
font-size : 11px;
list-style : none;
padding-right : 20px;
margin : 0;
}
#mainlevel-nav li {
float : right;
display : block;
list-style : none;
background-image : none;
padding : 0;
margin : 0;
width : auto !important;
font-size : 13px;
line-height : 28px;
white-space : nowrap;
}
#mainlevel-nav li a {
display : block;
padding-left : 10px;
padding-right : 0;
font-size : 13px;
color : #af2222;
text-decoration : underline;
}
#mainlevel-nav li a:hover {
display : block;
font-size : 13px;
color : #cccccc;
}
/** images **/
.mosimage {
border : 1px solid #E7EAEC;
margin : 5px;
padding-top: 3px;
}
.mosimage_caption {
margin-top: 3px;
padding : 2px;
color : #666666;
font-size : 10px;
background: #ECEEEF;
}
/******************* Top Menu************************/
.moduletable-topnav {
position : absolute;
margin : 0;
left : 9px;
top : 90px;
width : auto;
padding : 0;
color : #ffffff;
font-size : 16px;
}
.topnav {
width : 0;
text-decoration : none;
}
a.topnav {
position : relative;
width : auto;
background : none;
padding : 10px 6px 10px 6px;
text-decoration : none;
font-weight : bold;
color : #ffffff;
line-height : 36px !important;
line-height : 16px;
_height:0;
}
a.topnav:hover{
width : auto;
color : #ffba00;
background : none;
padding : 10px 6px 10px 6px;
font-weight : bold;
text-decoration : none;
}
a.topnav#current {
cursor : default;
position : relative;
width : auto;
background : none;
padding : 10px 6px 10px 6px;
color : #ffba00;
text-decoration : none;
}
a.topnav#current:hover {
cursor : pointer;
position : relative;
width : auto;
background : none;
padding : 10px 6px 10px 6px;
color : #ffba00;
text-decoration : none;
}
a.topnav:visited, .topnav a:link {
text-decoration : none;
color : #ffffff;
}
/** #################### index.php #################### **/
#body {
background: url(../images/top_bg.gif) #D5DDD0 repeat-x top left;
}
.main {
text-align : justify;
width : 100%;
}
div.mod {
background : none;
width : 6px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
#centertb {
background: #ffffff;
padding: 0 0;
}
#contenttb{
padding: 10px 10px;
border: 1px solid #000000;
}
td.pw {
width : 100%;
padding : 5px 5px 10px 5px !important;
padding : 2px 2px 10px 2px;
}
td.pw div{
padding : 5px;
width : auto;
}
.footer_left {
float: left;
font-size : 12px;
color : #3F4446;
font-weight : normal;
padding-top : 10px !important;
padding-top : 15px;
}
.footer_left p{
padding-left: 20px;
}
.footer_right {
width : 410px;
float: right;
font-size : 12px;
color : #3F4446;
font-weight : normal;
padding-top : 10px;
text-align: right;
}
.footer_right p{
padding-right: 20px;
}
.leftcol, .rightcol {
vertical-align : top;
padding : 5px;
text-align : left;
width : 168px;
background : #D5DDD0;
}
.leftcol div, .rightcol div{
width : 165px;
}
.foot {
height : 87px;
background : url(../images/footer.jpg) repeat-x top left;
border : 1px solid #000000;
}
.foot td {
padding: 10px 15px;
}
#logo {
width : 100%;
min-height : 120px;
height : auto !important;
height : 120px;
}
#counters {
position : absolute;
margin : 0 0 0 0;
color : #ffffff;
padding : 0 0;
top : 32px;
right : 187px;
}
#top_bar_1 {
position : absolute;
margin : 0 0 0 0;
color : #ffffff;
padding : 0 0;
top : 1px;
right : 187px;
}
#top_bar_2 {
position : absolute;
margin : 0 0 0 0;
color : #ffffff;
padding : 0 0;
top : 32px;
right : 187px;
}
Что интересно:
1. Если ширину колонки, содержащей рисунок, задать как 100% (сейчас она равна 80%), отступы пропадают. То же: если картинку вообще вынести из таблицы. Атрибут absolute в данном случае не устроит: картинка должны растягиваться при изменении размера окна.
2. Решение той же проблемы в Файрфоксе заключалось в том, что необходимо было задать той же колонке атрибут height (120 px).
3. Шаблон на данный момент обгоняется на отдельной странице, но даже если его задать по умолчанию, ничего не изменится.
Прошу помочь разобраться в проблеме.
19.11.2021, 14:06:15