|
HTML - Issue With Tables Behaviour And Column Position
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 Similar TutorialsI am having a real problem with keeping the text located at the top of the page right below the navigation. for some reason the text and photos just drop down the page in IE. No problem in Safari though. This seems to only be happening with images on the page. http://www.musicbridgesinternational.com please help I have no idea what the problem is here. thank you! 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 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> 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> Hi, is it possible to add a number of tables (or td's or any rectangluar html container element) in the same vertical level but as long as there is room. But if there is no more room the new ones will be added in the next line the behaviour i am need is the like the behaviour of the img element. Am I clear enough? Merci! Hello!! First post! Very exciting... So I just came across this and I don't quite understand: <div></div> <div></div> - this is output in the dom exactly as seen ---------------------------------------------------------------------------------------- <div /> <div /> - output in the dom like this: <div> <div></div> </div> Why on earth is this!?!? P Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form. The contact details form is mandatory. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stays in place to avoid a big gaping white space where the right column is empty. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online. Any advice / suggestions / examples online? Thanks! 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 I have never been good with this... I cannot get an iframe to be positioned correctly on more than one computer. http://www.e-lusively.com I am using Firefox with 1280x800 and it looks fine for me. Ugh how can I get it to look good in any resolution? Please help... Hey guys I am trying to build a website and I have an image I am trying to write over top of,so I have used a div tag and positioned it and it works. The only problem is when I view the site on another computer that has a different size computer the text is placed completely wrong but on mine it is perfect. Any way to fix this? Code: <div class="style1" style="position:absolute; margin:3px; padding:3px; left:850px; top:154px; width: 50px; height: 25px;"> <a href="page1.htm>1</a></div> Hi all. I have a page at: http://bartending.com/forum/page.php?page=joke&type=1 My div entitled "Featured" is not lining up. Can any body tell me why? Thank you =) Light and Love and Healing to you, -Patrick Arden McNally Hi I' try to work with div tag for the first time and I would lke to know how do I pu div tag in the center of the page. Margin-left it's not the rigt solution. Any other idea? Code: <div id="slideshowContainer">
<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial")
</script>
</div>
<div id="numberDiv">
<script type="text/javascript">
createnumbers()
</script>
</div>
<div id="backforthbuttons">
<div><a href="javascript:goforward()" style="float: right"><img src="../images/buttons/foward.gif" border="0"></a> <a href="javascript:goback()"><img src="../images/buttons/back.gif" border="0"></a>
</div>
</div>
</div>
I want to position my slideshow in the center of the side. the buttons are positioned with css. http://javascript.lima-city.de/ Who can help ? Hi, As a newbie html can be a little overwhelming just because of the many different ways a task can be achieved. I'm looking for some advice on the best method to achieve something like this: I have 7 pieces of information about a site user, they are; Avatar 60 x 60px ScreenName DateJoined UserAttribute1 UserAttribute2 UserAttribute3 UserAttribute4 All bar the avatar are text. I would like the outcome to display something like this: Avatar ScreenName DateJoined UserAttribute1 UserAtteribute2 UserAttribute3 UserAttribute4 I'm unsure as to whether to put the avatar and text in 2 divs(left and right), and whether to use spans or lists for the text. Any advice would be appreciated. Thanks in advance. Hi Comparing this code <div style="border:1px solid black; width:120px;height:25px; padding-top:0px;">hello</div> in Internet Explorer 9 and FireFox 4 shows, that the word 'hello' is not at the same vertical position. Is there a method, to adjust this? Thanks for your information. Patrick |
|||||||