Jump to content
  • 0

рамки "border" - хотелось бы КБ решения с учетом IE6/7, FF, Operы.

sashakiselev

Asked by sashakiselev,

 Share

Question

sashakiselev Explorer

sashakiselev

Posted
Posted (edited)

Привет. Собственно сама просьба в теме.

Это моя первая попытка html/css верстки. Сразу столкнулся с тем что не могу добиться эдентичного отображения границ таблицы с вложенными кнопками. Опера ФФ и ИЕ доют три разных результата. Мне интересно решение без использования изображений. Извените за css код кинул от всей сраницы - уже мозг "болит думать").

ЗЫ.. вобщем если комуто не лень "помочь нубу" буду весьма счастлив ;) . Тему кинул в html, ибо предполагаю что с IE6 все не решить только с css. хз)

принтскрин

3k7x2072090.jpg

html

<html> 
<head> 
<title>page name</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head> 
<body>
<table border="0" class="main" bordercolor="#FFFFFF"  align="center" cellpadding="10">

<tr>
<td height="6" border="0"></td>
</tr>

</td>
</tr>

<td class="topmenu">
  <table class="main" border="1">
   <tr>
	<td class="menuitem"><a class="button" href="">1</td>
	<td class="menuitem"><a class="button school" href="">2</td>
   </tr>
  </table>
</td>

<tr>
<td class="text">text</td>
</tr>

</table>
</body> 
</html>

css

html, body {margin:0px; padding:0px;}
table {border-color: #FFFFFF;}
table.main {width: 300; height: 10%; border-collapse: collapse; border: 0 solid #FFFFFF;}

body, input, select, textarea {background:#999999; font-family:Tahoma; font-size:10px;}
td {padding: 0px;}
td.top {background-color: #FFFFFF; padding-top: 5px; padding-left: 22px; padding-bottom: 7px;}
td.copyright {padding-right: 5px;height: 32px; text-align: center; font-size: 10px; color: #656565; background: #FFFFFF;}
td.text {height:100%; background:#123456;}

td.menuitem {background-image: url(1menuitem_bg.jpg);
	background-repeat: no-repeat;
	background-position: right;}


a.button {display:block; text-align: center; font-size: 10px; text-transform:uppercase; height:25px; 
line-height:25px; width: 150px;color: #ffffff; font-weight:bold; background:#FFCC33;text-decoration: none;}

a.button:hover {font-size: 10px;background:#FFA22B;text-decoration: none}

a.school {background:#559DD9;}
a.school:hover {background:#1878D2;}

Edited by sashakiselev
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
sashakiselev Explorer

sashakiselev

Posted
  • Author
Posted (edited)

psywalker, Как одинаково? ээ не может быть. По поводу чтива - я Вас понимаю! и конечно же читаю и читаю и буду=). Всю прошлую ночь честно пробывал различные теги и в хтмл и в цсс) - не нашел. Border вроде такая простая и одновременно важная вещь, что хотелось бы все понять, чтоб двигаться дальше.

потому и написал.

По поводу что у Вас "одинаково", ну оч. врятли.. Вы не посмотрите на целой странице еще раз для меня, чтоб я точно был уверен так ли это. 1 кбайт файлов тут

Спасибо...pray-pray-pray)

s0rr0w, поставил, посмотрел - нет это не причина!

Edited by sashakiselev
Link to comment
Share on other sites
  • 0
sashakiselev Explorer

sashakiselev

Posted
  • Author
Posted
  s0rr0w said:
Какой именно доктайп?

я т.к. не оч. в этом разбираюсь взял из Дримвэйверского "чистого проекта".

Он такой: <!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">

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Ты вообще понимаешь, что у тебя панаписана редкая чушь? После закрытой строки сразу ячейка, атрибуты смешаны со стилями, с виду явно понятно, что придётся всё всё это скомкать, выбросить и забыть. Начни с чистого листа по слогам. http://stepbystep.htmlbook.ru/ - Если читал, значит плохо читал, читай ещё!

Link to comment
Share on other sites
  • 0
sashakiselev Explorer

sashakiselev

Posted
  • Author
Posted (edited)

psywalker, о да.. я понимаю=)

ЗЫ..Попробую сделать чистый файл сначала, начиная с самих кнопок в таблице. Если подобное повториться напишу в эту же тему уже с "правильным" кодом.

Еще раз БольшоеСпасибо!

Edited by sashakiselev
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
  sashakiselev said:
я т.к. не оч. в этом разбираюсь взял из Дримвэйверского "чистого проекта".

Он такой: <!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">

Фиговый доктайп.

Начни с такого

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Link to comment
Share on other sites
  • 0
sashakiselev Explorer

sashakiselev

Posted
  • Author
Posted (edited)

Собственно вот.. попробую повторить вопрос с примером минимального=> надеюсь правильного кода).

Как я уже понял проблема к кнопкам непосредственно никакого отношения не имела.

Вопрос действительно только в цвете рамок таблицы.

Вот очередной скрин (сверху вниз IE6, FF, Opera):

3lgx1615181214.jpg

!Более того для себя нашел еще один неприятный момент - FF меняет цвет рамки в зависимости от цвета body - например при FFCC33 (справа), результат практически как у Оперы.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html> 
<head> 
<title>page name</title>
<style type="text/css">
body {background:#123456;}
</style>
</head> 
<body>
<table border="15">
<tr>
<td>12345</td>
</tr>
</table>
</body> 
</html>

ЗЫ.. Пробывал как тут

не помогло - получалось подружить FF с Оперой только при {border-collapse: collapse}, при трехмерных рамках различие сохраняется, также не меняется "реакция" FF на цвет(об этом выше)

С IE 6 {border-collapse: collapse} вообще не работает, т.е. с ним не при каких не получилось достичь желаемого.

?

Edited by sashakiselev
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

Можно еще воспользоваться border-color, но опять таки у ИЕ свой способ вычисления цветов для трехмерных объектов, так что тут тоже не совпадете. Лучше всего сделать рисунок и повесить его на фон ячейки.

Link to comment
Share on other sites
  • 0
sashakiselev Explorer

sashakiselev

Posted
  • Author
Posted (edited)

Searcher, а вот по поводу border-color тоже интересно - во-первых у меня с ИЕ6 и 2ухмерные не совпадают. И прииенительно к самой таблице или к ее классу тег у меня работает только в ФФ, Опера же только реагирует применительно к ячейке. с ИЕ не то не другое не работает в полной мере? так ли это - или 100% моя ошибка (если нужно кину код).

psywalker, да это так. Именно для понимания ситуации, что можно сделать в том или ином случае, а что нет. Я только начал это все изучать.. ну и не очень люблю когда появляется постоянное "Почему?", это даже в какой то степени раздражает).

Конкретно для моих задач конечно же рамка мне врятли пригодится - тем более трехмерная, но на этапе разметки хотелось бы ее видеть одинаковой ;)

PS.. я вообще думал что эти вопросы уже все пережованы и так как должным образом не использовал поиск по форуму, почти был уверен, что меня в него тут же отправят... в лучшем случае кинут ссылку на что то аналогичное.. ээ вобщем странно как то, что подобные по сути банальные вопросы не рассмотрены.. может это и правда не так уж важно хз..

Так или иначе вопросов еще много=), но это уже в следующей теме. Засим Спасибо!

psywalker, дабы не засорять.. пишу выше) - спасибо за добрые слова - будем стараться).

Edited by sashakiselev
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Молодец что стараешься, разбираешь всякие темы, развиваешься так сказать. Правильно что конеш с азов начал, если будешь продолжать читать, вникать, учить и практиковать, то добьёшься хороших результатов. Я больше года назад начинал так же как ты, постоянно пытался чёто, мучился, читал, зато теперь более-меннее научился верстать благодаря своим стараниям :D

p.s. Приходи всегда, спрашивай, если будут вопросы, таких как ты - тут любят, так что обязательно поможем ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept