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

Тема в разделе "Веб-дизайн", создана пользователем slateclub, 18 янв 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. slateclub

    slateclub Постоялец

    Регистр.:
    5 ноя 2008
    Сообщения:
    69
    Симпатии:
    4
    Всем привет! Вот делаю сайт на wordpress и возникла следующая проблема. На странице с прайсом есть таблица и она отлично отображается как в mozile, так и в опере, но вот в ie никак не могу задать нужные размеры, и она выезжает за пределы границы для контента.
    Вот ссылка на страницу с прайсом:
    http://cartprintshop.ru/prajs/
    Подскажите кто знает как это исправить. Вот 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;
    	}
     
  2. UDAV

    UDAV

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

    и таких строк у тебя много.
     
    slateclub нравится это.
  3. whitewolff

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

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    ну прежде всего у Вас 2 пустых атрибута в таблице, "nolayout" , "-=". зачем они? особенно "-=". поскольку блок с контентом у вас фиксированой ширины - 500пкс, и оступов внутрь больше нету вплоть до таблицы, попробуйте ей приписать ширину 100%. попробуйте приписать 500пкс.
    о результатах доложите.
     
  4. slateclub

    slateclub Постоялец

    Регистр.:
    5 ноя 2008
    Сообщения:
    69
    Симпатии:
    4
    Ну сейчас вроде добавил пробелов, но ничего не помогло
    что-то не нашел атрибута "-=", а nolayout удалил. В общем изначально я и пыталься настроить таблицу при помощи заданных размеров, но ничего не выходит
     
  5. zloba

    zloba Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    42
    Симпатии:
    5
    Добавить то добавил, но везде. Удали содержимое таблицы и посмотри как будет выглядеть таблица.

    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>
    

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

    slateclub Постоялец

    Регистр.:
    5 ноя 2008
    Сообщения:
    69
    Симпатии:
    4
    Все разобрался. Пробелов добавил слишком мало, т.е добавил, но не достаточно для того чтобы текст из колонки "модель принтера" не выезжал за границы. Теперь все ок.:yahoo:
    Ps достали уже эти разногласия браузеров. Делаешь, делаешь какой-то сайт, сделал, а потом смотришь в других браузерах а там лажа получаецо. Надо чтоб правительство РФ закон издало о запрете всех браузеров кроме Mozila:) и тогда все будет ок.

    pps удав был прав спсб
     
Статус темы:
Закрыта.