|
HTML - Issue With Table In Css
Hello, I have a site that I am trying to work on and have an issue with a table that has been devided to allow for a sliced graphic and I cannot get the cells to come together even though I have put cellpadding and cellspacing to "0". you can view it he
http://www.silkwebsolutions.com/malyshbeck/ it is the same in Firefox and IE. I have tried collapsing the border for table and td and nothing works. Any help would be greatly appreciated. Thanks, S Similar TutorialsHey all.. I have an image that is not lining up in IE6, but does fine in FF... Here's the code: Code: <table height="400px" bgcolor="#efefef" width="192px" cellpadding="0" cellspacing="0"><tr><td height="20%" > <img src="images/module_header.gif" height="23px" width="190px" align="top" /> <a href="linkgoeshere.html" border="0" /> </a> </td></tr> <tr> <td> <center> <img src="images/module_header.gif" height="23px" width="190px" /> <a href="http://bbsnews.net/bbsn_weather/current.php?config=&forecast=zandh& pands=28792&Submit=GO" title="Commercial Free Weather at BBSNews.net"> <img valign="top" src="http://bbsnews.net/bbsn_weather/current.php? forecast=hourly&pands=28792&config=png&alt=hwicc&hwvttf=BOGSTAND& daysonly=1&hwvbg=efefef&hwvtc=black&hwvusettf=1" border=0 width=166 height=77></a> </center> </td></tr></table> </td></td></table> And here's an image of what I mean.. The two module headers at the top should be to the right... above the other items. Help would be much appreciated.. this is the last time im gonna nag any1 over stupid stuff if i could just get some help on this last issue i wont bother the forum members with my nonsense anymore, i ordered 2 html books on amazon.com and a java book my site is 100% ready to go public except this 1 issue i have .... I cant get my tables to properly work arround my flash menu ? you can see here if you minimize the window the table lets my flash menu move into my text it use to not do this but i dont know what i did... http://www.freewebs.com/fallingrain11/outcome.html the code im using for this is below :: <tr><td bordercolor="#7FFC00"; align="left" Width="17%" valign="top"> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <a href="javascript:void" > <object cellpadding="100"; classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="143" height="395"> <param name="BGCOLOR" value="#0"> <param name=movie value="irawr-flash-menu-vertical.swf"> <param name=quality value=high> <embed src="irawr-flash-menu-vertical.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="143" height="395" bgcolor="#0"> </embed> </object> </a></div> Hi, First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread. What I have is a simple table with two sections just like this: Code: <table>
<tr>
<td width='50%' valign='top'> Content goes here... </td>
<td width='50%' valign='top'> Content 2 goes here... </td>
</tr>
</table>
Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be). The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way. I tried setting height attribute but to no avail. Any thoughts how this can be achieved? Thank you in advance for your help! If I have a table that has 2 columns and the second column has 1 row (rowspan="2") and the first column has 2 rows, how can I keep the rows in the first column aligned top regardless of the height of the second column? Thanks~ Okay I have a table that has two rows and eight columns. I want to make a third row with only ONE column so that the third row is the length of the table. How do I go about doing that? This should be a pretty easy one, I think that I've just been staring at this for too long. The question is, why is the first row in this table so tall? I am expecting it to be around 400px tall, but it's about 950px. HTML Code: <html>
<head>
<style>
table.container{
width: 1400px;
}
table.subcontainer{
border: 1px solid #000;
text-align: center;
width: 100%;
}
td.container{
background: #DDD;
line-height: 4px;
vertical-align: top;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="container" rowspan="2" width="200"><table class="subcontainer">
<tr>
<td height="1000">Toolbar<br />1000 x 200</td>
</tr>
</table></td>
<td class="container" width="400" rowspan="2"><table class="subcontainer">
<tr>
<td height="200">400 x 200</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table></td>
<td class="container" colspan="2" width="800"><table class="subcontainer">
<tr>
<td height="400">800 x 400</td>
</tr>
</table></td>
</tr>
<tr>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Hi there. Can anybody help me fix this issue. At this test url you will see a simple table layout that I have built in Dreamweaver http://www.mediaminx.com/development/ The css can be viewed here http://www.mediaminx.com/development/pages/test.css The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling. Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out? Any ideas out there please? I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! I am trying to left-align this table and I cannot figure out why it will not behave. Mind you, the problem is only occurring in IE7 - IE8 and Firefox are fine. Please help? Code: <table summary="main content panel" align="left" bgcolor="#ffffff" border="0" cellpadding="0" width="535" height="200"> <tbody> <tr align="left"> <td align="left" width="15%"><img src="/images/369/images/content_image.png"><br><br><br><br></td> <td style="background: transparent url(/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">TEXT HERE</i>.</font></h1><br><br></td> </tr></tbody></table> Hiya, I'm altering an existing template for somebody, and I'm having trouble getting it to validate because of the damn tables. I really don't use tables much in favor of a css based layout, so I have very little experience in trying to figure out what the validator is trying to communicate to me. It seems what it tells me contradicts itself! Arggg.. If anyone could provide some insight into this tables mess it would be beyond appreciated. Thanks! -Zach (I've removed some of the superfluous stuff to make it a little simpler) 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" lang="en-US">
<head>
<title></title>
</head>
<body >
<div id="mainwrap">
<div id="header">
<div id="headermsg"></div>
<div id="outer">
<ul>
<li> <span class="xb1"> <a href="express"> <b class="hidden">AA
</b></a> </span> </li>
<li> <span class="xb2"> <a href="full"> <b class="hidden"> BB </b></a> </span> </li>
<li>
<div class="xb3"> <a href="group"> <b class="hidden">CC </b></a> </div>
</li>
<li>
<div class="xb4"> <a href="past"> <b class="hidden"> DD </b></a> </div>
</li>
</ul>
</div>
<!-- tab specific menu goes here -->
<div id="submenu1"> <a href="display/menufilter/madhus" title="menu filter">menu
filter</a> </div>
<div id="submenu2"> <a href="account/home/at/madhus" title="my account">my
account</a> <a href="services/login/at/madhus" title="log in">log
in</a> </div>
<!-- end tab specific menu -->
</div>
<!-- end header -->
<div id="wrapper">
<!-- Begin page layout table -->
<table id="maintable" border="0" width="100%">
<!-- headBoard menu goes here -->
<tr>
<td class="tdHead" colspan="3" valign="top"><!-- header row -->
<div id="headBoard"><div class="headboardtitle">Hello</div></div></td>
</tr>
<tr>
<td id="leftCol" valign="top"><div class="intro2"> </div>
<div id="main">
<div class="description">
<p>Street Address
<input type="text" name="street" value="" style="width: 200px" id="street"/>
<br />
City
<input type="text" name="city" value="" style="width: 260px" id="city"/>
<br />
State
<input type="text" name="state" value="" style="width: 124px" id="state"/>
Zip
<input type="text" name="zip" value="" style="width: 100px" id="zip"/>
</p>
<p style="background-color: #f8e081;"> <i>optional</i> <br />
<textarea name="comments" cols="20" rows="7" style="float:right; margin-right: 20px;" id="comments"></textarea>
Landmarks, cross streets, Special instructions <br />
<br />
<br />
<br />
<br />
<br />
Company
<input type="text" name="company" value="" style="width: 235px;" id="company"/>
<br />
Suite
<input type="text" name="suite" value="" size="13" id="suite"/>
Floor
<input type="text" name="floor" value="" size="13" id="floor" />
<br />
<input type="checkbox" name="Leave with doorman" id="doorman"/>
Please leave with doorman if not home <br />
<input type="checkbox" name="Call Before Delivery" id="call"/>
No phone/intercom, please call before delivery </p>
<a href="#">delete</a> </div>
<div class="customize2"> <a href="#"> New Address </a> </div>
<a href="#"> <b class="basketitem"> </b> </a>
</div>
</td>
<td id="centerCol" valign="top"><!-- Center Column -->
<div class="intro2"> </div>
<div id="main2">
<div class="description">
<p> Street Address
<input type="text" name="street" value="" style="width: 200px" id="street2"/>
<br />
City
<input type="text" name="city" value="" style="width: 260px" id="city2"/>
<br />
State
<input type="text" name="state" value="" style="width: 124px" id="state2"/>
Zip
<input type="text" name="zip" value="" style="width: 100px" id="zip2"/>
</p>
<p style="background-color: #f8e081;"> <i>optional</i> <br />
<textarea name="comments" cols="20" rows="7" style="float:right; margin-right: 20px;" id="comments2">
</textarea>
Landmarks, cross streets, Special instructions<br />
<br />
<br />
<br />
<br />
<br />
Company
<input type="text" name="company" value="" style="width: 235px;" id="company2"/>
<br />
Suite
<input type="text" name="suite" value="" size="13" id="suite2"/>
Floor
<input type="text" name="floor" value="" size="13" id="floor2"/>
<br />
<input type="checkbox" name="Leave with doorman" id="doorman2"/>
Please leave with doorman if not home <br />
<input type="checkbox" name="Call Before Delivery" id="call2"/>
No phone/intercom, please call before delivery </p>
<a href="#">delete</a> </div>
</div>
<div class="customize"> <a href="#"> Save Changes </a> </div>
<a href="#"> <b class="basketactionbuttons"></b> </a> </td>
</tr>
</table>
</div>
</div>
<!-- end page layout table -->
<div id="footer">
<p> <a href="display/contact/madhus" class="novisitedlink">Contact Us</a> | <a href="display/printmenu/madhus" class="novisitedlink">Print
Menu</a> | <a href="display/faq/madhus" class="novisitedlink">FAQ</a> </p>
<p class="smalltext">Powered by <a class="novisitedlink" href="http://www.letsorderonline.com/r/madhus">LetsOrderOnline.com</a></p>
</div>
</body>
</html>
my site at http://www.freewebs.com/fallingrain11/1.html im trying to get all the tables the same color but i cant get the last bit of it to color for me the line of code that makes that part of the table i think is ... <td align="left" Width="17%" valign="top" tr> i tried setting the color in .td2{} and tried to call it <td class=td2; ... .... .....> there is a problem can go through the URL below and open it in IE and any other browser like mozilla or chrome etc the mid section is not working properly it seems in IE as more spaced while in mozilla etc seems less spaced how to solve this issue. www.ims-sc.org please fix the peoblem. This might be a very simple problem to fix but I am struggling to find a solution. Basically this is the code for my table: HTML Code: <table cellpadding="0px" border="0px" > <tr><td rowspan="6" width="290px" height="375px"><img width="286px" height="371px" src="test.png"></td> <tr><th>Title</th></tr> <td colspan="2" width="450px">Content 1 <td width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td colspan="2" align="right" width="450px">Content 2 </td></tr> <td colspan="2" width="450px">Content 3 <td colspan="2" width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td align="right" width="450px">Content 4 </td></tr> </table> Basically the problem I have, is I want the 'content 4' box to be the same as the 'content 2' box (Stretched to the full width of the table.). Does anyone know what I'm doing wrong, I'm sure it's really obvious. Any help will be greatly appreciated. Fixed it on my own. Sorry about the post. Mods: Please delete this :] Hello Gurus, I have a webpage with two tables in it. I need to have both table of same identical height(65px) however the issue is, that one table ends up being larger than other one. no matter what I try it does not stay at 65px height. Pleaes help. Below is the code snippet Thanks, Ruchir --------- <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <br></br> </div> <!-- start content --> <!-- DIV CONTENT --> <head> <style type="text/css"> /* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { /*background: #A17461 url(images/img01.jpg) repeat-x;*/ font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #B1C0C7; } /*ol { list-style-position: inside; }*/ blockquote { border-left: 1px solid #9E9D89; } a { color: #FFFFFF; } a:hover { text-decoration: none; } /* Content */ .link:visited { font-family: Georgia,Arial,Verdana; vertical-align:top; color:rgb(0,82,82); text-align:auto; text-decoration:none; vertical-align: top; } .link:hover { font-family: Georgia, Arial,Verdana; vertical-align:top; color:rgb(0,148,231); text-align:auto; text-decoration:underline; vertical-align: top; } .link { font-family: Georgia, Arial,Verdana; vertical-align:top; color:Gray; text-align:auto; text-decoration:none; </style> <body> <div style="margin-left:0%"> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label</div> <div> <table cellspacing="0" cellpadding="0" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> <td> <!--2--> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label2</div> <div> <table cellspacing="0" cellpadding="15" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/managedservices.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/rfims.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </tr> </table> <!--aaa--> </div> </head> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> </div> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> Hello, I realize several threads have already been posted and that many of you dislike tables. I am having, however, a table issue that I think is only solvable through HTML adjustment of said table. In FF and IE8, my homepage looks excellent, just how I've laid it out. However, in earlier versions of IE (which the majority of my demographic still use), the layout of the table is askew. The remainder of my page is made up of various Flash movies, and I have tested that these are not the cause of the layout issue. The 2-cell table I have is being thrown for a loop (laying itself out to the right and stretching the site), and I'm not sure what the cause of it is. It needs to be left-aligned; below is my code: Code: <table summary="main content panel" align="left" bgcolor="#ffffff" width="535"> <tbody> <tr> <td align="left" width="15%"><img src="/images/369/images/content_image.png"></td> <td style="background: transparent url(/images/369/images/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">Valmont is currently conducting research on producing rice under mechanized irrigation in an effort to conserve water and energy, and increase profitability by bringing land into production, an initiative appropriately titled <i>Circles for Rice</i>.</font></h1></td> </tr></tbody></table> I'm unsure what the "scroll 0% 0%" through "-moz-initial;" is, the CMS I'm using has thrown that code in. (BTW - cannot get out of using CMS, which I would dearly love, this is a work project, so use what I'm given ) Here is why I think I still need to use a table: I need to be able to align two images (a photo and a border) but be able to insert text on top of the border. I had originally created this in Flash, but I totally spaced that I needed some text on the homepage so Google can index the text correctly. Is there another option to accomplish what I'm trying to do, one without tables? I appreciate all other options! Thanks! So i'm helping to work on a website but one issue that has occurred is with tables...here's the issue visually: We don't want that break...it only shows up in internet Explorer (no problem in Firefox). Here is the coding: <body> <div class="divCenteredStuff"> <div><img src="GetInvolvedHeader.jpg" alt="Branches" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="632,136,764,186" href="index.html" alt="Home" /> </map> </div> <div><img src="Banners/Banner6.jpg" alt="Banner" border="0" usemap="#MapMapMap" /> Any tips? THANKS! Greetings, This is my first post... I'm a novice web developer and pro drummer running www.ProMusicTeachers.com. The site is php/mysql, we have a search function smack in the middle of the index page that is set up as a <table>. The table should have a background image... this is the code I'm using is <table border="0" bgcolor="#FF9900" background="/images/searchgraphic.jpg" align="center" cellspacing="3" cellpadding="0" width="617"> to create the table, then comes the form. However, the background image shows up only in Safari, but not IE or Firefox. This seems like a very simple tag... and I swear last night it showed up in Firefox too but this morning will not. Any suggestions? Much thanks, Brian When I view the HTML in a normal IE browser it works fine: www.virtuosovideo.com/myspace When I plug the same HTML into a MySpace profile the table gets broken up: www.myspace.com/adamhaviland Any idea why? Your help is greatly appreciated. Thanks, Adam |
|||||||