Нашел удобное меню и вставил в интересный див с уголками

ramilkin · November 17, 2008

Нашел то что давно искал.Удобное мне меню и бокс с уголками но.

В FF все норма,в IE как будто нет меню(невидимое)

убрав тут float,в IE все становится нормально.

#underlinemenu ul{

margin: 0;

margin-bottom: 1em;

padding-left: 0;

float: left;

font-weight: bold;

width: 100%;

border: 1px solid #DFDFDF;

border-width: 1px 0;

}

Но появляется другой мелкий глюк.

Подчеркивание в меню в FF поднимается над текстом, а в IE все становится отлично.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>

<style>
/* ——————————————- box1 */
.box1 {
	background-color: #FFFFFF;
	border: 1px solid #D7D8C8;
	position: relative;
	margin: 0 0 5px 0;
}
.box1 .box1hr,
.box1 .box1hr div,
.box1 .box1-top,
.box1 .box1-bot,
.box1 .box1-top div,
.box1 .box1-bot div {
	line-height: 9px;
	font-size: 0;
	height: 9px;
	position: relative;
}
.box1 .box1-top,
.box1 .box1-bot,
.box1 .box1-top div,
.box1 .box1-bot div {
	background: url(http://www.tatregion.ru/bitrix/templates/new/images/box1.gif) no-repeat left top;
}
.box1 .box1-top{
	left: -1px;
	top: -1px;
}
.box1 .box1-bot{
	background-position: 0 -9px;
	left: -1px;
	top: 1px;
}
.box1 .box1-top div{
	background-position: 100% -18px;
	left: 2px;
}
.box1 .box1-bot div{
	background-position: 100% -27px;
	left: 2px;
}
.box1 .box1-content{
	padding: 0 10px;
	overflow: hidden;
}
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 0px 0px 1px 0px;
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
#underlinemenu ul li a{
float: left;
color: blue;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#underlinemenu ul li a:hover{
color: black;
background-color: #FFFFFF;
border-bottom: 4px solid blue;
padding-bottom: 0;
}
#underlinemenu ul #current a{
color: black;
background-color: #FFFFFF;
border-bottom: 4px solid blue;
padding-bottom: 0;
}
</style>
</head><body>
<div class="box1" id="news">
	<div class="box1-top"><div><!-- --></div></div>
	    	    <div class="box1-content">
<div id="underlinemenu">
<ul>
<li class="current"><a href="http://www.ya.ru" title="Авто">Авто</a></li>
<li><a href="http://www.ya.ru" title="Спорт">Спорт</a></li>
<li><a href="http://www.ya.ru" title="Софт">Софт</a></li>     
<li><a href="http://www.ya.ru" title="Хайтек">Хайтек</a></li>
</ul>
</div>

<div style="clear: left"></div>
<p>здесь писанины будет много.........</p>
               </div><div class="box1-bot"><div><!-- --></div></div>
</div>
</body></html>

Edited November 17, 2008 by ramilkin

yopopt · November 17, 2008

На вскидку вижу два варианта:

1. Убрать float: left; в #underlinemenu ul и установить ему высоту.

2. Убрать float: left; в #underlinemenu ul и #underlinemenu ul li a и добавить туда line-height нужной высоты.

ramilkin · November 18, 2008

На вскидку вижу два варианта:
1. Убрать float: left; в #underlinemenu ul и установить ему высоту.
2. Убрать float: left; в #underlinemenu ul и #underlinemenu ul li a и добавить туда line-height нужной высоты.

Огромное спасибо за наводку.

_______________________________________________________________

Все, спасибо, разобрался, сделал все как посоветовал и алилуя

Edited November 18, 2008 by ramilkin

Sign In

Нашел удобное меню и вставил в интересный див с уголками

Question

ramilkin

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

ramilkin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information