Author Topic: Has anybody come across this before? (Read 2208 times)

Jbye · « **on:** June 24, 2010, 05:13:56 PM »

i have designed a page in html with a table. The top row in the table has a picture in it. When i previewed this in html the picture was aligned with the top of the page. It took me ages to do this. As I was satisfied with this I then saved the page as a template for smarty. I then made a php page which calls for this template.

When it loads up the picture is now about an inch from the top of the page. Any ideas why this is and how i resolve it?

Thanks in advance.

Delifisek · « **Reply #1 on:** June 24, 2010, 06:17:12 PM »

Many things can be happen

Dump the html we may find a solution

Jbye · « **Reply #2 on:** June 24, 2010, 06:49:29 PM »

Code: [Select]


<html>
<title>MY GAME INDEX</title>
<body bgcolor="black">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3" >
      <h1></h1>
	  <img src="csbackground.jpg" height="150" width="250">
	  <img src="bg_top_planet.jpg">
	  <img src="csbackground.jpg" height="150" width="220">
    </td>
  </tr>

  <tr valign="top">
  
    <td style="background-color="black";width:20%;
                  text-align:top;" >
      <img src="csbackground.jpg" height="610" width="150">
	  <img src="csbackground.jpg" height="610" width="150">
	  
	  
    </td>
    <td style="background-color="black";height:200px;
                  width:80%;text-align:top;"<body background="csbackground.jpg">><font color="white">
       <center><font face="calibri" size="2"> "To infinity and beyond"- Buzz Lightyear<br><br>
	   blah blah blah
	   <br>blah blah blah<br>
	   blah blah blah<br><br>
	   This is your journey.......<br><br></center>
	   <center>
	   <center><font face="calibri" size="2"><b>
	   <a href="mygame_login.php">LOGIN</a>     <a href="mygame-registration.php">REGISTER</a>    FORUM    WIKI</b><br><br>
			
    </td>
        <td style="background-color="black";
                      width:20%;text-align:top;">
      <img src="csbackground.jpg" height="610" width="150">
	  <img src="csbackground.jpg" height="610" width="150">
    </td>
   </tr>
  <table

</body>  </html>

The blah blah blah's are just random text. As i mentiond this displays correctly in html format but not when i call it as a template (tpl) from smarty.

Barrikor · « **Reply #3 on:** June 24, 2010, 08:08:01 PM »

Interesting problem...

Only things I noticed:
- You accidentally put some "="s into your CSS where ":"s go,
- A couple CSS style declarations end early because you used doublequotes for both the HTML and the CSS in some spots,

Other thoughts:
- Did you put a doctype at the top of the code?
- Does the problem happen differently on different browsers?

Jbye · « **Reply #4 on:** June 25, 2010, 05:00:22 AM »

I have put this DOCTYPE in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

And it moves the picture closer to the top but still not there.

Nox · « **Reply #5 on:** June 25, 2010, 05:09:39 AM »

Strip the whitespace aroung img (I think Smarty should even have tag for that to do it for you)

Btw you should reflect on both first notices of Barrikor

Jbye · « **Reply #6 on:** June 25, 2010, 07:03:40 AM »

How exactly do I do this. I have searched yet I cannot find anything that explains it.

aerosuidae · « **Reply #7 on:** June 25, 2010, 09:40:05 AM »

View the source the the Smarty generated page. Save it somewhere, and compare it line by line with your original HTML file (use a diff tool if possible). Find the differences and eliminate them from the Smarty version, one by one.

Further to Barrikor's notes:

- Table closing tag is broken, too.
- Empty <h1> needed? May not be affecting things as it should collapse, but I'd simplify and remove...

Delifisek · « **Reply #8 on:** June 25, 2010, 04:12:59 PM »

You had many errors (both syntax and design)

<html>
<title>MY GAME INDEX</title>
<body bgcolor="black">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="3" >
         <h1></h1>
         <img src="csbackground.jpg" height="150" width="250">
         <img src="bg_top_planet.jpg">
         <img src="csbackground.jpg" height="150" width="220">
      </td>
   </tr>

   <tr>
      <td style="background-color="black;width:20%; text-align:top;" >
         <img src="csbackground.jpg" height="610" width="300">
      </td>

      <td style="background-color="black";height:200px;width:80%;text-align:top;">
         <font color="white">
         <center><font face="calibri" size="2"> "To infinity and beyond"- Buzz Lightyear<br><br>
         blah blah blah
         <br>blah blah blah<br>
         blah blah blah<br><br>
         This is your journey.......<br><br></center>
         <center>
         <center><font face="calibri" size="2"><b>
         <a href="mygame_login.php">LOGIN</a> <a href="mygame-registration.php">REGISTER</a> FORUM WIKI</b><br><br>
      </td>
      <td style="background-color:black;width:20%;text-align:top;">
         <img src="csbackground.jpg" height="610" width="300">
      </td>
   </tr>
</table>

</body>
</html>

this was some kind of clean version of your html

but I did not remove your design faults.

It seems you have to complete some html crash course.

Then start to write html...

JGadrow · « **Reply #9 on:** June 25, 2010, 11:09:49 PM »

I have a comment... I seem to recall that you were a beginner so I'm going to use the Instructor's Cattle Prod 2000 to shock some sense into you and get you onto a better path that will help you out.

Dump whatever your current learning course is. Table-based design is sooo 1990 (going for a "valley girl" accent here but you can't do that via text). lol

Learn how to use CSS (seriously, it's pretty simple and shouldn't take you long) and you'll be much better off.

Not only will it increase your value as a web designer (HTML / CSS are design aspects) but you'll also do better for search engine rankings as "semantic mark-up" helps the search engines to actually prioritize what's really important to your site.

Hope that helps you out!

Sunchaser · « **Reply #10 on:** June 26, 2010, 12:27:33 AM »

Jgadrow i have a question on tables...

I agree is an old style and the combination div/css is better, more cleaner and so on.

Normally i write layouts and views with divs etc but in some cases , browsers shows a different output and then i have to spend a lot of time browsing internet to find that particular combination of css / layout / hacks that will show the thing right.
When i get enough frustrated, i switch to table layout and solve the issue.

Do you know maybe a tutorial that shows how to position things with divs and explain in a clear way float, position: relative and absolute ?

Barrikor · « **Reply #11 on:** June 26, 2010, 03:33:24 AM »

Yeah, I have to admit I usually end up with a table here and there too, (rounded corners, forms, occasionally the layout itself if that's the only way to make it work on IE6).... IE's excellent CSS support make me feel like bashing my head on the wall...

Anyway, I was board, so I decided to expand on the fixed-up code Delifisek posted,

@Jbye I added some comments that I hope might be helpful. (It's still table-based, you'd be better off with divs instead, but you would need to do that yourself as only you know exactly how the end result should look)

HTML:

Code: (HTML) [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>MY GAME INDEX</title> <!-- <title> is important for SEO, use as many keywords as possible -->
		<!--  Put a <base/> tag here !!! -->
		<meta name="description" content="" /> <!--   Description that you hope SEs (search engines) will use, good for SEO -->
		<meta name="keywords" content="" /> <!--  keywords for SEO, not very important nowadays but can still hurt your SEO if not careful-->
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <!--  change charset if not using UTF-8 encoding-->
		<meta http-equiv="Content-Language" content="en-us" />
		<meta http-equiv="imagetoolbar" content="no" /> <!--  Keeps IE6's toolbar from poping up when someone's mouse pointer hovers over your layout-->
		<meta name="MSSmartTagsPreventParsing" content="true" /> <!--  Prevents theoretical MS Stupidity Tags -->
		<link rel="stylesheet" media="all" type="text/css" href="styles.css" /> <!--  Path/Name of your CSS file (media="all" stops browsers on phones from trashing your CSS) -->
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0" class="MainTable" >
			<tr>
				<td colspan="3" >
					<h1></h1> <!-- Not Needed? Although.... Google likes <h1>'s though for SEO, and for Adwords.... -->
					<img src="csbackground.jpg" class="Image-NorthLeft"/>
					<img src="bg_top_planet.jpg"/>
					<img src="csbackground.jpg" class="Image-NorthRight"/>
					<div class="CellFillerToMakeSureTableWorksRight">
				</td>
			</tr>
			<tr>
				<td class="Cell-Southwest">
					<img src="csbackground.jpg" class="Images-South"/>
				</td>
				<td class="Cell-South">
					"To infinity and beyond"- Buzz Lightyear <br/>
					<br/>
					blah blah blah <br/>
					blah blah blah <br/>
					blah blah blah <br/>
					<br/>
					This is your journey.......<br/>
					<br/>
					<span class="LinkSpan">
						<a href="mygame_login.php">LOGIN</a>
						<a href="mygame-registration.php">REGISTER</a>
						FORUM
						WIKI
					</span>
					<br/>
					<br/>
				</td>
				<td class="Cell-Southeast">
					<img src="csbackground.jpg" class="Images-South"/>
				</td>
			</tr>
		</table>
	</body>
</html>

CSS:

Code: (CSS) [Select]

/*=====================================================================================================
Necessities
=====================================================================================================*/
	html, body {
		height: 100%; /*Force IE to have 0% be the top of the page and 100% be the bottom of viewer */
		width: 100%; /*Force IE to have 0% be left edge and 100% be right edge of viewer, instead of 94%.... */
		margin: 0px; /*Stop stupid IE from adding a margin by default*/
		padding: 0px; /*Stop IE from adding unwanted padding*/
		overflow:auto; /*Gets rid of any useless right scrollbar in IE*/
		overflow-x:hidden; /*Kills off bottom scrollbar, just in case*/
		}

/*=====================================================================================================
Fixies
=====================================================================================================*/
	
	/*Keep browsers from murdering dynamic transparency for <img>s and also make IE render them right*/
	img {
		filter: alpha(opacity=100); /*IE proprietary junk*/
		opacity: 1.0; /*The real way, W3C compliant*/
		-moz-opacity:1.0; /*old Netscape*/
		-khtml-opacity: 1.0; /*old Safari and Konqueror*/
		border-style:none;
		margin: 0px;
		padding: 0px;
		}
	
	/*To try to protect tables from being rendered stupidly by IE*/
	tr, td
		{
		margin: 0px;
		padding: 0px;
		}
		
		
/*=====================================================================================================
Possible styles for this page :
=====================================================================================================*/

	body
		{
		background-color:#000000;
		color:#FFFFFF
		}

	.MainTable
		{
		position:absolute;
		width:100%;
		}
		
	.Image-NorthLeft
		{
		height:150px;
		width:250px;
		}
	
	.Image-NorthRight
		{
		height:150px;
		width:220px;
		}
	
	.Images-South
		{
		height:610px;
		width:300px;
		}
	
	
	.Cell-North
		{
		height:150px;
		min-height:150px;
		}
	
	.Cell-Southwest
		{
		background-color:#000000; /*Not needed ??*/
		width:20%;
		vertical-align:top; /*only use vertical-align on tables as it works weird everywhere else*/
		}
		
	.Cell-South
		{
		background-color:#000000; /*Not needed ?*/
		height:200px;
		width:60%; /*60%, not 80%, but the browsers won't even look at this line anyway, as they read the 1st and last cells in the <tr> beforehand... Thus, not needed*/
		vertical-align:text-top;
		text-align:center; /*text-align regrettably only works horizontally*/
		font-family: calibri, sans-serif; /*fonts only display if they exist on the users computer, make sure to add back-up fonts, put either "serif" or "sans-serif" at the end of the list for if all else fails*/
		font-size:0.8em; /*Always put font-size in em because IE is evil that way*/
		}
		
	.Cell-Southeast
		{
		background-color:black; /*Not needed ??*/
		width:20%;
		vertical-align:top;
		}
		
		
	.LinkSpan
		{
		font-weight:bold;
		}
		
	.CellFillerToMakeSureTableWorksRight
		{
		width:1px;
		height:150px;
		}

(@Jbye, Name the CSS file "styles.css" and put it into the same folder as the HTML file)

(@everyone else, yeah I know the CSS wouldn't pass a CSS validater, but the only non-standard things are some lines near the top, to deal with IE)

incarnate · « **Reply #12 on:** June 26, 2010, 05:44:10 AM »

Quote from: JGadrow on June 25, 2010, 11:09:49 PM

Dump whatever your current learning course is. Table-based design is sooo 1990 (going for a "valley girl" accent here but you can't do that via text). lol Learn how to use CSS (seriously, it's pretty simple and shouldn't take you long) and you'll be much better off.

As a web designer, it's still valuable to know tables, it's not yet been deprecated at all. It's also pre-mature and naive to write off tables like you seem to have; hell, popular sites like Google, Amazon, YouTube, Twitter, Ebay, etc. use tables. CSS is great, but people who preach pure CSS are just trolls.

Jbye, using style="margin:0px;" in your body tag like Barrikor suggested should solve the problem because other than the improper CSS format the code looks fine. If not, then the spacing issue could be caused by the php page that calls it.

Nox · « **Reply #13 on:** June 26, 2010, 06:42:21 AM »

I disagree.
Yes, it's vital to know tables, but NOT for layouts. Tables have their place - for table data.
I don't see Youtube using tables, it even partially uses html5...and as for others, I'm sure it could be done semanticly anyway

Generally I doubt that anything that tables can semantic layout couldn't do the same or better (except maybe same-height columns),
it's just matter of experience

JGadrow · « **Reply #14 on:** June 26, 2010, 09:24:24 AM »

Quote from: incarnate on June 26, 2010, 05:44:10 AM

As a web designer, it's still valuable to know tables, it's not yet been deprecated at all.

Yes, it's not deprecated because tables are created for tabular data as Nox indicated above. I never advocated "writing off tables" I meant only for "table-based design" which is the act of using tables to specify the spacing that a browser should display around elements.

Quote from: incarnate on June 26, 2010, 05:44:10 AM

It's also pre-mature and naive to write off tables like you seem to have; hell, popular sites like Google, Amazon, YouTube, Twitter, Ebay, etc. use tables. CSS is great, but people who preach pure CSS are just trolls.

And, yes, sometimes in business it's necessary to cut corners and take the easy way out because it would be cost-prohibitive to develop a proper solution. And I'm pretty sure Google, Amazon, YouTube, Twitter, and Ebay aren't really concerned about the SEO hit that non-semantic mark-up causes. So, sure, if you're backed by a company that already has a strong web presence, feel free to do everything in tables. Otherwise, you're probably digging for every bit of SEO advantage that you can get.

As far as "pre-mature" is concerned, I disagree. As of CSS 2.1, I can replicate any table-based layout if given enough time. The hardest part is where you have multiple columns with variable lengths and a link or something that must be displayed at the same height at the bottom of those columns. There is a technique called Companion Columns that can be used to replicate that. Even that wouldn't be necessary if IE would support the display: table; CSS property/value (IE 8 does but only when running in IE 8 mode).

@Sunchaser - Experience is always the best teacher. When I was still learning CSS, I became a member of the CSS mailing list because it exposed me to many issues and solutions so it served as a "real-life" learning tool. If I had a question, I was able to ask the list and they were usually very quick about responding. Personally, I prefer to create my layouts using the "Strict" DOCTYPE declaration for whatever output I'm performing. This forces the client not to use the old, quirky rendering behavior and goes a long way towards normalizing browser output.

*Edit - Added the "Companion Columns Link"

Barrikor · « **Reply #15 on:** June 26, 2010, 12:25:17 PM »

I disagree somewhat here,

In some situations, to make things render the way you want you have to write more for browser-hacks for multiple browsers and browser versions than with using a small table. Yes, tables should be frowned upon and avoided, but IMHO it's too early to dump tables out of our toolbox just yet.

Problem is, IE doesn't fully support CSS 2.1 and probably never will.
(Even if they did come out with a W3C-compliant version, or rip off an open source project like Apple did, we'd still have to wait for all the IE users who don't update their browsers to die of old age.)

Nox · « **Reply #16 on:** June 26, 2010, 02:07:10 PM »

Yea, for some uberhacks tables are needed, I've seen tables for some background image stretching I think... I felt we could omit these

talking about "IE" is tricky

IE8 allegedly has full CSS2.1 support and partial CSS3 support
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

IE9 is said to become at least on-par with other browsers (acid3 currently rised to 83%)
http://samples.msdn.microsoft.com/ietestcenter/#html5
...I'm quite looking forward to it's release (not that I'd use it, but...)

incarnate · « **Reply #17 on:** June 26, 2010, 06:31:39 PM »

CSS still has problems with resizing, wrapping, alignment, vertical centering, etc. CSS works most of the time, but when it doesn't you end up trying to implement a handful of hacks and workarounds for compatibility. Yes, it's superior to tables for display if you're only supporting some modern browsers, but it doesn't have the cross-browser compatibility of tables. So yeah, not getting into tables vs css/divs.

Sunchaser · « **Reply #18 on:** June 27, 2010, 02:02:52 AM »

Quote

CSS still has problems with resizing, wrapping, alignment, vertical centering, etc. CSS works most of the time, but when it doesn't you end up trying to implement a handful of hacks and workarounds for compatibility. Yes, it's superior to tables for display if you're only supporting some modern browsers, but it doesn't have the cross-browser compatibility of tables. So yeah, not getting into tables vs css/divs.

This is exactly my point. I would rather work on game functionalities than search internet and spend a lot of time to put lots of hacks to render the div layout correct on all the browsers when a table is fixing the problem fast.

@jgadrow, could you kindly give me the address of the CSS mailing list, and do you know of some online site/books that would tell me the basics (like difference between quirk and strict ecc) because i think although using css i am missing some basic concepts

Delifisek · « **Reply #19 on:** June 27, 2010, 04:34:01 AM »

You may use a CSS framework to develop faster.

We use YAML for our projects in business. It handles well.

In game development ?

I still use tables.

Much faster anything else...

JGadrow · « **Reply #20 on:** June 27, 2010, 09:12:16 AM »

Quote from: Barrikor on June 26, 2010, 12:25:17 PM

Even if they did come out with a W3C-compliant version, or rip off an open source project like Apple did, we'd still have to wait for all the IE users who don't update their browsers to die of old age.

Or, you know, we stop supporting them. They'd ask their grandchildren, "What's wrong with the internet?" and their grandchildren would be all, "Wow! IE6? That browser's as old as you are Grandpa! Let's get you updated."

Realistically, there is only one browser that has given CSS the mislabel of being difficult to work with or "quirky" and it's the industry's lack of moving past this browser that holds it back. I imagine it will be the same with CSS 3 which will give even more power to designers to utilize less non-semantic mark-up to achieve the desired results. Want a round corner border? CSS 3 can do that with ease! CSS 2.1 needs at least 8 tags surrounding an element to make it happen.

I can say that I have never utilized a table for design purposes. The only possible exception is a site that I did a little work for that was already up and running and I've managed to convince them to go with an entirely new system instead so this site will even be replaced with a more semantic mark-up than currently exists.

For me, I've forced myself to work with CSS from Day 1 which means that designing with CSS is second nature to me. Do I run into quirks from time to time? Sure! But that's part of the fun! Otherwise design would be dreadfully boring work. lol

@Sunchaser: Here's the link for the CSS mailing list. As far as learning resources go... there's no better source than the official documents written by w3c.org. However, they're written in a very technical kind of speak so your mileage may vary. So my recommendation is Google. Google is my #1 research tool. lol A quick Google of "strict vs transitional" turns up about 3M results so I'm sure there's one written in a manner that you could learn from. Or you could google "quirks mode."

Harkins · « **Reply #21 on:** June 27, 2010, 10:20:38 AM »

Quote from: JGadrow on June 27, 2010, 09:12:16 AM

Realistically, there is only one browser that has given CSS the mislabel of being difficult to work with or "quirky" and it's the industry's lack of moving past this browser that holds it back.

Speaking of That Particular Browser, I just blogged a browser game tool for dealing with some of its issues.

And they're promising the moon for their next release. Knowing how this usually goes (puts on old man hat and chases kids off lawn), though, they'll have some serious bugs that mean coders will have to jump through flaming hoops for cross-browser support and Microsoft will refuse to fix them because now that the bugs are live they have to be preserved rather than risk breaking any site that depends on them.

aerosuidae · « **Reply #22 on:** June 29, 2010, 07:53:14 PM »

Quote from: JGadrow on June 27, 2010, 09:12:16 AM

...designing with CSS is second nature to me. Do I run into quirks from time to time? Sure! But that's part of the fun! Otherwise design would be dreadfully boring work. lol

Do you get out much?

I must be confusing fun with murderous-rage-at-Microcrap-Internet-Exploder stopping me from the real fun of designing my game.

JGadrow · « **Reply #23 on:** June 29, 2010, 09:30:13 PM »

Quote from: aerosuidae on June 29, 2010, 07:53:14 PM

Do you get out much?

lol Honestly? No. I abhor sunlight and environments that I'm unable to control the climate so I try and stay indoors if I have the opportunity. And it's very likely that I have a different definition of fun than others since I began coding at age 6.

For me, the fun of programming comes from overcoming challenges and finding new solutions to old problems.

Chris · « **Reply #24 on:** June 30, 2010, 07:07:20 AM »

Quote from: JGadrow on June 25, 2010, 11:09:49 PM

Learn how to use CSS (seriously, it's pretty simple and shouldn't take you long) and you'll be much better off.

Yes, even I use CSS

BTW, you can perfectly use CSS with tables.

Random fact: In BBGs you can expect to have 4% of IE6 users (year 2010, based on my games stats).

Quote

For me, the fun of programming comes from overcoming challenges and finding new solutions to old problems.

Interesting how programmers can have so different view on things.
For me fun comes from finishing things and finishing them fast and effortlessly, from finding a way that will let me ignore the biggest challenges and let use well known simple solutions. So it's more like opposite, finding a way to use old solutions for new problems

News:

Author Topic: Has anybody come across this before? (Read 2208 times)