Форум Сайтостроение Веб-строительство

Проблема с вёрсткой

12 3
M2
На сайте с 11.01.2011
Offline
342
mark2011
1805

Что-то не уверен, что пишу по адресу.... я могу здесь получить помощь по сабжу?

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
oux
На сайте с 07.02.2010
Offline
83
oux
#1

Почему нет. Что за проблема? Поделитесь с нами.

Orangesoda
На сайте с 22.08.2010
Offline
17
Orangesoda
#2

Спрашивайте!

M2
На сайте с 11.01.2011
Offline
342
mark2011
#3

Спасибо всем!

В общем есть сайт http://nndevice.ru

Там хедер состоит из 6 картинок, шириной в 1920px (заточено под широкоформатные мониторы). Дизайнер специально так сделал. Суть в том что в IE видна вся резка. Т.е. создаётся впечатление что применили 


<table cellspacing="1">

вокруг картинок.

Возникают следующие вопросы:

1. Какой лучше использовать DOCTYPE? Возможно ли для разных браузеров использовать

разный DOCTYPE?

2. Почему возникает такая ситуация?

Да, ещё. У меня на работе разрешение 1280*800, там видна вся картинка. (К картинке применён overflow-x: hidden). Но дома на 15' мониторе (и такие ещё есть) картинка просто обрезается справа. Тоже вопрос вопросов - что бы это могло быть... и точно такое же происходит в опере 9.4 (это со слов человека, смотревшего сайт через оперу)

Я уже парю код сам, но мне нужны идеи, в какую сторону копать вообще... может стоит переверстать сайт по таблицам? хотя это устарело уже... если нужно внести изменения в css для IE, то что именно? Ну в смысле не так, а просто что IE НЕ поддерживает...

Вот как-то так..

Orangesoda
На сайте с 22.08.2010
Offline
17
Orangesoda
#4

1). Поставьте вызов css раньше вызовов javascript'овых файлов. Возможно из-за того, что скрипты не срабатывают в IE, он не видит стили.

2).

(К картинке применён overflow-x: hidden). Но дома на 15' мониторе (и такие ещё есть) картинка просто обрезается справа.

Так стоит же overflow hidden

Orangesoda добавил 14.01.2011 в 00:46

if (screen.width > 1600)
{
document.write("<link href=\"http://nndevice.ru/css/wg-max.css\" rel=\"stylesheet\" type=\"text/css\">");
}

else
{
document.write("<link href=\"http://nndevice.ru/css/wg.css\" rel=\"stylesheet\" type=\"text/css\">");
}

Вот этот кусок кода не отрабатывается в IE из-за ранее возникшей ошибки

M2
На сайте с 11.01.2011
Offline
342
mark2011
#5

Я, собственно, проблему с промежутками решил, путём добавления следующего к CSS: 


font-size: 1px;

зачем это надо применительно к картинке не знаю, но помогло.

А обрез справа - это не overflow-x... смотрите, картинка же на 1920px, overflow делает так, чтобы не возникало горизонтальной полосы прокрутки. А в этом случае картинка просто обрезается справа и ещё остаётся пустое место (белое). Так происходит в Opera и Google Chrome.

mark2011 добавил 14.01.2011 в 01:00

Уфф, обалдеть!!

Сейчас поставил overflow-x: auto; - появилось ДВЕ полосы прокрутки!! горизонтальных! прикладываю скрин, это надо видеть...

P. S. Сюда, к сожалению, невозможно загрузить файл такого размера, вот ссылка: http://narod.ru/disk/3417410001/14.01.png.html

Orangesoda
На сайте с 22.08.2010
Offline
17
Orangesoda
#6
Я, собственно, проблему с промежутками решил, путём добавления следующего к CSS:

Код:

font-size: 1px;

зачем это надо применительно к картинке не знаю, но помогло.

В IE 8 вообще CSS не грузится. Проверьте, точно ли решена проблема?

Orangesoda добавил 14.01.2011 в 01:02


А обрез справа - это не overflow-x... смотрите, картинка же на 1920px, overflow делает так, чтобы не возникало горизонтальной полосы прокрутки. А в этом случае картинка просто обрезается справа и ещё остаётся пустое место (белое). Так происходит в Opera

А пришлите скриншот?

M2
На сайте с 11.01.2011
Offline
342
mark2011
#7

Вот, выложил 3 файла:

http://narod.ru/disk/3424213001/chrome.png.html

http://narod.ru/disk/3424147001/ie8_jcarousel.png.html

http://narod.ru/disk/3424149001/ie8_header.png.html

Объясню что к чему...

chrome.png - внимательно присмотритесь на рисунке к положению горизонтального скролла. Видите, он не в начале, а у страницы остаётся пустое место справа? Так на 15-дюймовом мониторе, на больших мониторах просто место справа остаётся и всё.

ie8_jcarousel.png - каруселька в IE8. Посмотрите рисунок в chrome - на рисунке не видно, но я говорю, что подхватывается и fancybox и сам js карусельки. Такое ощущение, что IE их вообще не видит.

ie8_header.png - просто информационный скрин, говорящий о том, что проблема действительно решена (с промежутками) :) я просто правил на локалхосте, и на сервер пока результаты не выкладывал, поэтому на сервере понятное дело ничего не работает :)

mark2011 добавил 14.01.2011 в 06:55

Да, сейчас попробовал поменять местами вызовы js и css в заголовке файла, а также прописал руками вызов css-файла (чтобы он был не в js-скрипте). Результата для IE 0. Для Chrome ничего не изменилось, но и не ухудшилось. Так что проблема с каруселькой остаётся (синтаксически код абсолютно верен, поскольку в других браузерах всё работает).

dma84
На сайте с 21.04.2009
Offline
168
dma84
#8

В IE если после рисунка стоит пробел или перевод строки, происходит добавление пустой строки (промежутка), то есть 


	<img id="img-header" src="images/zs_01.jpg"> 
	<img id="img-header" src="images/zs_02.jpg"> 
	<img id="img-header" src="images/zs_03.jpg"> 
 
	<img id="img-header" src="images/zs_04.jpg"> 
	<img id="img-header" src="images/zs_05.jpg">

нужно писать в одну строку


<img id="img-header" src="images/zs_01.jpg"><img id="img-header" src="images/zs_02.jpg"><img id="img-header" src="images/zs_03.jpg"><img id="img-header" src="images/zs_04.jpg"><img id="img-header" src="images/zs_05.jpg">

такой вот, можно сказать, "баг" IE, к тому же, я не вижу смысла резать изображение на 5 частей

PS: а почему у вас 2 тега BODY?

Аргументы почему не нужно Поделиться изображением Яндекс кобласит
M2
На сайте с 11.01.2011
Offline
342
mark2011
#9
dma84:

PS: а почему у вас 2 тега BODY?

А где вы такое увидели??

dma84
На сайте с 21.04.2009
Offline
168
dma84
#10 


...
</head>
<body>
<div id="header">
<img src="images/zs_01.jpg"><img src="images/zs_02.jpg"><img src="images/zs_03.jpg"><img src="images/zs_04.jpg"><img src="images/zs_05.jpg">
    <div id="header-bg">
        <a href="index.php" class="menu-about"><img src="images/menu/about_1.png" id="menu_about"></a>
        <a href="services.php" class="menu-ys"><img src="images/menu/ys_1.png" id="menu_uslugi"></a>
        <a href="zimnie_sady.php" class="menu-zs"><img src="images/menu/zs_1.png" id="menu_zs"></a>
        <a href="catalog.php" class="menu-catalog"><img src="images/menu/catalog-1.png" id="menu_catalog"></a>
        <a href="oborud.php" class="menu-oborud"><img src="images/menu/oborud-1.png" id="menu_oborud"></a>
        <a href="contacts.php" class="menu-contact"><img src="images/menu/contact-1.png" id="menu_contact"></a>
    </div>
    
    <img id="img-header" src="images/zs_07.jpg">
</div>
<div id="wrap">
  
  <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li><a class="single_image" href="images/photos/001.jpg"><img src="images/photos/001_car.jpg"></a></li>
    <li><a class="single_image" href="images/photos/002.jpg"><img src="images/photos/002_car.jpg"></a></li>
    <li><a class="single_image" href="images/photos/003.jpg"><img src="images/photos/003_car.jpg"></a></li>

    <li><a class="single_image" href="images/photos/004.jpg"><img src="images/photos/004_car.jpg"></a></li>
    <li><a class="single_image" href="images/photos/005.jpg"><img src="images/photos/005_car.jpg"></a></li>
    <li><a class="single_image" href="images/photos/006.jpg"><img src="images/photos/006_car.jpg"></a></li>
    <li><a class="single_image" href="images/photos/007.jpg"><img src="images/photos/007_car.jpg"></a></li>
  </ul>
  
  

</div>

<body>

<h1>О компании</h1><br>
...

Как я вижу, картинки уже поправили. Но, опять же, зачем их резать? Смысла нет, только больше запросов к серверу

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий