скругление углов с css

reteiktor · October 25, 2009

криво скругляются уголки. прошу помочь найти причину:

разметка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="shortcut icon" href="./i/favicon.ico" type="image/x-icon"> 
<title>%title%</title>
</head>
<body>
<div id="center">
	<div id="menu">
	<ul>

		<li><a href="./index.php">Главная</a></li>
		<li><a href="./regon.php">Регистрация</a></li>
		<li><a href="./admin.php">Админка</a></li>

	</ul>
	</div>


<b class="top">
	<b class="r5"></b>
	<b class="r3"></b>
	<b class="r2"></b>
	<b class="r1"></b>
	<b class="r1"></b>
</b>
	<div id="content">

	<!-- Текст	-->

	</div>
<b class="bottom">
	<b class="r1"></b>
	<b class="r1"></b>
	<b class="r2"></b>
	<b class="r3"></b>
	<b class="r5"></b>
</b>

</div>
</body>
</html>

css:

@import "./reset.css";
b {
background:#EEE;
}
.r1, .r2, .r3, .r5 {
display:block;
height:1px;
}
.r5 {
margin:0 5px;
}
.r3 {
margin:0 3px;
}
.r2 {
margin:0 2px;
}
.r1 {
margin:0 1px;
}
body {
background:#555 url(../i/bbg.gif) repeat scroll 0 0;
font-size:10pt;
overflow-y:scroll;
}
#center {
margin:25px auto;
width:700px;
}
#menu {
float:left;
width:150px;
font:normal 0.8em/1.35em Verdana, sans-serif;
padding-top:38px;
}
#content {
background:#EEE;
float:left;
min-height:500px;
width:520px;
font:normal 1em/1.35em Times New Roman, serif;
padding:10px 15px;
}
#menu a:link, #menu a:visited, #menu a:active {
color:#EEE;
display:block;
min-height:30px;
padding:4px;
text-decoration:none;
}
#menu a:hover {
background:#EEE;
color:#333;
text-decoration:none;
}
#content a:link, #content a:visited, #content a:active {
color:#333;
text-decoration:underline;
}
#content a:hover {
color:#000;
text-decoration:none;
}
h3 {
text-align:center;
}
p {
text-align:justify;
text-indent:1em;
}
h6 {
text-align:right;
margin-bottom:15px;
}
input.focus, textarea.focus  {
background:#EEE;
border:1px solid #888;
}
input.focus:focus, textarea.focus:focus {
border:1px solid #333;
}

lancer · October 25, 2009

1. Зачем их делать линиями вообще?

Если не хотите применять картинки, используйте уже тогда border-radius из CSS 3, IE6-8 только не у дел останется.

2. Непонятно где уголки не показываются. В bottom'e и top'е, где проставлены - показываются. В остальных позициях они просто не проставлены.

Edited October 25, 2009 by lancer

Justnewone · October 25, 2009

1. Зачем их делать линиями вообще?
Если не хотите применять картинки, используйте уже тогда border-radius из CSS 3, IE6-8 только не у дел останется.
2. Непонятно где уголки не показываются. В bottom'e и top'е, где проставлены - показываются. В остальных позициях они просто не проставлены.

Более 50% пользователей для Вас недочеловеки чтоль? Не советуйте того, чего сами бы не применяли.

lancer · October 26, 2009

Не советуйте того, чего сами бы не применяли.

Применяю. Советую как возможный вариант для спрашивающего.

Edited October 26, 2009 by lancer

Justnewone · October 26, 2009

Применяю. Советую как возможный вариант для спрашивающего.

Так хотелось бы посматреть на сайте клиента. Не покажите?

rash · October 26, 2009

1. Зачем их делать линиями вообще?
Если не хотите применять картинки, используйте уже тогда border-radius из CSS 3, IE6-8 только не у дел останется.

И опера туда же.

Годится только для мелких декоративных элементов.

reteiktor · October 26, 2009

я разобрался. не было обтягивания правого дива и ограничений ширины линий уголков.

Sign In

скругление углов с css

Question

reteiktor

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

lancer

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

lancer

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

reteiktor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information