HTML - Table Widths With Explorer....
Why the "R w50" text is not on the right?? And why the widths on the top table are not correct?
How can I fix it? Code: <table border=1 cellpadding=5 cellspacing=0> <tr> <td style=\"width:30px;\">w30</td> <td>n</td> <td style=\"text-align:right; width:50px;\">R w50</td> </tr> <tr> <td colspan=3> <table border=1 cellpadding=5 cellspacing=0 bordercolor=red width=100%> <td style=\"width:30px;\">w30</td> <td>n n n n n n n n n n n n n n n n n n n</td> <td style=\"text-align:right; width:50px;\">R w50</td> </table> </td> </tr> </table> Similar TutorialsHi Guys, I'm having major problems with setting the widths of columns on my page. As per attached pic, I'm trying to get the three main columns to be exactly 300 however it is putting it as 300 (308) in the design view which means the backgrounds in some of the table cells are repeating as shown in box and the text is spreading across the table cell width of what the figure is in brackets and not the 300 I want it to be. Any one got any ideas - its driving me nuts ! Is it possible to set a table's width as something like this? HTML Code: <table width="100%-100px"> Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... [IMG][img=http://img2.freeimagehosting.net/uploads/36b3e47e84.jpg][/IMG] Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... As you can see, the gray table background has overlapped over the iframe. Hi guys, I have a problem with table widths used to arrange content on a website. Why am I not using DIVs? Because it's too time consuming at the moment to convert it over, and my client is not familiar with DIVs and has no time to learn it. So I have to stick to using tables for him to maintain on his own. Here's a quick rundown on my table layout. ----------------------------- |TD1-------------|TD1a****| ------------------ |TD2-------------|********| ------------------ |TD3-------------|********| ------------------ |TD4-------------|********| |Table 2----------|********| ------------------------------ |TD5-------------|********| ------------------------------ That's my attempt to illustrate my layout. I'm using * and - as fillers, the editor removes all the empty spaces... My problem is, TD1 to TD3 and TD5 aligns nicely vertically - they all have the same / correct width. However, TD4 with a table inside is slight shorter in width than it should. About 1 or 2 px. The following shows the screenshots. zoomed in.... I need to get that TD4 with the table inside to have the same width as the others. I have tried removing all BORDER and BORDERCOLOR codes from all the table tags, no use. I tried using both CSS and the table tag WIDTH to control it, still doesn't work. Need suggestions!! Please click here to see my code. It's a little messy... http://www.thienkaiwei.com/index7.html why the table i have dont expand over browser borders when sum of td widths is bigger than screen width? How can i overcome this problem? I am trying to create a table with one cell that contains an image. The image must fill the table vertically from top to bottom. The same code works fine in Firefox, but in IE, it always leaves a gap on the bottom right after the image. Any ideas? Here's the code: <table width="100%" border="1" cellspacing="0" cellpadding="0" height="100" vspace="0" > <tr valign="bottom" height="100" > <td height="100" bordercolordark="000000" > <img src="images/test.jpg" width="600" height="100" vspace="0" hspace="0" border="1"> </td> </tr> </table> Thanks a bunch. I'm not sure how MySpace is viewed on this forum, but I figured that posting here would be my best bet for help. I'm using HTML to place a table composed of several GIFs over my normal page. It changes the look completely, while still maintaining the functions I wish to keep. I normally use FireFox and the table I made works perfectly fine with it. The issue is most of my friends use Internet Explorer, and I realized the table has weird gaps when viewed in IE. It used to have vertical gaps too, but I turned the table code into one long line and that was fixed. I'm still left with horizontal gaps, though. http://www.MySpace.com/NeoApollo My HTML experience is limited, so lots of the code is borrowed from this site or that generator. Because of this, the code isn't very readable and I apologize. Hi I'm designing a simple website in NVU, but although it displays correctly in NVU and Firefox, for some reason the tables aren't centred in Internet Explorer (they stay on the left side of the browser). The site is at www.saturdaynightmusical.com Any tips on why this is displaying differently in IE would be greatly appreciated! Many thanks for your time. Hello all, Just quick question: 1.) I am on Blogger and I want the layout to be centered (not the text). How can I achieve this? 2.) I have 4 containers (navigation at top, main for posts, sidebar for more navigation, and a footer), what is the best way to have a width that looks great/compatible on IE-FF as well as smaller CRT's to widescreen LCD's? 3.) Any other tips/suggestions/clean up on my coding would be much appreciated. Thanks in advance, I apologize if this is a bit much... Code: body { background:$bgcolor; background-image: url(); background-repeat: repeat; background-attachment: fixed; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ #header-wrapper { margin:0 2% 10px; border:0px solid $bordercolor; width: 1072px; } #header-inner { background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: auto; } #newnavbar { position: absolute; width: 1072px; height: 50px; margin: 0 auto; margin-top: 0px; font-weight: normal; background: url("")no-repeat; } #newnavbar a{ color:#000000; } #newnavbar a:hover{ color:#ff9900; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { position: absolute; margin: 0 auto; padding:10px; width: 1072px; text-align:$startSide; font: $bodyfont; } #wrap2 { width: 1072px; } #main-wrapper { background:#000000; margin: 0 auto; width: 672px; float: left; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { background:#000000; margin: 0 auto; width: 400px; float: right; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:normal; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post p { margin:0 0 .75em; line-height:1.6em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } .feed-links { clear: both; line-height: 2.5em; } #blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager { text-align: center; } /* Sidebar Content ----------------------------------------------- */ .sidebar { color: $sidebartextcolor; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding-top:0; padding-$endSide:0; padding-bottom:.25em; padding-$startSide:15px; text-indent:-15px; line-height:1.5em; } .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } .main .Blog { border-bottom-width: 0; } /* Profile ----------------------------------------------- */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /* Footer ----------------------------------------------- */ #footer { width: 1072px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } #rec{ width: 400px; height: 35px; background: url("")no-repeat; } #cat{ width: 400px; height: 30px; background: url("")no-repeat; } #aut{ width: 400px; height: 35px; background: url("")no-repeat; } #new{ width: 400px; height: 35px; background: url("")no-repeat; } #bar{ width: 400px; height: 22px; background: url("")no-repeat; } /** Page structure tweaks for layout editor wireframe */ } body#layout #header { margin-$startSide: 0px; margin-$endSide: 0px; } ]]></b:skin> </head> <body> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='5' showaddelement='yes'> <b:widget id='Header1' locked='true' title=' (Header)' type='Header'/> <b:widget id='HTML6' locked='false' title='Navigation' type='HTML'/> </b:section> </div> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='HTML2' locked='false' title='WELCOME' type='HTML'/> <b:widget id='HTML3' locked='false' title='MEMBERS' type='HTML'/> </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='HTML1' locked='false' title='Content' type='HTML'/> </b:section> </div> </div></div> <!-- end outer-wrapper --> </body> </html> Code: <table border="0" width="900" cellspacing="0" cellpadding="0"> <tr> <td> Text part 1</td> <td> Text Part 2</td> </tr> </table> Hi All i have the above piece of code which shows a 2 colum table. How can i set the widths of my cols to match the width of the text that is in it? I.e set col 1 to the width of text that is in it ( will not always be same length) and have cols 2 start as soon as this finishes. Im assuming this is a simple thing to do but im just not sure. Basically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html> <head> <style type="text/css"> table { border-collapse: collapse; } tbody td { line-height: 0px; visibility: hidden; } </style> </head> <body> <table id="table_test" border="0" cellpadding="0" cellspacing="0" style="background-color: red;"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> <th>column5</th> <th>column6</th> <th>column7</th> </tr> </thead> <tbody> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> </tbody> </table> </body> </html> And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? I created this website, http://www.earlyrain.com/jonathan... on my Mac, and it works exactly how I want it in Safari. But, when I go to my mom's PC with 2000 on it (internet explorer 6), the entire page is just random pictures everywhere and looks horrible. Then I can go into Firefox on her PC and the placement of everything works, but some of the pictures won't show up. There's a place for them, but I can't see them. so, I really need some help with the IE problem, seeing as I don't have these problems on my computer... I want to fix some of the images and links at fix position on the website on all pages. So i have used Div tag and given position fixed and mentioned the position required for me. It works fine in Chrom, Mozilla but does not works in Internet explorer. I tried all versions of IE from 7 to 9. But it is not looking in same way as it looks in other browsers. You too can visit this url: http://www.arete.in/sgcdesign/practice.html Hi, My background looks differently in Firefox and Explorer. Any ideas? Thank you <html> <head> <STYLE TYPE="text/css"> <!-- body { background-color: #570000; background-image: url(http://i144.photobucket.com/albums/r...uzaramka.jpg); background-repeat: no-repeat; background-position: center; background-position: top; } --> </STYLE> </head> </html> My site looks perfect in all other browsers, but in Internet Explorer (possibly only earlier versions) the alignment of everything is completely off...My blog content appears to the right of the header instead of under it... I validated my code and still no luck, I am stuck! Any help is greatly appreciated! My site is: http://fashion.pocketfullofgold.com THANKS!!! i have a site that works like charm in firefox but in internet explorer it results to a not found page.Its index page is full of tables and whn i erase some tr it work in internet explorer too Hi, It seems that a lot of threads of this board are geared towards people having CSS issues in IE, I'm learning how to make websites at the moment and have also noticed this issue. Why have Microsoft not done something about this? I don't understand, it seems like Firefox and other browsers have always been a few years in front of IE over the years, so why won't Microsoft just make a browser compatible with all the latest CSS features, if Firefox can do it I don't understand why Microsoft can't? Is making the browser more update really that difficult? I'm back...but hopefully this should be just a quick fix, for the life of me I just can't see the problem. My page looks great on all web browsers on Macs (Safari, Firefox, Internet Explorer). It also looks great of Firefox and Safari on a PC, although on Internet Explorer on a PC the menu bar displays a 'gap' all the way along beneath it which I just cant fix no matter what I try. I've included the whole header and menu bar html below, any pointers would be greatly appreciated: Code: <table width="879px" height="0" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" class="bodytext"><div id="title"><br> <br> </div></td> <!--<td align="right" valign="top">'pushes header to top'--> <div id="topleftnav"> <table width="879" border="0" cellpadding="0" cellspacing="0"> <td colspan="0"> <table width="879" border="0" cellpadding="0" cellspacing="0"> <td width="879" td valign="top" class="center"><img src="../images/header.jpg" width="879" height="194"></td> </tr> </table></td> </tr> </table> </div> </tr> <tr> <td height="23" colspan="6" > <table width="879" align="center" cellpadding="0" cellspacing="0" > <td width="35" height="23"><img width="35" height=23 src="../images/menugap.jpg" border=0> <td valign="top" class="center"> <table width="0" border="0" cellpadding="0" cellspacing="0" valign="top"> <td width="43"><a onMouseOver="MM_swapImage('Image620','','../images/homeon_new.jpg',1)" onMouseOut=MM_swapImgRestore() href="../home.php"><img id=Image620 width="43" height=23 src="../images/homeoff_new.jpg" border=0 name=Image620></a></td> <td width="63"><a onMouseOver="MM_swapImage('Image622','','../images/aboutuson_new.jpg',1)" onMouseOut=MM_swapImgRestore() href="../aboutus.php"><img id=Image622 width="63" height=23 src="../images/aboutusoff_new.jpg" border=0 name=Image622></a></td> <!--<td width="103"><a onMouseOver="MM_swapImage('Image631','','images/buttons/top/how_o.gif',1)" onMouseOut=MM_swapImgRestore() href="how.asp"><img id=Image631 height=18 src="images/buttons/top/how_i.gif" width=103 border=0 name=Image631></a></td>--> <td width="65"><a onMouseOver="MM_swapImage('Image623','','../images/productson_new.jpg',1)" onMouseOut=MM_swapImgRestore() href="../products.php"><img id=Image623 width="65" height="23" src="../images/productsoff_new.jpg" border=0 name=Image623></a></td> <td width="65"><a onMouseOver="MM_swapImage('Image627','','../images/contactuson_new.jpg',1)" onMouseOut=MM_swapImgRestore() href="../contact.php"><img id=Image627 width="65" height="23" src="../images/contactuson_new.jpg" border=0 name=Image627></a></td> <td width="643"><img src="../images/sidepiece.jpg"></td> </table></td> </table> <table width="879" border="0" cellpadding="0" cellspacing="0"> <td width="879" valign="center"><div align="center"><img src="../images/header_strip.jpg" width="879" height="6"></div></td> </table> |