Table made in DW is not showing correctly using Internet Explorer


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Table made in DW is not showing correctly using Internet Explorer
by Lena Langolf on May 13, 2009 at 10:41:18 pm

Hi,
I'm new to Dreamveawer and webdesign but I have tried designing a simple, basic site. The code is probably not the best.. I have used Dreamveawer to do it for me.

The problem is the table on one of the pages (showing pics before and after), is totally off in IE but showing fine using Firefox or on Mac. I don't know what to do...

I'd be very happy if someone have the time to help me out..

Here's the link to the site:

http://laureninterior.ueuo.com/portfolio.html

Thank you,
Lena

Respond to this post • Return to posts index

Re: Table made in DW is not showing correctly using Internet Explorer
by Fernando Mol on May 14, 2009 at 2:25:32 am

Take a look into the HTML validator results, it may give you a hint (fix the first error and it may do the trick).

Follow this link: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flaureninterior.ueu...

Respond to this post • Return to posts index

Re: Table made in DW is not showing correctly using Internet Explorer
by Lena Langolf on May 15, 2009 at 4:05:49 am

Hi,
Thanks for your reply... I have tried to check for what you suggested, but since this is new to me it's kind of learning Greek..It doesn't make much sence. Why doesn't IE show the same result as Firefox - looks like I'd wanted it to look like.
Well, not sure what to do unless you are able to specify exactly what I need to do...

Thank you so much for your time,
Lena

Respond to this post • Return to posts index

Re: Table made in DW is not showing correctly using Internet Explorer
by Fernando Mol on May 15, 2009 at 1:20:21 pm

You have applied the class "table" to every table cell containing an image. The "table" class CSS rule define the element as an absolute positioned element. This is messing with the position of your images.

Different browsers handle the code differently. This is why if you see your page in Safari, FF or IE they will look different, the same way it happens if you see your page in different computers or different monitors.

In code view, change the code of every element inside your table leaving the class="table" only to the main table.

This is how it going to look your cleaned code. You can copy/paste and replace your actual table code.



<table width="841" height="auto" class="table">

    <tbody>

      <tr>

        <td valign="top" width="392" align="left" height="264"><img src="images/family_before.jpg" alt="living_before" class="img" width="392" align="left" height="256"></td>

        <td scope="col" valign="left" width="392" align="left" height="264"><img src="images/family_after.jpg" alt="family room after" class="img" width="392" align="left" height="256"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="23">Family room before</td>

        <td class="tablecentr" valign="top" align="center" height="23">Family room after</td>

      </tr>

      <tr>

        <td align="left" height="23"><img src="images/living_before.jpg" alt="livingroom before" class="img" width="392" align="left" height="282"></td>

        <td align="left" height="23"><img src="images/living_after.jpg" alt="livingroom after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="23">Living room before</td>

        <td class="tablecentr" valign="top" align="center" height="23">Living room after</td>

      </tr>

      <tr>

        <td align="left" height="23"><img src="images/avery_before.jpg" alt="girls room before" class="img" width="392" align="left" height="530"></td>

        <td align="left" height="23"><img src="images/avery_after.jpg" alt="girls room after" class="img" width="392" align="left" height="530"></td>

      </tr>

      <tr>

        <td class="tablecentr" align="center" height="23">Girls room before</td>

        <td class="tablecentr" align="center" height="23">Girls room after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/boysr_before.jpg" alt="boys room before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/boysr_after.jpg" alt="boys room after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="26">Boys room before</td>

        <td class="tablecentr" valign="top" align="center" height="26">Boys room after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/girlsroom_before_new.jpg" alt="girls room before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/girlsb_after.jpg" alt="girls room after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="24">Girls room before</td>

        <td class="tablecentr" valign="top" align="center" height="24">Girls room after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/playr_before.jpg" alt="playroom before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/playr_after.jpg" alt="playroom after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="24">Playroom before</td>

        <td class="tablecentr" valign="top" align="center" height="24">Playroom after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/masterb_before.jpg" alt="master bedroom before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/masterb_after.jpg" alt="master bedroom after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="25">Master bedroom before</td>

        <td class="tablecentr" valign="top" align="center" height="25">Master bedroom after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/kitchen_before.jpg" alt="kitchen before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/kitchen_after.jpg" alt="kitchen after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="22">Kitchen before</td>

        <td class="tablecentr" valign="top" align="center" height="22">Kitchen after</td>

      </tr>

      <tr>

        <td valign="top" align="left" height="29"><img src="images/hallw.jpg" alt="hallway before" class="img" width="392" align="left" height="282"></td>

        <td valign="top" align="left" height="29"><img src="images/hallw_after.jpg" alt="hallway after" class="img" width="392" align="left" height="282"></td>

      </tr>

      <tr>

        <td class="tablecentr" valign="top" align="center" height="25">Hallway before</td>

        <td class="tablecentr" valign="top" align="center">Hallway after</td>

      </tr>

    </tbody>

  </table>

Respond to this post • Return to posts index

Re: Table made in DW is not showing correctly using Internet Explorer
by Lena Langolf on May 15, 2009 at 10:04:27 pm

Yippie!! It's working!!
Thank you sooo MUCH for the more "basic" how-to-do-it-reply. Now I understand what I did wrong and I will have it in mind for next time. I would not been able to figure that out myself..

Again,
Thank you so much for your help.
Lena

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>