SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 68
  1. #26
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    How do you have "nested tables served through CSS style" while keeping the source order semantic and logical?

    I'm confused.
    Because the HTML itself retains semantic (as long as you code it correctly and don’t get hooked up with divitis), even if you alter the physical viewpoint of the code using positioning in CSS (absolute, float, table or otherwise), the mark-up is still semantically correct (in terms of using the correct tags for the right job) and they are logically positioned within the document flow. The CSS tables will nest them within parent elements (by declaring them through the style as cells – and serving them in the visual box model as such) and perhaps position them differently, but the fact still remains that the HTML as it stands (unlike an HTML table) is using the correct source order with tags.

    Or perhaps I am putting what I am thinking across wrongly, lol

  2. #27
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah I still don't get it. I write in (what I think is) a proper source order, and then set the desired visual order using whatever tricks I think of/steal/copy. The few times I've used display: table, the elements needed to be in that exact order (the order of the "row"). So, none of that sidebar-wrapping stuff, or whatever.

    Esp with Firefox being such a pain with positioning and tables. I'd have to see a "css table" being used where it showed a different order than source to see what you meant.

  3. #28
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using CSS tables is okay if they can be applied to a logical source order. If you have to pervert the source order to make it work, then you shouldn't use CSS tables. But if the display order matches the source order, then it can be a convenient way to handle the layout.

    Semantic markup in a logical order must always be the foundation of a web document. Styling is applied on top of that. Limitations in what CSS can do and what browsers support may force us to add a few redundant elements (divs and spans, usually), but that's okay. Changing the content order to make it suit a certain type of display, however, is not okay. That's virtually as bad as using table markup in the first place.
    Birnam wood is come to Dunsinane

  4. #29
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This past week, i recently skimmed through Rachel Andrews book on CSS at Borders. I was surprised to read about the CSS-Table/Layout positioning information. I just skimmed through the book but i am familiar with XHTML in using divs to position, etc. This thread is informative. I was wondering if this approach is more 'official' or standardized within the W3C and/or everyone at Sitepoint? I will need to read this book.

  5. #30
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by webjames View Post
    This past week, i recently skimmed through Rachel Andrews book on CSS at Borders. I was surprised to read about the CSS-Table/Layout positioning information. I just skimmed through the book but i am familiar with XHTML in using divs to position, etc. This thread is informative. I was wondering if this approach is more 'official' or standardized within the W3C and/or everyone at Sitepoint? I will need to read this book.
    The key points regarding display:table are that it has been a part of the W3C CSS 2.1 standard for many years and that a few weeks ago the last of the major browsers started supporting it in their latest release (IE8). All the other major browsers have supported it for many years. The main reason for people not using it in those situations where it would be useful is that IE7 doesn't support it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #31
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The key points regarding display:table are that it has been a part of the W3C CSS 2.1 standard for many years and that a few weeks ago the last of the major browsers started supporting it in their latest release (IE8). All the other major browsers have supported it for many years. The main reason for people not using it in those situations where it would be useful is that IE7 doesn't support it.
    Thanks for the feedback Stephen. I'm gonna check out the book tomorrow.
    I'm just surprised about that and ok with letting go of the positioning code in XHTML.

  7. #32
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WereAllThieves View Post
    Hmmm. I tend to stay away from tables all together.
    That's reasonable at the moment with IE7 and earler not supporting them but once IE8 is the earliest version of IE in common use then CSS tables will be able to create true equal height columns the simplest possible way that it can be done in CSS.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #33
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to throw in another pro, table group values default to a shrink-wrapped height and width.

    And, another con, table group values default to a shrink-wrapped height and width.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #34
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^part of the goofy behaviour I usually want to avoid, or don't expect. Using it in forms taught me some of the pitfalls, in browsers that support it.

    It's still a hack-- we're using something designed to make an element look and act like a table (which sometimes we want), but only so height can act like width does in browsers. If I want something to look and act like a table while it's semantically not, display: table is perfect. If I only want 100% high columns I'd rather CSS supported it as well as it supports 100% width (the browser's doing goofy calculations for that as well, isn't it?).

  10. #35
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, {display: table | table-cell;} are there to make <table>, <td>, and <th> act as expected. The advantage of moving the presentation to css is that we can now use other values for those elements (and I'll admit to not knowing why anyone would want to), or apply the values to other elements.

    Synchronizing height is only one reason to use a table group value.

    They're also a means of enclosing float elements.

    In the 'sticky footer', using the table display method allows the footer height to be dynamic (set its height to 1px, and it will expand as needed for the content; all the while the main cell will adjust to accommodate).

    You can use it to vertically center both block and inline elements. (centering inline elements and centering the page)

    Have you ever tried to show poetry or verse on a page? Proper typography requires that it be preformatted, and either be left aligned and indented (simple enough), or centered on its longest line (a real PITA without the table group).

    Don't think of {display: table;} as applying to tables; think of it as the name of a presentation ruleset that can apply to anything, with all the advantages and gotchas that accompany any non-trivial property.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  11. #36
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When will IE8 become the common browser, currently IE6 still rules with the major and it is going to take a while before IE8 replace what ie6 is today.

  12. #37
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect it will take until the last win98 machines die. Neither IE7 nor Firefox3 will run on win98. Nor will XP or Vista run on those old machines. Don't expect those old machines to be replaced until they crap out. My mother, for example, is perfectly happy with her ca. 1999 Dell with 98se. It is perfectly capable of handling her web surfing, email, letter writing, banking, and card games. It is not capable of running a newer Win OS.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  13. #38
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i still see tons of people using xp and ie6
    ie8 will take over only after 2015

  14. #39
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    I suspect it will take until the last win98 machines die. Neither IE7 nor Firefox3 will run on win98. Nor will XP or Vista run on those old machines. Don't expect those old machines to be replaced until they crap out. My mother, for example, is perfectly happy with her ca. 1999 Dell with 98se. It is perfectly capable of handling her web surfing, email, letter writing, banking, and card games. It is not capable of running a newer Win OS.

    cheers,

    gary
    It will run Firefox 2 though which also supports CSS tables.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #40
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    It will run Firefox 2 though which also supports CSS tables.
    Yeah, but. FF3 is quite a step up from FF2, and FF3.5 is another major upgrade. As long as those old machines with Win98 hang around, we will need to carefully evaluate whether to ignore IE6; or FF2, for that matter.

    It is a Good Thing®, that MSFT is pushing IE8 through on Vista updates. (I have to be careful that I don't let it replace IE7 on one of my VBox Vistas.) I haven't a clue about XP's update thingy.

    I don't think it will be too long.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  16. #41
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I always ignore the automatic updates-- i don't need any of my testing tools accidentally replaced, and being on VB, any bugs/holes cannot get root access on the linux box.

    But MS is tricky (prolly a good thing): sometimes you go to shut down, and suddenly there's this button you're used to clicking but it really says "do updates and then shutdown?" that one's caught me before.

  17. #42
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    How do you have "nested tables served through CSS style" while keeping the source order semantic and logical?

    I'm confused.
    You don't. That's why I think using display:table for layout is one of the lamer ideas I've seen in years.

    One thing I *really* don't get. Several times more people browse with user agents that can't work with display: table than browse with javascript turned off, yet using javascript to compensate for browser ineptitude is bad while using display: table is good. Seems to me if one is bad, the other should be, too.

  18. #43
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Arlen View Post
    One thing I *really* don't get. Several times more people browse with user agents that can't work with display: table than browse with javascript turned off, yet using javascript to compensate for browser ineptitude is bad while using display: table is good. Seems to me if one is bad, the other should be, too.
    It depends. You can make a layout that displays adequately if table-related CSS properties aren't supported. That's progressive enhancement: a basic version that works for everyone, and then added benefits for those who can enjoy them.

    You can do the same with JavaScript, of course, but you often see pages that require JavaScript to work. That's bad style.
    Birnam wood is come to Dunsinane

  19. #44
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Where does it say that a web page MUST look identical in all browsers (and if it does then why doesn't your web page look the same in Nexus - originally known as World Wide Web - as it does in more modern browsers such as Netscape 1 and Firefox 3?)

    People usually only use ONE browser to access the web and so provided that the page looks reasonable and is usable for them they will be unaware that the page looks significantly different with lots more features in more modern browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  20. #45
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    Where does it say that a web page MUST look identical in all browsers (and if it does then why doesn't your web page look the same in Nexus - originally known as World Wide Web - as it does in more modern browsers such as Netscape 1 and Firefox 3?)

    People usually only use ONE browser to access the web and so provided that the page looks reasonable and is usable for them they will be unaware that the page looks significantly different with lots more features in more modern browsers.
    While this is true, you should take into account that depending on what kind of website you have, it could make a difference... For instance if you run a business and have a web application which renders differently between browsers, inconsistencies could occur based on technical support requests especially when many people who browse the web using the default browser have no clue what browser or version they are using, I once did some tech support where a person claimed their web browser was "google" (this was long before the days of chrome).

  21. #46
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I keep my clients' (or my boss') default browser in mind, knowing that most people don't look cross browser. But at times they do-- they go to show something from their site to someone else who is running another browser or another OS even. Then they care that it looks the same cross-browser!

  22. #47
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I found another use for display: table; It seems to make an element expand it's width to enclose it's children.

    This is very useful behavior to be able to control - Generally in a layout the outer elements control the widths of elements, however when you get down to small widths with variable content you run out of space. it's preferrable to push the wrapper width out and cause a horizontal scroll bar than have content hanging outside the box or inline scrollbars with overflow.

  23. #48
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I found another use for display: table; It seems to make an element expand it's width to enclose it's children.
    Yes the following all cause the parent to enclose it's children (such as floats):

    Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible'.

    http://www.w3.org/TR/CSS21/visuren.h...ock-formatting

  24. #49
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Those properties don't achieve what I am trying to describe. If the browser window is less than 800px the inner element sets the width of the outer.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
    <style type="text/css" media="screen">
    .outer {
    	display: table;
    	width: 100&#37;;
    	background: blue;
    	padding: 10px
    }
    .inner {
    	width: 800px;
    	height: 10px;
    	background: red
    }
    </style>
    </head>
    <body>
    <div class="outer">
    	<div class="inner"></div>
    </div>
    </body>
    </html>

  25. #50
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sorry mark, I thought you were talking about clearing floats but yes display;table will accommodate its content even if it exceeds the width and height you have set just like a normal table would.

    You can do something slightly similar with a widthless float but it's more work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
    <style type="text/css" media="screen">
    .wrap{
        background: blue;
        width:100&#37;;
    }
    .wrap:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .outer {
        background: blue;
        padding: 10px;
        float:left;
    }
    .inner {
        width: 800px;
        height: 10px;
        background: red
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <div class="outer">
            <div class="inner"></div>
        </div>
    </div>
    </body>
    </html>
    display:table mimics table behaviour so you will be able to use whatever properties tables had to your advantage (or detriment in some case if you didn't want content to expand).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •