Click to See Complete Forum and Search --> : HTML - IE, Opera & Firefox / All tables show differently


phpnstuff
10-18-2006, 04:58 PM
I am working on: http://011126c.netsolhost.com/homepage/url.php?loc=welcome

In IE: It looks perfect
In Firefox: The master table won't expand 100% top to bottom of screen
In Opera: The master table and inner table won't expand to 100% top to bottom

Look @ IE first, see how it should look and let me know what I might have overlooked that will make the tables fully expand 100% top to bottom in all browsers.

Thanks in advance!

Kravvitz
10-18-2006, 05:36 PM
Move the comment form before the doctype into the <head> section.

I suggest you read Height and Min-Height (http://www.dynamicsitesolutions.com/css/height_and_min-height/).

No more Transitional DOCTYPEs, please (http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/)
It's Time To Kill Off Transitional DOCTYPES (http://accessites.org/gbcms_xml/news_page.php?id=23)
Transitional vs. Strict Markup (http://24ways.org/advent/transitional-vs-strict-markup)

Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)

phpnstuff
10-18-2006, 05:45 PM
This was done by someone else, I understand div's are better than tables, am I screwed, do I have to re-do the template as a div or can I do some quick fix for the time being?

mshalabi
10-18-2006, 05:53 PM
i couldnt see any difference between IE and firefox..

phpnstuff
10-18-2006, 05:55 PM
Try setting it to a smaller resolution, the template was made to fix 800x600. I'm using 1920x1200 and its looks fine in firefox but it won't expand 100% up/down to fill the screen.

drhowarddrfine
10-18-2006, 05:56 PM
I didn't see any difference either but I would never hire that company again.

phpnstuff
10-18-2006, 05:58 PM
That's my company, i'm doing the content, the template was done 3rd party. Its what "digicom" bought.

I guess I have no choice but do it in div's.

abz
10-18-2006, 06:37 PM
These guys are all right about not using tables, and web standards etc, but what you have there looks fine to me in FF IE and Netscape (opera is not so great :s). Changing the whole thing to divs will take you a while, so practically speaking, you should stay with what you have until the whole thing can be done properly. Sure its not standardised, but if it is only temporary, then its fine.

and I think drhowarddrfine meant he wouldnt use the template company not the company the site is advertising :p

Allso, if they did the template, and its not responding well to havig content, maybe you shuold email them and tell them they did it rubbish?

phpnstuff
10-18-2006, 06:45 PM
Can you guys give me some pointers:

This makes the page over 100% in height, how can I make 3 columns, top to bottom = 100% of the screen with the 1 & 3 column being the same height.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--

/* Body */
body { margin: 0; padding: 0; width: 100%; height: 100%; border: 0; font-size: 9px; font-family: Arial, "Times New Roman", sans-serif; color: #000000; background-color: #FFFFFF; }

#main {
position: absolute;
padding: 0;
width: 100%;
height: 100%;
color: #000000;
background-color: #EAEAEA;
}

#top {

width: 100%;
height: 46px;
color: #000000;
background-color: #3300CC;
}

#middle {

width: 100%;
height: 91%;
color: #000000;
background-color: #663399;
}

#bottom {

position: absolute;
width: 100%;
height: 46px;
color: #000000;
background-color: #CC0066;
}


-->
</style>
</head>
<body>

<div id="main">

<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

</div>

</body>
</html>