CSS border problem

Здравейте! Наложи ми се да ползвам таблично визуализиране на данни като за целта е нужно да отделя всички клетки с borders. Писха си стиловете и всичко заспа... да ама не... разликата между ИЕ и Мозила(както и Опера) е в интерпретацията размерите на borders - единия браузер включва големината на borders в предварително дефинираната големина на клетката, а другия ДОБАВЯ тази големина към вече дефинираната. Ето го и стила
.Cell{
width:24px;
height:19px;
border: solid;
border-width:0px 1px 1px 0px;
border-color:#30549E;
background-color:#DBE7F0;
}
И, представете си таблицата с десетина реда и колони как се размества в крайна сметка ... В момента търся решение на този проблем, ако сте се сблъсквали с него и желаете да споделите много ще ми помогнете.

ми ползвай нещо което е общо за всички
border-right: 1px solid #000;
border-bottom: 1px solid #000;

Благодаря ти, ghs! Да, пробвах го и както и очаквах няма разлика. Проблемът е в това, че ИЕ и Мозила очевидно разбират border дефинициите по различен начин. Ако в ИЕ съм дефинирал размери на клетка И заедно с това дефинирам borders, проклетията добавя техните размери към тези на дефинираните на клетката. За разлика, Мозила-та приема borders размерите като част от размерите на сдамата клетка, тоест чертае ги "отвътре".

ghs, имаш ли идея как бих могъл да се справя с този проблем?

не зна мза какво точно използваш таблицата, но ако нещо от типа на мейл редовете, можеш да го направиш с <li>и тука да слоиш <p> или <div> да речем </li> като тези p-та div-ове да ги оформиш за да наподобяват клетките

Ами става дума за визуализиране на стаите в хотели. Структурата трябва да бъде таблична, понеже цялата функционалност се определя динамично, съответно някъде ще се налага да има много редове, респективно да има и скрол. Малко ми е трудно да обясня без визуално да унагледя кое-как е точно. Като цяло, имам грубо казано един външен контейнер, представляващ таблица 2x2, като първият ред и първата колона са имената на визуализираните обекти(стая, категория...), а в основната долна дясна клетка ми се разполага плана на стаите(голямата таблица), при който ако се наложи даима скрол, тои да се движи заедно с имената на категориите.

Нека погледнем нещата в тази светлина: ако дефинирам големина на клетка (дължина и ширина) заедно с дефиниция за border, то ИЕ6 "чертае" border-ите отвътре(тоест включва ширината на border в общата дефинирана ширина), докато Мозила-та прави обратното - чертае ги извън дефинираните размери на клетката, като по този начин краините размери се увеличават. Въпросът ми е дали има подход, който да уеднакви това различно интерпретиране на размерите на контейнера с border от ИЕ6 и Мозила?
GHS, благодаря ти за съветите! Дискусията ражда идеите, дано в този случай това бъде полезно

"Малко ми е трудно да обясня без визуално да унагледя кое-как е точно."

дай код поне и ще стане супер бързо

Доколкото знам, IE се държи така, когато е в "quirks mode".
Тоест, ако сложиш на страницата валиден DOCTYPE, би трябвало да почне да се държи по начина, определен от съответния HTML или XHTML стандарт - т.е. да добавя ширината на border-а към тази на клетката.

---
Life is too short so love the one you got
Cause you might get run over or you might get shot

мдамм друго си е да пишеш валиден xHTML/CSS и сичко да си излиза вярно :]
Това с бордера ... може да сложиш background с някви бордери в него, зависи от таблицата. Oбщо взето най-добре е да пишеш валиден код щото така или иначе, бъдещите броузъри ще се пишат спрямо W3C и кода ти ще си е все така читав.

пример: в IE7 рендеринга на Quirksmode е почти непроменен спрямо IE6 за разлика от стрикт.

И откъде си се сдобил с информацията че бъдещите браузъри ще се пишат само спрямо W3C?

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Chernobyl, има логика в това, което казваш, първото нещо, която се захванах да разцъкам бяха именно DTD definitions. Въпреки това, или не ми достигат знания, или просто грешката не е толкова очевидна за мен. Успях да го подкарам до еднакво рендиране по хоризинтала и разлика във височината, което остава отворен въпроса.
Затова, ето кода, надявам се ще успеете да убедите браузърите, че този код може да се интерпретира еднакво:
[линк]
Благодаря предварително за помощта!

Здравей!

Опитай така:

.Cell{
width:24px;
height:19px;
border: solid;
border-width:0px 1px 1px 0px;
border-color:#30549E;
background-color:#DBE7F0;
}

html>body #Cеll {width: 22px;}

Успех!

абе просто добавяш едно

-moz-box-sizing: border-box;

в CSS-то и нямаш проблем, т.е няма разлика в браузърите...

Благодарско за отговорите ви, колеги!
Blake, възползвах се от предложението ти, но резултат просто няма...

ъъъ, нещо си в грешка, не може да няма резултат. Виж дали си го написал ПРАВИЛНО и КЪДЕТО ТРЯБВА. Щото по принцип прави/оправя точно това, което на теб ти е проблемно.

Можеш да пробваш следната селяния - вместо borders, слагаш background-image, който имитира border. Картинката ще е голяма (примерно няколкостотин пиксела или дори повече), за да не свърши по средата на някоя клетка и ще има нарисуван border отгоре и отляво, което е достатъчно, за да се имитира border от всички страни на клетката. Картинката ще има съответния фон вътре, който ти трябва за самите клетки.

Имай предвид, че за таблици с много редове (разбирай над 40-50-100), това ще изтормози IE6 при рендването и при зареждане на страницата ще виждаш как фонът бързо се слага във всяка една клетка поотделно.

П.С. Виждам, че това за фона са го написали вече, но предупреждението за рендъринга си остава.

А това, че на IE6 и IE7 им е еднакъв quirks mode-ът съвсем не е причина да се предпочете пред standards mode.

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

Вярно, не е причина - но пък е полезен плюс, когато си избереш Quirksmode...

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

но пък е полезен плюс, когато си избереш Quirksmode

"сЕди ти на тая кълка", както казваше баба ми навремето

[линк]

Сигурно има плюсове само ако методът на работа на девелопера датира от преди 10 г.

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

този линк какво точно трябваше да ми докаже?

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Неам идея дали работи за таблици, шото рядко ги ползвам.

[линк]

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Работи с таблици и с <div>-ове.
Има и други hack-решения, просто трябва да потърси (boxmodel AND hack).