Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Firefox and a missplaced table

Posted by: vision Apr 20 2010, 01:33 PM

Hi,
I have made this site, http://vision.myvnc.com/ , and it works fine in 3 out of the 4 browsers I have tested, which are Google Chrome, Opera, Internet Explorer and Firefox. In the first three everything works and looks as it should. But in the fourth, Firefox, the content table is placed to the right of the entire site, like this http://vision.myvnc.com/ffbug.png. Also, the actual posts gets stretched out as you can see.
It should look like this http://vision.myvnc.com/true.png. I tried running the site through a validator but got an error message that claimed I haven't set doctype which I have... Might have set wrong though I don't know really. Any help is appreciated.

Btw, I am able to "hack" the problem by adding a wrapperfix-table around the current div-container that envelops the site, but I'd rather not. And that would still leave the problem with the stretched out posts.

Edit: The page is also majorly bugged in Safari.

Posted by: Darin McGrew Apr 20 2010, 01:58 PM

Our online validator (see the links at the top and bottom of this page) reports markup errors. The structure of your tables is broken.

Note that your server sends something different when the validator requests the URL, so you'll need to enter your markup directly.

Posted by: pandy Apr 20 2010, 02:03 PM

Heh. Yeah, that was different alright. What the heck is it?
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//vision.myvnc.com/&warnings=yes&input=yes

Posted by: vision Apr 20 2010, 03:52 PM

QUOTE(pandy @ Apr 20 2010, 02:03 PM) *

Heh. Yeah, that was different alright. What the heck is it?
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//vision.myvnc.com/&warnings=yes&input=yes

Yeah, I was confused myself :S
Anyway with rawinput I only got one error that I don't think caused it...
CODE
Line 75, character 18:
                <td background="/images/leftmid.png" height="100%" width=" ...
                               ^
Error: there is no attribute background for this element (in this HTML version)


Here is the input.
CODE
1   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2   <?php
  3   session_start();
  4   ?>
  5   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  6  
  7       <head>
  8       <title> .: ASR</title>
  9       <meta http-equiv="Content-Type" content="text/html; charset=utf-16"/>
10       <meta name="description" content="A site about webdesign. HTML, CSS, PHP, Photoshop tutorials." />
11       <meta name="keywords" content="HTML, PHP, CSS, Photoshop, Tutorial, Tutorials, photo, picture, manip, manipulation" />
12       <link rel="stylesheet" type="text/css" href="/global.css" />
13       </head>
14  
15   <body>
16  
17  
18  
19   <div id="wrapper">
20  
21       <!-- ////////////////// TOP -->
22       <div id="topleft">
23  
24       </div>
25       <div id="topmid">
26  
27           <?php
28           if($_SESSION["valid_user"] == "chanpa"){
29               echo "<p>Welcome " . $_SESSION["valid_user"];
30               echo "<br /><a href='/logout.php'>Logout</a> | <a href='/addnews.php'>Add news</a>";
31           }
32           elseif ($_SESSION["valid_user"]){
33               echo "<p>Welcome " . $_SESSION["valid_user"];
34               echo "<br /><a href='/logout.php'>Logout</a>";
35           }
36           else {
37               echo "<br /><p><a href='/register.php'>Register</a> | <a href='/login.php'>Login</a>";
38           }
39           ?>
40           
41       </div>
42       <div id="topright">
43  
44       </div>
45       
46       <!-- ////////////////// MENY -->
47       <div id="leftofmenu"></div>
48       <div id="menycontainer">
49           <ul>
50               <li><a href="/" id="current">News / Start</a></li>
51               <li><a href="/bet/">Bets</a></li>
52               <li><a href="/betinfo/">Betting regler</a></li>
53               <li><a href="/tutorial/">Tutorials ></a>
54                   <ul>
55                       <li><a href="/tutorial/ps/">Photoshop</a>
56                           <ul>
57                               <li><a href="/tutorial/ps/ball.php">Making a ball</a></li>
58                           </ul>
59                       </li>
60                       <li><a href="/tutorial/coding/">Coding</a>
61                           <ul>
62                               <li><a href="/tutorial/coding/dropmenu.php">CSS Drop-menu</a></li>
63                           </ul>
64                       </li>
65                   </ul>
66               </li>
67               <li><a href="/bin/">The Bin</a></li>
68           </ul>
69       </div>
70       <div id="rightofmenu"></div>
71       
72       <!-- ////////////////// MIDDLE -->
73       <table width="1340px" border="0" cellpadding="0px" cellspacing="0px">
74       <tr>
75           <td background="/images/leftmid.png" height="100%" width="270px"></td>
76           <td background="/images/midmid.png" height="100%" width="800px" align="left" valign="top">
77               <?php
78               include("XXXXXXXXXXXXXX");
79               $query="SELECT * FROM `site`.`news` ORDER BY id DESC limit 5";
80               $result=mysql_query($query);
81               $num=mysql_numrows($result);
82               $i=0;
83               while ($i < $num) {
84               $id=mysql_result($result,$i,"id");
85               $author=mysql_result($result,$i,"author");
86               $date=mysql_result($result,$i,"date");
87               $title=mysql_result($result,$i,"title");
88               $post=mysql_result($result,$i,"post");
89               echo
90               ("
91                   <div id='hr'></div>
92                   <table id='posttable' cellpadding='3'>
93                   <tr><td height='100%'>
94       
95                   <p><b>$title</b> by $author</p>
96                   <div id='tithr'></div>
97                   <p><i>$date</i><br />
98                   $post</p>
99       
100                   </td></tr>
101                   </table>
102               ");
103               $i++;
104               }
105               ?>
106           </td>
107           <td background="/images/rightmid.png" height="100%" width="270px"></td>
108       </tr>
109       </table>
110  
111       <!-- ////////////////// BOTTOM -->
112       <div id="footer">
113  
114       <p>Copyright © Chanpa 2010</p>
115       
116       </div>
117  
118   <!-- ////////////////// ENDING TAGS -->
119   </div>
120  
121  
122  
123   </body>
124  
125   </html>

Posted by: vision Apr 20 2010, 04:45 PM

As of now I redid the entire first page of the site using tables instead of div and it works. The old index is at http://vision.myvnc.com/oldindex.php or in my previous post. In the new table layout the only bug I can find is that in Safari the text of my posts is pushed out of the table cells, but the cells are in the right place: http://vision.myvnc.com/safaribug.png

Edit: Just to make it clear, what I want help with is the http://vision.myvnc.com/oldindex.php
I removed middletable (<table width="1340px" border="0" cellpadding="0px" cellspacing="0px">) and now I'm using 3 divs there instead of 3 cells they look like this:

CODE
<div id="midleft">
    
    </div>
    <div id="midmid">    

            <?php
            include("XXXXXXXXXXXXX");
            $query="SELECT * FROM `site`.`news` ORDER BY id DESC limit 5";
            $result=mysql_query($query);
            $num=mysql_numrows($result);
            $i=0;
            while ($i < $num) {
            $id=mysql_result($result,$i,"id");
            $author=mysql_result($result,$i,"author");
            $date=mysql_result($result,$i,"date");
            $title=mysql_result($result,$i,"title");
            $post=mysql_result($result,$i,"post");
            echo
            ("
                <div id='hr'></div>
                <table id='posttable' cellpadding='3'>
                <tr>
                    <td height='100%'>
    
                    <p><b>$title</b> by $author</p>
                    <div id='tithr'></div>
                    <p><i>$date</i><br />
                    $post</p>
    
                    </td>
                </tr>
                </table>
            ");
            $i++;
            }
            ?>
        
    </div>
    <div id="midright">
    
</div>


and the .css
CODE
#midmid {float:left;width:800px;height:auto;margin:0px;padding:0px;background:url(images/midmid.png) no-repeat;text-align:left;}
#midleft {float:left;width:270px;height:auto;margin:0px;padding:0px;background:url(images/leftmid.png) repeat;}
#midright {float:left;width:270px;height:auto;margin:0px;padding:0px;background:url(images/rightmid.png) repeat;}


Basically the problem now is that the left and right div's doesn't show without content. And even if I add content they don't expand as the midmid div gets more posts/content. Is it possible to make them do that?

Posted by: Darin McGrew Apr 21 2010, 12:17 AM

Don't feed the validator the PHP program. Instead, feed the validator the final HTML produced by the PHP program. There were structural problems with the table markup produced by the PHP program.

Posted by: vision Apr 21 2010, 04:33 AM

QUOTE(Darin McGrew @ Apr 21 2010, 12:17 AM) *

Don't feed the validator the PHP program. Instead, feed the validator the final HTML produced by the PHP program. There were structural problems with the table markup produced by the PHP program.


Did that and the errors I get are
CODE
Line 100, character 14:
                                <div id='hr'></div>
                                         ^
Error: ID hr already defined

Line 69, character 14:
                                <div id='hr'></div>
                                         ^
ID hr first defined here

Line 107, character 15:
                                        <div id='tithr'></div>
                                                 ^
Error: ID tithr already defined

Line 76, character 15:
                                        <div id='tithr'></div>
                                                 ^
ID tithr first defined here

Line 115, character 14:
                                <div id='hr'></div>
                                         ^
Error: ID hr already defined

Line 69, character 14:
                                <div id='hr'></div>
                                         ^
ID hr first defined here

Line 122, character 15:
                                        <div id='tithr'></div>
                                                 ^
Error: ID tithr already defined


with the input
CODE
  1   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3  
  4       <head>
  5       <title> .: ASR</title>
  6       <meta http-equiv="Content-Type" content="text/html; charset=utf-16"/>
  7       <meta name="description" content="A site about webdesign. HTML, CSS, PHP, Photoshop tutorials." />
  8       <meta name="keywords" content="HTML, PHP, CSS, Photoshop, Tutorial, Tutorials, photo, picture, manip, manipulation" />
  9       <link rel="stylesheet" type="text/css" href="/global.css" />
10       </head>
11  
12   <body>
13  
14   <div id="wrapper">
15  
16       <!-- ////////////////// TOP -->
17       <div id="topleft">
18  
19       </div>
20       <div id="topmid">
21  
22           <br /><p><a href='/register.php'>Register</a> | <a href='/login.php'>Login</a>        
23       </div>
24  
25       <div id="topright">
26  
27       </div>
28       
29       <!-- ////////////////// MENY -->
30       <div id="leftofmenu"></div>
31       <div id="menycontainer">
32           <ul>
33               <li><a href="/" id="current">News / Start</a></li>
34               <li><a href="/bet/">Bets</a></li>
35  
36               <li><a href="/betinfo/">Betting regler</a></li>
37               <li><a href="/tutorial/">Tutorials ></a>
38                   <ul>
39                       <li><a href="/tutorial/ps/">Photoshop</a>
40                           <ul>
41                               <li><a href="/tutorial/ps/ball.php">Making a ball</a></li>
42                           </ul>
43  
44                       </li>
45                       <li><a href="/tutorial/coding/">Coding</a>
46                           <ul>
47                               <li><a href="/tutorial/coding/dropmenu.php">CSS Drop-menu</a></li>
48                           </ul>
49                       </li>
50                   </ul>
51               </li>
52  
53               <li><a href="/bin/">The Bin</a></li>
54           </ul>
55       </div>
56       <div id="rightofmenu"></div>
57  
58       <!-- ////////////////// MIDDLE -->
59       <table width="1340px" cellspacing="0" cellpadding="0" border="0">
60       <tr>
61       <td background="/images/leftmid.png" width="270px" height="100%">
62  
63       
64       </td>
65       <td background="/images/midmid.png" width="800px" height="100%">
66           
67  
68               
69                   <div id='hr'></div>
70                   <table cellpadding='3' cellspacing='0' border='0'>
71                   <tr>
72                       <td align='left'>
73       
74                       <p><b>Great but no Safari</b> by Chanpa</p>
75  
76                       <div id='tithr'></div>
77                       <p><i>20/04/2010</i><br />
78                       Site is even more bugged in Safari than in Firefox. I'm working on the problem myself and I have asked for help. Hopefully a fix will come soon. </p>
79       
80                       </td>
81                   </tr>
82                   </table>
83               
84                   <div id='hr'></div>
85                   <table cellpadding='3' cellspacing='0' border='0'>
86  
87                   <tr>
88                       <td align='left'>
89       
90                       <p><b>Firefox does NOT work</b> by Chanpa</p>
91                       <div id='tithr'></div>
92                       <p><i>20/04/2010</i><br />
93                       The page does not currently look as it should in Firefox... I am working on fixing the problem but at this time I don't know how. It looks like this <a href="/ffbug.png" target="_BLANK"><img src="/ffbug.png" height="100" width="200" align="top"> Click for bigger pic</a></p>
94  
95       
96                       </td>
97                   </tr>
98                   </table>
99               
100                   <div id='hr'></div>
101                   <table cellpadding='3' cellspacing='0' border='0'>
102                   <tr>
103                       <td align='left'>
104       
105                       <p><b>Login-system</b> by Chanpa</p>
106  
107                       <div id='tithr'></div>
108                       <p><i>16/04/2010</i><br />
109                       I finally got around to making a login-system. Also added methods to prevent MySQL-injection on all the pages of the site. </p>
110       
111                       </td>
112                   </tr>
113                   </table>
114               
115                   <div id='hr'></div>
116                   <table cellpadding='3' cellspacing='0' border='0'>
117  
118                   <tr>
119                       <td align='left'>
120       
121                       <p><b>Cleaning and optimiZZZing</b> by Chanpa</p>
122                       <div id='tithr'></div>
123                       <p><i>15/04/2010</i><br />
124                        Cleaned up all the files. Nestled the code a little better and whatnot. Also made some improvements of the base code and building blocks of the site so it now works in Opera, Google Chrome and IE. Have yet to test it in Firefox.</p>
125  
126       
127                       </td>
128                   </tr>
129                   </table>
130               
131                   <div id='hr'></div>
132                   <table cellpadding='3' cellspacing='0' border='0'>
133                   <tr>
134                       <td align='left'>
135       
136                       <p><b>Everything works!</b> by Chanpa</p>
137  
138                       <div id='tithr'></div>
139                       <p><i>12/04/2010</i><br />
140                        Now all pages are working as intended. More tutorials to come!</p>
141       
142                       </td>
143                   </tr>
144                   </table>
145                           
146       
147       </td>
148       <td background="/images/rightmid.png" width="270px" height="100%">
149  
150       
151       </td>
152       </tr>
153       </table>
154  
155       <!-- ////////////////// BOTTOM -->
156  
157       <div id="footer">
158  
159       <p>Copyright © Chanpa 2010</p>
160  
161       
162       </div>
163  
164   <!-- ////////////////// ENDING TAGS -->
165   </div>
166  
167   </body>
168  
169   </html>


If I remove the respective <div>'s I don't get any errors and it's still bugged. Should I just switch to tables layout? shrugs

Posted by: Frederiek Apr 21 2010, 09:19 AM

ID's need to be unique, you can only use them once in a page. Depending on the CSS rules for them, you might be able to change them to classes. See http://htmlhelp.com/reference/css/structure.html .

Posted by: Darin McGrew Apr 21 2010, 10:28 AM

The last time I checked, there were structural problems with the tables. It looks like you've fixed them though.

Posted by: Darin McGrew Apr 21 2010, 10:46 AM

I just looked at this again. There are still markup errors, but only a couple are structural at this point:
http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fvision.myvnc.com%2F&warnings=yes

The missing doctype declaration puts browsers into quirks mode. See also
http://hsivonen.iki.fi/doctype/

You're using a mixture of HTML and XHTML syntax. Pick one and don't mix them. If you don't have a good reason to use XHTML, then I recommend that you use HTML.

You've included units in your HTML. HTML doesn't need the px units in attribute values. For example:

CODE
<table width="1340px" cellspacing="0" cellpadding="0">
<td background="/images/LEFTBANN.png" width="270px" height="150px">
should be
CODE
<table width="1340" cellspacing="0" cellpadding="0">
<td background="/images/LEFTBANN.png" width="270" height="150">

And FWIW, I see the problem only in Safari right now. Even Chrome (which uses the same rendering engine as Safari) displays it the way you expect. Firefox and Opera also display it the way you expect.

Posted by: vision Apr 21 2010, 11:00 AM

QUOTE(Darin McGrew @ Apr 21 2010, 10:46 AM) *

I just looked at this again. There are still markup errors, but only a couple are structural at this point:
http://htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fvision.myvnc.com%2F&warnings=yes

The missing doctype declaration puts browsers into quirks mode. See also
http://hsivonen.iki.fi/doctype/

You're using a mixture of HTML and XHTML syntax. Pick one and don't mix them. If you don't have a good reason to use XHTML, then I recommend that you use HTML.

You've included units in your HTML. HTML doesn't need the px units in attribute values. For example:
CODE
<table width="1340px" cellspacing="0" cellpadding="0">
<td background="/images/LEFTBANN.png" width="270px" height="150px">
should be
CODE
<table width="1340" cellspacing="0" cellpadding="0">
<td background="/images/LEFTBANN.png" width="270" height="150">

And FWIW, I see the problem only in Safari right now. Even Chrome (which uses the same rendering engine as Safari) displays it the way you expect. Firefox and Opera also display it the way you expect.


Yeah I know, I changed the site from all <div> to all <table> and now it works like it should except in Safari. And now that I redid it I think I got rid of all XHTML, didn't I? If not could you point out to me where I used it?

Edit: I just set my doctype to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and removed all "px" occurences. Now it seems to work in all browsers. Thanks for your help. I still wanna know if I still have mixed XHTML and HTML though so I can avoid it in the future.

Again, thank you!

Posted by: Darin McGrew Apr 21 2010, 11:56 AM

The remaining XHTML is the use of <br /> rather than <br>

You also use ID values multiple times. Perhaps a CLASS attribute would be more appropriate. Don't forget to change the ID selectors in your CSS to CLASS selectors.

Posted by: vision Apr 21 2010, 03:20 PM

QUOTE
ID's need to be unique, you can only use them once in a page. Depending on the CSS rules for them, you might be able to change them to classes. See http://htmlhelp.com/reference/css/structure.html .


QUOTE(Darin McGrew @ Apr 21 2010, 11:56 AM) *

The remaining XHTML is the use of <br /> rather than <br>

You also use ID values multiple times. Perhaps a CLASS attribute would be more appropriate. Don't forget to change the ID selectors in your CSS to CLASS selectors.


I didn't know that about ID's so thank you. Yeah changed the ID to class and the selectors in my css. And replaced <br /> with <br>.

Thanks for all your help

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)