[Photoshop] Некорректное отображение в Mozilla

Тема в разделе "Графика", создана пользователем SkandaL, 10 май 2011.

Модераторы: Archiby
  1. SkandaL

    SkandaL

    Регистр.:
    5 ноя 2010
    Сообщения:
    221
    Симпатии:
    56
    Добрый день, форумЧане!
    Нарисовал тут картинку для шапки одного сайта, решил разбить её на кусочки в фотошопе и поместить на сайт.Во всех браузерах отлично, а мозиле рассыпается (нижний скрин). Как сделать чтоб во всех браузерах отображалось одинаково?
    1. Раскроил картинку:
    [​IMG]
    2. Залил картинки на сервер
    3.Поместил код:
    Код:
    <table id="________01" width="818" height="206" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="7">
    			<img src="/tst/banner__01.gif" width="817" height="29" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="6">
    			<img src="/tst/banner__02.gif" width="117" height="177" alt=""></td>
    		<td rowspan="2">
    			<a href="http://moy_site.ru/page_8.html" target="_top"
    				onmouseover="window.status='ремонт кондиционеров';  return true;"
    				onmouseout="window.status='';  return true;">
    				<img src="/tst/banner_new_03.gif" width="128" height="60" border="0" alt=""></a></td>
    		<td colspan="5">
    			<img src="/tst/banner__04.gif" width="572" height="57" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="57" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3" rowspan="2">
    			<img src="/tst/banner__05.gif" width="178" height="36" alt=""></td>
    		<td rowspan="3">
    			<a href="http://moy_site.ru/page_7.html"
    				onmouseover="window.status='Заправка кондиционеров';  return true;"
    				onmouseout="window.status='';  return true;">
    				<img src="/tst/banner_new_07.gif" width="145" height="59" border="0" alt="Заправка кондиционеров"></a></td>
    		<td rowspan="5">
    			<img src="/tst/banner__07.gif" width="249" height="120" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="3" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="4">
    			<img src="/tst/banner__08.gif" width="128" height="117" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="33" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<img src="/tst/banner__09.gif" width="26" height="84" alt=""></td>
    		<td rowspan="2">
    			<a href="http://moy_site.ru/page_10.html"
    				onmouseover="window.status='Установка кондиционеров';  return true;"
    				onmouseout="window.status='';  return true;">
    				<img src="/tst/banner_new_07-10.gif" width="147" height="55" border="0" alt="Установка кондиционеров"></a></td>
    		<td rowspan="3">
    			<img src="/tst/banner__11.gif" width="5" height="84" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="23" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<img src="/tst/banner__12.gif" width="145" height="61" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="32" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="/tst/banner__13.gif" width="147" height="29" alt=""></td>
    		<td>
    			<img src="spacer.gif" width="1" height="29" alt=""></td>
    	</tr>
    </table>
    4. Во всех браузерах всё впорядке, а вот в лисе криво
    [​IMG]
     
  2. Rheola

    Rheola Создатель

    Регистр.:
    12 фев 2009
    Сообщения:
    19
    Симпатии:
    5
    попробуй раскроить 2й кусок на 2 части - чтобы один был наравне с 3м.
     
    SkandaL нравится это.
  3. Miraage

    Miraage Angular/Laravel

    Регистр.:
    3 июн 2008
    Сообщения:
    230
    Симпатии:
    51
    проверьте значение margin у элементов. у огнелисов беда с ними.
    например:
    HTML:
    
    <style type="text/css">
    #b1,#b2{margin:0 auto}
    #b3{margin: 5px auto}
    </style>
    <div id="b1">menu</div>
    <div id="b2">
       <h1>title</h1>
       <div id="b3">content</div>
    </div>
    
    между #b1 и #b2 появится margin в 5 пикселей. фф4.0.3
     
    SkandaL нравится это.
  4. vvs777

    vvs777 Создатель

    Регистр.:
    5 авг 2008
    Сообщения:
    22
    Симпатии:
    8
    попахивает установкой высоты таблицы больше чем надо
    да и valign=top не помешало бы

    P.S. можно было бы map делать и не резать
    или статика в фоне + div position:absolute по заданным координатам ссылки с прозрачным spacer
     
    SkandaL нравится это.
  5. _sokal_

    _sokal_

    Регистр.:
    25 дек 2009
    Сообщения:
    300
    Симпатии:
    139
    Возможна глюк самой Mozilla?Попробуйте посмотреть на другом компьютере или переустановите браузер.
     
    SkandaL нравится это.
  6. SkandaL

    SkandaL

    Регистр.:
    5 ноя 2010
    Сообщения:
    221
    Симпатии:
    56
    нарезал по новой, как посоветовал Rheola и лису отпустило...
     
  7. Rheola

    Rheola Создатель

    Регистр.:
    12 фев 2009
    Сообщения:
    19
    Симпатии:
    5
    По мне лучше раскраивать так, чтобы были ровные строки - и никаких перескоков и кривоты во всех браузерах.

    А тут - непонятный кусок картинки шириной 5 пикселей (тот который справа от Установки)
    Как вариант map - там хоть круглую область делай вот как здесь тарелочки

    http://www.madyar.ru/
     
  8. name-k

    name-k Создатель

    Регистр.:
    18 май 2011
    Сообщения:
    31
    Симпатии:
    16
    По моему вы изначально выбрали неверный путь. Если исходник есть в psd то сделайте один имэдж без текстов и по имэджу на каждый отдельный текст ссылки.
    [​IMG]

    Делаете общий div, а потом абсолютным позиционированием разместите нужные вам ссылки.
    Например так:
    Будет 100% кроссбраузерно, гибко в редактировании (если захочется добавлять/изменять пункты меню) и никаких ацких таблиц!