Jump to content

layout works fine in IE, Opera, fails in FF


TigrisJK
 Share

Recommended Posts

It's been a while since I've really done any coding, so I'm rather miffed by this. Any help would be appreciated... I just spent the last hour writing it up quickly then running into this problem... thanks!The site is here: http://www.johannkwan.com/nlay/It works fine in IE and Opera, but FireFox doesn't like it at all. And I haven't even slapped on the XHTML DOC tag yet.

<html><head><title>Johann Kwan (dot) com - Photography, Visual Arts, and Webdesign</title><meta name="keywords" content="johann,kwan,photography,photo,visual,art,webdesign,webmaster,story,literature,journalist,blog,design,carleton,humanities,charlatan" /><style type="text/css"><!--html, body {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #FFFFFF;	background-color: #000000;	border: 0;	margin: 0;	padding: 0;	height: 100%;}table {	border: 0;	margin: 0;	padding: 0;}#container {	height: 100%;	width: 100%;	background-color: #000000;	text-align: center;	border: 0;	margin: 0;	padding: 0;}#middlething {	width: 600px;	height: 400px;	border: 0;	margin: 0;	padding: 0;}td.topdog {	background-image: url(topBG.jpg);	width: 600px;	height: 60px;	border: 0;	margin: 0;	padding: 0;}td.underdog {	background-image: url(bottomBG.jpg);	width: 600px;	height: 340 px;	border: 0;	margin: 0;	padding: 0;}td.smallprint {	text-align: center;	font-size: 8px;}--></style></head><body><table id="container" border="0" cellspacing="0" cellpadding="0"><tr><td id="container"><table id="middlething" border="0" cellspacing="0" cellpadding="0"><tr><td class="topdog"></tr><tr><td class="underdog"></td></tr><tr><td class="smallprint">Curriculum Vitae | Legal Stuff</td></tr></table></td></tr></table></body></html>

Link to comment
Share on other sites

using Firefox, I see what you mean.BUT if you haven't declared your DOCTYPE, browsers act oddly with things. Usually firefox tries to render it in standards anyway, but there's no guarantee. Try putting the DOCTYPE in it and see how it renders. XML Declaration doesn't hurt either. Try putting this in the very beginning, before you open the <html> tag.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

also, throwing it into the validator, I see that you didn't define your charachter encoding and also used the same IDs for multiple things. The XML declartion should take care of the character encoding, but you can also put this inside the head of your document.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Instead of IDs, try using

<element class="classname"></element>

and in your css that means it is

element.classname

instead of

element#idname

One more thing I noticed: <meta keywords..> is widely regarded as useless as very very few search engines even check it anymore (so I've read). If you're looking for good search engine results, make sure to use an appropriate page title and the meta tag <meta descriptions...>, as it tends to be much more effective.hope that helps :)

Link to comment
Share on other sites

meh, here you go.

<html><head><title>Johann Kwan (dot) com - Photography, Visual Arts, and Webdesign</title><meta name="keywords" content="johann,kwan,photography,photo,visual,art,webdesign,webmaster,story,literature,journalist,blog,design,carleton,humanities,charlatan" /><style type="text/css"><!--html, body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #FFFFFF;background-color: #000000;border: 0;margin: 0;padding: 0;height: 100%;}table {border: 0;margin: 0;padding: 0;}#container {height: 100%;width: 100%;background-color: #000000;text-align: center;border: 0;margin: 0;padding: 0;}#middlething {width: 600px;height: 400px;border: 0;margin: 0;padding: 0;}td.topdog {background-image: url(http://www.johannkwan.com/nlay/topBG.jpg);width: 600px;height: 60px;border: 0;margin: 0;padding: 0;}td.underdog {background-image: url(http://www.johannkwan.com/nlay/bottomBG.jpg);width: 600px;height: 340 px;border: 0;margin: 0;padding: 0;}td.smallprint {text-align: center;font-size: 8px;}--></style></head><body><table id="container" border="0" cellspacing="0" cellpadding="0">  <tr>    <td>      <table id="middlething" border="0" cellspacing="0" cellpadding="0">        <tr>          <td class="topdog"></td>        </tr>        <tr>          <td class="underdog"> </td>        </tr>        <tr>          <td class="smallprint">Curriculum Vitae | Legal Stuff</td>        </tr>      </table>    </td>  </tr></table></body></html>

Link to comment
Share on other sites

okay, I think this will work now, all I did was add margin-left: auto; and margin-right: auto; to the something middle id. I tried it out and it worked for me, m'kay.

<html><head><title>Johann Kwan (dot) com - Photography, Visual Arts, and Webdesign</title><meta name="keywords" content=& #34;johann,kwan,photography,photo,visual,art,webdesign,webmaster, story, literature,journalist,blog,design,carleton,humanities,charlatan" /><style type="text/css"><!--html, body {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 11px;  color: #FFFFFF;  background-color: #000000;  border: 0;  margin: 0;  padding: 0;  height: 100%;}table {  border: 0;  margin: 0;  padding: 0;  text-align: center}#container {  height: 100%;  width: 100%;  background-color: #000000;  text-align: center;  border: 0;  margin: 0;  padding: 0;}#middlething {  width: 600px;  height: 400px;  border: 0;  margin: 0;  padding: 0;  margin-left: auto;  margin-right: auto;}td.topdog {  background: url(http://www.johannkwan.com/nlay/topBG.jpg) center;  width: 600px;  height: 60px;  border: 0;  margin: 0;  padding: 0;}td.underdog {  background: url(http://www.johannkwan.com/nlay/bottomBG.jpg) center;  width: 600px;  height: 340 px;  border: 0;  margin: 0;  padding: 0;}td.smallprint {  text-align: center;  font-size: 8px;}--></style></head><body><table id="container" border="0" cellspacing="0" cellpadding="0">  <tr>    <td>      <table id="middlething" border="0" cellspacing="0" cellpadding="0">        <tr>          <td class="topdog"></td>        </tr>        <tr>          <td class="underdog"> </td>        </tr>        <tr>          <td class="smallprint">Curriculum Vitae | Legal Stuff</td>        </tr>      </table>    </td>  </tr></table></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...