gotpinoy Posted February 1, 2008 Share Posted February 1, 2008 I used to set my code for body tag as <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0"> How does everyone set the margin to zero all around?Im just repolishing my code to standard xhtml. Link to comment Share on other sites More sharing options...
Ingolme Posted February 1, 2008 Share Posted February 1, 2008 With CSS:<body style="margin: 0px;">Or even better, putting this in the <head>:<style type="text/css">html,body {margin: 0px;}</style> Link to comment Share on other sites More sharing options...
gotpinoy Posted February 1, 2008 Author Share Posted February 1, 2008 thanks, i will use the code to make it standard. With CSS:<body style="margin: 0px;">Or even better, putting this in the <head>:<style type="text/css">html,body {margin: 0px;}</style> Link to comment Share on other sites More sharing options...
jason Posted February 1, 2008 Share Posted February 1, 2008 <style type="text/css">body {margin: 0;padding: 0;border: 0;}</style> Link to comment Share on other sites More sharing options...
Synook Posted February 1, 2008 Share Posted February 1, 2008 To be valid, all measurements in CSS need to have unit labels (e.g. px). <style type="text/css">body {margin: 0px;padding: 0px;border: 0px;}</style> Link to comment Share on other sites More sharing options...
gotpinoy Posted February 2, 2008 Author Share Posted February 2, 2008 To be valid, all measurements in CSS need to have unit labels (e.g. px).Here is my code for my testing, but when see it in a browser, the table height is not all the way to the bottom screen. It only have the size of whatever value you have inside the cell. I would like to see the table 100% top and bottom, left and right.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px;}</style></head><body><table width="100%" border="1" height="100%"><tr><td colspan="2">test</td></tr><tr><td>test</td><td width="250">test</td><tr><td colspan="2">test</td></tr></table></body></html> Link to comment Share on other sites More sharing options...
Synook Posted February 2, 2008 Share Posted February 2, 2008 Oh - you want to adjust the dimensions of the table. Something like this will do <table style="width:100%; height:100%; "><!-- Your table data --></table> Remember, though, that tables shouldn't be used for layout. Use divisions instead. Link to comment Share on other sites More sharing options...
newseed Posted February 2, 2008 Share Posted February 2, 2008 To be valid, all measurements in CSS need to have unit labels (e.g. px).All measurments require unit lables if the value is greater or less than 0. Zero is just plan ZERO. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 2, 2008 Author Share Posted February 2, 2008 Remember, though, that tables shouldn't be used for layout. Use divisions instead.I always use tables to set my layout. Let me explore what div can do for me. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 2, 2008 Author Share Posted February 2, 2008 I use table to set up my header, body for my contents and navigation, and footer. However, Im having issue with the table height with code below <style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px;}</style> I set the table with style with the code below <table style="width:100%; height:100%; "><!-- Your table data --></table> but it did not give me the height to fit the browser.I use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> but when I use <html> only, it give me the correct height. Link to comment Share on other sites More sharing options...
Ingolme Posted February 2, 2008 Share Posted February 2, 2008 Please use [code], and not [codebox] tags for adding small scripts, it takes much less space.To solve your problem, change your CSS to this: <style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style> Link to comment Share on other sites More sharing options...
gotpinoy Posted February 2, 2008 Author Share Posted February 2, 2008 Please use [code], and not [codebox] tags for adding small scripts, it takes much less space.To solve your problem, change your CSS to this: <style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style> Now that works fine, thanks. However, when I set the height for the header and table, it seems that its not taking the height I try to specify, Here is my code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><style type="text/css">html,body {margin: 0px;padding: 0px;border: 0px; width:100%; height: 100%;}</style></head><body><table border="1" cellspacing="0" cellpadding="0" style="width:100%; height:100%;"><tr><td colspan="3" bgcolor="blue" valign="top" align="middle">header</td></tr><tr><td width="150" bgcolor="red">left column</td><td width="100%">body</td><td width="250" bgcolor="red">right column</td></tr><tr><td colspan="3" bgcolor="yellow" valign="top" align="middle">footer</td></tr></table></body></html> Also, heres a snapshot of the table im working on. The header is blue and footer is yellow. red are the left and right column and the middle is the body. I want to set the header height to 100 and footer to 50, right and left column to 200 each, and the body should just take whatever space width available. When I set my header TD tag to height is to 100 pixel, it wont take it. <td colspan="3" bgcolor="blue" valign="top" align="middle" height="100"> What Iam getting is a bigger header like the image below: Link to comment Share on other sites More sharing options...
newseed Posted February 3, 2008 Share Posted February 3, 2008 Remove the 'width' from the cell that has the body content.Add height="100" to the header cell and height="50" to the footer cell. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 3, 2008 Author Share Posted February 3, 2008 Remove the 'width' from the cell that has the body content.Add height="100" to the header cell and height="50" to the footer cell.Yes, I did that on my last statement. it did not work in xhtml but in html it works fine. Link to comment Share on other sites More sharing options...
newseed Posted February 3, 2008 Share Posted February 3, 2008 Any reason why you would use XHTML unless you are doing XML markups? Link to comment Share on other sites More sharing options...
boen_robot Posted February 3, 2008 Share Posted February 3, 2008 Any reason why you would use XHTML unless you are doing XML markups?It opens up the possiblity for the document to be served as "application/xhtml+xml" to capable browsers (if adjusted on the server), thus enabling better standards compliance in future versions of IE that would support this MIME type. In addition, it enables XML tools to parse this document and extract data from it, or just manipulate it. Other than that, there's no real benefit. Link to comment Share on other sites More sharing options...
newseed Posted February 3, 2008 Share Posted February 3, 2008 It opens up the possiblity for the document to be served as "application/xhtml+xml" to capable browsers (if adjusted on the server), thus enabling better standards compliance in future versions of IE that would support this MIME type. In addition, it enables XML tools to parse this document and extract data from it, or just manipulate it. Other than that, there's no real benefit.Yes I understand that but I wanted to know if he knew that because unless you are planning on doing the above, there is no point in using XHTML. Link to comment Share on other sites More sharing options...
boen_robot Posted February 3, 2008 Share Posted February 3, 2008 Yes I understand that but I wanted to know if he knew that because unless you are planning on doing the above, there is no point in using XHTML.Well, he may do it for future's sake. You wouldn't want to one day decide to switch to the new MIME type, only to find out you had to use the form <br /> instead of <br>, would you? Then again, if you could change the MIME type that easily, you're likely to also be able to easily rewrite the old form to the new. But that too requires a certain amount of pre-planning. So the safest way to go remains serving XHTML (Strict, not Transitional as he does) as text/html until IE supports application/xhtml+xml. Link to comment Share on other sites More sharing options...
newseed Posted February 3, 2008 Share Posted February 3, 2008 Well, he may do it for future's sake. You wouldn't want to one day decide to switch to the new MIME type, only to find out you had to use the form <br /> instead of <br>, would you? Then again, if you could change the MIME type that easily, you're likely to also be able to easily rewrite the old form to the new. But that too requires a certain amount of pre-planning. So the safest way to go remains serving XHTML (Strict, not Transitional as he does) as text/html until IE supports application/xhtml+xml.Depending what editor you use, some will automatically convert an HTML page over to XHTML without a problem which is why I have no problem using HTML Strict even though most of my coding method is XHTML (with some exceptions such as /> closing slashes, etc.). If I am not mistaken, HTML 5 is suppose the next thing. XHTML still hasn't really caught on they way it is supposed to be used since it's inception back in 2000.Nevertheless, no matter which one you use, validation is important or else you could be pulling your hair out trying to figure where you went wrong with your codes. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 4, 2008 Author Share Posted February 4, 2008 Yes, I plan to use xml. Im curious why the table trying to layout wont do the way it suppose to be in XHTML. I know Im missing something or doing something different in my code. I have no problem doing it in HTML. Maybe, I need to explore more what CSS can do for me with my layout. Link to comment Share on other sites More sharing options...
newseed Posted February 4, 2008 Share Posted February 4, 2008 Yes, I plan to use xml. Im curious why the table trying to layout wont do the way it suppose to be in XHTML. I know Im missing something or doing something different in my code. I have no problem doing it in HTML. Maybe, I need to explore more what CSS can do for me with my layout.You will not be able to make the footer stick to the bottom in all browsers but you can achieve the height to fill the screen and have the #header and #footer set at a fixed height. The footer will push down below the #content cell thus hiding the footer in IE until you scroll down.Here's the complet code you can try out:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><style type="text/css">html, body {margin: 0;padding: 0;border: 0;height: 100%;}#main-table {border-collapse:collapse;border: 1px solid black; margin: 0;padding: 0;width:100%; height:100%;}#header {background-color:blue;text-align:center;height:100px;}#left-column {background-color:red;width:150px;}#right-column {background-color:red;width:250px;}#main-body {height:100%;}#footer {background-color: yellow;text-align: center;height: 50px;}</style></head><body><table id="main-table"><tr><td id="header" colspan="3">header</td></tr><tr id="footer-padding"><td id="left-column">left column</td><td id="main-body">body</td><td id="right-column">right column</td></tr><tr><td id="footer" colspan="3">footer</td></tr></table></body></html> If you design your layout using divs, then you can achieve the sticky footer effect that will work in all browsers and keep the specified height for your #header and #footer. Let me know if you would like to know about how to do this. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 8, 2008 Author Share Posted February 8, 2008 Thanks. I been reading more about DIV and been testing it with my new layout and code. I plan to develop with tableless. It's kinda challenging but I want to learn some standards to improve my coding.So here is what I done so far with DIV, Positioning, Float which some are base on sites I read online about CSS and Positioning. Although, I haven't perfected my layout. I like to test, recode, test again to see what Iam doing wrong and how I can correct it. Not only that Im learning but Im also understanding what the stuff is doing.and here is my some of the code I done so far. Im not done yet since Im having some problem with positioning on the two columns. I need the blue and red column to reach all the way to the footer or equal heights. Also, when I type "content", you see it went all the way to the right. I wanted it to stop before the blue column. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">*{margin:0;padding:0}html, body {height:100%}body {padding:0;margin:0;}#header {width:100%;background-color:#fc0;position:relative;overflow:hidden;}#container {width:100%;min-height:100%;height:100%;margin-left:0px;margin-right:-451px;margin-bottom:-55px;}#left {width:300px;float:right;position:relative;background-color:#0000FF;right:0pxmargin-right:-299px;}#right {width:150px;float:right;position:relative;background-color:#ff0000;right:0px;margin-right:-0px;}#footer { width:100%; clear:both; height:50px; border-top:1px solid #000; border-bottom:1px solid #000; background-color: #000000; color: #ffffff; text-align:center; position:relative;}</style></head><body><div id="header">head</div><div id="container"><div id="right">right</div><div id="left">left</div>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div><div id="footer">footer</div></body></html> Link to comment Share on other sites More sharing options...
newseed Posted February 8, 2008 Share Posted February 8, 2008 Looks like you are going to easily transition from tables over to divs. The only suggestion is to check your work in at least Firefox, IE7 and IE6 which covers about 85% of the market. Link to comment Share on other sites More sharing options...
gotpinoy Posted February 8, 2008 Author Share Posted February 8, 2008 Looks like you are going to easily transition from tables over to divs. The only suggestion is to check your work in at least Firefox, IE7 and IE6 which covers about 85% of the market.Yes, Im testing my work also with Firefox. I downloaded the Firebug to check for bugs with Firefox. I think Im loving DIV than tables now so I have to do more learnings and research.thanks for help. Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2008 Share Posted February 8, 2008 All those negative margins and "right: 0px" aren't doing anything, really. You can remove them from your code.If it weren't for Internet Explorer, I'd recommend putting all the content into a third div and giving it "margin-right: 450px". Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.