простое кроссбраузеное меню на <ul>

lyapiss · May 2, 2012

день добрый.

есть nav, в нём меню на ul - одно оно отображается на разной высоте в разных браузерах, хотя используются em единицы измерения.

в чём может быть проблема?

html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<link rel="stylesheet" href="s.css">
<body>
<header role="banner">
<div class="content">
<nav><b>+0 (123) 456-78-90</b><br>
<sub>blah blah blah</sub>
<ul>
<li><a href="1.htm" title="">link 1</a></li><li><a href="2.htm" title="">link 2</a></li><li><a href="3.php" title="">link 3</a></li><li><a href="4.php" title="">link 4</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<section>
<br>
<br>
<br>
<br>
</section>
</div>
<div class="space"></div>
<footer role="contentinfo"><div class="content">
<ul><li><a href="5.htm" title="">link 5</a></li><li><a href="6.htm" title="">link 6</a></li><li><a href="7.htm" title="">link 7</a></li><li><a href="8.htm">link 8</a></li></ul>
<address>© 2012 blah blah?<b>?</b>?Blah, ул. blah, 123?<b>?</b>?<strong>+0 (123) 456-78-90</strong></address>
</div>
</footer>
</body>
</html>

css

html, body, div, span, h1, h2, h3, p, a, address, sup, center, dl, dt, dd, ol, ul, li, form, table, tr, td, footer, header, menu, nav, section, time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font: normal 100% Trebuchet MS;
	vertical-align: baseline;
	-moz-text-shadow: 0 0 1px rgba(194,194,194,0.1);
	-webkit-text-shadow: 0 0 1px rgba(194,194,194,0.1);
	text-shadow: #999 0 0 1px;
}
body{
	line-height: 1;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
}
footer, header, menu, nav, section, .logo, .sitemap, address{
	display: block;
}
header{
	width: 100%;
	height: 5em;
	background: #fff;
	position: relative;
	-moz-box-shadow: 0.1em 0.1em 0.3em rgba(8,8,8,0.1);
	-webkit-box-shadow: 0.1em 0.1em 0.3em rgba(8,8,8,0.1);
	box-shadow: #888 0.1em 0.1em 0.3em;
	overflow-x: visible;
}
.content{
	width: 640px;
	margin: 0 auto;
	height: inherit;
	overflow: hidden;
	padding: 0.4em 0 0 0;
}
.logo, .sitemap, .logo:hover, .logo:focus, .sitemap:hover, .sitemap:focus{
	position: relative;
	 -moz-transition: background-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
   -o-transition: background-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
   -webkit-transition: background-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.l{
   float: left;
}
.r{
	float: right;
}
nav{
	float: right;
	text-align: right;
	line-height: 0.6em;
	position: relative;
	bottom: 0;

}
sub{
	font-size: 0.8em;
	color: #555;	
}
ul{
	position: relative;
}
ul li{
	list-style: none;
	display: inline-block;
	text-transform: uppercase;
}
nav ul{
	margin: 1.3em 0 0 0;
}
nav b{
	font-size: 1.3em;
}
footer ul{
	bottom: 0.5em;
}
ul li a, ul li a:hover, ul li a:focus, ul li a:visited{
	font-weight: bold;
	font-family: Gabriola;
	line-height: 1em;
	-webkit-transition: color .3s linear;
	-moz-transition: color .3s linear;
	-o-transition: color .3s linear;
	-ms-transition: color .3s linear;
	transition: color .3s linear;
	-moz-text-shadow: 0.5px 0.5px 2px rgba(1,1,1,0.7);
	-webkit-text-shadow: 0.5px 0.5px 2px rgba(1,1,1,0.7);
	text-shadow: 0.5px 0.5px 2px rgba(1,1,1,0.7);
	text-decoration: none;
	display: block;
}
nav ul li a{
	font-size: 14px;
	font-size: 1.4em;
	margin: 0 0 0 0.5em;
}
footer ul li a{
	font-size: 11px;
	font-size: 1.1em;
	margin: 0 0.5em 0 0;
}
ul li a, ul li a:visited{
	color: #181818;
}
nav ul li a:hover{
	color: red;
	border-bottom: 0.14em solid red;
}
nav ul li a:focus{
	color: #df0000;
	border-bottom: 0.14em solid #df0000;
}
footer ul li a:hover{
	color: red;
	border-top: 0.1em solid red;
}
footer ul li a:focus{
	color: #df0000;
	border-top: 0.1em solid #df0000;
}
section{
	width: 630px;
	background: #eee;
	color: #181818;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	padding: 5px 5px 5px 5px;
	margin: 0 0 0.4em 0;
}
.space{
	height:5em;
}
footer{
	width: 100%;
	height: 5em;
	overflow: hidden;
	background: #e8e8df url("i/fs.png") no-repeat right top;
	border-top: 1px dashed #CCCCB4;
	margin: 0.4em 0 0 0;
	position: absolute;
	bottom: 0;
}

и ещё, если сайт окрыть в малом разрешении (меньше минимальной ширины в 640px), то при последующей горизонтальной прокрутке фон блоков прорадает в области которая была за прокруткой.

PS/ помогите разобраться в чём косяки.

lyapiss · May 3, 2012

up. кто-нибудь...

Justnewone · May 3, 2012

ссылку надо

galaydas · May 4, 2012

В каких разных браузерах UL разное по высоте, уточните ?

Добавьте в body min-width:640px; тогда при уменьшении экрана вроде не разъезжается

lyapiss · May 9, 2012

спасибо min-width помог.

браузеры Opera 11, Chrome 18 (хотя и младше также) и FF 3.6, а также IE 8 - в Opera сейчас как надо и это ниже всех, в Chrome выше всех и вообще не вариант, в FF почти как надо чуть выше чем в Opera, в IE вообще расстояние от бордера до самой ссылки нулевое.

ссылка - http://paricmaster.ru/test/

Edited May 10, 2012 by lyapiss

lyapiss · May 10, 2012

+ и в FF появилась горизонтальная прокрутка на пикселей 10

lyapiss · May 10, 2012

с прокруткой решил, но с UL по-прежнему проблема

Softlink · May 10, 2012

Может я чего-то не понял, но ни в одном браузере проблема у меня не воспроизводится. Сделайте скриншоты того, как должно и как не должно быть, посмотрим.

lyapiss · May 14, 2012

в опере правильнее всех.

Edited May 14, 2012 by lyapiss

lyapiss · May 22, 2012

ну так как выровнять ul для всех браузеров?

Cerberus · May 22, 2012

На разной высоте, может быть потому, что em относительные единицы измерения?

Смотреть сюда

Edited May 22, 2012 by Cerberus

lyapiss · May 22, 2012

в любом случае нужно использовать относительные единицы

Sign In

простое кроссбраузеное меню на <ul>

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information