OT: Help solving me a riddle / mystery, I'm going crazy

**Subway** · 09-12-2003, 07:30 AM

Ok, it's a IE on PC riddle. (It's more of a mystery) I have two pages that use the same template.

Page one is showing up perfect: http://www.rogotworld.com/blog.php

Now page 2 has a problem with the table height space: http://www.rogotworld.com/forums/index.php

The funny thing is that the parts the make trouble are loaded as external include files, so they are exactly the same on both pages.

Can you tell me why same HTML on the same browser, can look different? I got crazy after looking at the HTML for an hour, so be warned.

Fredi

PS. Mac IE, Safari, Netscape ... has no problems, just IE on PC.

Just to make it complete, the first part that makes the problem:

Page that displays wrong:

PHP Code:


<table width="944" border="0" cellspacing="0" cellpadding="0">

  <form ACTION="http://www.rogotworld.com/mail.php3" METHOD="GET" name="empfehlen">

    <tr>

      <td>

          <tr>

            <td width="149"><img src="http://www.rogotworld.com/redesign_pics/l1.jpg" width="149" height="46"></td>

            <td width="645"><a href="http://www.rogotworld.com/main.php"><img src="http://www.rogotworld.com/redesign_pics/m1.jpg" width="645" height="46" hspace="0" vspace="0" border="0"></a></td>

            <td width="150"><img src="http://www.rogotworld.com/redesign_pics/r1.jpg" width="150" height="46"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l2.jpg" width="149" height="79"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m2.jpg" width="645" height="79"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r2.jpg" width="150" height="79"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l3.jpg" width="149" height="45"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m3_dynamic_ip.php" width="645" height="45"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r3.jpg" width="150" height="45"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l4.jpg" width="149" height="34"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m4.jpg" width="645" height="34"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r4_2.jpg" width="150" height="34"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l4_5.jpg" width="149" height="39"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m4_5.gif" width="645" height="39" usemap="#menu" border="0" vspace="0" hspace="0"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r4_5.jpg" width="150" height="39"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l5.jpg" width="149" height="33"></td>

            <td valign="middle" background="http://www.rogotworld.com/redesign_pics/tellafriendbg.jpg">

            

              

                                <table width="645" border="0" cellspacing="0" cellpadding="0">

                  <tr>

                    <td width="136"><img src="http://www.rogotworld.com/redesign_pics/0.gif" width="10" height="33"><img src="http://www.rogotworld.com/redesign_pics/tellafriend_logo.gif" width="114" height="33"></td>

                    <td width="509" align="right" valign="middle">

                      <b><font color="#999999" size="1" face="Arial, Helvetica, sans-serif">YOUR 

                      NAME: 

                      <input type="text" size="12" maxlength="120" name="yourname">

                      <img src="http://www.rogotworld.com/redesign_pics/0.gif" width="15" height="1"> YOUR 

                      FRIENDS EMAIL:</font></b> <input type="text" size="12" maxlength="120" name="email"> 

                      <input type="submit" value="SUBMIT" name="submit">

                      <img src="http://www.rogotworld.com/redesign_pics/0.gif" width="5" height="1">

                    </td>

                  </tr>

                </table>  

              



            </td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r5.jpg" width="150" height="33"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l6.jpg" width="149" height="25"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m6.gif" width="645" height="25" hspace="0" vspace="0" border="0" usemap="#about" href="http://www.rogotworld.com/about.php"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r6.jpg" width="150" height="25"></td>

          </tr>  

    </form> 

</table>

And the page that displays ok:

PHP Code:


<table width="944" border="0" cellspacing="0" cellpadding="0">

  <form ACTION="http://www.rogotworld.com/mail.php3" METHOD="GET" name="empfehlen">

    <tr>

      <td>

          <tr>

            <td width="149"><img src="http://www.rogotworld.com/redesign_pics/l1.jpg" width="149" height="46"></td>

            <td width="645"><a href="http://www.rogotworld.com/main.php"><img src="http://www.rogotworld.com/redesign_pics/m1.jpg" width="645" height="46" hspace="0" vspace="0" border="0"></a></td>

            <td width="150"><img src="http://www.rogotworld.com/redesign_pics/r1.jpg" width="150" height="46"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l2.jpg" width="149" height="79"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m2.jpg" width="645" height="79"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r2.jpg" width="150" height="79"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l3.jpg" width="149" height="45"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m3_dynamic_ip.php" width="645" height="45"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r3.jpg" width="150" height="45"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l4.jpg" width="149" height="34"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m4.jpg" width="645" height="34"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r4_2.jpg" width="150" height="34"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l4_5.jpg" width="149" height="39"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m4_5.gif" width="645" height="39" usemap="#menu" border="0" vspace="0" hspace="0"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r4_5.jpg" width="150" height="39"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l5.jpg" width="149" height="33"></td>

            <td valign="middle" background="http://www.rogotworld.com/redesign_pics/tellafriendbg.jpg">

            

              

                                <table width="645" border="0" cellspacing="0" cellpadding="0">

                  <tr>

                    <td width="136"><img src="http://www.rogotworld.com/redesign_pics/0.gif" width="10" height="33"><img src="http://www.rogotworld.com/redesign_pics/tellafriend_logo.gif" width="114" height="33"></td>

                    <td width="509" align="right" valign="middle">

                      <b><font color="#999999" size="1" face="Arial, Helvetica, sans-serif">YOUR 

                      NAME: 

                      <input type="text" size="12" maxlength="120" name="yourname">

                      <img src="http://www.rogotworld.com/redesign_pics/0.gif" width="15" height="1"> YOUR 

                      FRIENDS EMAIL:</font></b> <input type="text" size="12" maxlength="120" name="email"> 

                      <input type="submit" value="SUBMIT" name="submit">

                      <img src="http://www.rogotworld.com/redesign_pics/0.gif" width="5" height="1">

                    </td>

                  </tr>

                </table>  

              



            </td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r5.jpg" width="150" height="33"></td>

          </tr>

          <tr>

            <td><img src="http://www.rogotworld.com/redesign_pics/l6.jpg" width="149" height="25"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/m6.gif" width="645" height="25" hspace="0" vspace="0" border="0" usemap="#about" href="http://www.rogotworld.com/about.php"></td>

            <td><img src="http://www.rogotworld.com/redesign_pics/r6.jpg" width="150" height="25"></td>

          </tr>  

    </form> 

</table>

**Markp.com** · 09-12-2003, 07:40 AM

Please do not post technical questions in the coffee lounge

Enigma posted a compatibility website a few weeks ago, do a search

**Subway** · 09-12-2003, 07:43 AM

Originally posted by Markp.com
Please do not post technical questions in the coffee lounge

Ups, sorry. Will never stress the lizards with difficult riddles.

Fredi

**loydall** · 09-12-2003, 08:23 AM

Nope - can't see what the problem is either..

It's one of those really annoying problems that makes you think computers have just got it in for you..

Anyway - my suggestion: All those table cells with the images in - give them a valign of top.. might shake it up a bit.

Either that or give your monitor a nudge - it might knock the table into shape...

**Subway** · 09-12-2003, 08:30 AM

Originally posted by loydall
Either that or give your monitor a nudge - it might knock the table into shape...

LOL, will try that.

Fredi

**Subway** · 09-12-2003, 08:58 AM

The forum CSS is the source of the problem. If I don't load the forum CSS, then everything is ok.

Any ideas what in the CSS could be the source of this trouble?

The forum CSS file:

PHP Code:


/* FIX IE6 Scrollbars bug - Leave this in! */

html { overflow-x: auto; } 



/* Body entry, change forum page background colour, default font, font size, etc. Leave text-align:center to center board content

   #ipwrapper will set text-align back to left for the forum. Any other tables / divs you use must use text-align:left to re-align

   the content properly. This is a work around to a known Internet Explorer bug */

BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px;padding:0px;background-color:#3D5D86; text-align:center }

TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }



/* MAIN WRAPPER: Adjust forum width here. Leave margins alone to auto-center content */

#ipbwrapper { text-align:left; width:97%; margin-left:auto;margin-right:auto }



a:link, a:visited, a:active { text-decoration: underline; color: #000 }

a:hover { color: #465584; text-decoration:underline }



fieldset.search { padding:6px; line-height:150% }

label      { cursor:pointer; }

form       { display:inline; }

img        { vertical-align:middle; border:0px }

img.attach { border:2px outset #EEF2F7;padding:2px }



.googleroot  { padding:6px; line-height:130% }

.googlechild { padding:6px; margin-left:30px; line-height:130% }

.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }

.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }

.googlepagelinks { font-size:1.1em; letter-spacing:1px }

.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }



li.helprow { padding:0px; margin:0px 0px 10px 0px }

ul#help    { padding:0px 0px 0px 15px }



option.cat { font-weight:bold; }

option.sub { font-weight:bold;color:#555 }

.caldate   { text-align:right;font-weight:bold;font-size:11px;color:#777;background-color:#DFE6EF;padding:4px;margin:0px }



.warngood { color:green }

.warnbad  { color:red }



#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }



#profilename { font-size:28px; font-weight:bold; }

#calendarname { font-size:22px; font-weight:bold; }



#photowrap { padding:6px; }

#phototitle { font-size:24px; border-bottom:1px solid black }

#photoimg   { text-align:center; margin-top:15px } 



#ucpmenu    { line-height:150%;width:22%; border:1px solid #345487;background-color: #F5F9FD }

#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }

#ucpcontent { background-color: #F5F9FD; border:1px solid #345487;line-height:150%; width:auto }

#ucpcontent p  { padding:10px;margin:0px; }



#ipsbanner { position:absolute;top:1px;right:5%; }

#logostrip { border:1px solid #345487;background-color: #3860BB;background-image:url(style_images/<#IMG_DIR#>/tile_back.gif);padding:0px;margin:0px; }

#submenu   { border:1px solid #BCD0ED;background-color: #DFE6EF;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;font-weight:bold;}

#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; }

#userlinks { border:1px solid #C2CFDF; background-color: #F0F5FA }



#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }



.activeuserstrip { background-color:#BCD0ED; padding:6px }



/* Form stuff (post / profile / etc) */

.pformstrip { background-color: #D1DCEB; color:#3A4F6C;font-weight:bold;padding:7px;margin-top:1px }

.pformleft  { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }

.pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }

.pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }



/* Topic View elements */

.signature   { font-size: 10px; color: #339; line-height:150% }

.postdetails { font-size: 10px }

.postcolor   { font-size: 12px; line-height: 160% }



.normalname { font-size: 12px; font-weight: bold; color: #003 }

.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }

.unreg { font-size: 11px; font-weight: bold; color: #900 }



.post1 { background-color: #F8F9FC }

.post2 { background-color: #F8F9FC }

.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(style_images/<#IMG_DIR#>/tile_sub.gif) }



/* Common elements */

.row1 { background-color: #F8F9FC }

.row2 { background-color: #F8F9FC }

.row3 { background-color: #F8F9FC }

.row4 { background-color: #F8F9FC }



.darkrow1 { background-color: #C2CFDF; color:#4C77B6; }

.darkrow2 { background-color: #BCD0ED; color:#3A4F6C; }

.darkrow3 { background-color: #D1DCEB; color:#3A4F6C; }



.hlight { background-color: #DFE6EF }

.dlight { background-color: #EEF2F7 }



.titlemedium { font-weight:bold; color:#3A4F6C; padding:7px; margin:0px; background-image: url(style_images/<#IMG_DIR#>/tile_sub.gif) }

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #3A4F6C }



/* Main table top (dark blue gradient by default) */

.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; padding:8px 0px 8px 5px; background-image: url(style_images/<#IMG_DIR#>/tile_back.gif) }

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }

.maintitle a:hover { text-decoration: underline }



/* tableborders gives the white column / row lines effect */

.plainborder { border:1px solid #345487;background-color:#F5F9FD }

.tableborder { border:1px solid #345487;background-color:#FFF; padding:0; margin:0 }

.tablefill   { border:1px solid #345487;background-color:#F5F9FD;padding:6px;  }

.tablepad    { background-color:#F5F9FD;padding:6px }

.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }



.wrapmini    { float:left;line-height:1.5em;width:25% }

.pagelinks   { float:left;line-height:1.2em;width:35% }



.desc { font-size:10px; color:#434951 }

.edit { font-size: 9px }





.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }



#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }



.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }



.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.forminput, .textinput, .radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }



.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }



.purple { color:purple;font-weight:bold }

.red    { color:red;font-weight:bold }

.green  { color:green;font-weight:bold }

.blue   { color:blue;font-weight:bold }

.orange { color:#F90;font-weight:bold }

Does anyone see something that could kil that table height?

Fredi

**Subway** · 09-12-2003, 09:29 AM

Problem solved.

I removed this part of the CSS:

PHP Code:


img        { vertical-align:middle; border:0px }

img.attach { border:2px outset #EEF2F7;padding:2px }

Fredi

Thread: OT: Help solving me a riddle / mystery, I'm going crazy

Thread Tools

Display

OT: Help solving me a riddle / mystery, I'm going crazy

Posting Permissions