Help - Search - Members - Calendar
Full Version: Table Troubles
Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion
Mr. A
Apr 10 2009, 05:56 PM
So I was bored the other night, and I figured I'd work on a webpage. Spent about four or five hours photoshopping, coding, uploading, and previewing. In the end, I must say I was very happy with my end result.



So after wrapping a few things up, I decide to see the view from the Internet Explorer window. Of course, as you can guess, IE pulls it's pants down and takes a dump all over my hard work.



So I wanted to know how to fix this. I've always had this problem with IE, and I'm getting kind of tired of it. Usually I just slap up some scrolling text with alarm bells and flashing lights attached warning IE users away, but this time I really want to figure out how to fix this.

Here's my code.
CODE
<html>
<head>
<title>
    Edge City Times
</title>
</head>
<body bgcolor="333333">
<center>
    <table border="0" cellspacing="0" cellpadding="0" width="872">
        <tr>
        <td background="http://edgecitytimes.uuuq.com/images/topper.png" align="left" height="44" valign="center" colspan="3">        
                    
            <?php
            $day1=date("l F dS, Y");
            echo "<b>" . $day1 . "</b>";
            ?>
                    
        </td>        
        </tr>
        
        <tr>
        <td height="67" colspan="3">
            <img src="http://edgecitytimes.uuuq.com/images/ectbanner.png">
        </td>
        </tr>
        
        <tr>
        <td width="211" height="366">
            <img src="http://edgecitytimes.uuuq.com/images/mainbutton.png">
            <br>
            <img src="http://edgecitytimes.uuuq.com/images/comicbutton.png">
            <br>
            <img src="http://edgecitytimes.uuuq.com/images/archivesbutton.png">
        </td>
        <td width="450" height="366">
            <img src="http://edgecitytimes.uuuq.com/images/mainimage.png">
        </td>
        <td width="211" height="366">
            <img src="http://edgecitytimes.uuuq.com/images/aboutbutton.png">
            <br>
            <img src="http://edgecitytimes.uuuq.com/images/contactbutton.png">
        </td>
        </tr>

        <tr>
        <td background="http://edgecitytimes.uuuq.com/images/leftfiller.png">

        </td>
        <td background="http://edgecitytimes.uuuq.com/images/mainfiller.png">
        
            <center>
            <p>
            <b>WELCOME</b>
            </p>
            </center>
            <p>
            Hello, and welcome to Edge City Times - the eventual home of the webcomic <i>Edge City</i>. This site is merely a dummy site I've set up for the purpose of getting the layout correct. Feel free to look around the page.
            </p>
            <p align="right">
            <b>Anthony, Site Administrator</b>
            </p>
            
        </td>
        <td background="http://edgecitytimes.uuuq.com/images/rightfiller.png">

        </td>
        </tr>
        
        <tr>
        <td colspan="3">
            <img src="http://edgecitytimes.uuuq.com/images/bottom.png">
        </td>
        </tr>







    </table>
</center>

<center>
    <font color="444444">
    <p>
    © Anthony Krueger

            <?php
            $date1=2009;        
            $date2=date("Y");
            if ($date2=="2009")
            echo " " . $date1;
            else
            echo " " . $date1 . "-" . $date2;
                
            ?>
    </p>
    </font>
</center>
</body>
</html>
Pixeltor
Apr 10 2009, 10:25 PM
check this

I posted a problem about tables, then someone reccomended the <div> tag, I've used it ever since.
Mr. A
Apr 11 2009, 08:10 AM
I'm not sure if divs could help here. My layout is fairly complex. The only way I see it happening is with tables.



If you know how to set this kind of layout up with a div, then I suppose I'll give it a try. But to be honest, I'm not too particularly familiar with the functions of the div tag to begin with.\

EDIT: I removed the breaks in the coding between the images, and it seemed to lessen the gap between images, but not entirely.
MrTouz
Apr 11 2009, 09:50 AM
Sorry this is a mess. If you want your layout to move around you can't set height values... makes your website not expendable.

Like i posted on Pixeltor's post tables are used to organize data from databases... at least it's their best use. They are not used to organize layouts. It's not what it should be done with.

You need to use DIVS (division) and, if they are done correctly they will work everywhere IE FF SA GC OP...

Your problem here ? well it seems that IE is expending the size of your tables, inside your tables you have images only, so make sure the images you have are not larger than the actual box they are in... probably try to set some values to the images too.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.