|
HTML - Table Layout Issue
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? Similar TutorialsIf anyone can help with this problem I would be very grateful. It's a problem I notice on a fairly regular basis so I guess I am over looking something when I am working with tables. Basically my table sizes look completely different in IE than they do in Firefox. Here is an example of a table I'm working on that appears massive in firefox yet is keeping its correct dimensions of height 287 pixels in IE. http://www.orolin.co.uk/prices.html Can anyone shed any light on this problem?. It would be much appriciated. Many Thanks, Jamie Hi all, I have recently launched my company website, I am quite a new to web design and have pretty basic knowledge of html and css, I use Mozilla as my browser and upon creating this the layout was perfect for me, however since its launch I have checked it on IE and it is all over the place, I have had help to solve the problem on the main page, which I can use to fix most other pages, however on http://www.pisales.co.uk/products.html#target1 I still cannot fix it so hopefully someone can point me in the right direction, Thank you very much in advance, Hi, My website was nearly there, and I paid someone to work on my website and he ended up recoding the layout, and now some things arnt sitting right. I will try to explain this as best as I can. I would really, REALLY appreciate any help people can give me, I was supposed to have this site done last weekend . Here is a link: to the current site: LINK Im trying to do two things to it. I need the yellow box to sit in the horizontal center of the blue box and I need to remove the space above the main gallery image and the top of the yellow box. Here is my css for the box: Code: #content {
margin: 0 0 0 180px;
overflow: auto;
background: #00f;
}
#main-image-container {
width: 690px;
margin: 0 auto;
position: relative;
/*margin:0 auto 0 10%;*/
text-align: center;
background: #fc6;
}
#main-image-container {
position: relative;
float:left;
/*margin:0 auto 0 10%;*/
text-align: center;
margin-left:10%;
/*background: #00f;*/
}
#main-image-container #sliding-frame p {
position: relative;
height: 470px;
overflow: hidden;
}
#main-image {
/*position: absolute;*/
cursor: nw-resize;
z-index: 10;
background-color: #111;
}
Here is the HTML / PHP for the block (most of this is just for generating the thumbnails at the bottom): Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
{/if}
<div style="height:100px;clear:both;"></div>
{assign var="childrenInColumnCount" value=0}
{assign var="subalbumCount" value=0}
<div id="thumbs-container"{if $theme.imageCount < 1 } style="background:none; margin-top:30px"{/if}>
<div id="gsThumbMatrix" align="left">
<ul style="list-style:none;"><li style="float:left;">
<table align="left">
<tr valign="top">
{foreach from=$theme.children item=child}
{if !$child.canContainChildren && $child.entityType != 'GalleryLinkItem'}
{if ($childrenInColumnCount == $theme.params.columns)}
{* Move to a new row *}
</tr></table></li><li style="float:left;"><table align="left"><tr valign="top">
{assign var="childrenInColumnCount" value=0}
{/if}
{assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
{assign var=childSummary value=$child.summary|markup|escape:html}
{assign var=childDescription value=$child.description|markup|escape:html}
<td class="giItemCell">
{if isset($theme.params.itemFrame) && isset($child.thumbnail)}
{g->container type="imageframe.ImageFrame" frame=$theme.params.itemFrame}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image
id="%ID%" item=$child image=$child.thumbnail
class="%CLASS% giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a>
{/g->container}
{elseif isset($child.thumbnail)}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image
item=$child image=$child.thumbnail
class="r giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a>
{else}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}"
class="giMissingThumbnail">
{g->text text="no thumbnail"}
</a>
{/if}
</td>
{else}
{assign var=subalbumCount value="`$subalbumCount+1`"}
{/if}
{/foreach}
{* flush the rest of the row with empty cells *}
{section name="flush" start=$childrenInColumnCount loop=$theme.params.columns}
<td width="70"> </td>
{/section}
</tr>
</table></li>
</ul>
</div>
</div>
</div>
{* Loop around for the albums this time *}
{assign var="childrenInColumnCount" value=0}
{if $subalbumCount > 0}
<div id="subalbums-container">
<table id="gsSubAlbumMatrix">
<tr valign="top">
{foreach from=$theme.children item=child}
{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
{if ($childrenInColumnCount == 2)}
{* Move to a new row *}
</tr><tr>
{assign var="childrenInColumnCount" value=0}
{/if}
{assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
<td class="giAlbumCell gcBackground1">
{if isset($child.thumbnail)}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" style="clear:both;">
{g->image item=$child image=$child.thumbnail}<br />
{$child.title|entitytruncate:25}</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
class="giMissingThumbnail">
<img src="{g->theme url="images/missing.png"}" width="40" height="40"
alt="{g->text text="no thumbnail"}" /><br />
{$child.title|entitytruncate:25}</a>
{/if}
{g->block type="core.ItemInfo" item=$child
showDate=false
showOwner=$theme.params.showAlbumOwner
showSize=false
showViewCount=false
showSummaries=true
class="giInfo"}
</td>
{/if}
{/foreach}
{* flush the rest of the row with empty cells *}
{section name="flush" start=$childrenInColumnCount loop=2}
<td> </td>
{/section}
</tr>
</table>
</div>
{/if}
{/if}
{if !empty($theme.navigator)}
<div class="gbBlock gcBackground2 gbNavigator">
{g->block type="core.Navigator" navigator=$theme.navigator}
</div>
{/if}
{* Store these results in a JavaScript-accessible set of arrays so the slideshow can get at them *}
<script type="text/javascript">
// <![CDATA[
var slideshowImageWidths = new Array({if $theme.imageCount==1}1);
slideshowImageWidths[0] = {$theme.imageWidths};
{else}{$theme.imageWidths});{/if}
var slideshowImages = new Array();
{foreach from=$theme.children key=i item=it}
{if !$it.canContainChildren && $it.entityType != 'GalleryLinkItem'}
slideshowImages.push('{if isset($it.image)}{g->url arg1="view=core.DownloadItem"
arg2="itemId=`$it.image.id`" arg3="serialNumber=`$it.image.serialNumber`"
htmlEntities=false}{else}{g->url params=$theme.pageUrl arg1="itemId=`$it.id`"
htmlEntities=false}{/if}');
{/if}
{/foreach}
// ]]>
</script>
<!--end content--></div>
Im trying to have the top of the blue box line up with the top of the red box, and remove the gap above the main gallery image and the top of the yellow box. Could anyone tell me why this is happening, it wasnt happening before and I have no idea what he changed. I just finished writting an HTML email. All looked fine when it was in the browser then I tested it in my email client and all the layout is wrong. my </BR> dont seem to have any affect also im not sure why only some of the   are being shown and not displayed as spaces (??) Heres the code : Code: Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit
MIME-Version: 1.0
<html>
<style type="text/css">
body {
font-family:verdana;
font-size:90%;
line-height:160%;
}
table.mainsection {
background-color:#838B8B;
width:50%;
color:white;
text-align:left;
font-size:99%;
padding:1px;
margin-top:5px;
}
table.subsection {
background-color:#B7C3D0;
color:white;
width:49%;
color:white;
text-align:left;
font-size:88%;
margin-left:14px;
margin-top:5px;
padding:1px;
}
</style>
<body>
<img src="http://graphics.adaptec.com/us/templates/head_logo.gif" />
<p>
<table class=mainsection >
</tr>
<th>Logical device information</th>
<tr>
</table>
Logical device number 0</br>
   Logical device name : RAID1Mirror</br>
   RAID level : 1</br>
   Status of logical device : Optimal</br>
   Size : 476150 MB</br>
   Read-cache mode : Enabled</br>
   Write-cache mode : Enabled (write-back)</br>
   Write-cache setting : Enabled (write-back)</br>
   Partitioned : No</br>
   Protected by Hot-Spare : No</br>
   Bootable : Yes</br>
   Failed stripes : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
   Segment 0 : Present (0,0) </br>
   Segment 1 : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
   Channel #0:</br>
      Transfer Speed : SATA 3.0 Gb/s</br>
      Device #0</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,0</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
      Device #1</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,1</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
   Controller Status : Optimal</br>
   Channel description : SATA</br>
   Controller Model : Adaptec 2420SA</br>
   Controller Serial Number : CCEE20</br>
   Physical Slot : 2</br>
   Installed memory : 128 MB</br>
   Copyback : Disabled</br>
   Background consistency check : Disabled</br>
   Automatic Failover : Enabled</br>
   Defunct disk drive count : 0</br>
   Logical devices/Failed/Degraded : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
   BIOS : 5.2-0 (15611)</br>
   Firmware : 5.2-0 (15611)</br>
   Driver : 1.1-5 (2459)</br>
   Boot Flash : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
   Status : Not Installed</br>
</p>
</html>
Thanks, I have a Very simple page laid out using <div>'s and at the bottom, IE6 is displaying some of my text (a text link) twice, and wrapping it to the next line? ANY help at all would be a life saver. http://www.jhilgert.com/em/index.html thanks in advance for any help. It figures it's the easy things that are getting me..lol. For some reason I just can't seem to get the table to match what I am looking for. Could be I am up too late trying to get this to work but if anyone could provide the table code I would need to get the following it would be much appreciated!! I don't need any of the width attributes or anything, just the basic table structure to get this layout!! Thank you in advance for the help!! A crude drawing but hopefully gets the idea across..lol SEE IMAGE How can I get these two tables on the same row? Do they have to be in one whole table altogether? Or can they be separate tables. At the 'mo they're different tables. Thanks I have a template that is being used for a forum and the tables are not working out and everything looks distorted. PHP Code: <script language="JavaScript" src="modules/Forums/bbcode_box/add_bbcode.js" type="text/javascript"></script> <table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline"> <!-- BEGIN switch_username_select --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" tabindex="1" name="username" size="25" maxlength="25" value="{USERNAME}" /></span></td> </tr> <!-- END switch_username_select --> <!-- BEGIN switch_privmsg --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" name="username" maxlength="25" size="25" tabindex="1" value="{USERNAME}" /> <input type="submit" name="usersubmit" value="{L_FIND_USERNAME}" class="liteoption" onclick="window.open('{U_SEARCH_USER}', '_phpbbsearch', 'HEIGHT=250,resizable=yes,WIDTH=400');return false;" /></span></td> </tr> <!-- END switch_privmsg --> <tr> <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td> <td class="row2" width="78%"> <span class="gen"> <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="{SUBJECT}" /> </span> </td> </tr> <tr> <td class="row1" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="1"> <tr> <td><span class="gen"><b>{L_MESSAGE_BODY}</b></span> </td> </tr> <tr> <td valign="middle" align="center"> <br /> <table width="100" border="0" cellspacing="0" cellpadding="5"> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}" class="gensmall"><b>{L_EMOTICONS}</b></td> </tr> <!-- BEGIN smilies_row --> <tr align="center" valign="middle"> <!-- BEGIN smilies_col --> <td><img src="{smilies_row.smilies_col.SMILEY_IMG}" border="0" onmouseover="this.style.cursor='hand';" onclick="emoticon('{smilies_row.smilies_col.SMILEY_CODE}');" alt="{smilies_row.smilies_col.SMILEY_DESC}" title="{smilies_row.smilies_col.SMILEY_DESC}" /></a></td><!-- END smilies_col --> </tr> <!-- END smilies_row --> <!-- BEGIN switch_smilies_extra --> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}"><span class="nav"><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=250');return false;" target="_phpbbsmilies" class="nav">{L_MORE_SMILIES}</a></span></td> </tr> <!-- END switch_smilies_extra --> </table> </td> </tr> </table> </td> <td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span> <table width="450" border="0" cellspacing="0" cellpadding="2"> <tr align="right" valign="middle"> <td> <p dir="rtl" style="margin-top: 0; margin-bottom: 0" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></span><p dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span class="genmed"><span style="font-size: 5pt"> </span></span></td> </tr> <span class="gen"> <tr> <td width="100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <p dir="ltr" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></td> </tr> <tr> <td dir="rtl"> <p align="right" dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span style="font-size: 5pt"> </span><p align="left" dir="ltr" style="margin-top: 0; margin-bottom: 0"><span class="gen"> <span class="genmed"> </span></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td colspan="9"> <span class="gensmall"> <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" /> </span></td> </tr> <!-- Canned MOD Begin --> <tr> <td colspan="9">{S_CANNED_SELECT}</td> </tr> <!-- Canned MOD End --> <tr> <td colspan="9"><span class="gen"> <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea> </span></td> </tr> </table> </span></td> </tr> <tr> <td class="row1" valign="top"><span class="gen"><b>{L_OPTIONS}</b></span><br /><span class="gensmall">{HTML_STATUS}<br />{BBCODE_STATUS}<br />{SMILIES_STATUS}</span></td> <td class="row2"><span class="gen"> </span> <table cellspacing="0" cellpadding="1" border="0"> <!-- BEGIN switch_html_checkbox --> <tr> <td> <input type="checkbox" name="disable_html" {S_HTML_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_HTML}</span></td> </tr> <!-- END switch_html_checkbox --> <!-- BEGIN switch_bbcode_checkbox --> <tr> <td> <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_BBCODE}</span></td> </tr> <!-- END switch_bbcode_checkbox --> <!-- BEGIN switch_smilies_checkbox --> <tr> <td> <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_SMILIES}</span></td> </tr> <!-- END switch_smilies_checkbox --> <!-- BEGIN switch_signature_checkbox --> <tr> <td> <input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} /> </td> <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td> </tr> <!-- END switch_signature_checkbox --> <!-- BEGIN switch_notify_checkbox --> <tr> <td> <input type="checkbox" name="notify" {S_NOTIFY_CHECKED} /> </td> <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td> </tr> <!-- END switch_notify_checkbox --> <!-- BEGIN switch_delete_checkbox --> <tr> <td> <input type="checkbox" name="delete" /> </td> <td><span class="gen">{L_DELETE_POST}</span></td> </tr> <!-- END switch_delete_checkbox --> <!-- BEGIN switch_lock_topic --> <tr> <td> <input type="checkbox" name="lock" {S_LOCK_CHECKED} /> </td> <td><span class="gen">{L_LOCK_TOPIC}</span></td> </tr> <!-- END switch_lock_topic --> <!-- BEGIN switch_unlock_topic --> <tr> <td> <input type="checkbox" name="unlock" {S_UNLOCK_CHECKED} /> </td> <td><span class="gen">{L_UNLOCK_TOPIC}</span></td> </tr> <!-- END switch_unlock_topic --> <!-- BEGIN switch_type_toggle --> <tr> <td></td> <td><span class="gen">{S_TYPE_TOGGLE}</span></td> </tr> <!-- END switch_type_toggle --> </table> </td> </tr> {ATTACHBOX}{POLLBOX} <tr> <td class="catBottom" colspan="2" align="center" height="28"> {S_HIDDEN_FORM_FIELDS}<input type="submit" tabindex="5" name="preview" class="mainoption" value="{L_PREVIEW}" /> <input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="{L_SUBMIT}" /></td> </tr> </table> <table width="100%" cellspacing="2" border="0" align="center" cellpadding="2"> <tr> <td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td> </tr> </table> </form> <table width="100%" cellspacing="2" border="0" align="center"> <tr> <td valign="top" align="right">{JUMPBOX}</td> </tr> </table> {TOPIC_REVIEW_BOX} Could somebody take a look at that and see what I'm missing or need to add. Thanks I designed a page using tables with background images to create borders around photos. Click here to view the page. The page renders correctly in Firefox, but does not in IE7. The lower right hand corner border of the photo in the 2nd and the 4th testimonials is off track for some reason. I double checked all of my widths and they are consistent. Can someone please tell me what I'm missing. Thanks in advance for your help! Im creating a site using a table based layout. I have one table and many different cells. I also have a lot of different content. The problem I'm having is when I put a picture inside a cell, it screws up the entire layout. It doesn't stay "still", it just affects all the other cells. I always have this problem, yet can't find a solution. This is pretty basic, i am trying to make a layout using tables to include a header, nav bar, left, main and right columns(tables) and a footer, so far i have this(below), the header and nav bar work ok, after that the tables align to the left out of postion with the header etc, how do i get the left table to be flush with the header and nav bar tables and then the middle table and right tables(cols) to be in the right place??... any help here....? HTML Code: <table width = "80%" border = "1" align = "center"> <tr> <td> Header </td> </tr> <table width = "80%" border = "1" align = "center"> <tr> <td> Nav bar</td> </tr> </table> <!-- i can't get this table to be flush with the header and nav bar tables --> <table width = "20%" border = "1" align = "left"> <tr> <td> Left col </td> </tr> </table> </table> This is what i am trying to achieve, Hi Guy's, First time poster and newbie designer. I am trying to put a three column template together for a content site, I want to have the text in the middle, nav on the left and adsense on the right hand column. Problem is that I simply can't get the elements to align correctly, when I add the text, the images on the left and right are pushed down to the middle of the left and right columns and if I push up the left image using text and white space it pushes the text in the middle column out of alignment!!! It's incredibly frustrating and I have tried lots of alignment settings to get it to work but I can't and I am sure I am just missing some real basic things. Please can you look at the page and help me to find what I am doing wrong http://www.blueballoonshopping.info/3colprob.html Thanks So I had a friend who owed me some work layout my new website. He did it in a table format and probably used a template. I hate working with tables and I've been trying to get a nav bar underneath the main picture, but I don't remember how to do it in tables. I wish he would have done the whole layout in CSS. So the question is: can I place a nav box absolutely on the page even though it's a table layout? Or what if it scrolled down with the reader? That's javascript right? I kinda like the layout so I don't want to muck too much with the look and feel (plus I have to build about 15 more pages of information before I can put too much work on layout). You can see the website he http://www.hollywood-script-reader.com I started a navigation box in my CSS, but it either puts it right at the top or below the whole layout. Thought I'd let the masters tell me why I suck at this! Thanks everyone. I feel like I have this forum on speed dial. Roberto I am trying out a couple of layouts for presenting some information in table format. Basically, two tables side by side. Table 1: 3 rows, one column fixed width. table 2: A calendar format with 3 rows. In FF they are displayed as I want them. Even if I include an overflow to force a horizontal scrollbar. Ok I know. But if horizontal scrollbars are not desired, then why do we have them? In IE the overflow is totally ignored. Should I happen to have in table 1, a 4th line of text, then the <hr> I use as a seperator, shows up floating beside table 1, not underneath it as it should. Easily fixed with a <br> but I feel that should not be necessary. In IE, A horizontal scroll bar is not displayed until the data is forced way beyond the edge unlike in FF. Then table 2 drops below table 1 which is not where I want it. In another format, I simply place table 2 under table 1. Which is ok but just doesn't look right. Anyone have a site that discusses this problem and how to work around it so that the browsers are satisfied and the tables show as I want? I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer Table Code: <body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF> <table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt=""> <tr> <td colspan="4"> <img src="images/header_01.png" width="770" height="185" alt=""></td> </tr> <tr> <td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;"> </td> <td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;"> <!---------------------------------News-----------------------------------> <p class="marquee"> <Marquee direction="left" scrollamount="2" scrolldelay="50"> News at 11! </Marquee></p> <!---------------------------------News-----------------------------------> <td> <tr> <td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;"> <!---------------------------------Navigation------------------------------------> <p class="nav">Main</p> <p class="li"> = <a href="index.html">Home</a><br> </p> <!---------------------------------Navigation------------------------------------> </td> <td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;"> <!----------------------------------Content--------------------------------------> <center>*insert title*</center> <!----------------------------------Content--------------------------------------> </td> <td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;"> <!------------------------------------Info---------------------------------------> <center>Hey!</center> <!------------------------------------Info---------------------------------------> </td> </tr> <tr> <td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;"> <!-----------------------------------Credits---------------------------------------> <center> Site is Copyright © of Concord Cosplay Group 2007<br> Layout by Joel Watson </center> <!-----------------------------------Credits---------------------------------------> </td> </tr> </table> </body> Hello, I cannot seem to get my css menu to work in harmony with my html table. Here is where the problem lies: http://www.beta.iquorum.net It looks fine sometimes when the page is maximized. However, when you resize the browser to a smaller size, it distorts the alignment. I know it does this because the layer that the menu resides in has a fixed coordinate position, while my table is aligned via the align tag in my HTML code. Is there a way to somehow put the menu inside of the cell of my table? Every time I try, it completely ruins the layout of the page and prevents the menu from functioning correctly. Is there a way to possibly define a fixed coordinate position for a table rather than using the align="center" tag? Just a thought. Thanks for any suggestions. Hello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. Hi, I would like to create a website with header,footer and left menu,main body and right menu. And I choose Html tables for this as my domain is not supporting PHP, so I thought of doing this by using HTML Layout tables. And my question is in the left menu If I click the hyperlink I want to display some other page only in the center body, how to do this If I use normal hyperlink it is occupying the total page but I want it to be display only on the Center of the table. How to do this. Here is my code: <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Title</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="934" height="808"> <!-- MSTableType="layout" --> <tr> <td valign="top" colspan="4" height="110"> <!-- MSCellType="ContentHead" --> <p align="center"><b>Title</b></td> </tr> <tr> <td valign="top" width="179"> <!-- MSCellType="NavBody" --> Left Links<p> </p> <p><a href="../test_link.htm">Link1</a></p> <p>Link2</p> <p>Link3</p> <p> </td> <td valign="top" width="606"> <!-- MSCellType="ContentBody" --> </td> <td valign="top" height="625" width="128"> <!-- MSCellType="NavBody2" --> Right space</td> </tr> <tr> <td valign="top" colspan="4" height="73"> <!-- MSCellType="ContentFoot" --> <p align="center">footer</td> </tr> </table> </body> </html> Can some body pls help on this. I appreciate your efforts, Thanks in Advance. Hi all, I love the design of this forum. I have a very annoying HTML problem and really need help. Would REALLY appreciate it. On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc I've attached a gif file that describes the problem. Thank you so much for your help... Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though |
|||||||