|
HTML - Trouble Controling Cell Width
I have a table that looks like this:
Code: <table style="height: 100%;" cellspacing=0 cellpadding=0 border=1> <tr><td colspan=2 style="height: 100px;"> <center> <span style="font-size: 24pt; text-align: center;"> <img src="H&R banner.jpg" border=0></span></center></td></tr> <tr> <td style="width: 200px;"> <center> <span style="text-align: center;"> MARGIN<br> (latest news)<br> (possibly links) </span> </center> </td> <td> <table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=1> <tr> <td style="height: 50px;"> <center> <span style="font-size: 14pt;">menu bar</span> </center></td> </tr> <tr> <td> <center> <span style="font-size: 24pt; text-align: center;"> CONTENT </span> </center> </td> </tr> </table> </td> </tr> </table> I'm having trouble controling the width of the first bolded table cell. This happens in IE9. I have it set to 200px, but for some reason it wants to be wider than that (I can tell because the text seems to be centering within the first 200px of its width, but it's not centered within the whole cell). I can fix this by specifying a % width (as in style="width: 25%;"), but I'd prefer to stay away from percentages. I can also fix the problem by specifying the width of the next cell (to its right, in bold above) to some specific value, but then this fixes the size of the whole table, and I would like to keep it variable. Does anyone know why the width likes to increase to more than I specified, and if so, how do I fix this problem? Similar TutorialsHi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. Hi! I am in the process of designing my first web page and I am having some difficulty with cell padding. I want there to be some space between my text and the edge of the tan box. What i am doing is obviously not working! Any help would be greatly appreciated! Here's the URL: http://www.freewebs.com/pixelsnponies/index.htm And here's the code: <html> <head> <title>Pixels 'n Ponies Graphics</title> </head> <body bgcolor="A85045"> <img src="http://img221.imageshack.us/img221/6698/sagebannerwg7.jpg" align="center" width="100%"> <br> <br> <TABLE width=100%><TR><TD bgcolor=#A85045 width=20% valign=top> <center><A href="http://www.freewebs.com/pixelsnponies/index.htm"><font color="161513"><img src="http://img222.imageshack.us/img222/9146/homelinkaf5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Layouts.htm"><font color="161513"><img src="http://img136.imageshack.us/img136/7010/layoutsap5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Seasons.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/9294/theseasonsst5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Breeds.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/7374/thebreedsgw1.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Banners.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/1058/bannersandadshw3.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Support.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/4702/supportgx7.jpg"></FONT></A></center> </TD><TD bgcolor=#EEE7DB width=80% valign=top cellpadding=10><center><font size="3" face="baskerville" color="161513" > <br> <b>Welcome to Pixel's n' Ponies Howrse Graphics!</b> <br> <br> Your Howrse profile page represents you, so it's appearence is important. Here you can find a number of free layouts to make your page look professional. Feel free to take a look around and choose a look that suites you. A new layout is added every week, so check back often! <br><br>Don't have a Howrse account? <A href="http://www.howrse.com" target="_blank"><font color="161513">Click here</A> and come join the fun!</center> <br> <br> <b>FAQ</b> <br> <br> <b>Q: How do I put the layout on my page?</b> <br><br><b>A:</b> - Copy the HTML code. <br>- Go to "Edit My Profile" <br> - Click "HTML Mode" <br> - Paste the code. <br> - Click "Edit My Profile" <br> - Add your own text, pictures, etc. <br> <br> <b>Q: Can I have a custom layout?</b> <br><br> <b>A:</b> Due to the time it takes to design and code a layout, I do not make custom layouts for free. However, I would consider doing one for around 400E. Message me for details. My Howrse name is Pookielou. <br> <br> <b>Q: I have a good idea for a layout. Will you code it?</b> <br> <br><b>A:</b> I'm always open to new ideas. If you message me with your proposal, I will consider coding it and adding it to the free layouts on this site.<br></font> </TD> </TR> </TABLE> </body> </html> Does anyone have an idea how I can make the text in the TD-tags fit 100% in its cell. Help would be highly appreciated. Quote: <html> <style> .text {text-transform: uppercase; } </style> <body> <center> <table width="500" border="1"> <tr> <td> <span class="text">Text nrjkfb bfd df bfdfbhj</span> </td> </tr> <tr> <td> <span class="text">Text hjkbjkbjk</span> </td> </tr> </table> Hi there. I am working on this site. There is a problem with a table column spacing though... if this is what it looks like in Firefox (the way its supposed to be...) and this is what happened to it in IE. (dear lord...) the left menu and the content on the right are two adjacent cells of a table. how do i fix this ? it seems ie is giving equal width to both the cells. which explains the gap. i've tried using: Code: <td width=180> and also: Code: <colgroup span="2"> <col width="180"></col> <col width="500"></col> </colgroup> but none of them work. please help me out.. the page is available at > http://ramniquesingh.googlepages.com/index.html the .css file is available at > http://ramniquesingh.googlepages.com/default_style.css thanks. Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! I am having trouble getting an image to line up in a cell so that the text aligns left and the image directly to the right of it to match the other cells. http://smartvending.com/testindex.html Can anyone see what is wrong with the code that is preventing the Coin Counters & Sorters gray box from allowing anything to align closer to the right side of the box matching the other cells? Any help is greatly appreciated! Thanks I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one). How can I go about doing that? Thanks!! Hi all, I am a totally new to html, "yesterday I could not even spell it". I am working on a simple project where I have used a table to store page information (text and pictures), I read it somewhere it is the best way to do it. I figured out how to set the context width in the cell (<td width="20">) but how do set the width of the cell? Remember, I am not building "The Windsor Castle" just a little cuby house in the back so everything should be as simple aspossble, not necessarily the fastets and most versatile. Thanks in advance. Hello, I am having trouble converting the following example table into a nice tableless layout: Code: <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td><img src="./left_image.gif" border="0" /></td> <td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td> <td><img src="./right_image.gif" border="0" /></td> </tr> </table> The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this? I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell... anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE... Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is: HTML Code: <table> <tr> <th rowspan=2 style="min-width=120px;">left column header</th> <th colspan=2 style="min-width=120px;">column 1 title</th> <th colspan=2 style="min-width=120px;">column 2 title</th> </tr> <tr> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> </tr> <tr> <td>row1 name</td> <td>row1 col1 value1</td> <td>row1 col1 value2</td> <td>row1 col2 value1</td> <td>row1 col2 value2</td> </tr> </table> So it should look a bit like this: Code: ------------------------------- | 120px | 120px | 120px | | |---------|---------| | |60px|60px|60px|60px| |---------|----|----|----|----| |rowname1 |val1|val2|val1|val2| |---------|----|----|----|----| |rowname2 |val1|val2|val1|val2| ------------------------------- there can be more rows with rowname, and more columns with the colspans... now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers... i'm using HTML 4.01 Strict by the way... I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. i set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? Hello, I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros. Thanks!! |
|||||||