5 Replies Latest reply on May 16, 2010 11:28 AM by iz666

    Problem in IE with centering.

    iz666

      Hi,

      I am new to Dreamweaver. I have created a page in html. It has a table. I set the location of the table with percentage for different resolutions.

      In chrome it works perfectly but in IE (using IE 7) its aligned to the left.Untitled-1.jpgUntitled-2.jpg

       

      Any idea what I should do?

      Thank you.

       

      Here is the code:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 {height:100%;}

      body {height:100%; margin:0; padding:0;}

      #bg {position:fixed; top:0; left:0; width:100%; height:100%;}

      #content {position:relative; z-index:1;}

      <!--

      body {

      background-color: #0363da;

      background-image: url();

      }

      -->

      </style>

      <link href="wrapper.css" rel="stylesheet" type="text/css" />

      </head>

       

      <body>

      <div id="wrapper">

        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

          <tr>

            <td> </td>

            <td width="733" height="136"><img src="../images/header.gif" width="733" height="136" /></td>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

            <td><table width="736" border="0" cellspacing="0" cellpadding="0">

              <tr>

                <td width="111" height="70"><img src="../images/home.gif" width="111" height="70" /></td>

                <td width="147"><img src="../images/courses.gif" width="147" height="70" /></td>

                <td width="136"><img src="../images/hotels.gif" width="136" height="70" /></td>

                <td width="134"><img src="../images/galerie.gif" width="135" height="70" /></td>

                <td width="205"><img src="../images/contact.gif" width="204" height="70" /></td>

              </tr>

            </table></td>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

            <td rowspan="4"><table width="733" border="0" cellspacing="0" cellpadding="0">

              <tr>

                <td height="17" colspan="2"><img src="../images/new_website_09.gif" height="17" /></td>

                </tr>

              <tr>

                <td width="179" height="500" bgcolor="00a2ff"> </td>

                <td width="554" bgcolor="#FFFFFF"> </td>

              </tr>

            </table></td>

            <td rowspan="4"> </td>

          </tr>

          <tr>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

            <td><img src="../images/new_website_12.gif" width="733" height="21" /></td>

            <td> </td>

          </tr>

          <tr>

            <td> </td>

            <td> </td>

            <td> </td>

          </tr>

        </table>

      </div>

      </body>

      </html>

        • 1. Re: Problem in IE with centering.
          Ben M Adobe Community Professional

          We will need to see your wrapper.css document.

          • 2. Re: Problem in IE with centering.
            iz666 Level 1

            I created one with something I saw here in the forum but it didn't work. So basically I'm not using it.

            • 3. Re: Problem in IE with centering.
              Ben M Adobe Community Professional

              Well here's the problem, let's start with the table:

               

              The first Row looks like this: no width | 733px | no width.  The no-width's will autostretch since the table is set to 100%.  Your second row is no width | 736 px | no width.  This will throw off browsers because think of a tic-tac-toe board.  All items in a column have to either, have the same width as other items in the column, or have the colums need to be set up with the colspan attribute to show how many columns it is taking the place of.  Just remember that tables have a defined shape as either a square or a rectangle.  Just changing that one attribute back to 733 like the rest should start to help.

               

              Now let's go back to the wrapper.  What is the wrapper doing right now?  Right now that div is only being as wide as it needs to be which is why all browsers are treating it differently.  Do effectively center it you need to add CSS code for your wrapper that says: width: ###px/% where the ### represents the pixels or percentage width of your wrapper and the px or % for which ever method you go with.  Then set the margin: 0 auto; to make the wrapper center on your page.  Then leave the table inside and it should center in all browsers.

              • 4. Re: Problem in IE with centering.
                Nancy OShea Adobe Community Professional & MVP

                Copy and paste this code into a new, blank document.  It is valid XHTML and centered in all browsers.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
                /**adds scrollbar to Mozilla**/
                html {height:102%; margin-bottom:1px; }
                
                body {
                margin:0; 
                padding:0;
                width: 100%; 
                line-height: 100%; 
                font-size: 90%;
                background: #0363da;
                }
                
                #wrapper {
                width: 734px; /**value in pixels, ems or %**/
                margin:0 auto;/**centers page**/ 
                background: #FFF;
                color:#000;
                }
                
                /**TEXT STYLES**/
                h1, h2, h3, h4, p {
                font-size: 90%;
                line-height: 1.5; 
                padding: 12px;
                }
                
                </style>
                </head>
                
                <body>
                <div id="wrapper">
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                <td><img src="../images/header.gif" alt="header" width="733" height="136" /></td>
                </tr>
                <tr>
                <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td width="111"><img src="../images/home.gif" alt="home" width="111" height="70" /></td>
                <td width="147"><img src="../images/courses.gif" alt="courses" width="147" height="70" /></td>
                <td width="136"><img src="../images/hotels.gif" alt="hotels" width="136" height="70" /></td>
                <td width="134"><img src="../images/galerie.gif" alt="galery" width="135" height="70" /></td>
                <td width="205"><img src="../images/contact.gif" alt="contact" width="204" height="70" /></td>
                </tr>
                <tr>
                <td colspan="2" bgcolor="#0099FF" valign="top">
                <h1>Left column</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ligula lorem. Fusce scelerisque, nulla at elementum elementum, mauris turpis sodales magna, nec rutrum lacus nunc ut justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris congue massa et quam egestas nec pellentesque diam fringilla. Etiam et augue nisl, sit amet mattis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin elit velit, adipiscing et consequat nec, porttitor ac dolor. In pellentesque est et nisi aliquam viverra. Nullam risus orci; consequat ut lacinia vel, semper nec lacus. Fusce condimentum lorem vitae tellus venenatis dapibus sit amet et nulla. </p>
                </td>
                <td colspan="3" valign="top">
                <h1>Middle column </h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ligula lorem. Fusce scelerisque, nulla at elementum elementum, mauris turpis sodales magna, nec rutrum lacus nunc ut justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris congue massa et quam egestas nec pellentesque diam fringilla. Etiam et augue nisl, sit amet mattis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin elit velit, adipiscing et consequat nec, porttitor ac dolor. In pellentesque est et nisi aliquam viverra. Nullam risus orci; consequat ut lacinia vel, semper nec lacus. Fusce condimentum lorem vitae tellus venenatis dapibus sit amet et nulla. Phasellus non odio sit amet massa facilisis iaculis. In vel massa est, vitae aliquam odio. Pellentesque eros nulla, ultrices eleifend ultricies vitae, congue in lorem. Praesent malesuada pulvinar mauris, ac fringilla libero euismod at. Sed nec lectus id erat eleifend aliquet consequat vitae lacus. Praesent venenatis bibendum molestie.</p>
                </td>
                </tr>
                </table>
                </td>
                </tr>
                </table>
                </div>  <!--end #wrapper -->
                </body>
                </html>
                

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com

                • 5. Re: Problem in IE with centering.
                  iz666 Level 1

                  I changed the 736 to 733 and it solved the problem. Thanks a lot!