Firefox and a missplaced table, Need help! |
Firefox and a missplaced table, Need help! |
vision |
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 |
Darin McGrew |
Apr 20 2010, 01:58 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 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. |
pandy |
Apr 20 2010, 02:03 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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 |
vision |
Apr 20 2010, 03:52 PM
Post
#4
|
Group: Members Posts: 6 Joined: 20-April 10 Member No.: 11,697 |
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 |
vision |
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 |
Darin McGrew |
Apr 21 2010, 12:17 AM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 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.
|
vision |
Apr 21 2010, 04:33 AM
Post
#7
|
Group: Members Posts: 6 Joined: 20-April 10 Member No.: 11,697 |
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 |
Frederiek |
Apr 21 2010, 09:19 AM
Post
#8
|
Programming Fanatic Group: Members Posts: 5,146 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 .
|
Darin McGrew |
Apr 21 2010, 10:28 AM
Post
#9
|
WDG Member Group: Root Admin Posts: 8,365 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 |
Apr 21 2010, 10:46 AM
Post
#10
|
WDG Member Group: Root Admin Posts: 8,365 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"> should be<td background="/images/LEFTBANN.png" width="270px" height="150px"> 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. |
vision |
Apr 21 2010, 11:00 AM
Post
#11
|
Group: Members Posts: 6 Joined: 20-April 10 Member No.: 11,697 |
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"> should be<td background="/images/LEFTBANN.png" width="270px" height="150px"> 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 |
Darin McGrew |
Apr 21 2010, 11:56 AM
Post
#12
|
WDG Member Group: Root Admin Posts: 8,365 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. |
vision |
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 . 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 |
Lo-Fi Version | Time is now: 24th April 2024 - 06:49 PM |