Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Table text alignment consistency?

    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.
    Code:
    <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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?

    Maybe you'd be interested in trying it with div containers instead -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Yep, I don't see a reset anywhere. Try adding this to the top of your CSS in the <style> tags inside the <head>:
    Code:
    * {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.
    Last edited by Rowsdower!; 11-20-2009 at 01:38 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I did that

    Code:
    <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

    Code:
    <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
    Last edited by tyana; 11-20-2009 at 02:02 PM.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 11-20-2009 at 02:55 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok its working now. Thanks, I don't know, it wasnt appearing right before


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •