ПОМОГИТЕ пожалуйста - Проблемы ширины CSS на IE8 - PullRequest
Новая
       12

ПОМОГИТЕ пожалуйста - Проблемы ширины CSS на IE8

2 голосов
/ 25 февраля 2010

Я очень новичок в разработке веб-сайтов и мало знаю о HTML или CSS. Однако я знаю, что шаблон, который я выбрал для использования на своем хостинг-сайте, проблематичен в IE8, но я не знаю, как это исправить. Основное поле содержимого, куда идет текст страницы, немного левее, чем по центру. Я не знаю, как заставить его соответствовать другим границам на странице.

Может кто-нибудь сказать мне, как я могу исправить ширину и общие размеры страницы на моем сайте?

Сайт: PineBarrensAnimals.com 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
   <meta http-equiv="content-type" content="{%MetaCharset%}" />
   <meta name="description" content="{%MetaDescription%}" />
   <meta name="keywords" content="{%MetaKeywords%}" />
   <title>{%MetaTitle%}</title>
    <style>
   html, body {
height: 100%;
padding-top:10px;
margin:10px;
}
body {
background: #3F3F3F url("images/tile.jpg");
background-position: top center;
font-family: "Arial";
font-size: 11px;
color:#FFFFFF;
padding:0px;
margin:0px;
}
a, a:link {
text-decoration: underline;
color:#FFF;
}
a:hover {
text-decoration: none;
color:#FFF;
}
a:active {
text-decoration: underline;
color:#FFF;
}

#container {
width: 774px;
height: auto !important;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom:0px;
}

#core_header {
width: 762px;;
height: 302px;
background: url(images/header.gif);
margin:0px;
padding:0px;
position:relative;
left:7px;
}

#header_text
{
position:relative;
right:420px;
top:40px;
font-size:16pt;
float:right;
font-weight:bold;
}

#header_text span {
   font-size: 12pt;
   }

img
{
margin:5px;
}

#core_left {
margin: 0;
width: 774px;
height:auto;
}
#core_right {
margin: 0;
float: left;
width:750px;
min-height:100%;
height:auto !important;
height:100%;
background: #4D7942;
color:#000;
margin-left:10px;
border-left: 4px solid #FFF;
border-right: 4px solid #FFF;
}

.content-box
{

padding:6px;
height:auto !important;
float:left;
width: 720px;
margin-bottom:10px;
font-family: "Arial";
font-size: 11px;
color:#FFF;
margin-left:10px;
}
.tumb
{
float: left;
margin-right:5px;
padding:0px;
}

.pagination
{
margin-left:auto;
margin-right:auto;
text-align:center;
}

#footer {
width:758px;
background:  url(images/footer.gif) bottom center no-repeat;
text-align: center;
margin-left:auto;
margin-right:auto;
padding:0px;
height:26px;
clear:both;
position:relative;
left:2px;
}

#footer2
{
clear:both;
height:10px;
background: url(images/footer.jpg);
width:758px;
margin-left:10px;
}


h2
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:18px;
height:25px;
}
h3
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:15px;
height:22px;
margin:0px;
padding:0px;
color:#FFF;
width:718px;
background: url(images/content_header.jpg) bottom left repeat-x;
margin-bottom:5px;
font-weight:bold;
}
h4
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:12px;
}


#navcontainer li {
color:#FFF;
display:inline;
position:relative;
height:25px;
width:100px;
padding-left: 55px;
padding-top:20px;
top:19px;
}

#navcontainer ul {
margin:0px;
padding: 0px;
padding-top: 0px;
padding-left: 0px;
width: 774px;
list-style-type: none;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer a, #navcontainer a:visited {
display:inline;
color:#FFF;
text-decoration: none;
font-family:Arial;
font-size:13px;

}
#navcontainer a:hover {
margin:0px;
color:#FFF;
text-decoration: none;
border-bottom:2px solid #FFF;


}
div#sth {
   text-align: center;
   padding-top: 10px;
   }

div#sth span {
   margin: 0 auto;
   }
   </style>

      <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

   </head>




<body>
<div id="container">
<div id="core_header">
<div id="header_text">{%WebsiteName%}<br /><span>{%WebsiteSlogan%}</span></div>
</div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%} 
</ul>
</div>
</div>
<div id="core_right"><!-- Your content goes here -->
<div class="content-box">
<h3>{%name%}</h3>
{%content%}</div>
<!-- End of content --></div>
</div>
<div id="footer2">&nbsp;</div>
</div>
</div>
<div id="footer">&nbsp;</div>
<div id="sth"><span>{%WebsiteFooter%}</span></div>
<br />
</body>
</html>

Спасибо, - Дэнни Б

Ответы [ 5 ]

2 голосов
/ 25 февраля 2010

Это должен быть случай стандартной веб-отладки:

Во-первых, вам нужен инспектор DOM (и вы знаете, как его использовать).

Затем вам нужно убрать с вашего сайта различное форматирование, пока вы не опуститесь до минимума, который все еще показывает проблему.

Надеюсь, минимальная версия должна сделать проблему очевидной. Если нет, опубликуйте здесь минимальную версию своего HTML-кода, и мы посмотрим.

Но мало кто здесь хочет копаться во всех нерелевантных частях вашего кода.

РЕДАКТИРОВАТЬ Методом проб и ошибок я исправил это так:

В первом #core_right сменили WIDTH на 758.

Во втором #core_right (в пределах [if IE]) значение MARGIN-LEFT изменено на 10.

Я думаю, что это делает.

1 голос
/ 25 февраля 2010

Я хочу сказать спасибо всем.

Я использовал следующие 2 совета:

1) В первом #core_right сменили WIDTH на 758. 

In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.

2) К 

<!--[if lt IE 8]>

Я пробовал сайт на IE 8, Safari и Firefox, и теперь он выглядит нормально.

  • Дэнни Б.
1 голос
/ 25 февраля 2010

В этом блоке 

 <!--[if IE]>
     <style type="text/css">

     #footer
     {
      left:1px; 
     }

     #core_right
     {
      height:300px;
      margin-left:5px;
     }
     .content-box
     {
      margin-left:5px;
     }

     </style>
     <![endif]-->

удалите margin-left: 5px в core_right и left: 1px, и вы должны быть там, хотя я не могу сказать, будет ли это во всех браузерах или только в IE8 (используйте IETester , чтобы проверить с другими.)

1 голос
/ 25 февраля 2010

Попробуйте изменить эту строку: 

<!--[if IE]>

Для 

<!--[if lt IE 8]>

Проблема в том, что поля добавлены в правую панель и нижний колонтитул в этом условном блоке. IE 8 не нуждается в них, но я предполагаю, что IE 7 нужен.

0 голосов
/ 25 февраля 2010

Если бы у "div # core_right" было левое поле в 10px вместо 5px, в IE8 это бы выглядело нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...