1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

width of table not *% in chrome

Discussion in 'CSS' started by ForumSeeder, Mar 24, 2010.

  1. #1
    This is a CSS related question, but applied to tables
    (I know fans of css hate tables, but I use css and tables in combination for 'ease' / 'habit')

    This is giving me a head ache, and it seems very minor, but it's been bugging me.
    The problem is, no matter how I define the table width (with css or directly), I cant figure out how to expand the table to take up the width of the page + maintain the table margins in Google Chrome.

    I'm seeing this for one of the pages I've created. It's an article page where you can post comments at the bottom. The comment fields look like they are relative to the text they contain in Google Chrome (but look fine in FireFox /IE)

    The page is: qualityposts.com/ForumPostExchange.php
    (I've added an example where you can see what I mean... right at the bottom of the page)
    SEMrush
    The way I'm using these tables:

    <table class="blaX"  border="0" cellpadding="2" cellspacing="2"> 
    <tbody>
      <tr>
             <td class="blaY" width="100%"  colspan="2"></td>
             </tr>
       <tr>
              <td class="blaZ" width="62"><center><img src="blaA"></center></td>
              <td class="blaZ" width="100%"> </td>
       </tr></tbody></table>
    
    HTML:
    If I set the table width to %*, it makes no difference in chrome!

    If I try to define the table width in the external css to 100% then the table goes over the edge (the margins aren't taken into account)

    If I set the table width to 100% then

    (I would have thought setting
    <td class="blaZ" width="100%"> would have force the content for this table to be 100% in width)


    Any suggestions?
     
    ForumSeeder, Mar 24, 2010 IP
    SEMrush
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    No. Fans of CSS don't hate tables. They hate tables being used improperly, like for layout. People who don't know CSS use tables cause they haven't figured out how to do it the right way yet but those of us who use CSS don't hate tables. They have a very important place in HTML.
    Or Opera or Firefox or Safari or....
    If you want to set it to 100%, 100% of what? It's always the parent. But what is the parent set to?
     
    drhowarddrfine, Mar 24, 2010 IP
  3. ForumSeeder

    ForumSeeder Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I knew I was going to get some '100% of what', or 'using CSS incorrectly' answer. That's why I preloaded the question with "I know fans of css hate tables" and "width of table not *% "

    If everyone knew how to use things correctly, there would be no need for questions and certainly no need for answers on a forum. But people don't always know, and I'm no exception to this rule. So we live in a society where we ask people questions when we get stuck in the hope that someone might be able to point us in the correct direction

    I’m shameful to admit, pointing me to the HTML basics would be insulting, but probably reasonably justified in this case.

    I've seen it working fine in FireFox, although I do expect Safari will have the same issue

    I'm NOT TRYING TO SET THE TABLE TO 100% OF ANYTHING - The 100% was a test to show what happens when you set it to 100%, setting a table to 100% would be incorrect for me to do , since I want to take into account margins.

    I want it to fill the given table up to the current TD container but not 100% (but *%, which I don’t think this is possible with tables and css), I want to fill it to the end but also take into account the margins of the table I've set in the CSS :

    tborderComment{background:#E3E3F4;color:#000000;border:1px solid #0a188C;margin:8px 8px 3px 3px;padding:0px;}
    Code (markup):
     
    Last edited: Mar 25, 2010
    ForumSeeder, Mar 25, 2010 IP
  4. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,986
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #4
    If the table data is set to 100% and is inside another table it will only become the full width of the table it is inside of, not the whole page. That is why the other person mentioned "parent".
     
    Blue Star Ent., Mar 25, 2010 IP
  5. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,986
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #5
    By the way, use .CSS and the stylesheet to set the width of things, not in an HTML file. Good luck.
     
    Blue Star Ent., Mar 25, 2010 IP
  6. ForumSeeder

    ForumSeeder Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm A fool, drhowarddrfine was absolutely correct.

    If you stick the table in a container (for instance a div), where the div contains spacing / margins. Then seeing the table inside this to 100% will maintain spacings/ margins

    Thanks drhowarddrfine
     
    ForumSeeder, Mar 25, 2010 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #7
    Just as we hate DIV's with classes for headings, double or triple breaks instead of paragraph tags, presentational classnames for the application of color, unneccessary DIV for things that could be applied to either the child or parent elements, or the dozen other outdated 1997 style markup techniques that frankly, ForumSeeder's page is saddled with... Though I suppose that goes with the invalid tranny doctype, failure to open HTML or HEAD, use of outdated markup methodologies and tags/attributes that have no place in a properly written website after 2001.

    Much of the problem stems from the use of colspans - more disturbing since said elements should either be "th with colspan" or CAPTION if you are going to use a table - NOT that anything on that page from a semantics point of view should be a table. (though I would be tempted to resort to it for the vertical alignment on the right column elements since CSS still sucks donkey at that)

    That's a question SO many people fail to ask regardless of the subject - and we're not just talking layouts. Percentage of what? Font-size? Width? Quijada's. Not to beat a dead horse (too late) but you see that all the time with browser usage statistics... dropping from 92% share to 54% share doesn't mean you've lost anything if the pool has grown in size 60%.

    When you see percentage, ALWAYS ask "percentage of what?"
     
    deathshadow, Mar 27, 2010 IP
  8. ForumSeeder

    ForumSeeder Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Strange, I would have agreed with you on this in the past, I use to open html and head all the time (in your words "97 style"). But the Google speed tool for perfomance gave me a document that no longer does this . (I'll trust Google opinions over yours, but you're still welcome to have one)
    Critics are welcomed with open arms ;)

    Instead, Google actually prefers to define html in the doc type, and not to define head at all.. .Only open body. I was mythed too! but this was the recommended layout according the Google tools. Before I used these tools, I was opening head, opening html and using a different doc type (I think the first page still does it)

    You're right about the triple breaks though, I need to do something about that. As for th / captions.. if I can get away not using them, I just dont see the point for now. These things are at bottom of my very long list in priority right now. I need to work on other areas of performance, since the page loading times are shocking.

    [I will of course still test this on all modern browsers, and work on the tones of validation areas you mentioned deathshadow... once I get the chance, thanks]
     
    Last edited: Mar 28, 2010
    ForumSeeder, Mar 28, 2010 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #9
    It's technically optional in Tranny doctypes - but since you shouldn't be using tranny doctypes in the first place...

    Besides, I trust the W3C more than I do google when it comes to what is proper HTML and what isn't...
     
    deathshadow, Mar 28, 2010 IP
  10. ForumSeeder

    ForumSeeder Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    [On validation the W3C does not complain about not opening html or head for this doctype]

    Hmm, what's wrong with transitional. It's not the most up to date, but then I'm not trying to do anything that need's the most up-to-date HTML. Browsers aren't all of a sudden going to stop supporting this (at least probably not in our life times), and the effort of re-writing this page is just not worth it

    What's the benefit of using strict HTML, if I can carry on using depreciated methods that will be supported as long as I use the correct doctype?

    Even '95 HTML 2 is widely supported by all browsers, so Transition 4 (or 4.01) is hardly going to affect anything. I'm interested in usability and performance, providing something that is useful, if it looks good, then great. As for using the most up-to-date/strict HTML practices... I really couldn't give a damn, unless you can provide a reason why I should do this.

    Is there something that strict HTML 4, or any other Doctype provides that you suggest that I need?

    Does transitional have a negative affect for something that I am unaware of?

    I've just simply been using transitional to support old HTML tags/styles, but I don't see a disadvantage of this. Am I blissfully unaware of something wrong with the doctype transitional?
     
    Last edited: Mar 31, 2010
    ForumSeeder, Mar 31, 2010 IP
  11. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,986
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    160
    #11
    Using xhtml is beneficial for mobile browsers to parse your page. If I remember right, xhtml was
    selected for the upcoming mobile deluge.

     
    Blue Star Ent., Mar 31, 2010 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    There is no such thing as transitional in HTML5 which parts of now work in browsers. In fact, in HTML5, there is no such thing as "deprecated". Either an element is part of the spec or it's not and you won't find <font> in HTML5.

    I'm commenting on this without re-reading the original post or this thread. Your statement is correct but new pages should never use deprecated markup in the first place. There are far better and easier ways to do things without them so why would you? There are far better and easier ways to do things.

    For example, using the <font> element in the HTML makes it difficult to change the font styling, or move it to other text, but if it were in CSS instead, it would be a matter of editing one line.
     
    drhowarddrfine, Mar 31, 2010 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,421
    Likes Received:
    1,889
    Best Answers:
    246
    Trophy Points:
    515
    #13
    Smaller files, simpler maintenance, better search engine rankings, better accessibility across all browser types...

    I mean look at the code for that page - it's a train wreck of tables for layout - and worse tables for no reason even when using tables for layout.... Maximum, using tables for layout there is no reason for the page to have more than seven - one for the three column layout, one for each of those sidebar spaced images. You have TWENTY. Really, the layout should use none...

    The formatting is inconsistent making even the simplest of edits nigh impossible, the classes are all presentational, there's little to no separation of presentation from content begging the question why even BOTHER with CSS in the first place, with tons of invalid properties, unneccessary elements, and non-semantic markup.

    ALIGN? Doesn't belong in the markup, we have CSS for that. CENTER? Doesn't belong in the markup, we have CSS for that; and a strict doctype will constantly remind you "Hey, don't do that!"

    Mind you, a lot of this isn't just about 'invalid markup' or transitional doctypes - it's about using HTML for how it's SUPPOSED to work instead of how your shit WYSIWYG editors and 1990's coders vomited up code and called it websites.

    Let's just take a small section of said site as an example:

    
    <br><center><div class=textTitle ><a name=Forum-Post-Exchange>Forum Post Exchanging at Quality Posts</a></div></center><br><br>
    <div class=textTitle>How to Exchange Forum Posts Using Quality Posts</div><br>
    Quality Posts offers the opportunity for forum owners to trade / exchange posts with each other. This opens up the Quality Posts system to forum owners who only wish to exchange posts with other forum owners without paying money. Exchanging posts within Quality Posts also benefits all forums owners by fairly rating each post that goes through the Quality Posts system. 
    <br><br><br>
    <div class=textTitle >What is a Forum Post Exchange?</div><br>
    
    <br><br><br>
    Code (markup):
    Ooph, that's painful. You have a div with a class on it, what do you need the CENTER tag for. You have a block level container with a class, what do you need line-breaks in the markup for. That first div and the second div both appear to be HEADINGS. Headings? Don't we have tags called headings? It's followed by a paragraph, why isn't it marked up as a paragraph.... and that anchor tag has no href, and there's no reason to waste a anchor with name since you can just use an ID instead. Yes, ID="name" is the same as <a name="name"></a>

    Worst of all, search engines and screen readers have no clue those are headings, or any different from the text around them - that's what semantic markup and modern coding practices are FOR. (though it's funny in a way to call it 'modern' since it's also back to basics from before the browser wars ****** everything up)

    
    <h2 id="Forum-Post-Exchange">Forum Post Exchanging at Quality Posts</h2>
    
    <h3>How to Exchange Forum Posts Using Quality Posts</h3>
    <p>
    	Quality Posts offers the opportunity for forum owners to trade / exchange posts with each other. This opens up the Quality Posts system to forum owners who only wish to exchange posts with other forum owners without paying money. Exchanging posts within Quality Posts also benefits all forums owners by fairly rating each post that goes through the Quality Posts system. 
    </p>
    
    <h3>What is a Forum Post Exchange?</h3>
    <p>
    	Post Trading or Post Exchanging is the process of exchanging posts with the purpose of gaining content in return. Post Exchange is a system found commonly on forums, blogs, and social networks. More often than not, the system is informal and fairness is difficult to maintain. Often Post Exchangers receive content from other Post Exchangers that is both poor and unequal in size. It can also be difficult to obtain posts about niche subjects, and often post exchanging can require an expert opinion.
    </p>
    
    Code (markup):
    Hell of a lot simpler, and should provide more than enough hooks to nab everything for styling... Visual styling disabled like in lynx you get formatting - which means search engines and screen readers will see formatting.

    Let's look at something worse, a small silly table for the poster info:

    <table cellpadding=2 cellspacing=2 border=0 class=tborder width=215>
    <tr>
    <td class=minitableDesc colspan=2>
    <div class=whiteLinks>Posted By: 
    <a href="/PublicProfile.php?user=mike22">Mike22</a>
    </div></td></tr><tr>
    <td class=cat_cell valign=top width=62>
    <center>
    <div>
    <a href="/PublicProfile.php?user=mike22"><span id="artPos"><img src="images/waiting20.gif" border=0 alt="Article Poster" width=20 height=20 title="Article Poster"></span>
    </a></div></center> </td>
    <td class=cat_cell valign=top> 
    <center><span id="FSAR"><img src="images/waiting20.gif" border=0 alt="Posts With 5 Stars" width=20 height=20 title="Posts With 5 Stars"></span><span class=textTitle>42</span></center>
    <center><span id="TSAR"><img src="images/waiting20.gif" border=0 alt="Posts With 3 Or More Stars" width=20 height=20 title="Posts With 3 Or More Stars"></span><span class=textTitle>90</span></center>
    <center><font color="Indigo">Post Count:</font><span class=textTitle>120</span></center>
    </td></tr></table>
    Code (markup):
    So knee deep in outdated methodologies and deprecated tags it's nothing short of a disaster. EVEN IF you were to use a table for that, there are tags OTHER than TD you can use in tables... and a whole ***-load of the crap you are declaring in the markup doesn't even BELONG there anymore.

    If you were to use a table for that:
    
    <table class="poster" cellspacing="2">
    	<caption>
    		Posted By: 
    		<a href="/PublicProfile.php?user=mike22">Mike22</a>
    	</caption>
    	<tr>
    		<th>
    			<a href="/PublicProfile.php?user=mike22">
    				<img src="images/waiting20.gif"
    					alt="Article Poster"
    					width="20" height="20"
    				/>
    			</a>
    		</th>
    		<td>
    			<img src="images/waiting20.gif"
    				alt="Posts With 5 Stars"
    					width="20" height="20"
    			/> 42<br />
    			<img src="images/waiting20.gif"
    				alt="Posts With 3 Or More Stars"
    				width="20" height="20"
    			/> 90<br />
    			<span>Post Count:</span> 120
    		</td>
    	</tr>
    </table>
    
    Code (markup):
    Putting everything else you were doing in the CSS - and that's effectively a 50% code reduction. (the cellpadding could be removed if FF wasn't a retard about applying border-spacing.)

    THOUGH, that's table abuse since that's not tabular data... so who needs a table?

    
    <div class="poster">
    	<h3>
    		Posted By: 
    		<a href="/PublicProfile.php?user=mike22">Mike22</a>
    	</h3>
    	<a href="/PublicProfile.php?user=mike22" class="avatar">
    		<img src="images/waiting20.gif"
    			alt="Article Poster"
    			width="20" height="20"
    		/>
    	</a>
    	<div>
    		<img src="images/waiting20.gif"
    			alt="Posts With 5 Stars"
    				width="20" height="20"
    		/> 42<br />
    		<img src="images/waiting20.gif"
    			alt="Posts With 3 Or More Stars"
    			width="20" height="20"
    		/> 90<br />
    		<span>Post Count:</span> 120
    	</div>
    <!-- .poster --></div>
    
    Code (markup):
    Can with CSS be styled effectively identical without abusing a table for non-tabular data, and is like 40 bytes less than the 'fixed' table version.

    Less markup - move things into the CSS so you say them once not every time you need them - better use of caching models == faster page loads, less server strain, and better code consistency.

    Take your form below that for another example - here we see classic definition list abuse, and for what?

    
    <form class=gen-formwide method="post" action="">
    <br><br><DL>
    <dd>Name<br></dd><dd><input type="text" name="username" value="Guest778" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="20" maxlength="50" readonly><br></dd>
    <dd>Url<br></dd><dd><input type="text" value="" name=web size=20 maxlength=80><br></dd>
    <dd>Comment<br></dd><dd><textarea name=comment rows=8 cols=60 ></textarea><br><br></dd>
    <dd>Captcha<br></dd><dd><input type=text value="" name=captcha size=6 maxlength=6><br></dd>
    <dd>&nbsp;<br></dd><dd><div id=capp><img src="images/waiting20.gif" alt=captcha title=captcha width=20 height=20></div><br><br></dd>
    <dd id=jcomments-activity>&nbsp;</dd>
    <dd><button type=button onclick="make_visInline('Waiting');postComment(captcha.value,comment.value,web.value, username.value, 'ForumPostExchange.php')">Submit</button>
    <span id=Waiting style="display: none;"><img src="images/waiting20.gif" alt="waiting" width=20 height=20></span><br></dd>
    </DL>
    <div class=FormfailedVal style="display: none;" id="cTimeOut">Sorry, the Captcha timed out, please refresh this page and try again</div>
    <div class=FormfailedVal style="display: none;" id="wrongC">Sorry, you have typed the wrong Captcha</div>
    </form>
    
    Code (markup):
    Where's your fieldsets? Where are your labels? Why are you sending messages in the text that should be added dynamically by your validation script? (as is they show up with CSS disabled, and for search, and for screen readers, just great).. let's see, 1287 bytes for that and it's not even a proper form?

    
    <form id="postComment" method="post" action="postcomment.php">
    	<fieldset>
    		<legend>Post Response</legend>
    		<label for="username">
    			Name
    			<input type="text" 
    				name="username"
    				id="username"
    				class="disabled"
    				value="Guest778"
    				size="20" 
    				maxlength="50"
    				readonly="readonly"
    			/><br />
    		</label>
    		<label for="web">
    			URL
    			<input type="text"
    				value=""
    				name="web"
    				id="web"
    				size="20"
    				maxlength="80"
    			/><br>
    		</label>
    		<label for="comment">
    			Comment
    			<textarea
    				name="comment"
    				id="comment"
    				rows="8" cols="60"
    			/></textarea><br />
    		</label>
    		<label for="captcha">
    			Captcha
    			<input type="text"
    				value=""
    				name="captcha"
    				size="6" maxlength="6"
    			/><br />
    		</label>
    		<img src="images/waiting20.gif"
    			alt="captcha image"
    			width="181"
    			height="67"
    		/>
    		<input
    			type="submit"
    			value="Submit"
    			onclick="return formValidate();"
    		/>
    		<div id="formMessage"></div>
    	</fieldset>
    </form>
    Code (markup):
    Mind you, that would take a whole rewrite of your form handler, but from what I'm seeing it's knee deep in problems, not the least of which being zero graceful degredation when javascript is disabled/not present... Chops about 100 bytes off even with the extra formatting, but I'd probably grow that a bit with some classes to use for the validation hooks rather than waste time manually processing it the way your script appears to.

    Going over your page, I can comfortably say that had I written the same thing using modern techniques, it would load and render 50% faster and use half the code. You've got 43k of javascript and 26k of markup doing the job of 10k of markup and 4k or less scripting... if I'd even BOTHER with the javascript which frankly, is increasing your bandwidth use and overhead, not reducing it.

    Though increasingly I'm finding that using javascript for forms does the opposite of what everyone seems to want to use it for if you just take the time to write the HTML properly and actually practice separation of presentation from content.

    HTML is for what things ARE, not how they are going to appear. Appearance? That's CSS' job.
     
    deathshadow, Mar 31, 2010 IP