Jump to content

[SOLVED] Content boxes generation fail.


dandi8

Recommended Posts

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:

wndproblem.jpg

 

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! :(

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!  :D

 

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;

}

 

?

Link to comment
Share on other sites

*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 ;)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.