Форум PHP программистов > ссылки, как блочный элемент

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: ссылки, как блочный элемент

myconstitution

13.01.2011 - 17:53

Всем привет!

Ниже приведен фрагмент html, css Шапки.
Проблема состоит в том, что ссылки

<a href...></a>

, объявленные в css, как display:block;
не хотят нажиматься в IE8 и Mozilla 3.6

В Chrom работает, вот и возникли сомнения.

Как вы думаете, в чем может быть проблема?

user posted image


#header {
	height: 196px;
	float:left;
}

#header #logo {
	display:block;
	height:100%;
	width:200px;
	float:left;
	background:url('../images/view/logo2.png') no-repeat;
}

#header #bg_header {
	width:505px;
	height:196px;
	float:left;
	background:url('../images/view/bg_header.png') no-repeat;
}

#header #people {
	width:295px;
	height:196px;
	float:left;
	background:url('../images/view/people1.png') no-repeat;
}

#header #bg_header #online {
	display:inline;
	width:83px;
	height:83px;
	background:url('../images/view/online.png') no-repeat;
	float:left;
	margin:35px 0 0 420px;
}

#header #bg_header #slogan {
	position:absolute;
	font-style:italic;
	color:#727272;
	font: normal italic 17px/15px "Times New Roman", Times, serif;
	top:30px;
}
#header #bg_header #slogan #row2 {
	text-indent:135px;
}

#header #bg_header #phone {
	display:inline;
	width:300px;
	height:45px;
	font:normal 35px Century Gothic;
	color:#AF3756;
	position:relative;
	top:100px;
	left:100px;
}

#header #bg_header #about {
	position:absolute;
	top:160px;
	margin-left:30px;
	display:inline;
	width:100px;
	height:15px;
	font:bold 13px Century Gothic;

}

#header #bg_header #contact {
	position:absolute;
	top:160px;
	margin-left:130px;
	display:inline;
	width:100px;
	height:15px;
	font:bold 13px Century Gothic;

}


<div id="header">
    <a href="./main" id="logo"></a>
    <div id="bg_header">
        <div id="slogan">Закон есть высшее проявление человеческой мудрости,
            <p id="row2">использующее опыт людей на благо общества.</p>
        </div>
        <a href="./main/about" id="about">О компании</a>
        <a href="./main/contact" id="contact">Контакты</a>
        
        <p id="phone">+7 (495) 123-45-67</p>
        <a href="./service/online-order" id="online"></a>
    </div>
    <div id="people"></div>
</div><!-- #header-->

Спустя 13 минут, 27 секунд (13.01.2011 - 17:07) Basili4 написал(а):

myconstitution
не нажимаются не надо. Не делай ссылки делай обычные дивы и заключай их в сслыки

<a href=""> <div>edfsafas</div> </a>

Спустя 8 часов, 3 минуты, 46 секунд (14.01.2011 - 01:11) myconstitution написал(а):

Доброго времени!

Нашел таки в чем была загвоздка.


#middle {
	width: 100%;
	padding: 0 0 30px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

убрал из middle:after сточку content: '.'; и все заработало.
Прошу пояснить, что же все-таки не понравилось Mozilla и IE.

Из описания параметра content:
"Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами after и before, они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются."

Здесь не понятно.. среди ключей content нет "."
И еще, для чего все-таки нужен этот параметр, каково его применение. Если я и без content, генерирую и вставляю содержимое на странице.

Спасибо!

Спустя 2 часа, 25 минут, 47 секунд (14.01.2011 - 03:36) myconstitution написал(а):

Люди, помогите))

Зашёл в тупик, убираю content: '', Mozilla и IE отображают сайт нормально, а вот с Chrom'ом беда. Когда содержимое контента превышает один экран (т.е. появляется вертикальный скролл) Chrom корректно отображает только ту инфу, что видна изначально (т.е. один экран).

А в обратной ситуации, когда content:'' имеет место быть, глючит шапка в Mozilla и IE (то, что описывал выше: не работают ссылки и т.д).

Так в чем же дело, мм...

Спустя 2 часа, 21 минута, 3 секунды (14.01.2011 - 05:57) fon написал(а):

Цитата

<a href=""> <div>edfsafas</div> </a>

Ссылка это строчный элемент, а ДИВ блочный, так нельзя, можно только наоборот, строчный элемент в блочном.

Спустя 3 часа, 18 минут, 1 секунда (14.01.2011 - 09:15) Basili4 написал(а):

Цитата (fon @ 14.01.2011 - 06:57)

Ссылка это строчный элемент, а ДИВ блочный, так нельзя, можно только наоборот, строчный элемент в блочном.

Опера ,Хром, IE, FF сказали что так можно.

<a  href="http://www.google.ru"><div>qwedwq</div></a>

Спустя 6 часов, 22 минуты, 14 секунд (14.01.2011 - 15:38) inpost написал(а):

fon
Для XHTML string нельзя, если брать HTML 4 trans, то можно по стандартам w3c

Спустя 5 минут, 27 секунд (14.01.2011 - 15:43) Basili4 написал(а):

Цитата (inpost @ 14.01.2011 - 16:38)

string

strong наверно ?

Спустя 2 минуты, 57 секунд (14.01.2011 - 15:46) inpost написал(а):

Basili4
strict =) Кажется там будут ругаться, или наоборот, лень проверять, но в одном случае ругается, а в другом - нет.

Спустя 2 минуты, 6 секунд (14.01.2011 - 15:48) Basili4 написал(а):

inpost
точно я все вспоминал как его зовут strict тоже работать должон.

Но валидность не пройдет.

Спустя 2 минуты, 34 секунды (14.01.2011 - 15:51) inpost написал(а):

Basili4
фон, скорее всего, как раз про валидность и говорил, что "нельзя" =)

Спустя 1 день, 14 часов, 26 минут, 3 секунды (16.01.2011 - 06:17) myconstitution написал(а):

Вообщем проблему решил, пришлось переписать css.

Могу лишь сказать, что ссылки будут работать везде: в IE, Mozilla, Chrom; если их делать блоком.

<a href="./main" id="linkBlock">Главная</a>


#linkBlock {
    display:block;
    width:200px;
    height:80px;
    background:url('../img/mainLink.png');
}

полный аналог

<a href="./main"><img height="80" width="200" src="../img/mainLink.png"></a>

Быстрый ответ:

Здесь расположена полная версия этой страницы.