The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Firefox and a missplaced table, Need help!
vision
post Apr 20 2010, 01:33 PM
Post #1





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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 Picture. Also, the actual posts gets stretched out as you can see.
It should look like this How it should look. 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.

This post has been edited by vision: Apr 20 2010, 01:44 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 20 2010, 01:58 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2010, 02:03 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



Heh. Yeah, that was different alright. What the heck is it?
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vision
post Apr 20 2010, 03:52 PM
Post #4





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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.c...s&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>


This post has been edited by vision: Apr 20 2010, 04:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vision
post Apr 20 2010, 04:45 PM
Post #5





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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: Safari bug

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?

This post has been edited by vision: Apr 20 2010, 04:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2010, 12:17 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vision
post Apr 21 2010, 04:33 AM
Post #7





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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

This post has been edited by vision: Apr 21 2010, 04:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 21 2010, 09:19 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 4,278
Joined: 23-August 06
From: Europe
Member No.: 9



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 .


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2010, 10:28 AM
Post #9


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2010, 10:46 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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?u...mp;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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vision
post Apr 21 2010, 11:00 AM
Post #11





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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?u...mp;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!

This post has been edited by vision: Apr 21 2010, 11:19 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2010, 11:56 AM
Post #12


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vision
post Apr 21 2010, 03:20 PM
Post #13





Group: Members
Posts: 6
Joined: 20-April 10
Member No.: 11,697



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th July 2014 - 04:33 PM