|
HTML - Nested Tables Padding Issue
How can I make textbox in cell[2,2] get its right border displayed and aligned with upper cell???
<table style="padding-right: 20px" cellspacing="0" cellpadding="0" width="1000px"> <tr> <td width="25%"> <span id="Label9">label</span><br /> <input name="TextBox10" type="text" id="TextBox10" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label10">label</span><br /> <input name="TextBox11" type="text" id="TextBox11" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label11">label</span><br /> <input name="TextBox12" type="text" id="TextBox12" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label12">label</span><br /> <input name="TextBox13" type="text" id="TextBox13" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" style="width: 100%"> <tr> <td style="padding-right: 15px" width="50%"> <span id="Label18" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox19" type="text" id="TextBox19" style="border-width:1px;border-style:solid;width:100%;" /></td> <td align="right" width="50%" > <span id="Label19" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox20" type="text" id="TextBox20" style="border-width:1px;border-style:solid;width:100%;" /></td> </tr> </table> </td> <td> <span id="Label20">label</span><br /> <input name="TextBox21" type="text" id="TextBox21" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td colspan="2"> <span id="Label21">label</span><br /> <input name="TextBox22" type="text" id="TextBox22" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> </table> Similar TutorialsHi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files hi everybody, i have a problem displaying an html page that contains nested tables, all in a div. now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions). the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps... Anyway, i appreciate you reading this and thanks for your help, if any. Hello guys, I want to create a page with nested html tables. I have attached an image of exactly what I want. Can you please help me with that? Hello, Can anybody help me out? I have a nested table as such: =========================================== <table cellspacing="0" cellpadding="3" border="1"> <tr> <td>Joe <table> <tr> <td>A </td> </tr> </table> </td> </tr> </table> =========================================== How can I get "Joe" and "A" on the same line without changing the table structure? (Can't change structure cuz this is how my server side code spits it out. But I can add styles and attributes.) I've tried all manner of floating, margins, padding, aligning, hspacing, vspacing, and nothing seems to work. Thanks for any help. I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Hi I need help in tables with 100%. Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem hi there, i have this problem which has really annoyed the hell out of me becouse it makes no sense at all for me. Thing is, i have a background in a table cell. and i want the inside of the table to be padded 10 px from bottom and 10 px from right, but not the background itself!! this is, it doesnt matter how i padd vertical that doesnt affect the background, but when i padd the sides the background comes along padded omg its so annoying >_< i have tried to come up with an understanding of why this is, and im totally clueless! its the cell with the xGs content. HTML Code: <table id="iccup" width="580px" height="200px" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" width="580px" height="8px" ><img src="images/news_top.gif"/></td> </tr> <tr> <td id="textstyle1" style=" padding-bottom: 7px;" align="center" valign="middle" width="386px" height="33" background="images/mainwindow_left_header.gif">Register</td> <td id="textstyle2" style=" padding-right: 10px; padding-bottom: 10px;" align="right" valign="middle" width="194px" height="33" background="images/mainwindow_right_header.gif">xGs</td> </tr> <tr> <td colspan="2" style="padding-left: 11px; padding-right: 10px;" valign="top" width="580px" background="images/news_mid.gif"> </td> </tr> <tr> <td colspan="2" width="580px" height="10px" ><img src="images/news_bottom.gif"/></td> </tr> </table> I have various div's inside a wrapper div (#wrapper). I have set the width of wrapper div to 900px and one of the inside div (#content) to 650px. but the inner div is not getting shrinked to 650px. I am using dreamweaver and eric mayer reset before applying my custom CSS. Here is the code: HTML Code: Code: <!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen>
<title>Shears Design Website</title>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="shears-logo">
<img src="images/logos/ShearsDesign.jpg"/>
</div>
<div id="top-nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="courses.html">Courses</a></li>
<li> <a href="tutorial.html">Tutorial</a></li>
<li> <a href="contact.html">Contact Us</a></li>
<li> <a href="imp-links.html">Important Links</a></li>
</ul>
</div>
<div id="content">
<h1> About Shears Design</h1>
<p> Shears Design is a small web design and training studio. We have worked as a freelance designer since 2006 and have been creating websites since then.Thewebsites we design have a clean professional layout and appearance with easy to understand navigation and clean, easy to read typography so your site visitors find what they are looking for and have a positive experience visiting your site. We believe in using straightforward well tested design methods which produce sites that are pleasant to visit and easy to maintain and expand when the time comes. Our websites are based on a standard layout grid which gives our clients the ability to visualize their sites in an organized way and provides a framework to quickly and efficiently create dependable and clean websites.</p>
</div>
<div id="right-side">
<h2> Learning resources </h2>
<p> For more learning resources, please refere the tutorial link at the top of the page. </p>
<h3> Shears Design Frameswork </h3>
<p> This is the framework we use to create websites in the training videos for Adobe Dreamwewaver, Microsoft Expression Web and the learning HTML and CSS courses. It includes the completed project templates created in the videos. The purpose of this framework is to provide you with a starting set of tools for creating websites, which you can customized to fit your needs and style. Its the toolkit we use everyday when creating websites. It works great for us and we hope it can be the start of something great for you. </p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
<h3> Small Business SEO Guide </h3>
<p> SEO Guide will go over what SEO is, Keyword Research, External Link Building and OnPage Optimization techniques as well as a discussion of "Black Hat" techniques to avoid. The guide will conclude with information on adding your site to Google and Bing, working with XML sitemaps and installing Google Analytics. The videos will demonstrate the On Page SEO Techniques discussed in the guide and the procedure for adding your site to Google and Bing, creating search engine site maps and adding Google Analytics to your site.</p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
</div>
<div id="social-media-icons">
<ul>
<li> <a href="http://www.facebook.com"> <img src="images/logos/facebook-64x64.png"/> </a> </li>
<li> <a href="http://www.twitter.com"> <img src="images/logos/twitter-64x64.png"/> </a> </li>
<li> <a href="https://plus.google.com"> <img src="images/logos/google-64x64.png"/> </a> </li>
<li> <a href="http://www.youtube.com"> <img src="images/logos/youtube-64x64.png"/> </a> </li>
<li> <a href="http://www.yahoo.com"> <img src="images/logos/yahoo-64x64.png"/> </a> </li>
</ul>
</div>
<div id="footer">
<p> ©2011 Shears Design | All Rights Reserved </p>
<p> Terms and Conditions </p>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------- CSS code: Code: /* Reset */
html, body { margin: 0; padding: 0; border: 0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:24px; color:#3CF;
padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom:5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
/* Text Elements */
p { color:#000; font-size:12px; line-height:150%;
margin:15px 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
/*id styles*/
body {background-color:#D1F4FC; }
#wrapper {width:900px; margin:0px auto; background-color:#FFF;}
#shears-logo {padding-top:20px; float:left;
margin-bottom:20px;}
#top-nav { clear:both;
}
#top-nav ul li a {text-decoration:none;}
#top-nav ul li {display:inline;
}
#content { width:650; margin:10px; float:left;}
Maybe it's not padding or whatever, but i'm having an issue with my assignment (given the very sketch instructions we get) and I simply can't figure this one out it's making me crazy -.- Look closely at the box with the paragraph, and the logo. Between them is a space of the original background color. I can't seem to figure out why that space is there and how to close the gap. Any ideas? here's the CSS code for the div class/id's around the main content(paragraph and photo) Code: #content { padding-left: 20px;
padding-right: 20px;
margin-left: 150px;
background-color: #F1E8B0;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
#container {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #E8D882;
text-color: #000000;
border: 2px double #000000;
min-width: 700px;
}
And here is my xhtml code. HTML Code: <body> <div id="container"> <h1 id="logo"><img src="javalogo.gif" alt="Java Logo" height="117" width="619" /></h1> <div id="nav"><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="music.html">Music</a> <a href="jobs.html">Jobs</a></div><br/> <div id="content"> <img src="windingroad.jpg" height="156" width="333" class="floatright" alt="Winding Groad Photo" /> <p>Following the winding road to JavaJam...</p> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <p>12312 Main Street<br/>Mountain Home, CA 93923<br/>1-888-555-5555</p></div> <div id="footer">Copyright © 2011 JavaJam Coffee House<br/><a href="mailto:whatever">SomeSite</a></div> </div> </body> Thanks a lot in advance. I i open this code in FF i get some padding on the left side of the image which is ok, but when i open it in IE i don't get this padding. Is there any way that I have this padding in IE? thanks Code: <div align="justify"><img src="http://www.site.com/default1.gif" style="padding-left:27px;" alt="Cleveland" align="right" width="152" height="136" border="0" /> <p> Ticketchest.com is the Number One provider of Major League Baseball tickets in the United States. You came to the right place for great Cleveland Indians tickets -- close to the field or anywhere you desire. Ticketchest.com has a huge supply of great tickets to sold-out or hard-to-get Cleveland Indians baseball games. <br> </p> <p>Whether you need group tickets for a professional or corporate outing or just a pair of tickets, The Ticket Chest is your source for the best Cleveland Indians baseball tickets on demand. Also, check into our other Major League Baseball teams. We do the hard work so you can focus on eating peanuts. <br> </p> </div> I designed a website in Photoshop/Dreamweaver CS3 and everything looks GREAT on my Mac (on Firefox, Safari and IE 5.2.3). But my client, who is on a PC, sees something completely different. Obviously, what he sees is more important than what I see....... What I see: http://farm4.static.flickr.com/3183/...62a4ff.jpg?v=0 What he sees: http://farm2.static.flickr.com/1154/...a24335.jpg?v=0 The website is http://valleychurchidaho.com, with these screenshots from this page. It seems to be an issue both with the iframes I've used and the tables. How do I force it to be 800 px wide and no more? Since I can't reproduce his issue to troubleshoot, I'm really working in the dark here. Any help/advice would be appreciated. Im using the following doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Without this doctype my header menu does not work. However when I include it I get a display error in IE 6 and 7 and opera, Mozilla displays fine. I have the main page in a table with two rows. inside each row I have a nested table each with 2 table cells (making a simple 2 x 2 table). I then render my content inside each cell with a table itself. Every table is set to 100% in height however the internal tables only render to the browser with the height of the content so the content does not line by filling out the full table cell area. I realise this is not a great deal of info but I don't have access to image editing software to show you atm. I just wondered if you could give me any ideas as to why this might happen. so far I've checked: for any open tags. all okay none found for any table or td references in the style sheets. all okay, all accounted for in seperate classes closed with clear divs tried to align to the top. works but does not fix the height Ive tried inline styles to set the internal table height to 100%. Does not have any effect. I've even tried over riding the tables with seperate classes in css. I can set the table background to a color to show that it does indeed act on the table but setting height to 100% has zero effect to the internal table height. really baffled and confused and err...annoyed any ideas appreciated and welcome. Thanks in advance I am very new to CSS have only done basic html coding before. I have been messing with my ebay page and their code trying to get mine to look similar to theirs and learn a bit in the process. however I've run into a snag, Im trying to use a duel column format but the column on the right isn't maintaining its borders. its expanding off screen to fit the text rather than containing it and expanding downward. I also can't get the left column lvl with the right. I've messed with all the values I could find but have had no luck fixing the problem. I realize there is a tremendous about of extra code that I need to remove but If anyone could give me a hand I would very much appriceate it. Many thanks in advance Using AJAX & php to return a randomly generated number of single column tables, and drop them into a <div> element. ( http://www.thegreatmartinicompany.co...ace-value.html ). I've set the div to text-align: center, and put auto margins on the tables. The result is the tables are centered and equally spaced in the div element regardless of the number of tables returned. As appropriate FF and IE display the tables side by side, but Safari stacks them on top of each other. An example of the returned code is below. Any ideas why Safari does not display this as IE and FF do? <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> you have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hi all, Does anyone have other techniques to mock a padding in IE. I think the new IE ver8+ have padding, but i don't think IE ver6-7 have it. I did not realize it becuase i would always expect my clients to update thier browsers. I also see that there are still a HUGE percentage of people across the world that is still using IE 6. One trick that i use is to create two div for example: HTML Code: <div>
<div style="margin: 10px;">
content
</div>
</div>
this mocks a padding type hope anyone finds this useful Hi. I need to find a way of displaying some thumbnail photos in a table cell across a bunch of different tempates. I put a new thumbnail in the group about once a week, but I dont want to edit every template I have. Is is possible to have code in the table cell that say's get thumbnails.htm and put them in this cell That way I can just edit thumbnails.htm and it will show up on all the templatess/pages I'm sure it can be done, but I'm not sure how to go about it. Thanks Leroy Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig |
|||||||