X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> align="middle" в разных браузерах
CandyDandy
CandyDandy
Topic Starter сообщение 1.12.2010, 22:33; Ответить: CandyDandy
Сообщение #1


Привет. Делаю меню с иконками в гугл хроме. Потом обнаружил что в ie всё поехало. Картинки которые я ровнял с помощью align="middle" ровняются в ие совсем по другому(на несколько пикселей ниже). Думаю что Америку я не открыл ((: но в гугле пока ничего не нашёл про это. Проверил весь код валидатором - всё правильно. Может быть можно выровнять как то по другому? Чтобы во всех браузерах было одинаковое расстояние middle?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 1.12.2010, 22:35; Ответить: alexdrob
Сообщение #2


Может и можно) Это видно только вам)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
CandyDandy
CandyDandy
Topic Starter сообщение 1.12.2010, 22:42; Ответить: CandyDandy
Сообщение #3


Так походу скрытый смысл этого ответа в том что у моего вопроса есть простое решение, которое я смогу найти и сам? =))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 1.12.2010, 22:44; Ответить: alexdrob
Сообщение #4


Ну код только вы видите) Как можно сказать почему у вас что то там поехало
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
CandyDandy
CandyDandy
Topic Starter сообщение 1.12.2010, 22:57; Ответить: CandyDandy
Сообщение #5


Что то я совсем загоняться стал с этим css ))

Вот код:

<div id="menu">
<ul>
<li class="flink">
<img src="menuicon/biblioteka.png" id="im1" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Библиотека">
<a href="#"
onmouseover="document.getElementById('im1').src='menuicon/biblioteka1.png'"
onmouseout="document.getElementById('im1').src='menuicon/biblioteka.png'">
Билиотека
</a></li>
<li class="olink">
<img src="menuicon/game.png" id="im2" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Обучение">
<a href="#"
onmouseover="document.getElementById('im2').src='menuicon/game1.png'"
onmouseout="document.getElementById('im2').src='menuicon/game.png'">
Обучение</a></li>
<li class="olink">
<img src="menuicon/magazin.png" id="im3" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Магазин">
<a href="#"
onmouseover="document.getElementById('im3').src='menuicon/magazin1.png'"
onmouseout="document.getElementById('im3').src='menuicon/magazin.png'">
Магазин
</a></li>
<li class="olink">
<img src="menuicon/project.png" id="im4" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="О проекте">
<a href="#"
onmouseover="document.getElementById('im4').src='menuicon/project1.png'"
onmouseout="document.getElementById('im4').src='menuicon/project.png'">
О проекте
</a></li>
<li class="olink">
<img src="menuicon/club.png" id="im5" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Клуб">
<a href="#"
onmouseover="document.getElementById('im5').src='menuicon/club1.png'"
onmouseout="document.getElementById('im5').src='menuicon/club.png'">
Клуб
</a></li>
</ul>
</div>



html, body
{
    background:#33111b;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    margin: 0 auto;
    width:999px;
}


#menu
{
    position:relative;
    top:0px;
    left:0px;
    background:url(menu.png);
    width:999px;
    height:54px;
}

#menu ul
{
    margin:0;
    padding:0;
    list-style:none;
}

.flink
{
    margin-left:36px;
    margin-top:9px;
    display:block;
    float:left;
}

.olink
{
    margin-left:74px;
    margin-top:9px;
    display:block;
    float:left;
}

a:link
{
    text-decoration:underline;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}

a:visited
{
    text-decoration:none;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}

a:hover
{
    text-decoration:none;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}

a:active
{
    text-decoration:none;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 1.12.2010, 23:47; Ответить: pavelsc
Сообщение #6


CandyDandy, меняй скриптом margin-top в olink и flink например на 6, если скрипт определит браузер как IE. И еще можно выставлять visibility: visible при этом у слоя с текстом "Скачай нормальный браузер тут [ссылка, например, на оперу]" :hihi:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 2.12.2010, 0:47; Ответить: pavelsc
Сообщение #7


<script type="text/javascript">
function fuckIE(){
var IE='\v'=='v';
if(IE) {
document.getElementById('xxx').className='olink2';
document.getElementById('yyy').className='flink2';
}}
</script>
Назначаешь всем элементам с классом olink id="xxx", а с классом flink - id="yyy". Cоздаешь 2 новых класса olink2 и flink2 с измененным margin-top. Потом
<body onload=fuckIE();>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 2.12.2010, 2:54; Ответить: pavelsc
Сообщение #8


<title>"аррррр"</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

<div id="content">
<a href="#"><img src="logo.png" class="logo" alt="арр"></a>
<div id="slogan"><p class="pervaya">— "аррр"</p></div>
</div>
<div id="footer">
<div id="menu">
<ul>
<li class="flink">
<img src="menuicon/biblioteka.png" id="im1" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Библиотека">
<a href="#"
onmouseover="document.getElementById('im1').src='menuicon/biblioteka1.png'"
onmouseout="document.getElementById('im1').src='menuicon/biblioteka.png'">
Билиотека
</a></li>
<li class="olink">
<img src="menuicon/game.png" id="im2" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Обучение">
<a href="#"
onmouseover="document.getElementById('im2').src='menuicon/game1.png'"
onmouseout="document.getElementById('im2').src='menuicon/game.png'">
Обучение</a></li>
<li class="olink">
<img src="menuicon/candystore.png" id="im3" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="CandyStore">
<a href="#"
onmouseover="document.getElementById('im3').src='menuicon/candystore1.png'"
onmouseout="document.getElementById('im3').src='menuicon/candystore.png'">
CandyStore
</a></li>
<li class="olink">
<img src="menuicon/project.png" id="im4" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="О проекте">
<a href="#"
onmouseover="document.getElementById('im4').src='menuicon/project1.png'"
onmouseout="document.getElementById('im4').src='menuicon/project.png'">
О проекте
</a></li>
<li class="olink">
<img src="menuicon/club.png" id="im5" align="middle" style="margin-right:1px; margin-bottom:9px;" alt="Клуб закрытыййййй">
<a href="#"
onmouseover="document.getElementById('im5').src='menuicon/club1.png'"
onmouseout="document.getElementById('im5').src='menuicon/club.png'">
Клуб закрытыййййй
</a></li>
</ul>
</div>
<script>
jQuery.each(jQuery.browser, function(i, val) {
if(i=="msie" || i=="opera")
$("div div ul li img").css("margin-bottom","0px");
});
</script>
<p class="copyryght">2010 год, все права защищены, ООО ""</p>
<p class="tire">—</p>
<p class="about">Разработка сайта —</p>
<div id="CandyDandy">
<img src="candydandydark.png" align="middle" class="im" id="imcandy" alt="CandyDandy">
<a href="#" class="a1"
onmouseover="document.getElementById('imcandy').src='candydandy.png'"
onmouseout="document.getElementById('imcandy').src='candydandydark.png'">CandyDandy</a>
</div>
</div>
</body>
</html>
сделано и работает на jQuery, меняет margin-bottom в зависимости от браузера :goodpost:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как выводить на сайте разную рекламу для разных стран?
 5 CrypTomera 1870 2.5.2025, 20:57
автор: Boymaster
Горячая тема (нет новых ответов) ✅ sms.chekons.com - ⭐ Сервис для получения SMS на реальные номера USA "Non-VoIP, безлим SMS, API" ⭐
Сервис для получения SMS на реальные номера USA
 39 Chekon 12847 24.4.2025, 14:00
автор: Chekon
Открытая тема (нет новых ответов) Размещу ваши объявления о подработке в Москве или московской области в "ВКонтакте" и в "Телеграм"
 2 Tia2 1682 12.4.2025, 17:57
автор: Gold_Biznes
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПродам свой аккаунт Адвего (с 2013) + краткий "Advego user manual"
 2 ruprogon 5210 18.2.2025, 20:09
автор: home3917
Открытая тема (нет новых ответов) Глава "Ростелекома" считает, что личные данные всех россиян уже утекли в сеть
 6 Room 3173 8.2.2025, 16:34
автор: rosalin


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 17.5.2025, 0:12

Дизайн

 
Форум IP.Board © 2025  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet