By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,384 Members | 671 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,384 IT Pros & Developers. It's quick & easy.

Problem aligning cell in table

P: 6
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
Share this Question
Share on Google+
11 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

P: 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
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

P: 6
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
Expert 5K+
P: 7,435
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

Post your reply

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