Hi to all,
There is an short example in the German selfhtml.og pages:
On 2008-01-26, Knut Krueger
> Hi to all,
> There is an short example in the German selfhtml.og pages:
>
>
>
>
>
>
>
>
> ich
> bin
> eine
> Tabelle
>
>
>
>
>
> It is working fine with Firefox and Opera, but not with IE.
> The are cells are horizontal ordered, in IE they are vertical ordered.
>
> Does anybody know why?
You can't just put divs into trs _even if_ they are display: table-cell.
The HTML validity rules are applied independently of CSS (and CSS
doesn't have the same kind of validity rules anyway-- an element that's
display: table-cell can be nested inside one that's display: inline if
you like).
I say "the HTML validity rules". That's not what browsers actually
apply, but if you write invalid HTML, especially when table, tr and td
elements are concerned, the browser's parser is likely to rearrange
things in an unpredictable way.
On 2008-01-26, Ben C
> On 2008-01-26, Knut Krueger
>> Hi to all,
>> There is an short example in the German selfhtml.og pages:
>>
>>
>>
>>
>>
>>
>>
>>
>> ich
>> bin
>> eine
>> Tabelle
>>
>>
>>
>>
>>
>> It is working fine with Firefox and Opera, but not with IE.
>> The are cells are horizontal ordered, in IE they are vertical ordered.
>>
>> Does anybody know why?
>
> You can't just put divs into trs _even if_ they are display: table-cell.
>
> The HTML validity rules are applied independently of CSS (and CSS
> doesn't have the same kind of validity rules anyway-- an element that's
> display: table-cell can be nested inside one that's display: inline if
> you like).
>
> I say "the HTML validity rules". That's not what browsers actually
> apply, but if you write invalid HTML, especially when table, tr and td
> elements are concerned, the browser's parser is likely to rearrange
> things in an unpredictable way.
Sorry, I misread your example. They're all divs, and there's nothing
invalid there.
The reason is just that IE doesn't support display: table-cell. If you
want tables in IE you have to do HTML tables.
Gazing into my crystal ball I observed Knut Krueger
online.com:
> Hi to all,
> There is an short example in the German selfhtml.og pages:
>
>
>
>
>
>
>
>
> ich
> bin
> eine
> Tabelle
>
>
>
>
>
In addition to what Ben C said, if the content really is tabular data,
use the right tool for the job - a table. Personally, I can't really
see any reason to use display:table when there is a perfectly good
element already available, it just adds more confusion, and the
potential for "divitis".
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Knut Krueger wrote:
>
Adrienne Boswell schrieb:
> In addition to what Ben C said, if the content really is tabular data,
> use the right tool for the job - a table.
And if you would like to substitute the words with images?
The common style of very much pages is still using tabular tables.
Then it misusing tables - what do you suggest for that?
Or better to get 2,3 or 4 images in a row on widescreen high resolution
and less in smaller screens?
Regards Knut
In article
Knut Krueger
> Adrienne Boswell schrieb:
> > In addition to what Ben C said, if the content really is tabular data,
> > use the right tool for the job - a table.
> And if you would like to substitute the words with images?
> The common style of very much pages is still using tabular tables.
> Then it misusing tables - what do you suggest for that?
> Or better to get 2,3 or 4 images in a row on widescreen high resolution
> and less in smaller screens?
> Regards Knut
http://netweaver.com.au/alt/kruger.html
--
dorayme
dorayme schrieb:
> http://netweaver.com.au/alt/kruger.html
>
Thanks a lot, I did not think that is so easy.
I was looking for more difficult stuff ;-)
Regards Knut
In article
Knut Krueger
> dorayme schrieb:
>
> > http://netweaver.com.au/alt/kruger.html
> >
>
> Thanks a lot, I did not think that is so easy.
> I was looking for more difficult stuff ;-)
>
The above is fine for just pictures but you need to adjust the
margins and padding to suit yourself. And there are pitfalls if
you throw in images that are wildly different in size or aspect
ratio. But you are welcome to post a url to what you want to do
and you will get advice about how better to arrange things in the
html and css.
--
dorayme
On 26 Jan, 11:58, Knut Krueger
> div.tr { display:table-row; }
The table-styled behaviours in CSS were intended for two things, and
only two things: HTML's table elements, and styling XML. They were
not intended for, and are very sparsely supported for, a general means
of attaching table-like behaviours to generalised HTML elements.
You can do this in IE if you serve XHTML, serve it as XML, and supply
a client-side CSS stylesheet for it. As this relies on the XML not
being treated as HTML-related at all, you'll have to style the content
entirely from your own stylesheet (i.e. attach a HTML default
stylesheet).
On 2008-01-26, Andy Dingley
> On 26 Jan, 11:58, Knut Krueger
>
>> div.tr { display:table-row; }
>
> The table-styled behaviours in CSS were intended for two things, and
> only two things: HTML's table elements, and styling XML. They were
> not intended for, and are very sparsely supported for, a general means
> of attaching table-like behaviours to generalised HTML elements.
It's only IE that doesn't support them. They are a useful way to achieve
certain layout effects that aren't really possible any other way.
Centered shrink-to-fit block, vertical centering of block with
auto-height, and equal-height columns spring to mind.
dorayme schrieb:
But you are welcome to post a url to what you want to do
> and you will get advice about how better to arrange things in the
> html and css.
oh... no .... I just did an html check and found errors ....
I think I have to fix them first
Knut
dorayme schrieb:
But you are welcome to post a url to what you want to do
> and you will get advice about how better to arrange things in the
> html and css.
http://uni-regensburg.equine-behaviour.de/index.php?incfile= cooperation_e.php
but the css validator doesn't work with the style sheet:
http://uni-regensburg.equine-behaviour.de/css/layout.css
Regards Knut
In article
Knut Krueger
> dorayme schrieb:
> But you are welcome to post a url to what you want to do
> > and you will get advice about how better to arrange things in the
> > html and css.
> http://uni-regensburg.equine-behaviour.de/index.php?incfile= cooperation_e.php
>
> but the css validator doesn't work with the style sheet:
> http://uni-regensburg.equine-behaviour.de/css/layout.css
>
> Regards Knut
Looks complicated. I have not heard about float: both for
anything?
Anyway, I see you have captions. You might see simpler code at:
and one way to accommodate varying sized floated div packages to
make things a bit regular looking is to pick out your biggest
package (that is the div that contains the pic and the caption
and link) and make all the floated divs that particular size.
Or else take a good look at all your image/caption packages and
see if you can divide them into very few types, large, medium,
small (at the most) and order these in the html and size them
accordingly via wrappers of different ids or classes.
In the above url, you can see what I might mean by seeing the
different pages that are linked, You could make one page with all
my three pages together.
...img/caption...
...img/caption...
.....
...img/caption...
...img/caption...
.....
...img/caption...
...img/caption...
.....
and style
wrapper#large div {...}
wrapper#medium div {...}
wrapper#small div {...}
to suit.
--
dorayme
dorayme schrieb:
>> but the css validator doesn't work with the style sheet:
>> http://uni-regensburg.equine-behaviour.de/css/layout.css
>>
>> Regards Knut
>
> Looks complicated. I have not heard about float: both for
> anything?
I have not heard either ;-) comes from any former wrong search and
replace or a tired brain ...
I will look to the rest tomorrow.
but do you know what's wrong with the css file that the validator shows
"Servlet has thrown exception:javax.servlet.ServletException: Timed out"
Thank you
Post removed (X-No-Archive: yes)
On 27 Jan, 19:43, richard
> .cell {float:left;}
> .row {clear:left;}
> Then it will look like a table.
No, it will look like a bunch of floated , not quite like a
.
Consider both these examples, with multiple rows and with varying
lengths of data in each cell. For a , or the CSS example using
display:table-cell; then these columns will line up vertically. Using
floated , each will determine its own, differing width
according to the content that's in it.
You _could_ hard-code the width of all the cells to all be the
same, but then you lose the dynamically self-sizing behaviour that's
one of the most useful aspects of table-like layout.