...

View Full Version : Table text alignment consistency?



tyana
11-19-2009, 02:47 PM
ok so I am making a site with microsoft web expression for a college projects and for the robotics team at my school, and well I cant get the table alignment to be to the left in internet explorer, it's allways away from the table border when i want it right next to it, but it appears correctly in firefox. How can I get it so it's consistent because I have no idea what to do from here, I tried everything I know of.

<td valign="top" style="height: 159px" >
<h2 align="left" class="style4">Important Links</h2>
<h4>
Robotic Resources</h4>
<p>
<span style="text-align: left"><a target="_blank" href="http://www.chiefdelphi.com/forums/portal.php">Chief
Delphi</a><br />
<a target="_blank" href="http://www.usfirst.org/">First Robotics</a></span></p>
<h4>
Sponsors</h4>
<p>
<span style="text-align: left"><a target="_blank" href="http://www.sjm.com/">St. Jud Medical</a><br />
<a target="_blank" href="http://www.lampertyards.com/index.taf">Lamperts</a></span></p>
</td>

Excavator
11-19-2009, 04:10 PM
Hello tyana,
That's really not enough information to tell what's happening. Can you quote your entire code? A link to the test site would even be better.

Did you know tables are not for layout? (http://www.hotdesign.com/seybold/everything.html)

Maybe you'd be interested in trying it with div containers instead -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<h2 class="style4">Important Links</h2>
<h4>Robotic Resources</h4>
<p>
<a href="http://www.chiefdelphi.com/forums/portal.php">Chief Delphi</a><br />
<a href="http://www.usfirst.org/">First Robotics</a>
</p>
<h4>Sponsors</h4>
<p>
<a href="http://www.sjm.com/">St. Jud Medical</a><br />
<a href="http://www.lampertyards.com/index.taf">Lamperts</a>
</p>
<!--end container--></div>
</body>
</html>

Rowsdower!
11-19-2009, 08:49 PM
I'm betting that there is no CSS reset in use yet. What you are probably seeing is the difference between browser default padding/margins for tables in IE and FF.

To know for sure, we really could do with a link to your test page.

tyana
11-20-2009, 01:15 AM
ok well I uploaded the html page and images but the menu images are not working but it doesnt really matter right now.. oh and it appears to do the same thing on google chrome with as internet explorer also. here is the link (http://testersitetc.110mb.com/links.htm)

Rowsdower!
11-20-2009, 01:36 PM
Yep, I don't see a reset anywhere. Try adding this to the top of your CSS in the <style> tags inside the <head>:

* {margin:0;padding:0;border:0;outline:0;} /*this is a universal reset that sets all margins, padding, borders, and outlines to zero for all elements so that default browser settings are no longer applied*/
table {margin:0 auto;} /*this centers your table in the page and should be used instead of adding the align="center" attirubte to the table tag.*/

Resets similar to the above are very popular for creating cross-browser compatible websites. Used in conjunction with validated HTML and CSS the results are very effective.

If you remove the "align" attribute from your table your HTML code will be fully valid. You should start there and then revisit the page to make a layout that does not misuse the table element. Tables are a bloated way to code and are poorly accessible for screen readers for the visually impaired. They are also less flexible than using <div> elements, which is the current trend in new web design. Check out Excavator's link to read up if you need more impetus.

Also, to get your images to appear change the file path for each to remove "../Menu" from the string. Your images are currently in the root directory.

tyana
11-20-2009, 02:00 PM
Ok I did that


<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Important Links</title>
<style type="text/css">

* {margin:0;padding:0;border:0;outline:0;} /*this is a universal reset that sets all margins, padding, borders, and outlines to zero for all elements so that default browser settings are no longer applied*/
table {margin:0 auto;} /*this centers your table in the page and should be used instead of adding the align="center" attirubte to the table tag.*/

.style4 {
font-family: Tahoma;
text-decoration: underline;
color: #415B78;
}
.style5 {
font-family: "Times New Roman";
}

{margin:0;padding:0;border:0;outline:0;}
table {margin:0 auto;} </style>
<link rel="stylesheet" type="text/css" href="../roboticstylesheet.css" />
</head>


and then I removed the aligns


<table cellspacing="10" style="width: 70%; height: 479px">
<tr>
<td style="height: 102px; width: 9%;">
</td>
<td height="40%" colspan="2" >
<img alt="Ice Robotics Team 3083- North Branch &amp; Chisago Lakes" src="../ICE_Banner_3.png" width="701" height="173" align="center" /></td>
</tr>
<tr>
<td style="width: 9%; height: 159px;">
<br />
<br />
<br />
<br />
</td>
<td valign="top" style="height: 159px; width: 22%;">
<a href="index.htm">
<img src="../Menu/home.png" width="131" height="43" alt="Home" border="0" /></a><br />
<a href="team.htm">
<img alt="Team" src="../Menu/team.png" width="131" height="43" align="top" border="0" /></a><br />
<a href="news.htm">
<img alt="News" src="../Menu/news.png" width="131" height="43" align="top" border="0" /></a><br />
<a href="sponsors.htm">
<img alt="Sponsors" src="../Menu/sponsors.png" width="131" height="43" align="top" border="0 "/></a><br />
<a href="links.htm">
<img alt="Links" src="../Menu/links.png" width="131" height="43" align="top" border="0" /></a><br />
<a href="contact.htm">
<img alt="Contact Team 3083" src="../Menu/contact.png" width="131" height="43" border="0" /></a><br />
<br />
<a href="http://www.usfirst.org/roboticsprograms/frc/default.aspx?id=966" target="_blank">
<img alt="First Robotics Competition" src="../FRClogo_color_rgb.png" width="131" height="101" border="0" /></a></td>
<td valign="top" style="height: 159px" >
<h2 class="style4">Important Links</h2>
<h4>
Robotic Resources</h4>
<p>
<span style="text-align: left"><a target="_blank" href="http://www.chiefdelphi.com/forums/portal.php">Chief
Delphi</a><br />
<a target="_blank" href="http://www.usfirst.org/">First Robotics</a></span></p>
<h4>
Sponsors</h4>
<p>
<span style="text-align: left"><a target="_blank" href="http://www.sjm.com/">St. Jud Medical</a><br />
<a target="_blank" href="http://www.lampertyards.com/index.taf">Lamperts</a></span></p>
</td>
</tr>
<tr>
<td style="width: 9%; height: 45px;">
</td>
<td width="15%" align="left" valign="top" colspan="2" style="height: 45px" class="style5">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
ęCopyright ICE Robotics Team 3083 2009-2010<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.sjm.com/" target="_blank">
<img alt="St. Jude Medical" src="../st.jude.gif" width="150" height="28" border="0" /></a>&nbsp;
<a href="http://www.lampertyards.com/index.taf" target="_blank">
<img alt="Lamperts" src="../lamperts.jpg" width="95" height="30" border="0" /></a></td>
</tr>
</table>


but I cant get it to work, so i must be doing something wrong, oh and i updated the link page with it also

Rowsdower!
11-20-2009, 02:53 PM
It looks the same to me between IE7 and FF3 right now (and they both appear to be left-aligned with no space between the edge of the table and the text. What exactly do you need to do with the page? Are you talking about bringing the body text closer to the menu links?

Also, sorry, the "align" attribute needed to be removed from an image, not the table. You don't need it for the table anyway so that's no loss, but you still need to remove it from your main logo's image tag.

tyana
11-20-2009, 06:41 PM
ok its working now. Thanks, I don't know, it wasnt appearing right before



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum