Spaces around tables in different browsers

OOzy · Feb 14, 2005

Dears,

I am really having a problem making IE, Firefox and Opera to display my layout images with no spaces around them. To make the problem easy to display I made a sample layout. I would like to do the following:

1. Make the images show without spaces around them so the layout look nice and intact.
2. I have sliced my layout into 6 slices. Slices 1 and 3 are displayed using css. These slices are shown a pixel widder than the others. How can I fix it.
3. In slice #3 I inserted a table with 4 cells (<td>); each cell has an img. IE vertical-align the table in the middle while firefox align in the top.
4. I am using a <div id="ctr_main"> to center main layout table. IE centers it while Firefox and Opera do not.

Please help me. Thank you.

my layout:

http://hab.bjaili.com

my css:

http://hab.bjaili.com/ie.css

Vragabond · Feb 15, 2005

Lets go from the back:

4. See it answered here:

http://www.tek-tips.com/viewthread.cfm?qid=997622&page=2

3. Goes to show you shouldn't leave it to the interpretation to the browser. By adding vertical-align to #tst3, you can create the same effect in both browsers: vertical-align: top; for FF version and vertical-align: middle; for IE.

2. It is the padding problem. Every td has an inherent padding. CSS displayed slices are used as backgrounds and as such extend beyond the padded gutter, while <img>s have to take the padding into consideration and that is why there is a discrepancy. Add:

Code:

#main td {
  padding: 0;
}

to your css and you should be good.

1. Padding will somewhat help here too. Just see how the design changes. Other than that, it is whitespace problem. Images are inline elements and can have somewhitespace added to them easily. If you need them for design, I suggest you change their display to block for easier maintainability. On the topic of block display, don't do it for table cells. By default they are displayed as table-cell and it is best to leave it to that. Here's the revised code that produces all four counts you wanted in my Mozilla and IE6:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="content-type" content="
    text/html; charset=utf-8" />
    <title>
      {!TITLE!}
    </title>
    <link rel="stylesheet" href="ie.css" type="text/css" />

    <style type="text/css">

body { 
	margin: 0;
	padding: 0;
	font-size: medium;
	font-family: verdana, arial, helvetica, sans-serif;
	background: #000000;
}


.right{
	text-align: right;
	direction: rtl;
	width: 100%;
}


table#main {
	width: 750px;
	border-collapse: collapse;
	border-spacing: 0;
	margin: auto;
	padding: 0;
}

#main td {
	padding: 0;
}

div#ctr_main {
	text-align: center;
}

td#tst1 {
	background: url("[URL unfurl="true"]http://hab.bjaili.com/images/tst_01.jpg");[/URL]
	width: 750px;
	height: 64px;
}

td#tst3 {
	background: url("[URL unfurl="true"]http://hab.bjaili.com/images/tst_03.jpg");[/URL]
	width: 750px;
	height: 117px;
	padding: 0;
	border: 0;
	vertical-align: top;
}


table.no_border {
	border-collapse: collapse;
	background-color: #FFDEAD;
}

    </style>
  </head>
  <body>
    <div id="ctr_main">
      <table id="main">
        <tr>
          <td id="tst1"></td>
        </tr>
        <tr>
          <td>
            <img src="[URL unfurl="true"]http://hab.bjaili.com/images/tst_02.jpg"[/URL] width="750" height="65" alt="" style="display: block;" />
          </td>
        </tr>
        <tr>
          <td id="tst3">
            <div class="right">
              <table class="no_border">
                <tbody>

                  <tr>
                    <td>
                      <img src="[URL unfurl="true"]http://hab.bjaili.com/images/td.jpg"[/URL] width="50" height="
                      23" style="display: block;" />
                    </td>
                    <td>
                      <img src="[URL unfurl="true"]http://hab.bjaili.com/images/td.jpg"[/URL] width="50" height="
                      23" style="display: block;" />
                    </td>
                    <td>
                      <img src="[URL unfurl="true"]http://hab.bjaili.com/images/td.jpg"[/URL] width="50" height="
                      23" style="display: block;" />
                    </td>
                    <td>
                      <img src="[URL unfurl="true"]http://hab.bjaili.com/images/td.jpg"[/URL] width="50" height="
                      23" style="display: block;" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <img src="[URL unfurl="true"]http://hab.bjaili.com/images/tst_04.jpg"[/URL] width="750" height="68"
            alt="" style="display: block;" />
          </td>
        </tr>
        <tr>
          <td>
            <img src="[URL unfurl="true"]http://hab.bjaili.com/images/tst_05.jpg"[/URL] width="750" height="69"
            alt=" " style="display: block;" />

          </td>
        </tr>
        <tr>
          <td>
            <img src="[URL unfurl="true"]http://hab.bjaili.com/images/tst_06.jpg"[/URL] width="750" height="117"
            alt="" style="display: block;" />
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Spaces around tables in different browsers

OOzy

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor