при инклюде в див таблицы браузеры ведут себя по разному..

yummi · July 15, 2009

почему при инклюде файла див в эксплорере и опере увеличивается, а в мозиле нет? текст тупо идёт дальше, а таблица кончиласть?????

вот как надо:

http://s61.radikal.ru/i171/0907/3d/ca6b99589081.png

вот так оно в эксплорере: (пнг скоро я сделаю нормальным, ща это только время тратить). но! почему табличка в которой новость (кремовая такая табличка) почему она разъехалась??? раньше в опере такое было, исправила. но здесь что??? какой атрибут косячит??

http://s53.radikal.ru/i140/0907/e9/8ea84a3a6c99.png

и наконец КАК НЕ НАДО!!!! в лисе:

http://s44.radikal.ru/i105/0907/b6/cc6a26624222.png

что за бред??? скажите, наверняка вы с этим встречались, какие атрибуты в одном браузере воспринемаются так, а в другом иначе?

и ещё: где белый лист - это дивы, а где кремовая табличка - это таблица.

Justnewone · July 15, 2009

и наконец КАК НЕ НАДО!!!! в лисе

Я Вам с уверенностью могу сказать, если Вы такой простой кусок видите не так как надо в ЛИСЕ!!!! (охоспаде), значит у вас неправильно написан код, то есть он может быть ошибочен, как по исполнению таки по задумке.

Searcher · July 15, 2009

покажите код результата в броузере, телепаты в отпуске

yummi · July 15, 2009


<html>
<head><title>*Kamilla*</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" href="style_mozilla,opera.css" type="text/css" >

<!--small (for user)-->

<script type="text/javascript" src="adminTools/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "exact",
		elements : "small",
		theme : "simple",
		language:"ru"
	});
</script>

</head>
<body>
<div id="main">
	<div id="banner">

		<div id="head"><img src="images/head.png" width="300px"></div>
		<div id="notes"></div>
	</div>
	<div id="body">
		<div id="flowers">
			<div id="hair"></div>
			<div id="menu_second"><a href="index.php?id=news.php">События, пресса, новости</a> <br>

<a href="index.php?id=registration.php">История флористики<a><br>
<a href="index.php?id=kontakt">Известные флористы</a><br>
<a href="index.php?id=tabs_scripts/example">Азбука цветов от А до Я</a><br>
<a href="index.php?id=news.php">Цветы по категориям</a> <br>
<a href="index.php?id=registration.php">Техники исполнения<a><br>
<a href="index.php?id=kontakt">Инструменты</a><br>
<a href="index.php?id=tabs_scripts/example">Колористика</a><br> <br>
<a href="index.php?id=news.php">Уроки флористики</a> <br> 

<a href="index.php?id=registration.php">Изготовление материалов<a><br>
<a href="index.php?id=kontakt">Советы по уходу</a><br><br><br>

<a href="index.php?page=menu_second/check">Проверка</a><br>
</div>
		</div>
		<div id="news">
			<div id="menu"><table width="690px" height="56px" cellpadding="0px" cellspacing="0px" topmargin="7px" leftmargin="0px" rightmargin="0px" border="0px" valign="top" >
<tr>
<td width="25px"></td>

<td align="center" style="padding-top:7px">

<div id="tab"><br>	<a href="index.php?page=news">Новости</a> 					</div>
<div id="tab"><br>	<a href="http://localhost/FLORA/forum">Форум<a>					</div>
<div id="tab"><br>	<a href="index.php?page=kontakt">Контакты</a> 					</div>
<div id="tab"><br>	<a href="index.php?page=admin_login">								
Вход</a> 																			</div>

<div id="tab"><br>	<a href="index.php?page=press">Новости</a> 			</div>

</td>
<td width="25px"></td>
</tr>
</table>
</div>
			<div id="sheet">
				<div id="sheetTop"> </div>		
				<div id="middle">
					<div id="includeNews">


					<h2>Cписок новостей:</h2><table border="0px"  cellpadding="0px" cellspacing="0px" width="600" height="400px">
<tr valign="bottom" height="68px" >
	<td width="72px" height="68px"><img src="news/images/LT.png"  width="72px" height="68px">
	</td>
	<td ><img src="news/images/MT.png" width="100%" height="68px" >
	</td>
	<td ><img src="news/images/RT.png" width="43px" height="68px" >
	</td>

</tr>

<tr height="100%"  >
	<td ><img src="news/images/LM.png" width="72px" height="100%">
	</td>
	<td bgcolor="#fffddf"  height="200px" width="100%" valign="top">



	<span style="border-bottom: 1px dotted blue;">№1 ???????, ??????, ??????? > ????? ?????? ????? > 2009-07-15</span><br>	
	<span style=" font-size:25pt; color:red; ">????? ?????? ?????</span><br>	<hr>

	<span style="">???? - ??????????? ???????? ???? ?? ????? ???????????? ????????? ????? ???????? ??????? ????. ????? ??????? ?????? ???? - ???????. ? ?????? ????? ??? ????? ???? ???????, ????????, ????, ???????? ?, ??...   <a href="?id=1">Подробней</a><br /></span>

	<hr>

	</td>
	<td  ><img src="news/images/RM.png" width="43px" height="100%" >
	</td>
</tr>

<tr height="34px" valign="top">
	<td><img src="news/images/LB.png" width="72px" height="34px" >
	</td>

		<td background="news/images/BM2.png" height="34px"> <img src="news/images/BM.png" height="34px" width="69px"> 
	</td>

		<td><img src="news/images/RB.png" width="43px" height="34px" >
	</td>
</tr>


</table><table border="0px"  cellpadding="0px" cellspacing="0px" width="600" height="400px">
<tr valign="bottom" height="68px" >
	<td width="72px" height="68px"><img src="news/images/LT.png"  width="72px" height="68px">
	</td>
	<td ><img src="news/images/MT.png" width="100%" height="68px" >
	</td>

	<td ><img src="news/images/RT.png" width="43px" height="68px" >
	</td>
</tr>

<tr height="100%"  >
	<td ><img src="news/images/LM.png" width="72px" height="100%">
	</td>
	<td bgcolor="#fffddf"  height="200px" width="100%" valign="top">



	<span style="border-bottom: 1px dotted blue;">№2 ?? > ??^^ > 0000-00-00</span><br>	
	<span style=" font-size:25pt; color:red; ">??^^</span><br>	<hr>


	<span style="">?????? ????...   <a href="?id=2">Подробней</a><br /></span>
	<hr>

	</td>
	<td  ><img src="news/images/RM.png" width="43px" height="100%" >
	</td>
</tr>

<tr height="34px" valign="top">
	<td><img src="news/images/LB.png" width="72px" height="34px" >

	</td>

		<td background="news/images/BM2.png" height="34px"> <img src="news/images/BM.png" height="34px" width="69px"> 
	</td>
		<td><img src="news/images/RB.png" width="43px" height="34px" >
	</td>
</tr>


</table>					</div>
				</div>	
				<div id="sheetBottom">   </div>	
			</div>

		</div>
	</div>
	<div id="footer"> <!--мозила на то и "мозила" что не знает класса футер-->           Напольнова Татьяна © 2009 Все права защищены</div>
</div>

<body>
</html>

rus · July 16, 2009

Я так понимаю css мы сами за вас должны додумать?

И еще, у вас действительно файл со стилями так называется: style_mozilla,opera.css? o_O

yummi · July 16, 2009

дело в том что эксплорер не правильно понимает padding и margin поэтому для него я сделала отдельный файл стилей. с помощью php я определяю что за браузер. вот css для лисы:

BODY {

min-width:760px;

min-height:760px;

float:center;

margin:0px;

}

DIV {

margin-right: auto;

margin-left: auto;

border:solid 1px;

}

#main {

border-color:blue;

width:900px;

/*min-height:760px; мозила идиотина не хочет ехать*/

}

#body {

width:900px;

height:600px;

border-color:green;

/*min-height:660px; */

}

#banner {

width:900px;

height:276px;

float:left;

border-color:yellow;

}

#head {

width:300px;

height:276px;

float:left;

}

#notes {

border-color:red;

width:600px;

float:right;

height:276px;

background: url('images/menu.png') no-repeat bottom left;

}

#flowers {

width:210px;

float: left;

}

#hair {

width:210px;

height:337px;

float: left;

background: url('images/hair.png') no-repeat top center ;

}

#menu_second {

width:200px;

float:left;

/*min-height: 130px;*/

}

#news {

width:690px;

/*height: 736px;*/

float: right;

max-height:660px;

}

#menu {

/*height:256px; для мозилы лучше не включать*/

width:690px;

padding-top:0px;

border:solid 0px;

}

#tab {

float:left;

background: url('images/tab.png') no-repeat top center;

width:128px;

height:56px;

margin-right: auto;

margin-left: auto;

border:solid 0px;

}

#sheet {

width:690px;

height:100%;

border-color:red;

border:solid 2px;

}

#sheetTop {

background: #ffffff url('images/sheet_top.png') no-repeat top center;

height:56px;

width:690px;

}

#sheetBottom {

background: #ffffff url('images/sheet_bottom.png') no-repeat bottom center;

height:56px;

width:690px;

/*vertical-align:bottom;*/

}

#middle {

width:690px;

height:100%;

background: #ffffff url('images/middle.png') no-repeat bottom center;

background-repeat: repeat-y;

}

#includeNews {

/*фигня с эксплорером!!!! у него нет отступа с права и слева!*/

width:600px;

border-color:pink;

padding-left:45px;

padding-right:45px;

float:left;

}

#addnews {

font-size:17px;

font-weight: bold;

color: #989a98;

}

#adminTools {

width: 530px;

height: 300px;

color: #00529B;

border: 0px solid;

margin: 20px 30px;

padding:15px 45px 15px 45px;

}

#login{

width: 200px;

height: 150px;

color: #00529B;

background-color: #BDE5F8;

border: 1px solid;

padding:15px 45px 15px 45px;

}

#unlogin {

width: 200px;

height: 30px;

color: #00529B;

background-color: #BDE5F8;

border: 1px solid;

padding:15px 45px 15px 45px;

}

#reg {

width: 200px;

height: 400px;

color: #00529B;

background-color: #BDE5F8;

border: 0px solid;

}

#footer{

text-align: center;

width:690px;

height:30px;

float:right;

margin-right:0px;

vertical-align:bottom;

}

.text ,.info, .success, .warning, .error, .validation {

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

}

.info {

color: #00529B;

background-color: #BDE5F8;

}

.success {

color: #4F8A10;

background-color: #DFF2BF;

background-image:url('success.png');

}

.warning {

color: #9F6000;

background-color: #FEEFB3;

}

.error {

color: #D8000C;

background-color: #FFBABA;

}

.validation {

color: #D63301;

background-color: #FFCCBA;

}

.text {

font-family:Arial, Helvetica, sans-serif;

font-size:13px;

}

jooher · July 16, 2009

Жесть.

Если перестанете играть в ХТМЛ-хакершу и поставите себе дримвавер - то будет вам щастье.

yummi · July 17, 2009

дримвивер значит... а то мы его не ставили, а то он там разметку криво не ставит.. ну-ну.

SelenIT · July 17, 2009

...с помощью php я определяю что за браузер. вот css для лисы:
...
/*min-height:760px; мозила идиотина не хочет ехать*/
...
/*height:256px; для мозилы лучше не включать*/
...

Имхо, отлаживать в условиях, когда разные браузеры получают разный файлы стилей — это героически преодолевать созданные себе же трудности

Подозреваю, что высота контейнера для "лисы" потому и обрезается, что что-то жизненно важное от нее нечаянно просто утаили.

Имхо, "устаканивать" раскладку нужно сперва с одним файлом стилей для всех: сначала добиться единообразного по высоте закрашенного прямоугольника, растягивающегося по контенту (height: auto; min-height: сколько_надо; _height: сколько_надо), потом подложить фон, потом подогнать отступы (IE, конечно, оригинал, но чтоб он совсем их игнорил — это надо постараться так его довести, потом застилизовать текст внутри... а уже в самом конце, как заключительный аккорд, выносить браузероспецифичные хаки в отдельные файлы (хотя при таком подходе это может и не понадобиться).

Sign In

при инклюде в див таблицы браузеры ведут себя по разному..

Question

yummi

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

yummi

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

yummi

Link to comment

Share on other sites

jooher

Link to comment

Share on other sites

yummi

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information