473,396 Members | 1,924 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Problem aligning cell in table

Hello,
I am having a problem aligning a cell in a table and have tried everything I can think of to correct this without any luck: It appears that the white area, which is an image in the background of this table within a table is shifted slightly to the right. It's driving me crazy. Any help would be greatly appreciated.

Here is the url and the code for the whole page:

http://kittelbergerdesign.com/indextest.html

<html>
<head>
<title>hat horizons</title>

<style>
P {font-size:9pt;
font-color:#000033;
font-weight:normal;
font-family: "arial"}
</style>


<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below


Pic[0] = 'images/Uzbekcap.jpg'
Pic[1] = 'images/constablehat.jpg'
Pic[2] = 'images/Kyrgistan.jpg'
Pic[3] = 'images/Lesotho.jpg'
Pic[4] = 'images/Nigerian.jpg'
Pic[5] = 'images/BurmaRawang.jpg'
Pic[6] = 'images/montera.jpg'
Pic[7] = 'images/Tlingithelmet.jpg'
Pic[8] = 'images/Mongoliasoldier.jpg'

// =======================================
// do not edit anything below this line
// =======================================


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans (duration=2)"
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



</head>

<body bgcolor="#000000" onload="runSlideShow()">

<table border="0" cellpadding="0" cellspacing="0" width="720" height="518" align="center">

<tr>
<td colspan="18" background="images/index header rev.jpg" width="720" height="109" align="right">
</td>
</tr>

<tr>
<td colspan="4" background="images/yellow box rev.jpg" width="157" height="382" valign="top">

<table border="0" cellspacing="0" cellpadding="8" width="157" height="382">
<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" width="382" valign="top">
</td>

<td colspan="2">
</td>
</tr>

<tr>
<td colspan="2">
</td>

<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>

<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
<td colspan="2">
</td>
</tr>

<tr>
<td colspan="2">
</td>

<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>

<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>

<td colspan="2">
</td>
</tr>
</table>
</td>

<td colspan="15" valign=top" bgcolor="#ffffff">

<table border="0" cellpadding="0" cellspacing="0" background="images/white textbox rev.jpg" width="563">

<tr>
<td colspan="1">
</td>

<td colspan="14">
<P>Hat Horizons will make you think differently about what you put on your head.<br> With their endless variations, hats and headdresses are a tribute to the diversity<br>of the worlds cultures. Knowledge of headgear can instill an awareness and<br>appreciation of our cultural differences. At the same time, by understanding the<br>purposes for which they are worn, hats may act as a bridge, reinforcing attitudes<br>and values that are shared by people around the globe.


</td>
</tr>

<tr>
<td colspan="6">

<img src="images/constablehat.jpg" name='SlideShow' width="240" height="200">
</td>


<td colspan="9" height="200" valign="top">
<br>

<P>Hats and headdresses from the collection are available<br>for exhibit. The head coverings make an engaging and educational visual display for museums, galleries and schools and other public spaces.
<br>

<P>Head coverings provide the foundation for programs we offer on cultural diversity and ethnic understanding. Presentations and workshops can be customized for a variety of audiences and ages in educational, community and corporate environments.<p>
Thanks for visiting the site!

<p>
<font size="2" face="times" color="#000033">
<i><b>Stacey W. Miller,</b> Mitrologist</i>
</font>

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td colspan="18" valign="top">
<img src="images/bottom header rev.jpg" valign="top" width="720">

</td>
</tr>

</table>

</body>
</html>
Sep 12 '06 #1
11 3073
drhowarddrfine
7,435 Expert 4TB
I haven't a clue how to lay out pages using tables but you might validate and fix your code to see where you stand. Right now you have about 34 html errors and a number of css errors.
Sep 12 '06 #2
Is there anyone else who could help me with this problem.. still shifted to the right slightly in the white area. Please reference the url above. Thanks.
Sep 13 '06 #3
drhowarddrfine
7,435 Expert 4TB
Ok, it looks like you fixed half of your html errors and now your page looks good in Firefox but still messed up in IE. This is normal because IE is old, buggy and does a lousy job of following the standards.

The very next thing you must do is add a proper doctype. On the first line of every page you have you should include this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

This is telling browsers which set of rules you are going to follow. Right now, IE is in what's called 'quirks mode', essentially following the standards from 1998 and wreaking havoc with something called the "box model" problem. (A long standing, very serious, IE bug.) Including the doctype will put IE into 'standards mode' and make it perform a little like more modern browsers, such as Firefox, Opera and anything but IE.
Sep 13 '06 #4
It looks perfect in firefox and safari. I did add the doc. I sure hope this looks as good in IE. will have to wait until tomorrow to check since I only have access to a mac right now.

Thank you so much for explaining and the helpful tip!
Sep 13 '06 #5
drhowarddrfine
7,435 Expert 4TB
Just checked and they both look pretty good. However, do yourself a favor and work on fixing these html errors and these css errors. Just because it looks good now does not mean it will when you add/change something in the future. In addition, different browsers may react differently to the same error.
Sep 14 '06 #6
What a relief to see this working!!
I read the information on both of the links you provided. I am wondering why you chose the strict versus transitional doc tag. Is the transitional tag more flexible when it comes to coding?

Can you recommend a good html/css book? The book I reference is several years old but I like the way its written... html for html for the world wide web (visual quickstart guide)

Thanks again!
Sep 17 '06 #7
drhowarddrfine
7,435 Expert 4TB
The only use for the transitional doctype is if you have older 'deprecated' code that you must use, or are 'transitioning' to the page. Strict doctypes strictly apply all the current rules for coding and is the only one you should use for new pages.

I really don't know any good books; it wasn't how I learned. A lot of people seem to like w3schools.com. What little I've looked at it seems good. You learn a lot by validating the code to find your errors and then googling or asking on forums for how to fix it. Most problems are related to IE but there are hacks to get around them but this is the reason you should never test initial code in IE because it's old, buggy and not very good with the standards.
Sep 17 '06 #8
When I validated my code, there were problems with the text script tag. I revised this but now I've created another problem in none other than internet explorer... what a surprise.
The problem is in the paragraphed text. For some reason the first few words will not drop down with the rest of the paragraph. I thought maybe it was the blockquote tag but I didn't find that to be true.

Thanks again in advance!

Heres the url:
http://kittelbergerdesign.com/indexwithlinks.html

Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>hat horizons</title>

<style type="text/css">
p.body {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: smaller;
line-height: 100%;
word-spacing: normal;
letter-spacing: 0.0ex;
text-decoration: none;
text-transform: none;
text-align: left;
text-indent: 0ex;
}
</style>


<script language="JavaScript">
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below


Pic[0] = 'images/Uzbekcap.jpg'
Pic[1] = 'images/constablehat.jpg'
Pic[2] = 'images/Kyrgistan.jpg'
Pic[3] = 'images/Lesotho.jpg'
Pic[4] = 'images/Nigerian.jpg'
Pic[5] = 'images/BurmaRawang.jpg'
Pic[6] = 'images/montera.jpg'
Pic[7] = 'images/Tlingithelmet.jpg'
Pic[8] = 'images/Mongoliasoldier.jpg'

// =======================================
// do not edit anything below this line
// =======================================


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans (duration=2)"
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



</head>

<body bgcolor="#000000" onload="runSlideShow()">
<img src="images/trans.gif" width="717" height="30" alt="Hat Horizons">
<br>
<table border="0" cellpadding="0" cellspacing="0" width="717" height="512" align="center">

<tr>
<td colspan="18" background="images/index header3.jpg" width="717" height="74">

</td>
</tr>

<tr>
<td colspan="4" valign="top" background="images/yellow box rev.jpg">
<img src="images/yellow box2.jpg" width="155" height="411" border="0" usemap="#hathorizonslinks">

<map name="hathorizonslinks">
<area shape="RECT" coords="82,34,148,111" href="galleries.html" alt="galleries">
<area shape="RECT" coords="9,93,70,168" href="exhibits.html" alt="exhibits">
<area shape="RECT" coords="77,160,145,240" href="giftshop.html" alt="giftshop">
<area shape="RECT" coords="9,239,72,317" href="programs.html" alt="programs">
<area shape="RECT" coords="75,315,145,397" href="aboutus.html" alt="aboutus">
</map>


</td>

<td valign="top" height="103" width="562" bgcolor="#ffffff">


<img src="images/subtitle.jpg" height="36" width="464" align="left" valign="top" alt="Hat Horizons">
<img src="images/goldhat bottom.jpg" width="87" height="103" valign="top" align="right" alt="Hat Horizons">



<blockquote>
<p class="body">
Hat Horizons will make you think differently about what you put on your head.With their endless variations, hats and headdresses are a tribute to the diversity ofthe worlds cultures. Knowledge of headgear can instill an awareness and appreciation of our cultural differences. At the same time, by understanding the purposes for which they are worn, hats may act as a bridge, reinforcing attitudes and values that are shared by people around the globe.
</blockquote>
</p>

<br>

<table border="0" cellpadding="8" cellspacing="0" bgcolor="#ffffff" width="551" height="208" valign="top">

<tr>
<td id="VU" height="200" width="234" valign="top">


<img src="images/Uzbekcap.jpg" name='SlideShow' width="234" height="200" alt="Hat Horizons" valign="top">

<td colspan="6" height="200" width="308" valign="top">


<p class="body">
Hats and headdresses from the collection are available for exhibit. The head coverings make an engaging and educational visual display for museums, galleries and schools and other public spaces.

<br>
Head coverings provide the foundation for programs we offer on cultural diversity and ethnic understanding. Presentations and workshops can be customized for a variety of audiences and ages in educational, community and corporate environments.
Thanks for visiting the site!
</p>


<font size="2" font face="times" font color="#000033">
<i><b>Stacey W. Miller,</b> Mitrologist</i>
</font>

</td>
</tr>

<tr>
<td width="562" colspan="14">
<img src="images/media.gif">
<img src="images/trans.gif" width="30" height="1">
<img src="images/test.gif">
<img src="images/trans.gif" width="30" height="1">
<a hREF="mailto:staceymiller@worldnet.att.net">
<img src="images/contact.gif" border="0"></a>
<img src="images/trans.gif" width="30" height="1">
<img src="images/home.gif">

</td>
</tr>
</table>
</td>
</tr>




<tr>
<td colspan="18" valign="top" width="717">
<img src="images/bottom header rev.jpg" width="717" height="27" valign="top" alt="Hat Horizons">



</td>
</tr>

</table>

</body>
</html>
Sep 20 '06 #9
drhowarddrfine
7,435 Expert 4TB
I think the problem may be the blockquote. YOu have <p><blockquote></p></blockquote> which is illegal. I don't see why you are using the blockquote there so just remove it and keep the p tag.

Browsers react differently to the same errors.
Sep 20 '06 #10
I tried removing the blockquote, but the problem was still there. Without it, the text is too close to the yellow area. Any other thoughts?
Sep 20 '06 #11
drhowarddrfine
7,435 Expert 4TB
Then maybe you should do it the other way. Leave the blockquote in but remove the p tags. Sorry I"m not more helpful. Today is a bad day for concentrating.
Sep 20 '06 #12

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: Stevie Allan | last post by:
I've been changing my javascript rollovers to CSS using :hover. I have used the following class and html so that when you hover over the home.gif the 'Home' text next to it is underlined. CSS:...
1
by: Graham Cross | last post by:
Dear All Is there an HTML way of aligning the images on this page http://www.ageconcernleics.com/review03/chairs03.html so that they appear evenly spaced relative to the text column on the...
12
by: Phil Powell | last post by:
Consider my code: " multiple size="5"> <option value="/images">Main Image Storage Bin</option> <option value="/images/demo-four">demo-four</option> <option value="/images/Demo3">Demo3</option>...
3
by: Grytpype-Thynne | last post by:
Hello, Is it possible to align a column in a table so that units, tens and hundreds (some may not go to hundreds) align correctly yet are in the center of the table cell? I can get them to line...
1
by: LVwebGirl | last post by:
Is there a way to align a div to a table? I have a table that is aligned center, valigned middle on the page and I need to apply a dynamic length border to the right side of the content cell of...
9
by: Dustin | last post by:
Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement...
4
by: tfs | last post by:
I have a table that is putting the object in the middle of my cell (<td>). I want to have the objects, such as my asp:textbox, to align towards the top of the cell. I don't want it to center...
0
by: dudethat | last post by:
Hello, im brand new to forums and as you will see to css! The problem im having here is the text i want in the cell (class hd) refuses to align to the top in firefox. Ive tried placing it straight...
2
by: JJA | last post by:
Please advise on how I can get this content (from "Choose a Map" down to the "Show Map" button) to be positioned at the top of this table cell. Please see: ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.