HTML - Ie6 Simple Layout Issue: Please Help Before I Shoot Myself!

Hi !
Found this code below in this HTML section.( How to make images & text boxes line up.)
Thanks Coothead, but needs a "table" apparently.


Need ( 6, say ) thumbnails across the page. Space around.
Then, underneath, same again - and so on.
Like a chess board

This code brings up the FULL size image, in line across.
Please could you add what is needed?
Then I could use it as a template (?) and tweek the sizes (?)
No text required.

<table>
<tr>
<td><img src="pic1.gif"></td>
<td><img src="pic2.gif"></td>
</tr>
</table>

Thank you in advance for any help -

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?

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">&nbsp;</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>&nbsp;</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 &nbsp 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>
&nbsp&nbsp&nbspLogical device name                      : RAID1Mirror</br>
&nbsp&nbsp&nbspRAID level                               : 1</br>
&nbsp&nbsp&nbspStatus of logical device                 : Optimal</br>
&nbsp&nbsp&nbspSize                                     : 476150 MB</br>
&nbsp&nbsp&nbspRead-cache mode                          : Enabled</br>
&nbsp&nbsp&nbspWrite-cache mode                         : Enabled (write-back)</br>
&nbsp&nbsp&nbspWrite-cache setting                      : Enabled (write-back)</br>
&nbsp&nbsp&nbspPartitioned                              : No</br>
&nbsp&nbsp&nbspProtected by Hot-Spare                   : No</br>
&nbsp&nbsp&nbspBootable                                 : Yes</br>
&nbsp&nbsp&nbspFailed stripes                           : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
&nbsp&nbsp&nbspSegment 0                                : Present (0,0) </br>
&nbsp&nbsp&nbspSegment 1                                : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
&nbsp&nbsp&nbspChannel #0:</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                        : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice #0</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice is a Hard drive</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspState                              : Online</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSupported                          : Yes</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                     : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspReported Channel,Device            : 0,0</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVendor                             : ST350032</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspModel                              : 0A</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFirmware                           : SD15</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSize                               : 476940 MB</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspWrite Cache                        : Enabled (write-back)</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFRU                                : None</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspS.M.A.R.T.                         : No</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice #1</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice is a Hard drive</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspState                              : Online</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSupported                          : Yes</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                     : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspReported Channel,Device            : 0,1</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVendor                             : ST350032</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspModel                              : 0A</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFirmware                           : SD15</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSize                               : 476940 MB</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspWrite Cache                        : Enabled (write-back)</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFRU                                : None</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspS.M.A.R.T.                         : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
&nbsp&nbsp&nbspController Status                        : Optimal</br>
&nbsp&nbsp&nbspChannel description                      : SATA</br>
&nbsp&nbsp&nbspController Model                         : Adaptec 2420SA</br>
&nbsp&nbsp&nbspController Serial Number                 : CCEE20</br>
&nbsp&nbsp&nbspPhysical Slot                            : 2</br>
&nbsp&nbsp&nbspInstalled memory                         : 128 MB</br>
&nbsp&nbsp&nbspCopyback                                 : Disabled</br>
&nbsp&nbsp&nbspBackground consistency check             : Disabled</br>
&nbsp&nbsp&nbspAutomatic Failover                       : Enabled</br>
&nbsp&nbsp&nbspDefunct disk drive count                 : 0</br>
&nbsp&nbsp&nbspLogical devices/Failed/Degraded          : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
&nbsp&nbsp&nbspBIOS                                     : 5.2-0 (15611)</br>
&nbsp&nbsp&nbspFirmware                                 : 5.2-0 (15611)</br>
&nbsp&nbsp&nbspDriver                                   : 1.1-5 (2459)</br>
&nbsp&nbsp&nbspBoot Flash                               : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
&nbsp&nbsp&nbspStatus                                   : Not Installed</br>
</p>
</html>

Thanks,

If 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

I have a simple 2 column 2 row table that looks like the code below. I want to expand cell 2's height without expanding cell 1's height. I need this to be dynamic due to different users seeing different heights in cell 2. Cell 3's height can change all it wants to...I just dont want cell 1's height to change!!



<html>
<head>
<title>Height Issue</title>
</head>
<body>
<table>
<tr>
<td width="100px" height="100px"style="background-color: ##00FF00">cell 1</td>
<td rowspan="2" width ="100px" height="200px"style="background-color: #00FFFF">Cell 2</td>
</tr>
<tr>
<td width ="100px"height="100px"style="background-color: #FFFF00">Cell 3</td>
</table>
</body>
</html>

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, i tried looking through forums but couldnt find an answer. i hope u can please help! i have a photography ad up on a site that i use html for, its simply a block of code hosting a list/tall page of pics, one line/pic goes like this... <img src="http://img715.imageshack.us/img715/3126/img7899small.jpg"><br> the other lines in the text are the same code. problem is they all try to load up simultaneously causing a slow ad to see anything, potentially losing observers attention span. do u know if theres some code i can add to each line so each pic loads up fully before the next one begins to load and this starts at the top? this will help keep attention due to somin at the top loading straight away, thanks!

hey forum. first timer here with what i think should be a simple fix...but i'm frustrated and out of patience.

can anyone tell me why i can't get rid of the blank space above "bedrooms" in the left column here?

http://jimbwayne.com/kdtest/interiordesign.html

same issue with the middle column, actually. i'm stumped.

any intel would be much appreciated.

thanks in advance.

jim

Hello HTMLforums.com community!

I am doing some minor web design for an NPO (non-profit organization) in my community.

There are some pages that exhibit this strange spacing between the headers and body as you will see on the following pages:

http://www.gadshillcenter.org/progra...grams_main.php
http://www.gadshillcenter.org/progra...enservices.php
http://www.gadshillcenter.org/progra...connection.php

This same thing happens with all other program_??.php pages. However, it does not happen on the following, seemingly identical templates:

http://gadshillcenter.org/report/report_main.php
http://gadshillcenter.org/newsevents...herreading.php
http://gadshillcenter.org/newsevents...blications.php

There doesn't seem to be borders on any of the pictures, so I see no reason for the indent that pushed the picture and top-left edge down one row.

I use Microsoft Office Sharepoint Designer 2007. If you would like to view the code for any pages, just ask!

Any ideas why? I could ENTIRELY reformat the pages, put them into tables and what-not, but that would take a while. Is there any way around this? Thank you all!

Sincerely,
Andrew

Hello World! (Where did that tradition start anyways?)

Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell.

Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white.

I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue?

Here is the code:

<td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;">
<!-- TemplateBeginEditable name="Body" -->
//In here goes all of the content of the page
<!-- TemplateEndEditable --></td>


The CSS:

#page_background_beige {
background-image: url(Background_Pixel.png);
background-repeat: repeat;
}

Thanks,
Wookieguy

(Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.)

Hi all,

This is my first post and its so simple that i am a bit embarrassed to post it,

I have created a page with a flash video on it, but the only problem is cant workout how to centre the video, some help would be greatly appreciated,

Here is the code,

http://www.ogeetek.com/dave_test/test.txt

And here is the website

http://www.ogeetek.com/dave_test/test.html

Thanks in advance,

Are there in depth tutorials on making a Div layout?
Tables are making way more sense.

How do you make a div float to the right of something without having it move to the bottom when a page is shrinked?

How do you make a div take up space within a div that not taken out?

Like in a div. 80%, inside that div is a 100px div, then have another div inside the 80% div that uses the rest of the space?

and how do you fix this?

http://vertion.fused.ws/div.html

I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up:



Is that possible? I've tried various things but no luck yet.