Помогите найти ошибку, верстаю страничку

82

Capricornus

27 декабря 2009, 15:47

742

Делаю первый раз, плохо разбираюсь. Через оперу страница выглядит как надо, в IE появляется разрыв. Ничего сделать не могу, помогите пожалуйста!

CSS:

@CHARSET "cp1251";



html,body {

	margin: 0px;

	padding: 0px 0px 0px 0px;	

}



body {

	background: #FFFFFF;

	font-family: Times New Roman, sans-serif;

	font-size: 14px;

}



a {

	color: #000000;

	text-decoration: none

}



a:hover {

	text-decoration: underline

}



img {

	border: none;

}



#pageContainer {

	position: relative;

	width: 1087px;

}



#head {

	height: 208px;

	width: 1087px;	

}



#main {

	background: url(images/menu_bg.jpg) repeat-y;

	width: 1087px;			

	overflow: hidden;

	height: 100%; 	

}



#mainLeft {		

	float: left;		

	width: 300px;	

	overflow: hidden;		

}



#mainRight {		

	width: 787px;

	float:right;	

	overflow: hidden;		

}



#leftContent {

	text-align: justify;

	padding: 0px 10px 0px 35px;	

}



#rightContent {

	text-align: justify;

	padding: 0px 28px 0px 10px;

}



ul {

	padding: 0px 0px 0px 16px;	

	margin: 0px;

}



li {

	padding-left: 10px;

}



#footerBg {

	background: url(images/foter_bg.jpg) repeat-y;

	width: 1087px;

    overflow: hidden;

	height: 60px;

}

#footerMenu {

	background: url(images/main_bg.jpg) repeat-y;

	width: 1086px;

    overflow: hidden;

	height:400px;

}





#counters {	

	text-align: center;

	padding-top: 10px;

}



.caption {

	font-size: 16px;

	text-align: left;

}



.menuLinks {

	text-align: left;	

}



.other {

	text-align: left;

}



.newsCaption {

	background: #FADEC6;

}



.newsText {

	padding-bottom: 20px;

	text-align: left;

}



.next {

	text-align: left;

}



.leftColumn {

	float: left;

	width: 342px;

	padding: 10px;	

}



.rightColumn {

	float: right;

	width: 342px;

	padding: 10px;	

}



.support {

    font-size: 14px;

    text-align: left;

	}

	

.supportform {

    font-size: 14px;

    text-align: left;

	}

	

.text {

    font-size: 14px;

    text-align: left;

	}



.textb {

    font-size: 16px;

    text-align: left;

	}



.textbl {

    font-size: 16px;

    text-align: left;

	}

тут все остальное, прикрепить нельзя

jpg 51140.jpg

76

PyMbIH

27 декабря 2009, 15:51

#1

один CSS не спасет..нужно видеть исходник страницы... на table или на div верстка.. самопис или движок..

C

82

Capricornus

27 декабря 2009, 15:55

#2

PyMbIH:
один CSS не спасет..нужно видеть исходник страницы... на table или на div верстка.. самопис или движок..

Простая страничка на дивах.

вот индексный файл

<!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="ru" lang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

<meta http-equiv="Cache-Control" content="no-cache" />

<title>12345</title>

<link href="styles.css" type="text/css" rel="stylesheet" />

</head>

<body>

<center>

<div id="pageContainer">

	<div id="head">		

		<a href=""><img src="images/logo.jpg"  alt="" /></a>

	</div>

	<div id="main">	

		<div id="mainLeft">

			<div id="leftContent">

				<!-- тут все, что слева -->						

          		<div class="caption">Меню</div>

          		<div class="menuLinks">

                	<a href="mag/1.html" title="">один</a><br/>

                	<a href="mag/2.html" title="">два</a><br/>

                	<a href="mag/3.html" title="">три</a><br/>

					          		</div>

          		<div class="caption">Cтатьи</div>

          		<div class="menuLinks">

	          		<a href="stat/pk.html" title="Обзор наиболее полулярных">один</a><br/>

          			<a href="stat/kpk.html" title="Обзор наиболее популярных">два</a><br/>

          			<a href="stat/mob.html" title="Обзор наиболее популярных">три</a>          	

				</div>									

           		  </p>

           		    		</div>

			</div><div id="footerMenu"></div>

		</div>

		

		<div id="mainRight">

		

		  <div id="rightContent">

			<!-- тут все, что справа -->		

							</div>

										

   		  </div>		

		</div> 

	</div>



	<div id="footerBg"><div id="counters">

	</div>

				<!-- MyCounter v.2.0 -->

		<script type="text/javascript"><!--

				my_id = 2253;

				my_width = 88;

				my_height = 31;

				my_alt = "MyCounter - Ваш счётчик";

		//--></script>

		<script type="text/javascript"

  			src="http://scripts.mycounter.com.ua/counter2.0.js">

			</script><noscript>

			<a target="_blank" href="http://mycounter.com.ua/"><img

			src="http://get.mycounter.com.ua/counter.php?id=2253"

			title="MyCounter - Ваш счётчик"

			alt="MyCounter - Ваш счётчик"

			width="88" height="31" border="0" /></a></noscript>

		<!--/ MyCounter -->&nbsp;<br />

		&copy; 2009 Климат Контроль

	</div>

</div>

</center>

</body>

</html>

46

ixRock

27 декабря 2009, 15:59

#3

Нее было НИ ЕДИНОГО РАЗРЫВА!!!1 :D

Работаю [S]за еду и секас[/S] с XHTML, CSS, XSLT, JS, PHP. Если что, вот тут (http://www.mintdesign.ru/) некоторые мои работы. Контакты: ася 344-ноль86-276, мыло ixrock@gmail.com

76

PyMbIH

27 декабря 2009, 15:59

#4

Для начала в CSS поменяйте шрифт допустим на 12-й...

body {

background: #FFFFFF;

font-family: Times New Roman, sans-serif;

font-size: 12px;

}

и при тех же данных посмотрите на изменения... если все отображается корректно - значит этот безумный шаблон с фоновыми изображениями Вам не подходит (без редактирования)

C

82

Capricornus

27 декабря 2009, 16:07

#5

PyMbIH:
Для начала в CSS поменяйте шрифт допустим на 12-й...

body {
background: #FFFFFF;
font-family: Times New Roman, sans-serif;
font-size: 12px;
}

и при тех же данных посмотрите на изменения... если все отображается корректно - значит этот безумный шаблон с фоновыми изображениями Вам не подходит (без редактирования)

И в правду, дело в шрифте! Но только чтобы убрать разрыв, нужно шрифт сделать 2px:)

И как делу быть? Шаблон менять не хочу:(

76

PyMbIH

27 декабря 2009, 16:17

#6

Дело в том, что разные браузеры по разному воспринимают шрифты, отступы и т.д. Но такое происходит в том случае, когда размер DIVа превышает размер фонового изображения..отсюда и разрыв. Эксперементируйте и у Вас все получится!

З.Ы

Фоновые изображения в верстке, путь либо больших профи, которые четко знают что и как они делают, либо путь начинающих веб-дизайнеров, которые режут сайт в фотошопе и считают верхом дизайнерской мысли...

C

82

Capricornus

27 декабря 2009, 16:37

#7

PyMbIH:
Дело в том, что разные браузеры по разному воспринимают шрифты, отступы и т.д. Но такое происходит в том случае, когда размер DIVа превышает размер фонового изображения..отсюда и разрыв. Эксперементируйте и у Вас все получится!
З.Ы
Фоновые изображения в верстке, путь либо больших профи, которые четко знают что и как они делают, либо путь начинающих веб-дизайнеров, которые режут сайт в фотошопе и считают верхом дизайнерской мысли...

Спасибо Вам, буду пробовать!

[Удален]

1 января 2010, 23:21

#8

Capricornus:
буду пробовать!

Если не получится стукните в ICQ я помогу Вам

S

60

Supervisork

2 января 2010, 11:27

#9

Ты бы выложил куда-нить эту страницу, чтоб можно было увидеть все живьем. Тогда б можно было сохранить ее на диск и посмотреть, как убрать разрыв

Создание сайтов, документация... (http://site3k.net/), сайт нашей дизайн-студии (http://website-it.ru/)

78

Кофейник

2 января 2010, 11:44

#10

Лень рыться в сотне строк вашего кода, учитесь локализировать проблему.

На первый взгляд тут просто разное понимание браузерами величин.

conditional comments вам помогут.

http://immater1um.livejournal.com/ (http://immater1um.livejournal.com/)

Маркетинг для шоколадной фабрики. На 34% выше средний чек

Курс биткоина превысил $50 тысяч