HTML таблица.

[Andrey447]

У меня есть три вопроса...

Первый вопрос:

Вот например сделал простое меню, скриншот:

меню построено на таблице, таблицу я сделал с округлением, и внизу градиент. проблема в том, что картинка-градиента выходит за границу округленный краёв (см. на скриншоте.), можно это как нибудь исправить?

Доп. данные:

Округление сделано с помощью border-radius.

CSS картинки-градиента:

background-image:url('img/menu-gr.gif');
background-repeat: repeat-x;
background-position: left bottom;

Второй вопрос:

Округленные краёв в таблице не поддерживаются в браузере IE, и они там простые-квадратные, есть какой-то код который будет поддерживать их в IE? На других форумах находил такой код:

behavior: url(border-radius.htc);

Файл скачивал, но он не помог, а наоборот в IE таблица стала невидима.

Третьий вопрос:

Можно как-то сделать градиент с помощью CSS? всмысле без картинки, а только с CSS.

Заранее спасибо.

[psywalker]

Короче делаем так, отказываемся от behavior: url(border-radius.htc);, и делаем градиенты с помощью трёх картинок, углов и середины.

[Softlink]

а не проще ли картинки со скругленными углами вставить по флангам? Никаких htc, border-radius и прочего совсем не понадобится. А всего две картинки.

[psywalker]

а не проще ли картинки со скругленными углами вставить по флангам? Никаких htc, border-radius и прочего совсем не понадобится. А всего две картинки.

Я так и предложил. Только картинки нужно 3 штуки. Маленький спрайт.

[Softlink]

а не проще ли картинки со скругленными углами вставить по флангам? Никаких htc, border-radius и прочего совсем не понадобится. А всего две картинки.

Я так и предложил. Только картинки нужно 3 штуки. Маленький спрайт.

тьфу, ну да. Как-то коряво я прочитал твой пост. И картинки 3 естественно. Центр по умолчанию, думаю, это уже понятно будет.

[Andrey447]

Короче делаем так, отказываемся от behavior: url(border-radius.htc);, и делаем градиенты с помощью трёх картинок, углов и середины.

А если есть еще задний фон?

html, body {background-image:url('...');}

По поводу 3 картинок - тогда надо 5, нет? 4 угла, градиент внизу...

Edited June 19, 2011 by Andrey447

[Softlink]

а не проще ли картинки со скругленными углами вставить по флангам? Никаких htc, border-radius и прочего совсем не понадобится. А всего две картинки.

Я так и предложил. Только картинки нужно 3 штуки. Маленький спрайт.

А если есть еще задний фон?

html, body {background-image:url('...');}

По поводу 3 картинок - тогда надо 5, нет? 4 угла, градиент внизу...

да зачем тут 5 картинок и задний фон?

Нарисуйте овал, сразу с градиентом, поделите на 3 части. Соответственно левая часть уйдет налево, правая на право. Самим кнопкам задайте фоном оставшуюся центральную часть. Вот и все дела.

[Andrey447]

а не проще ли картинки со скругленными углами вставить по флангам? Никаких htc, border-radius и прочего совсем не понадобится. А всего две картинки.

Я так и предложил. Только картинки нужно 3 штуки. Маленький спрайт.

А если есть еще задний фон?

html, body {background-image:url('...');}

По поводу 3 картинок - тогда надо 5, нет? 4 угла, градиент внизу...

да зачем тут 5 картинок и задний фон?

Нарисуйте овал, сразу с градиентом, поделите на 3 части. Соответственно левая часть уйдет налево, правая на право. Самим кнопкам задайте фоном оставшуюся центральную часть. Вот и все дела.

О, получилось, сам не понимаю как я умудрился так сделать, и без 3 картинок, только одна градиент...

[psywalker]

Покажи код. А лучше ссылку на тестовую страницу.

[Andrey447]

Покажи код. А лучше ссылку на тестовую страницу.

в стилях

.menu-u {border:1px solid #666666; 

	border-radius: 10px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;

	background-image:url('img/menu-gr.gif');
	background-repeat: repeat-x;
	background-position: left bottom;

}

Edited June 20, 2011 by Andrey447