SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bobby accessibility standards and XHTML + DHTML

    Hi All,

    We're quoting for a web development job where the client is stressing the need for a high degree of compliance with accessibility standards.

    We'd like to pitch for 'A' or 'Priority 1' Bobby compliancy (see http://bobby.watchfire.com/bobby/html/en/icon.jsp), which I understand is the basic (ie. not strictest) level.

    My quick questions:

    1. Our standard for coding all new sites is currently XHTML 1.0 transitional. Is this a good (the best?) base to work from to ensure at least a minimum of accessibility compliancy, or should we be aiming for a stricter flavour of XHTML?

    2. Does Bobby accessibility compliancy (at any level) immediately rule out DHTML menus?

    Thanks v. much for your feedback.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spaceman
    Hi All,

    We're quoting for a web development job where the client is stressing the need for a high degree of compliance with accessibility standards.

    We'd like to pitch for 'A' or 'Priority 1' Bobby compliancy (see http://bobby.watchfire.com/bobby/html/en/icon.jsp), which I understand is the basic (ie. not strictest) level.

    My quick questions:

    1. Our standard for coding all new sites is currently XHTML 1.0 transitional. Is this a good (the best?) base to work from to ensure at least a minimum of accessibility compliancy, or should we be aiming for a stricter flavour of XHTML?
    XHTML 1.0 Strict is probably the best way to go right now, but if for some reason you need Transitional (i.e. using target=_blank to open new-window links), then stick with it. The good thing about standards is that you can use one of many out there, as long as you stick to it, whether it's HTML 4.01 Strict, XHTML 1.1, whatever.
    Quote Originally Posted by spaceman
    2. Does Bobby accessibility compliancy (at any level) immediately rule out DHTML menus?
    Not if you do it right

  3. #3
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    To clarify - are you saying that mainstream DHTML menus which typically use a combination of javascript and CSS (such as hiermenus, coolmenus, milonic, etc.) haven't a hope in hades of being Bobby compliant at any level? No worries at all if this is the case - just need to clarify. That pure CSS menu system looks v. promising, and I'm quite happy for it only so show in CSS compliant browsers if that ensures accessibility.

    Thanks!
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    XHTML 1.0 Strict is probably the best way to go right now, but if for some reason you need Transitional (i.e. using target=_blank to open new-window links), then stick with it.
    I did not know that about the Strict DTD... Is there no option to open links in a new window using the Strict DTD?

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spaceman
    Thanks for your reply.

    To clarify - are you saying that mainstream DHTML menus which typically use a combination of javascript and CSS (such as hiermenus, coolmenus, milonic, etc.) haven't a hope in hades of being Bobby compliant at any level? No worries at all if this is the case - just need to clarify. That pure CSS menu system looks v. promising, and I'm quite happy for it only so show in CSS compliant browsers if that ensures accessibility.

    Thanks!
    A lot of those pre-made popup menu scripts are meant for table-based layouts, so you'd have to do some serious hacking to get those scripts into shape for any kind of accessibility compliance. It's far easier to go with a CSS popup method instead, although you can probably throw scripting in there to help it out. I just think that maintaining only CSS is easier in the long run than maintaining CSS and a script .
    Quote Originally Posted by Ikonified
    I did not know that about the Strict DTD... Is there no option to open links in a new window using the Strict DTD?
    There are ways to open new-window links, you just can't use target=_blank. The target attribute on links was meant for framed pages only; since XHTML has a Frameset DTD as well (where target is valid) and Transitional (where target is still allowed), Strict did away with it. If you need to open a new-window link with a Strict DTD, you have to use scripting.
    Code:
    <a href="mypage.html"
    onclick="window.open(this.href); return false;">Link</a>

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    There are ways to open new-window links, you just can't use target=_blank. The target attribute on links was meant for framed pages only; since XHTML has a Frameset DTD as well (where target is valid) and Transitional (where target is still allowed), Strict did away with it. If you need to open a new-window link with a Strict DTD, you have to use scripting.
    Code:
    <a href="mypage.html"
    onclick="window.open(this.href); return false;">Link</a>
    Wow... I feel completely idiotic right now!! I was reading the DTD, and it never crossed my mind that the alternative is to use scripting!! Thank you for opening my eyes!

    As for the CSS drop-down menus... The only problem is that if you're trying to achieve an aesthetic look about the site, non-CSS2 compliant browsers will not work, and the look/feel will be lost...

    Would using a browser detect and then choosing which menu to use be a viable solution, or does that defeat the purpose?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Wow... I feel completely idiotic right now!! I was reading the DTD, and it never crossed my mind that the alternative is to use scripting!! Thank you for opening my eyes!
    No problem! This also works for users w/scripting disabled, although the link will open in the same window.
    As for the CSS drop-down menus... The only problem is that if you're trying to achieve an aesthetic look about the site, non-CSS2 compliant browsers will not work, and the look/feel will be lost...
    Not quite. This works in IE6, which doesn't understand CSS2. It can be modified pretty easily to work with another menu instead of a <span> or an image.

    Also, when building an accessible site, the intended look still matters, but as long as the site degrades gracefully into older browsers (i.e. your content is still readable and the site is still usable), then you have succeeded in a much loftier goal than supposed "cross-browser compatibility".
    Would using a browser detect and then choosing which menu to use be a viable solution, or does that defeat the purpose?
    Yes, I think it defeats the purpose, especially since in CSS you can use different selectors that rule out various browsers. For example, the parent > child syntax would work for IE5/Mac, Opera, and Mozilla, but rules IE/Windows out, so that's a way not to need browser detection .

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    No problem! This also works for users w/scripting disabled, although the link will open in the same window.

    Not quite. This works in IE6, which doesn't understand CSS2. It can be modified pretty easily to work with another menu instead of a <span> or an image.

    Also, when building an accessible site, the intended look still matters, but as long as the site degrades gracefully into older browsers (i.e. your content is still readable and the site is still usable), then you have succeeded in a much loftier goal than supposed "cross-browser compatibility".
    That's a good point.. I'll have to take a look at the site... Is the code available for viewing?

    Quote Originally Posted by vgarcia
    Yes, I think it defeats the purpose, especially since in CSS you can use different selectors that rule out various browsers. For example, the parent > child syntax would work for IE5/Mac, Opera, and Mozilla, but rules IE/Windows out, so that's a way not to need browser detection .
    I've got quite a bit to learn on the CSS front... I'll have to look into those options. I'm trying to gather up some great CSS resources that deal with table-less designs, as well as complying with standards when designing... Any you can suggest?


    Thanks again!

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    That's a good point.. I'll have to take a look at the site... Is the code available for viewing?
    Eric Meyer's CSS code is freely available on http://www.meyerweb.com/ yes.

    Quote Originally Posted by Ikonified
    I've got quite a bit to learn on the CSS front... I'll have to look into those options. I'm trying to gather up some great CSS resources that deal with table-less designs, as well as complying with standards when designing... Any you can suggest?


    Thanks again!
    Start your journey here

    Other resources:
    http://www.tantek.com/CSS/Examples/boxmodelhack.html
    http://www.thenoodleincident.com/
    http://www.glish.com/css/
    http://www.bluerobot.com/

    There are more, but these should have you occupied for a while. Don't forget to go to http://www.w3.org/ and read the CSS1 and CSS2 technical specs. They're boring, but they explain more than I ever could.

    Finally, don't forget about SitePoint and SPF! There are a lot of us willing to help people learn CSS and XHTML.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Eric Meyer's CSS code is freely available on http://www.meyerweb.com/ yes.
    Thanks... I noticed right after I replied to your post... I'll have to have a play with that code!

    My biggest concern is with CSS positioning... How accurate will the position look in different browsers and resolutions? My understanding is that building fluid designs using CSS is possible... but how well are sites displayed when using CSS positioning in this fashion?

    Quote Originally Posted by vgarcia
    Start your journey here

    Other resources:
    http://www.tantek.com/CSS/Examples/boxmodelhack.html
    http://www.thenoodleincident.com/
    http://www.glish.com/css/
    http://www.bluerobot.com/

    There are more, but these should have you occupied for a while. Don't forget to go to http://www.w3.org/ and read the CSS1 and CSS2 technical specs. They're boring, but they explain more than I ever could.

    Finally, don't forget about SitePoint and SPF! There are a lot of us willing to help people learn CSS and XHTML.
    Ahh... yes! A List Apart... one of my favourite resources... I guess it's reading time for me today!

    Thanks... I'll keep that in mind. You've definitely been very helpful... I am now going to move towards standards compliance... XHTML/CSS is definitely the best way to go about things... Even HTML4.01 is a good alternative, as long as it complies!

    Thanks again... I really appreciate it!

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Thanks... I noticed right after I replied to your post... I'll have to have a play with that code!

    My biggest concern is with CSS positioning... How accurate will the position look in different browsers and resolutions? My understanding is that building fluid designs using CSS is possible... but how well are sites displayed when using CSS positioning in this fashion?
    See for yourself. There are some workarounds that you'll have to use (mostly for IE5/Windows, which doesn't follow the CSS1 spec for certain things), and that is explained in the "Box Model Hack" link in my sig.

    Quote Originally Posted by Ikonified
    Ahh... yes! A List Apart... one of my favourite resources... I guess it's reading time for me today!
    Yeah, that article I liked to will take you a while to read, and you will most likely have to read it a few times before things start making sense. I think I have read that article myself at least 3-4 times .
    Quote Originally Posted by Ikonified
    Thanks... I'll keep that in mind. You've definitely been very helpful... I am now going to move towards standards compliance... XHTML/CSS is definitely the best way to go about things... Even HTML4.01 is a good alternative, as long as it complies!
    The standard you choose is not nearly as important as whether or not you comply to it. If there's a DOCTYPE for the standard you're using and your code is valid, then browsers will be able to read it for some time to come.
    Quote Originally Posted by Ikonified
    Thanks again... I really appreciate it!
    Glad to help!

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    See for yourself. There are some workarounds that you'll have to use (mostly for IE5/Windows, which doesn't follow the CSS1 spec for certain things), and that is explained in the "Box Model Hack" link in my sig.
    Ahh... very nice! Now off hand, these sites are using percentage-based position (not sure if there's a better term for it, relative?), right? Is that the best way of achieving a fluid layout?

    I'll take a look at the Box Model Hack.. The site wasn't loading up for me, so I'll try again in a bit...

    Quote Originally Posted by vgarcia
    Yeah, that article I liked to will take you a while to read, and you will most likely have to read it a few times before things start making sense. I think I have read that article myself at least 3-4 times .
    Hehehe... You're not alone on that one!

    Quote Originally Posted by vgarcia
    The standard you choose is not nearly as important as whether or not you comply to it. If there's a DOCTYPE for the standard you're using and your code is valid, then browsers will be able to read it for some time to come.

    Glad to help!
    Yeah... That's sort of the thought-process I've adopted in the last couple of weeks... That making sure your document is VALID is much more important than deciding which standard to code for.


  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Ahh... very nice! Now off hand, these sites are using percentage-based position (not sure if there's a better term for it, relative?), right? Is that the best way of achieving a fluid layout?
    The best term for it is "fluid layout". However, you can see some fixed-width layouts at http://www.glish.com/css/ as well .
    Quote Originally Posted by Ikonified
    I'll take a look at the Box Model Hack.. The site wasn't loading up for me, so I'll try again in a bit...
    Try using a browser other than IE. It should work .

    Quote Originally Posted by Ikonified
    Hehehe... You're not alone on that one!
    I told you!
    Off Topic:

    I rather like Zeldman's remarks during that article, like "you may want to go out and sniff some glue, then read this paragraph again"

    Quote Originally Posted by Ikonified
    Yeah... That's sort of the thought-process I've adopted in the last couple of weeks... That making sure your document is VALID is much more important than deciding which standard to code for.

    Yep

  14. #14
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    without reading the copious amount of replies to this thread, i'll pipe in and say that Bobby is not the be-all-end-all of accessibility testing. i've created sites that are perfectly compliant with the letter and spirit of the WAI WCAG, but bobby still complains. accessibility cannot be mechanically measured (e.g. Bobby checks that all images have an ALT attribute...but can't check if the ALT makes sense. you can even fool it by having empty ALTs everywhere).

    as for XHTML vs HTML issue: you can produce perfectly accessible pages in HTML 4.0. there is no real need for XHTML (transitional or strict) to fulfill accessibility requirements. XHTML enforces separation of style and content, but that was already recommended in HTML 4.0. the only advantage with XHTML is that, if you run it through the validator, some (or most, if you go for strict) presentational markup will throw up errors.

    and yes, you can use DHTML menus, as long as the navigation still functions if javascript is disabled/not present.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You explain the Bobby information better than I ever could .

    Quote Originally Posted by redux
    without reading the copious amount of replies to this thread, i'll pipe in and say that Bobby is not the be-all-end-all of accessibility testing. i've created sites that are perfectly compliant with the letter and spirit of the WAI WCAG, but bobby still complains. accessibility cannot be mechanically measured (e.g. Bobby checks that all images have an ALT attribute...but can't check if the ALT makes sense. you can even fool it by having empty ALTs everywhere).

    as for XHTML vs HTML issue: you can produce perfectly accessible pages in HTML 4.0. there is no real need for XHTML (transitional or strict) to fulfill accessibility requirements. XHTML enforces separation of style and content, but that was already recommended in HTML 4.0. the only advantage with XHTML is that, if you run it through the validator, some (or most, if you go for strict) presentational markup will throw up errors.

    and yes, you can use DHTML menus, as long as the navigation still functions if javascript is disabled/not present.

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    The best term for it is "fluid layout". However, you can see some fixed-width layouts at http://www.glish.com/css/ as well .

    Try using a browser other than IE. It should work .


    I told you!
    Off Topic:

    I rather like Zeldman's remarks during that article, like "you may want to go out and sniff some glue, then read this paragraph again"


    Yep
    Yup... I just read over the Journey's articles... They are very-well written, and have shed some light onto the whole CSS-based designs. I am going to go home tonight, and try some experimental designs out!

    One thing I found confusing (as if I didn't know it was coming!) was the part about how the percentage you choose for your DIVs is not the actual value until the padding, etc. is added:

    Off Topic:


    Actually, we determined that the ideal width was even narrower than that. In monitor settings below 800 x 600, a menu area of 25% was insufficiently wide. As a result, menu items would slip down to the bottom of the page (screenshot). The ideal width for the content area turned out to be 52%. Remember, that's 52% before the padding and margins are added. You may want to go get drunk for a while, then come back and try this again.


    I don't fully understand how you go about adding the padding and everything else to that figure!?

  17. #17
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Yup... I just read over the Journey's articles... They are very-well written, and have shed some light onto the whole CSS-based designs. I am going to go home tonight, and try some experimental designs out!

    One thing I found confusing (as if I didn't know it was coming!) was the part about how the percentage you choose for your DIVs is not the actual value until the padding, etc. is added:
    Yes it gets confusing at times, especially if you're working with percentages and pixels mixed together (i.e. a 50% wide div with a 5px border).
    Quote Originally Posted by Zeldman
    Off Topic:


    Actually, we determined that the ideal width was even narrower than that. In monitor settings below 800 x 600, a menu area of 25% was insufficiently wide. As a result, menu items would slip down to the bottom of the page (screenshot). The ideal width for the content area turned out to be 52%. Remember, that's 52% before the padding and margins are added. You may want to go get drunk for a while, then come back and try this again.
    Exactly what I meant.
    Quote Originally Posted by Ikonified
    I don't fully understand how you go about adding the padding and everything else to that figure!?
    If you're doing a fully fluid layout it's not much of a problem, since by default a <div> is 100% wide. You can do something like this:
    Code:
    div {
       margin: 5%;
       padding: 10px;
       border: 1px solid black;
    }
    and your <div> will work around those figures automagically without needing a width. I personally tend to stick with "half-fluid" layouts, i.e. maybe the menu is a fixed width of 200px, but the actual body portion of my pages will take up the rest of the available screen, and the header and footer are 100% wide.

    The key here is: the width you specify to CSS will be the width of your content, and padding, border, and margins are added to that width to give you your final figure. This page on MSDN actually does a pretty good job of explaining graphically how both the IE5 box model and the "proper" CSS box model work. It may help you understand what you have to do to get your pages working across all browsers like IE5, and will help you get a better understanding of why the Box Model Hack (link is in my sig) is needed.

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're doing a fully fluid layout it's not much of a problem, since by default a <div> is 100% wide. You can do something like this:
    Code:
    div {
       margin: 5%;
       padding: 10px;
       border: 1px solid black;
    }
    and your <div> will work around those figures automagically without needing a width. I personally tend to stick with "half-fluid" layouts, i.e. maybe the menu is a fixed width of 200px, but the actual body portion of my pages will take up the rest of the available screen, and the header and footer are 100% wide.

    The key here is: the width you specify to CSS will be the width of your content, and padding, border, and margins are added to that width to give you your final figure. This page on MSDN actually does a pretty good job of explaining graphically how both the IE5 box model and the "proper" CSS box model work. It may help you understand what you have to do to get your pages working across all browsers like IE5, and will help you get a better understanding of why the Box Model Hack (link is in my sig) is needed.
    I'll have to read through that article... My concern is when dealing with layouts that make use of multiple columns... I want to try a layout that has a header, 3 content columns, and then a footer... My worry is that the content columns will cover the footer if they become too long. There may be other problems that can arise from that layout too... I read Zeldman's "Journey" article... but it still left quite a few questions unanswered.

  19. #19
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    I'll have to read through that article... My concern is when dealing with layouts that make use of multiple columns... I want to try a layout that has a header, 3 content columns, and then a footer... My worry is that the content columns will cover the footer if they become too long. There may be other problems that can arise from that layout too... I read Zeldman's "Journey" article... but it still left quite a few questions unanswered.
    I point people to that article as a good starting point, so one can see the inherent frustration involved in going from a table-based layout mindset to a CSS mindset. It's not meant to solve all problems; rather, I link to it because it's a reassurance for most people that even the most visible advocate for Web standards had trouble with it too .

    As for your layout, try something like this:
    CSS
    Code:
    /*implement box model hack for IE5 support if you need it*/
    #header {
       height: 80px;
    }
    #leftcol {
       float: left;
       width: 200px;
    }
    #rightcol {
      float: right;
      width: 200px;
    }
    #contentcol {
      margin: 0px 200px;
    }
    #footer {
      height: 80px;
    }
    body {
      margin: 0px;
      padding: 0px; /*for Opera*/
    }
    HTML:
    HTML Code:
    <!--add your DOCTYPE stuff here, I'm just helping out with the body of the document :)-->
    <body>
    <div id="header">
    <p>header</p>
    </div>
    <div id="leftcol">
    <p>left column</p>
    </div>
    <div id="rightcol">
    <p>right column</p>
    </div>
    <div id="contentcol">
    <p>content goes here :)</p>
    </div>
    <br clear="all" />
    <div id="footer">
    <p>&copy; footer</p>
    </div>
    </body>
    Hopefully this will help your journey .

  20. #20
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    I point people to that article as a good starting point, so one can see the inherent frustration involved in going from a table-based layout mindset to a CSS mindset. It's not meant to solve all problems; rather, I link to it because it's a reassurance for most people that even the most visible advocate for Web standards had trouble with it too .
    Hehehe... I can sympathize with him! It surely isn't an easy task, but it's definitely a move in the right direction!

    Quote Originally Posted by vgarcia
    As for your layout, try something like this:
    CSS
    Code:
    /*implement box model hack for IE5 support if you need it*/
    #header {
       height: 80px;
    }
    #leftcol {
       float: left;
       width: 200px;
    }
    #rightcol {
      float: right;
      width: 200px;
    }
    #contentcol {
      margin: 0px 200px;
    }
    #footer {
      height: 80px;
    }
    body {
      margin: 0px;
      padding: 0px; /*for Opera*/
    }
    HTML:
    HTML Code:
    <!--add your DOCTYPE stuff here, I'm just helping out with the body of the document :)-->
    <body>
    <div id="header">
    <p>header</p>
    </div>
    <div id="leftcol">
    <p>left column</p>
    </div>
    <div id="rightcol">
    <p>right column</p>
    </div>
    <div id="contentcol">
    <p>content goes here :)</p>
    </div>
    <br clear="all" />
    <div id="footer">
    <p>&copy; footer</p>
    </div>
    </body>
    Hopefully this will help your journey .
    Thanks Vinnie! I was thinking something along those lines... But I'm still trying to get a good understanding of the "float" property... One I don't quite understand is the "clear" property? Is that the same thing as "transparent"?

    Thanks... I'll give it a try tonight!

  21. #21
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Thanks Vinnie! I was thinking something along those lines... But I'm still trying to get a good understanding of the "float" property... One I don't quite understand is the "clear" property? Is that the same thing as "transparent"?
    No actually; clear means to "clear out" any content to the left, right, or both. It basically forces any content in the direction you specify to move to the next "line". Admittedly, my explanation is a bit rough, so if anyone has something to add to it feel free.
    Quote Originally Posted by Ikonified
    Thanks... I'll give it a try tonight!
    It's Friday night! Go do something else besides coding!

  22. #22
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    No actually; clear means to "clear out" any content to the left, right, or both. It basically forces any content in the direction you specify to move to the next "line". Admittedly, my explanation is a bit rough, so if anyone has something to add to it feel free.
    Okay... I think I get it... Similar to when you throw an image inside a cell and force it to align left... Then all text will wrap around the bottom of the image?

    Quote Originally Posted by vgarcia
    It's Friday night! Go do something else besides coding!
    Hehehe... Don't you worry! Fortunately for me, I'm heading home soon... The night is still young! And you said it ! I'll need it for sure after reading all these articles!

    Another quick thing that popped into my head (maybe I should go sniff the glue like Zeldman mentioned!)... I've heard about the box-hack, and I've also heard about offering different style sheets to cater to the different browsers... What is the "standard" way of doing it now? Or are both methods employed in this case?

    Thanks again! And have a great weekend!

  23. #23
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ikonified
    Another quick thing that popped into my head (maybe I should go sniff the glue like Zeldman mentioned!)... I've heard about the box-hack, and I've also heard about offering different style sheets to cater to the different browsers... What is the "standard" way of doing it now? Or are both methods employed in this case?
    Use the box model hack, linked in my sig. Sending different stylesheets based on the browser used defeats the purpose of Web standards if you ask me. There are clever workarounds to browser issues if you just use standard CSS (i.e. IE and Mozilla use margin for the <body> tag, while Opera uses padding...see my code example earlier; I still get all browsers and don't have to check user-agents or object model support ).

  24. #24
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well, out of preference I use XHTML 1.1 for non framed pages although I would apply XHTML 1.0 Transitional where I feel there might be more major browser issues with the syntax used.

    I totally agree Bobby is just an automaton; personally I don't aim for Bobby Approval myself since it tends to be based upon higher-level guidelines.

  25. #25
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xhtmlcoder
    Well, out of preference I use XHTML 1.1 for non framed pages although I would apply XHTML 1.0 Transitional where I feel there might be more major browser issues with the syntax used.

    I totally agree Bobby is just an automaton; personally I don't aim for Bobby Approval myself since it tends to be based upon higher-level guidelines.
    I agree. I haven't really tried validating my site to any Bobby or accessibility standards. I've just been using common sense and trial and error when creating and testing, i.e. navigating my site with images disabled, keyboard-only navigation, etc.


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
  •