Centered Text jumps around from page to page

liunx · Jan 10, 2008

The following is the beginning of my code, with the area i believe to be causing me trouble highlighted in red: 
 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"filename.css" > 
<style type="text/css"> 
 
</style> 
 
<title>One Stop... everything in one place</title> 
 
 
</head> 
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> 
 
 
<table bgcolor="#6699FF" width="100%" height="90"> 
<tr><td><img WIDTH="100" HEIGHT="100" SRC=http://www.htmlforums.com/archive/index.php/"/images/barn2.gif"></td><td>Air Fare</align> 
</td></tr> 
</table> 
 
 
I have many pages that start this way, with the word (in this case) 'Air Fare' being substituted with other words like Car Rental, Hotel, etc. 
 
However, none of the words in this top table seem to be centered in the same way, and the words appear to "jump" from side to side (slightly off-centered) as i click from page to page. 
 
Everything was centered find until i added the barn2.gif to the table. 
 
Any suggestions on how to fix the code so the text placement in this top table is consistent? 
 
Thanks in advance for the answer and/or pointing me in the right direction.in every td a center, that will workyup, replace alot of that with css: 
 
<style type="text/css"> 
table.1 {width:100%;height:90%;background-color:#6699ff;} 
td.1 {text-align:left;width:100%;} 
h1.1 {text-align:center;font-size:12px;} 
</style> 
 
<table class="1"> 
<tr><td class="1"><img src=http://www.htmlforums.com/archive/index.php/"/images/barn2.gif><h1 class="1">Air Fare</h1></td></tr></table> 
 
remember to put all your css into an external stylesheet

/added 
 
you can also set the font family and color in css: 
font-family:verdana;color:#000000; 
go here (<a class="postlink" href="http://www.w3schools.com/css/css_font.asp">http://www.w3schools.com/css/css_font.asp</a>) to learn more

Thanks to both of you... 
 
i tried making each <td> into <td align="center"> but it only moved the wordsmore to the right! 
 
 
I don't fully understand CSS (and did begin the turial link you provided) but when i tried the CSS suggestion the blue banner was HUGE, and the word "Air Fare" ended up below the banner. I even went back and tried to adjust the size 90% that you provided to 90 and/or 90px, but neither one of them did any good... "air fare" remained under the barn2.gif and the banner was BIG (from top to bottom) 
 
Any ideas what i could have done wrong, or perhaps another way to skin this cat? 
 
Thanks.OK, i messed around with it some more and i THINK i got it to work, using the following code: 
 
<table bgcolor="#6699FF" width="100%" height="90"> 
<tr><td width="20%" align="center"><img WIDTH="100" HEIGHT="100" SRC=http://www.htmlforums.com/archive/index.php/"/images/barn2.gif"></td><td width="100%" align="center">Hotel Links 
</td></tr> 
</table> 
 
 
I'll update again if i have any problems. 
 
Thanks for the help <again>. If i learned anything, i think it's that i need to get up on the CSS learning curve (but i'm only about 2 weeks into HTML, so everything in time!)yeah, changing the 90 should have changed the height, it was being pushed under because i used an h1, if i change the display to inle then it doesnt center, but try this instead: 
 
<style type="text/css"> 
table.1 {width:100%;height:90;background-color:#6699ff;} 
td.1 {text-align:left;width:45%;} 
td.2 {text-align:left;width:55%; 
span.1 {text-align:center;font-size:12px;} 
</style> 
 
 
<table class="1"> 
<tr><td class="1"><img src=http://www.htmlforums.com/archive/index.php/"/images/barn2.gif"></td><td class="2">Air Fare</td></tr></table>Leo, 
 
Thanks for the reply, but my prior post shows a solution i found that now seems to be working fine, so i'd rather not mess with it again

Unless of course you find something that's wrong with the code that i'm using as the "fix".Make sure that the <td> ... </td> tags are on the same line as the HTML code they enclose. 
 
 
The above examples did not do that; they had the closing </td> on a new line. 
 
 
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element. 
 
 
Run the code through <a class="postlink" href="http://validator.w3.org/detailed.html">http://validator.w3.org/detailed.html</a> and fix all the problems it highlights.not at all thereuare, 
i posted at the same time you did, if i'd seen you had found a solution i wouldn't have posted

Centered Text jumps around from page to page

liunx

Guest