Из-за существующих ограничений на то, чтобы теги DIV хорошо работали на разных платформах браузеров для конкретной жидкостной компоновки, которую я желаю, я решил использовать комбинацию таблиц и DIV для макета. При этом остается несколько вопросов.
ПЕРВАЯ проблема заключается в том, что в Firefox моя высота строки таблицы для моего нижнего колонтитула отображается иначе, чем в IE при использовании таблицы с высотой 100%. В Firefox строка нижнего колонтитула для таблицы имеет высоту, превышающую высоту, указанную для строки таблицы. Это, в свою очередь, сбрасывает мою структуру нижнего колонтитула.
Вот код для страницы:
<html>
<head>
<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">
<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr><td height="116" align="center" valign="top">
<!-- HEADER -->
<div class="header">
<div class="lfc">Cornerstone</div>
<div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
<div class="lf4">Foursquare</div>
</div>
<div class="spacer"></div>
<!-- HEADER END -->
</td>
</tr>
<tr><td align="center" valign="center" bgcolor="#FFFFFF">
<!-- CONTENT -->
<div class="content">
<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>
</div>
<!-- CONTENT END -->
</td>
</tr>
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"><a href="http://www.c4sq.org"> w w w . c 4 s q . o r g </a></div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
<!-- TABLE I END -->
</body>
</html>
А вот код для листа sytle:
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: :#a02f1d;
height: 100%;
width: 100%;
}
a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}
.header {
color: #ff0000;
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}
.fullheight {
height:100%;}
.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}
.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}
.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}
.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}
.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}
.clearspacer {
background-color:#000000;
}
.footer {
color: #ffffff;
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}
.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}
ВТОРОЙ вопрос связан с изменением существующего макета таким образом, чтобы вертикальная центральная область шириной 760 пикселей отображалась в оттенке цвета, отличающегося от окружающего видового экрана. Основная трудность заключается в том, что для того, чтобы мой нижний колонтитул прилипал к нижней части в обоих браузерах и изменял размеры в окне просмотра, мне пришлось заново принять макет таблицы. Однако текущая стратегия состоит в том, чтобы использовать как можно меньше гнезд, чтобы извлечь выгоду из скорости и ясности использования DIV. Я бы предпочел использовать макет DIV, исключая макет TABLE, если бы не существующая в настоящее время неразрешимая проблема получения рабочего слипшегося нижнего колонтитула для работы с макетом жидкости DIV.