SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Table Problem (doesn't work in 800X600 resolution)

    Hi

    I can't get a table on a page to view correctly in 800X600 resolution.
    Any help or advice much appreciated

    Cheers
    Andrew
    Last edited by Andre_Sam; Jun 23, 2006 at 13:40.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh, perhaps because it has 7 columns and only half the page width to fit into??

    Either decide whether some of the data can be removed, or have a look at resolution-dependent layout (a Javascript technique that changes the layout when the browser is resized below a certain width).

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BB
    Your answer suggests it's impossible to fit 7 or more columns within an area that size which surely isn't the case?
    I can't remove any data nor add any more JS to my source code
    Anyone else please?

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andre_Sam
    Your answer suggests it's impossible to fit 7 or more columns within an area that size which surely isn't the case?
    Think about it - at 800x600 your table has approximately 340px space available to it. For 7 columns, that is less than 50px per column, which is not nearly enough space for the words that you are trying to fit into the headings.

    It's not going to fit.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Matthew said theres just not enough room. You could use abbreviations in the header and then supply the full details in a tittle tip (or perhaps a key at the top as well).

    Code:
    	 <td title="Non Domestic District Rate Poundages">N. D. D. R. P.</td>
    There must be a space between each letter otherwise it won't wrap.

    Not as readable but should do the job.

    (BTW The header row would be be better using th tags and not td tags and then you could style it without using any classes.)

  6. #6
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you opt to use abbreviations as Paul suggested, you might want to wrap them in acronym or abbreviation tags:

    HTML Code:
    <acronym title="Non Domestic District Rate Poundage">NDDRP</acronym>
    <abbr title="Non Domestic District Rate Poundage">NDDRP</abbr>
    I can't tell you which one to use, both are very similar. And of course, don't forget to explain them beneath the table as well.

    Also, one addition to Paul's comment regarding the use of th instead of td for the header cells, this is also an accessibility issue, you might also want to give your first column those th tags. If you want to know more about it, this thread might be of interest: http://www.sitepoint.com/forums/showthread.php?t=395296
    Dan G
    Marketing Strategist & Consultant

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by c2uk
    If you opt to use abbreviations as Paul suggested, you might want to wrap them in acronym or abbreviation tags:
    Good idea

    The only problem is that IE won't show the title attribute when used on an abbreviation (another bug) so you would need to use the acronym tag instead (although I think abbr is the more semantically correct)

  8. #8
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Good idea

    The only problem is that IE won't show the title attribute when used on an abbreviation (another bug) so you would need to use the acronym tag instead (although I think abbr is the more semantically correct)
    Thanks for the Info. I thought I remembered that there was something about it why the acronym tag is used more commonly even though the abbr tag is for many things more semantically correct but I couldn't point my figure as to what it was, hence my sentence beneath the code.
    Dan G
    Marketing Strategist & Consultant

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes Ie manages to get even the simplest things wrong

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for all the help folks.
    I've taken your collective advice, abbreviated my column headings, applied acronym tags and table headers but it's still to big when viewed in 800 X 600
    Last edited by Andre_Sam; Jun 25, 2006 at 05:05.

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ?? give the page a min width, this maybe get's a hor. scroll bar in 800, but the content needs no change

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "give the page a min width, this maybe get's a hor. scroll bar in 800, but the content needs no change"

    How do give the page a minimum width please?
    Also no way round the ugly scroll bar?

  13. #13
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andre_Sam
    "give the page a min width, this maybe get's a hor. scroll bar in 800, but the content needs no change"

    How do give the page a minimum width please?
    Also no way round the ugly scroll bar?
    Hello

    dirty
    body{width:1000px;margin:0 auto;}

    You don't alway's get what you want, you get what you need MJ

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Can I add this to the page code so it only affects this one page or must it go in the Stylesheet and affect the whole site?

    If it can be isolated to the page, how do I get the revision in body style to overrule the global CSS, which it takes it's style from currently?

  15. #15
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes add it to the page it needs or use a seperate small external sheet

    Do you have width :1000px;margin:0 auto; in your sheet ?, if not it simply ads to the existing css

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I've taken your collective advice, abbreviated my column headings, applied acronym tags and table headers but it's still to big when viewed in 800 X 600
    Only Just #

    It now scales down to about 820px. You have about 12px of space outside the table that you could eliminate if you really wanted to but perhaps a min-width expression would be useful here.

    See the faq on min-width and you will see an expression that you can use for ie and you can use min-width on the body for other browsers. If you only want it on this page then apply a class to the body tag in this page and use that to target the single page body.min (min-width:823px;width:expression etc...) See faq for details.

  17. #17
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andre_Sam
    Many thanks for all the help folks.
    I've taken your collective advice, abbreviated my column headings, applied acronym tags and table headers but it's still to big when viewed in 800 X 600
    http://www.treehousewebbo.f2s.com/poundages.html
    Since not all users know about the acronym, some might find out by hovering, but I would still add the full text below the table as well, e.g.

    N. D. D. R. P. = Non Domestic District Rate Poundage
    N. D. R. R. P. = Non Domestic Regional Rate Poundage

    I still would consider improving the accessibility of your table even more by providing headers to the first column, e.g.
    HTML Code:
              <tr>
                <th scope="row">Antrim</th>
                <td>21.17</td>
                <td>28.17</td>
                <td>49.34</td>
                <td>150.40</td>
                <td>198.17</td>
                <td>348.57</td>
              </tr>
    Dan G
    Marketing Strategist & Consultant

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ctuk advice heeded.

    I've read the FAQ on min-width (below) but I'm lost.
    What with applying to only this one page and hiding the comments inside expressions to allow for validation.
    Can anyone please steer me through this?
    http://www.sitepoint.com/forums/show...1&postcount=25
    Last edited by Andre_Sam; Jun 25, 2006 at 05:06.

  19. #19
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andre_Sam
    - thumbs up.

    Now with your min-width problem, if I understand everything correctly, all you need to do is put this code in your header on this particular page and change the 740 to whatever px width works for you, and then all is fine (correct me if I'm wrong Paul or whoever understands this stuff better):

    HTML Code:
    <style type="text/css">
    body {
        min-width: 740px;
    }
    <!--[if gte IE 5]>
    body {
        width:expression( documentElement.clientWidth < 740 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 740 ? "740" : "auto") : "740px") : "auto" );
    }
    <![endif]-->
    </style>
    Dan G
    Marketing Strategist & Consultant

  20. #20
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First complication. I have a Dreamweaver template applied site-wide so I can't see how to apply to just the header of one page as the header is non-editable except through the template which will apply changes globally.

    My question is this. Does it matter if I apply Site-wide? Will this create any accessibility problems?

    Just seen ctuks new post above and had made a few changes prior to this.
    With these the Site IS now viewable @ 800 X 600 in Firefox but still not IE.

    Can someone please advise any corrections I need to make to my code?

  21. #21
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have this in your header:
    HTML Code:
    <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    Between those two tags, you can put it:
    HTML Code:
    <!-- InstanceBeginEditable name="head" -->
    <style type="text/css"> body { min-width: 740px; } <!--[if gte IE 5]> body { width:expression( documentElement.clientWidth < 740 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 740 ? "740" : "auto") : "740px") : "auto" ); } <![endif]--> </style>
    <!-- InstanceEndEditable -->
    You could add it to your main template if that's possible, I don't think there is any accessibility issue.

    I've taken Paul's code you linked to, so I have no idea what might be wrong with it.

    I have implemented one of these expressions slightly different in my page and it seems to work there. If Paul doesn't come up with a solution, I post mine.

    And my username is c2uk
    Dan G
    Marketing Strategist & Consultant

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    c2uk seems to have given you all the correct advice except that I would separate the ie conditonal comments from the stylesheet just to keep things neater.

    Create an editable region in the head of the document or use the one that c2uk already pointed to that you seem to have in place already.

    Then just insert this code between the editable region on that page only.

    Code:
    <style type="text/css">
    body {min-width: 850px;}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    	width:expression( documentElement.clientWidth < 850 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 850 ? "850" : "auto") : "850px") : "auto" );
    }
    </style>
    <![endif]-->
    I've tested locally (with your page )and this works with no problems.

    Hope it helps

  23. #23
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    c2uk seems to have given you all the correct advice except that I would separate the ie conditonal comments from the stylesheet just to keep things neater.
    Might this be the reason why it was not working? In my own websites where I use conditional comments, I normally do it the way you did it now, just thought it might be a quicker solution to not have multiple <style> tags.
    Dan G
    Marketing Strategist & Consultant

  24. #24
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul and c2uk
    All working fine now @ both 800 X 600 and normal resolutions, many thanks.
    One minor thing though c2uk, your recommendation with regard to Table Headers is not validating and throwing up the following errors:-

    Error Line 221 column 15: document type does not allow element "th" here.
    <th><acronym title="Non Domestic Regional Rate Poundage">N. D. R. R.

    Error Line 222 column 15: document type does not allow element "th" here.
    <th><acronym title="Non Domestic Rate Poundage">N. D. R. P.</acron..

    Error Line 223 column 15: document type does not allow element "th" here.
    <th><acronym title="Domestic District Rate Poundage">D. D. R. P.</ac

    Error Line 224 column 15: document type does not allow element "th" here.
    <th><acronym title="Net Domestic Regional Rate Poundage">N. D. R. R.

    Error Line 225 column 15: document type does not allow element "th" here.
    <th><acronym title="Domestic Rate Poundage">D. R. P.</acronym>

    Error Line 226 column 14: end tag for "th" omitted, but OMITTAG NO was specified.
    </tr>

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You've missed the closing th tags on the header row:

    Code:
    		  Poundages 2006/2007
    		  </caption>
    		  <tr>
    			<th>&nbsp;</th>
    			<th><acronym title="Non Domestic District Rate Poundage">N. D. D. R. P.</acronym></th>
    			<th><acronym title="Non Domestic Regional Rate Poundage">N. D. R. R. P.</acronym></th>
    			<th><acronym title="Non Domestic Rate Poundage">N. D. R. P.</acronym></th>
    			<th><acronym title="Domestic District Rate Poundage">D. D. R. P.</acronym></th>
    			<th><acronym title="Net Domestic Regional Rate Poundage">N. D. R. R. P.</acronym></th>
    			<th><acronym title="Domestic Rate Poundage">D. R. P.</acronym></th> 
    		  </tr>
    		  <tr>


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
  •