CSS - Nested Tables, I.e., And White Margins
Hi,
I'm working on this webpage http://www.dkwebconsultants.com/jaclo/subnav.php?SubGroupID=24 and it works fine in Mozilla. However, in IE there is a thin white space between the td that says "handshowers" in it and the blue above as well as the the left side of the page. The same thing for the slightly lighter td below it and the left side of the page. I've been reading and error checking all day, but i can't figure this one out. the php/html code is as follows: Code: <table class="nicetable"> <?php include "header.html" ?> <!-- This is one table row, the table has two td's--> <tr> <td height="410"> <table class="nicesubnavtable"> <tr> <td id="subnavtop"> <script language="JavaScript1.2" type="text/javascript"> <!-- myTest.writeMenuBar(); //--> </script> </td> </tr> <tr> <td id="subnavbottom"> <?php $sql = "SELECT * FROM SubGroup WHERE GroupID = '$GroupID'"; $result = mysql_query($sql) or die (mysql_error()."<br />Couldn't execute query: $sql"); $num_results = mysql_num_rows($result); echo "<br>"; for($i=0; $i < $num_results; $i++){ $row = mysql_fetch_array($result); $tempSubGroupID = $row['SubGroupID']; $tempName = stripslashes($row['Name']); if($SubGroupID == $tempSubGroupID){ echo "<a id='snsgnamesblue' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>"; } else{ echo "<a id='snsgnames' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>"; } } ?> </td> </tr> </table> </td> <td id="mainareanav"> <?php $sql1 = "SELECT * FROM IndividualItem WHERE SubGroupID = '$SubGroupID'"; $result1 = mysql_query($sql1) or die (mysql_error()."<br />Couldn't execute query: $sql"); $num_results1 = mysql_num_rows($result1); for($i=0; $i < $num_results1; $i++){ $row = mysql_fetch_array($result1); $tempItemID = $row['ItemID']; $tempNickName = stripslashes($row['NickName']); $filename = stripslashes($row['ThumbImageName']); $filenamearray = explode('.', $filename); $fnameNoExt = $filenamearray[0]; //print the nickname, if no nickname print the itemID if($tempNickName == "") echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempItemID</a> \n"; else echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempNickName</a> \n"; } //<td id="subnavright"> //<img src="images/thumb/blankthumb.jpg" id="thumb" name="pic1"> //</td> ?> </td> </tr> <?php include "footer.html" ?> <!-- This is three table rows, public links, user links, search and contact--> </table> The relevant CSS code is: Code: body { font-family : Arial, Helvetica, sans-serif; font-size: 16px; margin: 0; padding: 0 } .nicetable { border-collapse:collapse; } .nicesubnavtable { border-collapse:collapse; width: 200px; margin: 0px; padding: 0px; border-bottom: 2px solid #BAB6B7; } #subnavbar { vertical-align: top; } #subnavmiddle { background-color: white; width: 220px; height: 410px; vertical-align: top; padding-left: 15px; } #subnavright{ width: 240px; vertical-align: top; border-right: 1px solid #797D7E } #subnavtop{ background-color: #F3D891; height: 60px; width: 185px; border-top: 2px solid #F3D891; border-left: 2px solid #F3D891; } #subnavbottom{ background-color: #FAE1A8; height: 350px; width: 185px; padding-right: 15px; border-left: 2px solid #FAE1A8; vertical-align: top; } I'm using tables for the layout and css for the style. I've tried many variations on table layout and haven't come up with anything. If anyone has any ideas, please let me know. Thanks, dk Similar TutorialsI've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps). Any thoughts? Thanks, Jeremy I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background colo or use this in several apps). Any thoughts? Thanks, Jeremy Hi all 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> </head> <body> <table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0"> <tr> <td>asdf</td> </tr> </table> <p style="margin-top: 10px;">asdf</p> </body> </html> Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh Question One I just wanted to validate my css code and all is good except for some warnings. I am unclear as to what they mean or how to fix them. Does anyone know what these warnings are about? CSS Validator Warnings ------------------------------------------ Question Two When viewing my reviews page in IE there is little while lines dividing the table cells. Does anyone know why this is and how to fix it? Problem in is only in IE. Page showing the white lines Thanks in advance for feedback and help. Regards, CH... I've found that nesting tables works very well for getting data aligned properly. I'm having serious trouble doing the same thing with css. For example, I can easily create a table with 2 col, 2 rows, then put another table in each box and do get things just the way I want. I can't figure out a way to do that with css. Is it possible? Should I even try? Thanks! I have a website full, and I mean FULL of nested tables. It was designed by my webguy before he had an understanding of CSS and div tags. I've decided to take on the seemingly monumental task of converting my site to CSS (mainly because I'm implementing Wordpress and I figure now is a good time to get current, clean, and tidy). I haven't found any good tutorials or sites that explain how to make the transition, or for that part, offer a good explanation of how to use CSS for positioning and site layout. I was hoping some of you guys might have some recommendations. Right now I have tables within tables within tables within tables next to tables within tables next to tables within more tables and more tables..... et cetera. And I'm of course trying to do this right away and in as little time as possible Thanks for any suggestions guys i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code: /* mp_tip_CSS_x_TABLE CSS */ <? for ($i=1; $i<=12; $i++) { ?> #mp_tip_CSS_<? echo($i); ?>_table { border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>; border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>; border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>; border-collapse: collapse; } #mp_tip_CSS_<? echo($i); ?>_table td { border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>; border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>; border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>; border-collapse: collapse; } <? } ?> /* mp_tip_CSS_x_TABLE CSS END */ The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code: #classname >tr >td {} But that doesn't seem to work... Thanks for any help, -Ross Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham hi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body { margin:0px; padding:0px; background-image:url(images/interface/background.png); } #body_image { width:935; margin:0 auto; padding:0px; background-image:url(images/interface/body.png); background-repeat:no-repeat; background-position:center; } #container { width:904px; height:750px; margin:15px; } #slug { height:15px; } Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code: #menu {padding-top:140px;text-align:left;padding-left:38px;} #menu ul{margin:0px;} #menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;} #menu ul li a{color:#fff;font-size:10pt;text-decoration:none;} #menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;} #menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;} Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? Hi Guys, I have a question about me not understanding how margins work... I am quite perplexed...I am trying to remove the white space between borders of table cells. I am using: Code: td { margin: 0; } But there is still white space between the cells...how do I make no space between the cells? Code is located he http://www.taipeitripper.com/senshin_center/training_schedule.html Thank you, Evan Jerkunica Hi All, I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this, margin:0px 31px 0px; Is it top,right and bottom? Thanks Prena Hey there. A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here. As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol. Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side. Code: <style> { Music Player Properties } .i {display:none;} table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;} table table td.text div object object {position:static; margin-left:0px;} { Background Properties } table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:000000; background-attachment:scroll; background-position:top center; background-repeat:no-repeat; background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg); border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;} .samohtlogo{ position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;} .menu{ width: 959px; height: 136px; position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;} .header { width: 959px; height: 422px; position: absolute; top: 169px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;} .memberstop { width: 959px; height: 403px; position: absolute; top: 727px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;} .thealbum{ width: 422px; height: auto; position: absolute; top: 1130px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;} .musicbg{ width: 541px; height: auto; position: absolute; top: 1130px; z-index: 0; overflow: visible; margin-left: -62px; left: 50%;} .shows{ width: 959px; height: auto; position: absolute; top: 1513px; z-index: 0; overflow: visible; margin-left: -480px; left: 50%;} .reverbshows{ width: 959px; height: auto; position: absolute; top: 1550px; z-index: 2; overflow: visible; margin-left: -445px; left: 50%;} .featvideo{ width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;} .R { Div Counter Acts } .friendSpace div { overflow:visible !important; height:auto !important; position:static !important; background:none !important; } .friendsComments div { overflow:visible !important; height:auto !important; position:static !important; width:auto !important; background:none !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important; text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px; border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; } html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{ width: 110px !important; overflow: hidden; letter-spacing: 0px; font-size: 10px !important; line-height: 12px; display: block; color:50433d!important; margin: 0 !important; padding: 0 !important; text-align: center !important; margin-left: 1px !important;} .friendSpace { position: absolute !important; z-index: 4 !important; width: 800px !important; margin-left: -320px; _margin-left: -400px; top: 0px !important; margin-top: 1860px !important; } .friendsComments { position: absolute !important; z-index: 6 !important; margin-left: -35px; _ margin-left: -400px; width: 833px !important; top: 0px !important; margin-top: 2755px !important; } .friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;} .friendsComments table {width: 800px; align: justify; position:relative; left:0px; } .friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;} </style> I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! |