[help] Как настроить таблицу

slateclub · 18 Янв 2010

Всем привет! Вот делаю сайт на wordpress и возникла следующая проблема. На странице с прайсом есть таблица и она отлично отображается как в mozile, так и в опере, но вот в ie никак не могу задать нужные размеры, и она выезжает за пределы границы для контента.
Вот ссылка на страницу с прайсом:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Подскажите кто знает как это исправить. Вот css:

HTML:

body{
	padding:0px;
	margin:0px;
	font-family:Trebuchet MS, sans-serif;
	font-size:11px;
	background: white;
}
img{
	border:0px;
}
a{
	color:#2276a1;
	text-decoration:none;
}
.sub{
	border:0px;
}
input, textarea{
	border:1px solid #cecece;
	font-size:12px
}
div#page{
	width:780px;
	text-align:left;
}
.pagetitle {color: #8a3132;} 
div#page #header{
	width:100%;
	height:210px;
	background:url(images/header.jpg) no-repeat top #FFFFFF;
}
#logo {
position: absolute;
top: 0px;margin: 0;
padding: 0;
background: transparent url(images/title.png) no-repeat 0 0;
width: 526px;
height: 167px;
overflow: hidden;
line-height: 1000px;}
#h1 {	
	position: absolute;
	top:30px;
	padding: 0 0 0 50px;
	font-size: 1.45em;
	color: white;}
#h1 h1 a {text-decoration: none;
	color: #fff;
	letter-spacing: -1px;}
#h1 a:hover {text-decoration: none; color: #ffd300;}
#rss2 {
	z-index: 2;
	position: absolute;
	top: 127px;
	width: 763px;
	text-align: right;}
#search {
	position: absolute;
	top: 10px;
	font: Arial, Verdana, Sans-Serif;
	width: 763px;
	text-align: right;}
#s {	color: #bf231b;	font-weight:bold;
	font: Arial, Verdana, Sans-Serif;
	font-size:1.25em;
	background: transparent;
	border: 0px solid transparent;
	width: 105px;
}
    #tabs1 {	z-index: 4;
	position: absolute;
	top: 130px;	padding: 0px 0px 0px 40px;
	float:left;
	background:transparent;
	font-size:14px;
	line-height:normal;
	font-weight:bold;
      }
    #tabs1 ul {
          margin:0;
          padding:0px 0px 0px 0px;
          list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      }
    #tabs1 a{
	float:left;
	background: transparent url(images/menu.png) no-repeat right top;
	margin:0;
	color: #064c85;
	padding:3px 12px 3px 10px;
	text-decoration:none;
      }
    #tabs1 a:hover {
	float:left;
	color: #58942f;
	margin:0;
	text-decoration:none;}
div#header_text{
	width:100%;
	height:181px;
	background:url(images/header_text_bg.png) no-repeat top #FFFFFF;
}
div#header_text #header_text_title{
	padding-top:25px;
	padding-left:40px;
	color:#FFFFFF;
	text-align:left;
	font-size:23px;
}
div#header_text #header_text_text{
	padding-top:2px;
	padding-left:40px;
	color:#FFFFFF;
	text-align:left;
	font-size:10px;
	font-family:Trebuchet MS, sans-serif;
	line-height:18px;
	width:55%;
}
div#page #blog{
	background:#FFFFFF;
}
#sidebar {
	float: right;
	width: 180px;
}
.categ .one {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-02.gif) repeat-y top left;
}
.categ ul {
        list-style: none;
	padding:0 0 0 10px;
	margin:0;}
.categ a {
	color: #91344c;
	border-bottom: 1px dashed #ffccd9}
.categ a:hover {
	color: #ce637f;
	border-bottom: 1px dashed #91344c}
.categ li
{	background: none;
        display: block;
	line-height:1.40em;
	font-size:1.10em;
	margin: 0 0 0 20px;
	padding: 1px 3px 1px 15px;
	font-weight: bold;
	color: #e89642;	background:transparent url(images/cat-menu.gif) no-repeat top left;
} 
.categ {
margin: 0px;
}
.cal .one {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-01.gif) repeat-y top left;
}
.cal a {
	color: #91344c;}
.cal a:hover {
	color: #ce637f;}
.cal {
margin: 0px;
}
.calendar {
	text-align:center;
	color: #336d22;}
.calendar a:hover {
	background: #91344c;
	color: white;
}
.calendar td {
height:15px;
padding:  0px 3px 0px 3px}
.calendar td a {
padding:  0px 3px 0px 3px;background: #d7ffbe;
display:block;
color:#336d22;
text-decoration:none;
line-height:15px;
}
#today {padding:  0px 3px 0px 3px;	background: #336d22;
	font-weight: bold;
	color: white;}
.calendar td a:hover {
display:block;
color: white;
background: #336d22;
text-decoration:none;
}
.posts .one {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-03.gif) repeat-y top left;}
.posts ul {
        list-style: none;
	padding:0 0 0 10px;
	margin:0;}
.posts a {
	color: #bc4d17;
	border-bottom: 1px dashed #f88641}
.posts a:hover {
	color: #f88641;
	border-bottom: 1px dashed #bc4d17}
.posts li
{	background: none;
        display: block;
	line-height:1.40em;
	font-size:1.10em;
	margin: 0 0 0 20px;
	padding: 1px 3px 1px 15px;
	font-weight: bold;
	color: #bc4d17;	background:transparent url(images/posts-menu.gif) no-repeat top left;} 
.posts {
margin: 0px;}
.blogroll .one {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-04.gif) repeat-y top left;
}
.blogroll ul {
        list-style: none;
	padding:0 0 0 10px;
	margin:0;}
.blogroll a {
	color: #1b6591;
	border-bottom: 1px dashed #68b4e1}
.blogroll a:hover {
	color: #68b4e1;
	border-bottom: 1px dashed #1b6591}
.blogroll li
{	background: none;
        display: block;
	line-height:1.40em;
	font-size:1.10em;
	margin: 0 0 0 20px;
	padding: 1px 3px 1px 15px;
	font-weight: bold;
	color: #e89642;	background:transparent url(images/blog-menu.gif) no-repeat top left;
} 
.blogroll {
margin: 0px;
}
.another .one {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-05.gif) repeat-y top left;
}
.another ul {
        list-style: none;
	padding:0 0 0 10px;
	margin:0;}
.another a {
	color: #91344c;
	border-bottom: 1px dashed #ffccd9}
.another a:hover {
	color: #ce637f;
	border-bottom: 1px dashed #91344c}
.another li
{	background: none;
        display: block;
	line-height:1.40em;
	font-size:1.10em;
	margin: 0 0 0 20px;
	padding: 1px 3px 1px 15px;
	font-weight: bold;
	color: #e89642;	background:transparent url(images/cat-menu.gif) no-repeat top left;
} 
.another {
margin: 0px;
}
.boxed .six {
	height: 18px;
	letter-spacing: 2px;
	padding: 1px 15px 0 0;
	text-align: right;
	text-transform: uppercase;
	font-weight:bold;
	font-size: 1.15em;
	color: #FFFFFF;
	background:#FFFFFF url(images/bg-06.gif) repeat-y top left;
}
#content {
		background:#FFFFFF;
	width: 730px;
	margin: 0 auto;
	padding: 0 35px 0px 15px;
}
blockquote {
	margin: 5px;
	padding: 0px 5px 5px 35px;
	background: transparent url(images/blockquote.gif) no-repeat ;
}
#main {
	float: left;
	width: 500px;
	margin: 0 auto;
	padding: 0 30px 0px 5px;
}
#sidebar {
	float: right;
	width: 175px;
}
.white
{color: white;}
#footer {
	height: 50px;
	padding: 80px 0 0 0;	line-height:1em;
	clear: both;
	color: #FFFFFF;
	width: 780px;
	margin: 0 auto;
	font-size:0.95em;
	background: #4d4d4d url(images/footer.jpg);}
#legal {
	margin: 0;
	padding: 0;
	text-align: center;
}
#link {
	margin: 0;
	padding: 0;
	text-align: center;
}
#main a, #main a:hover, #main a:visited 
{
color: #3b74a4;
text-decoration:none;
}
#main h2 {
	color: white;
	margin-bottom: .5em;
	font-size: 1.3em;
	text-decoration:none;
	background: transparent url(images/title.jpg)  repeat-x top ;
	padding: 7px 0px 5px 10px}
#main h2 a, #main h2 a:visited, #main h2 a:hover {
	color: white;
	margin-bottom: .5em;
	font-size: 1.3em;
	text-decoration:none;
	background: transparent url(images/title.jpg)  repeat-x top ;
	padding: 7px 0px 5px 10px}
.post-author, .post-date, .post-comm, .post-time, .post-cath, .post-edit
{	font-size: 1em;
	text-decoration:none;	}
.entry {text-algin: justify;
	font-size: 1.10em;
	color: #02171d}
.post-author {
	color: #8e8e1f;
	padding: 0 0 3px 18px;
	background: url(images/p_author.gif) no-repeat 0 0;
	}
.post-date {
	color: #298e63;
	margin: 0 0 0 10px;
	padding: 0 0 3px 23px;
	background: url(images/p_date.gif) no-repeat 0 0;
	}
.post-comm {
	color: #b87833;
	padding: 0 0 3px 20px;
	background: url(images/p_commen.gif) no-repeat 0 0;
	}
.post-time {
	color: #812e9d;
	padding: 0 0 3px 18px;
	background: url(images/p_time.gif) no-repeat 0 0;
	}
.post-cath {
	color: #17719d;
	padding: 0 0 3px 20px;;
	background: url(images/p_cat.gif) no-repeat 0 0;
}
.post-edit {
	padding: 0 0 3px 3px;
}
.post{margin:0 0 25px 0;}
.post .info{
padding:2px 3px 3px 8px;
border:1px solid #ccc;
background-color:#f7f7f7;
font-size:0.9em;
color:#505050;
}
.commtitle {
	color: white;
	margin-bottom: .5em;
	font-size: 1.3em;
	text-decoration:none;	font-weight:bold;
	font: Arial, Verdana, Sans-Serif;
	background: transparent url(images/commentstitle.gif)  no-repeat top ;
	padding: 7px 0px 5px 20px}
.leavecomm {
	color: white;
	margin-bottom: .5em;
	font-size: 1.3em;
	text-decoration:none;	font-weight:bold;
	font: Arial, Verdana, Sans-Serif;
	background: transparent url(images/leavecomm.gif)  no-repeat top ;
	padding: 7px 0px 5px 35px}
#comment {
margin-left:50px;
margin-bottom: 0em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
font: Arial, Verdana, Sans-Serif;
}
#commentlist li {margin-left:50px;
margin-bottom: 0em;
padding-bottom: 1em;
padding-top: 1em;
border-bottom: 1px solid #700000;
}
#commentform {margin-left:50px;
margin: 1em 0;
background: #ffffff;
width: 280px;
}
#commentform textarea {margin-left:50px;
background: white;
	border-top: 1px solid #feddb8;
	border-left: 1px solid #feddb8;
	border-bottom: 1px solid #bd7526;
	border-right: 1px solid #bd7526;
width: 280px;
}
#commentform textarea:hover {
	background: white;
	border-top: 1px solid #bd7526;
	border-left: 1px solid #bd7526;
	border-bottom: 1px solid #feddb8;
	border-right: 1px solid #feddb8;
}
#commentform textarea:focus {
background: white;
	border-top: 1px solid #bd7526;
	border-left: 1px solid #bd7526;
	border-bottom: 1px solid #feddb8;
	border-right: 1px solid #feddb8;
}
#commentform #email, #commentform #author, #commentform #url {
margin-left:50px;
font-size: 1.1em;
background: #fff;
	border-top: 1px solid #feddb8;
	border-left: 1px solid #feddb8;
	border-bottom: 1px solid #bd7526;
	border-right: 1px solid #bd7526;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: white;
	border-top: 1px solid #bd7526;
	border-left: 1px solid #bd7526;
	border-bottom: 1px solid #feddb8;
	border-right: 1px solid #feddb8;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: white;
	border-top: 1px solid #bd7526;
	border-left: 1px solid #bd7526;
	border-bottom: 1px solid #feddb8;
	border-right: 1px solid #feddb8;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}
.submit1{
	color: white;
	font-weight: bold;	margin-left:50px;
	width: 280px;
	cursor:hand;
	font-size:1.10em;
	background: #ac5e12;
	border-top: 1px solid #feddb8;
	border-left: 1px solid #feddb8;
	border-bottom: 1px solid #bd7526;
	border-right: 1px solid #bd7526;}
.submit1:hover, .submit1:focus{
	background: #c6782c;
	border-top: 1px solid #bd7526;
	border-left: 1px solid #bd7526;
	border-bottom: 1px solid #feddb8;
	border-right: 1px solid #feddb8;}
#commentlist {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#commentlist li {
	padding: 5px 25px 0 0;
	border-bottom: 1px solid #e19543;
	background: #fff5e9 url(images/comment-bg.gif) repeat-y 0 0;
	}
	.alt {
		background-color: #fff !important;
		background-image: none !important;
		}
.comment-title,
.comment-meta,
.comment-text {
	margin: 0 0 0 80px;
	}
.comment-title,
.comment-title a,
.comment-title a:hover{
	color: #030612;
	}
.comment-meta,
.comment-meta a,
.comment-meta a:hover {
	color: #ac5f14;
	}

UDAV · 18 Янв 2010

У меня и в опере также глючит..
а дело в том, что у тебя длинные строки в таблице и без пробелов!
Например..
TN-460/6600
Brother
и идет строка, которая растягивает таблицу:
8300/850/8500/8600/8700/9600/9650/9660N/9700/9750/9760/9850/9860/9870/9880/9880N/P2500

и таких строк у тебя много.

whitewolff · 18 Янв 2010

ну прежде всего у Вас 2 пустых атрибута в таблице, "nolayout" , "-=". зачем они? особенно "-=". поскольку блок с контентом у вас фиксированой ширины - 500пкс, и оступов внутрь больше нету вплоть до таблицы, попробуйте ей приписать ширину 100%. попробуйте приписать 500пкс.
о результатах доложите.

slateclub · 18 Янв 2010

UDAV написал(а):
У меня и в опере также глючит..
а дело в том, что у тебя длинные строки в таблице и без пробелов!
Например..
TN-460/6600
Brother
и идет строка, которая растягивает таблицу:
8300/850/8500/8600/8700/9600/9650/9660N/9700/9750/9760/9850/9860/9870/9880/9880N/P2500
и таких строк у тебя много.

Ну сейчас вроде добавил пробелов, но ничего не помогло

whitewolff написал(а):
ну прежде всего у Вас 2 пустых атрибута в таблице, "nolayout" , "-=". зачем они? особенно "-=". поскольку блок с контентом у вас фиксированой ширины - 500пкс, и оступов внутрь больше нету вплоть до таблицы, попробуйте ей приписать ширину 100%. попробуйте приписать 500пкс.
о результатах доложите.

что-то не нашел атрибута "-=", а nolayout удалил. В общем изначально я и пыталься настроить таблицу при помощи заданных размеров, но ничего не выходит

zloba · 18 Янв 2010

Добавить то добавил, но везде. Удали содержимое таблицы и посмотри как будет выглядеть таблица.

HTML:

<tr>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="114">
<p align="center"><strong><br />
		Марка картриджа</strong></td>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="65">
<p align="center"><strong><br />
		Фирма</strong></td>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="633">
<p align="center"><strong>Модель принтера</strong></p>
</td>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="45">
<p align="center"><strong><br />
		Цена1 (руб.)</strong></td>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="45">
<p align="center"><strong><br />
		Цена2 (руб.)</strong></td>
<td bordercolor="#000000" style="border-style: solid; border-width: 1px" width="45">
<p align="center"><strong><br />
		Цена3 (руб.)</strong></td>
</tr>

Общая ширина определенно больше, чем необходимо. Оно вроде как не влияет, но лучше исправить и задать относительно в процентах.

slateclub · 18 Янв 2010

Все разобрался. Пробелов добавил слишком мало, т.е добавил, но не достаточно для того чтобы текст из колонки "модель принтера" не выезжал за границы. Теперь все ок. :yahoo:

Ps достали уже эти разногласия браузеров. Делаешь, делаешь какой-то сайт, сделал, а потом смотришь в других браузерах а там лажа получаецо. Надо чтоб правительство РФ закон издало о запрете всех браузеров кроме Mozila

и тогда все будет ок.

pps удав был прав спсб

[help] Как настроить таблицу

slateclub

Постоялец

UDAV

Постоялец

whitewolff

Лимонадный Джо :)

slateclub

Постоялец

zloba

Создатель

slateclub

Постоялец