dandi8 Posted May 23, 2009 Share Posted May 23, 2009 Hi! I've been lately working on a new site and (being the fool that I am) I've used my favourite Google Chrome for the whole designing process. Once the site layout was complete and working I tested it in other browsers... and epically failed. Here's how my content box looks like in different browsers: Obviously there must be a problem with my code that Chrome ignores and other browsers don't, though I don't know which part of it. So here's my code: function makesubcontent($width,$height, $title, $content) { $width1=$width-18; $width2=$width-2; $height1=$height-46; echo " <table width=\"".$width."\" height=\"".$height."\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <tr> <td colspan=\"2\" background=\"images/subc_left.png\" width=\"9\" height=\"36\"></td> <td background=\"images/subc_head.png\" width=\"".$width1."\" height=\"36\" align=\"center\"> <div class=\"contentheader\">".$title."</div> </td> <td colspan=\"2\" background=\"images/subc_right.png\" width=\"9\" height=\"36\"></td> </tr> <tr> <td background=\"images/outline.gif\" width=\"1\" height=\"".$height1."\"></td> <td colspan=\"3\" background=\"images/content.gif\" width=\"".$width2."\" height=\"".$height1."\" valign=\"top\"><div class=\"subcontent\"> ".$content." </div></td> <td background=\"images/outline.gif\" width=\"1px\" height=\"".$height1."\"></td> </tr> <tr> <td colspan=\"2\" background=\"images/subc_bottomleft.png\" width=\"9\" height=\"10\"></td> <td background=\"images/subc_bottom.png\" width=\"".$width1."\" height=\"10\"></td> <td colspan=\"2\" background=\"images/subc_bottomright.png\" width=\"9\" height=\"10\"></td> </tr> </table> "; return true; } Can anyone help me? I'm stuck! Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 23, 2009 Share Posted May 23, 2009 Got a live version somewhere? Working with firebug is easier than staring at code. Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 23, 2009 Author Share Posted May 23, 2009 I'd upload it but for some reason my ByetHost account ain't working and starting a new one just for the sake of showing the site seems... well, kinda unnecesary I guess. Maybe I should upload the parsed HTML code of the site? Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 24, 2009 Share Posted May 24, 2009 I'd upload it but for some reason my ByetHost account ain't working and starting a new one just for the sake of showing the site seems... well, kinda unnecesary I guess. Maybe I should upload the parsed HTML code of the site? I was about to ask you to post the parsed html... when you asked if you were supposed. - Well duh, obviously, you should post the parsed the html! What does php have to do anything with how the browser renders the code? Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 25, 2009 Author Share Posted May 25, 2009 K... Here's the HTML code for the box: <table width="200" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" background="images/subc_left.png" width="9" height="36"></td> <td background="images/subc_head.png" width="182" height="36" align="center"> <div class="contentheader">Latest Posts</div> </td> <td colspan="2" background="images/subc_right.png" width="9" height="36"></td> </tr> <tr> <td background="images/outline.gif" width="1" height="154"></td> <td colspan="3" background="images/content.gif" width="198" height="154" valign="top"><div class="subcontent"> This will be full of content<br> This will be full of content<br> This will be full of content<br> </div></td> <td background="images/outline.gif" width="1px" height="154"></td> </tr> <tr> <td colspan="2" background="images/subc_bottomleft.png" width="9" height="10"></td> <td background="images/subc_bottom.png" width="182" height="10"></td> <td colspan="2" background="images/subc_bottomright.png" width="9" height="10"></td> </tr> </table> Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 25, 2009 Share Posted May 25, 2009 Why does one use tables? You are wasting time. Something that takes 3 hours to code in tables (full of hair pulling out action) would take approximately 2 minutes with css. Tables are too rectangular for me. Everything must fix perfectly in a box, to the nearest pixel. Tables have their benefits. Tabular data and tables work. I will help you code that entire thing in css if you give me a starting point - if you at least try to convert all that table-jagular code into CSS, I'll help you polish it up 100% for free. Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 25, 2009 Author Share Posted May 25, 2009 CSS doesn't always work in some browsers and I'm trying to make it as compatible as possible. Also, I like tables and as you can see from the starting post it's all generated automatically. What's the problem with tables? o.O Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 25, 2009 Share Posted May 25, 2009 Nothing is wrong with tables if they're used for what they're supposed to be used for. Tabular data! Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 25, 2009 Share Posted May 25, 2009 CSS doesn't always work in some browsers and I'm trying to make it as compatible as possible. Also, I like tables and as you can see from the starting post it's all generated automatically. What's the problem with tables? o.O Which browsers don't support css? Lynx? .. But you see that's the bueaty of css! If a browser doesn't support it, you'll see text formatted in lists, headings, and paragraphs. Tables do not downgrade as nicely. Go ahead use tables! - pull out your hair. Get some gray hairs. Yell at someone. I'm totally cool with that. Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 25, 2009 Author Share Posted May 25, 2009 Go ahead use tables! - pull out your hair. Get some gray hairs. Yell at someone. I'm totally cool with that. Dude, you have totally no idea how to help people. So, anyone actually want to help? Axeia? Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 25, 2009 Share Posted May 25, 2009 You could try sticking an image in the content cell as width as you want it to be (1px height, transparent) or alternatively make the content cell span over all 5 cells (colspan="5" instead of 3) and set it's left/right border to 1px solid #.. whatever color it is. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 26, 2009 Share Posted May 26, 2009 I would just use some html/css. <div class="box"> <h2>Latest Posts</h2> <div class="main" <p>Filler text... lorem dolerm isum...</p> </div> </div> That's all you need from looking at your current webpage format. The css behind the html quite ingenious. CSS: .box { background: url(../images/bg_bottom_box.png) no-repeat 0 100%; /* Bottom curve border of box, assume background image height = 10px */ padding: 0 0 10px 0; /* padding for the bg image to fit in */ } .box h2 { width: 200px; text-align: center; padding: 5px; height: 10px; /* (height + padding = real height) */ background: url(../image/h2_bg.png) no-repeat; /* Entire bg image where h2 is, assuming bg height = 20px */ } .box .main { border-left: 1px solid blue; border-right: 1px solid blue; } .box .main p { margin: 10px 0 0 0; padding: 0 5px; } That's all you need. Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 26, 2009 Author Share Posted May 26, 2009 Okay, but I don't want to convert every single thing my gfx app creates into CSS. There must be a way to fix the table code. Quote Link to comment Share on other sites More sharing options...
DarkSuperHero Posted May 26, 2009 Share Posted May 26, 2009 From what I can see your dealing with a 3x3 cell table, and i really see no reason to have colspans...i dont know how your css classes affect your cose...and you will probably need to make a wider bg image for the outline.gif, or set it to no repeat, and set a bg color... just a suggestion... <table width="200" height="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td background="images/subc_left.png" width="9" height="36"></td> <td background="images/subc_head.png" width="182" height="36" align="center"> <div class="contentheader">Latest Posts</div> </td> <td background="images/subc_right.png" width="9" height="36"></td> </tr> <tr> <td background="images/outline.gif" width="9" height="154"></td> <!--//I set the width equal to the width of the corners--> <td background="images/content.gif" width="182" height="154" valign="top"><div class="subcontent"> This will be full of content<br> This will be full of content<br> This will be full of content<br> </div></td> <td background="images/outline.gif" width="9" height="154"></td> <!--//I set the width equal to the width of the corners--> </tr> <tr> <td background="images/subc_bottomleft.png" width="9" height="10"></td> <td background="images/subc_bottom.png" width="182" height="10"></td> <td background="images/subc_bottomright.png" width="9" height="10"></td> </tr> </table> I use to use tables for everything as well...but the day will come when you will find css and html tabless layouts to work to your advantage... :-D Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 26, 2009 Share Posted May 26, 2009 The problem with your code is that tables aren't supposed to be used to layout content. This isn't the "old school" way of doing it, it's simply wrong. Since your so stubborn (even when I provided with a coded CSS alternative) - do you have an active link? I'll take a quick look w/ firebug. That should help. Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 27, 2009 Author Share Posted May 27, 2009 Seeing how my ByetHost account has been unblocked... I'll upload the prototype site in a little while. Edit: Here's a link: http://www.solitudegame.byethost6.com/hsolitude_newest/ Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 27, 2009 Share Posted May 27, 2009 YES! HALO ALL the way. Why didn't you say this was for a Halo website from the beginning? I would have redid the entire website for you! Why don't you merge the three <td> into one with width 198px and with css style the td so it has a border like so: td.border { border-right: 1px solid blue; border-left: 1px solid blue; } html: <td class="border" width="198px" ...> .. Actually, looking at the html/css through firebug again, I see a bigger problem. The <tr> holding the heading "latest posts" has three <td> with two of those having a column span of 2: colspan="2". This is a problem, because a browser renders td width's not by the explicit definition of widths, but the preliminary td. Think of it as a rigid box. You can't shift <td> to be wider than the original td specifications. This is my understanding of tables, and that is why I usually don't use it. Why can't you do something like this: <table> <thead> <tr> <th>Latest Posts</th> </tr> </thead> <tbody> <tr> <td> Filler Text... lorem ipsum doler... </td> </tr> </tbody> </table> And then you had this as the css: th { text-align: center; background: url(../images/bg.png) no-repeat; } td { border-right: 1px solid blue; border-left: 1px solid blue; } ? Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 27, 2009 Author Share Posted May 27, 2009 *Confused* o.O I'll try to understand your code later today (it's 03:40AM here for some weird reason XD) Also - we're making a whole new Halo game (perfectly legal, too) so feel free to delete "hsolitude_newest" from the URL and check out our forum. Just stay silent about the fact I'm making us a new website, please Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 27, 2009 Author Share Posted May 27, 2009 Failed to find the freaking modify button XD I just took a look at the code you posted and I don't see how this could work. You missed some the lower part it seems. Lots of unnecesary stuff I think. Anyhow, this gave me an idea which I think might work (and what I think was your first intention). Be back later to say if it worked or not. Also - how do I only make the sides of my table <tr> have a visible border? Quote Link to comment Share on other sites More sharing options...
dandi8 Posted May 27, 2009 Author Share Posted May 27, 2009 Oh, so there's a time limit for modifying posts o.O Whatever, fixed it! Thanks, TheFilmGod, you helped me get on the right track to solving the problem Turns out I only had to delete 2 lines and change one. Here's my working script: function makesubcontent($width,$height, $title, $content) { $width1=$width-18; $width2=$width-2; $height1=$height-46; echo " <table width=\"".$width."\" height=\"".$height."\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <tr> <td colspan=\"2\" background=\"images/subc_left.png\" width=\"9\" height=\"36\"></td> <td background=\"images/subc_head.png\" width=\"".$width1."\" height=\"36\" align=\"center\"> <div class=\"contentheader\">".$title."</div> </td> <td colspan=\"2\" background=\"images/subc_right.png\" width=\"9\" height=\"36\"></td> </tr> <tr> <td class=\"border\" colspan=\"5\" background=\"images/content.gif\" width=\"".$width1."\" height=\"".$height1."\" valign=\"top\"><div class=\"subcontent\"> ".$content." </div></td> </tr> <tr> <td colspan=\"2\" background=\"images/subc_bottomleft.png\" width=\"9\" height=\"10\"></td> <td background=\"images/subc_bottom.png\" width=\"".$width1."\" height=\"10\"></td> <td colspan=\"2\" background=\"images/subc_bottomright.png\" width=\"9\" height=\"10\"></td> </tr> </table> "; return true; } I changed that: <tr> <td background=\"images/outline.gif\" width=\"1\" height=\"".$height1."\"></td> <td colspan=\"3\" background=\"images/content.gif\" width=\"".$width2."\" height=\"".$height1."\" valign=\"top\"><div class=\"subcontent\"> ".$content." </div></td> <td background=\"images/outline.gif\" width=\"1px\" height=\"".$height1."\"></td> </tr> Into that: <tr> <td class=\"border\" colspan=\"5\" background=\"images/content.gif\" width=\"".$width1."\" height=\"".$height1."\" valign=\"top\"><div class=\"subcontent\"> ".$content." </div></td> </tr> And ofc added the td.border code into my CSS Thanks again and I hope it won't crash on me now XD Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted May 27, 2009 Share Posted May 27, 2009 I'm glad you figured it out. Always looking for ways to help my fellow commrades from halo. I do recommend designing in FF. Google Chrome seems too advanced - so advanced that it can weed out code ambiguities and errors and render it properly. Yet another terrific innovation by Google. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.