Page 1 of 1

CSS navigation help

Posted: Sat Nov 26, 2005 12:11 am
by anthony88guy
I’ve made a test page for my navigation here: http://www.theeliteforces.com/testnav.php
It works fine in IE but not in firefox. Here is the CSS code:

Code: Select all

<style type="text/css">
#nav {
	list-style: none;
	width: 158px;
	margin: 0;
	padding: 0;
	padding-top: 3px;
}
#nav ul { 
	padding:0;
	margin:0;
	overflow:visible;
	position:absolute; 
	text-align: left;
	width: 158px;
}

#nav li { 
	position: relative; 
	margin:0;
	display: block;
	background-image: none;
	padding-left: 0;
}

#nav a {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #FF9900;
	width: 158px;
	width /**/: 160px;
	padding: 0px 0 0px 5px;
	display: block;
	border: 1px solid #151515;
}
#nav a:hover{
    background-color: #555555;
	border: 1px solid #999999; 
	color: #FFCC00;
}

#nav ul, #nav ul ul, #nav ul ul ul{
	width: 158px;
	border: 1px solid #151515;
    display:none; 
    position:absolute; 
    top:0; 
    left:180px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul{
    display:none; 
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}
/* Win IE only \*/
* html #nav li{float:left;} 
/* end holly hack */
/* * html ul li a{ height: 1%; } */
</style>
I believe the nav code is fine, just where the navigation inside the table is 5px padding. But I’m not sure; I’ve been playing around for a couple hors now and no go.

Thanks for any help.

Posted: Sat Nov 26, 2005 12:59 am
by n00b Saibot
most common prob with FF is omitting the damn 'px' after the numbers :evil: I'm just fed up of it, checking on IE then FF and so forth.. aaargh :evil:

If you open the JS Console you will see the error... xx-- something here --xx. Dropping Declaration!...

Re: CSS navigation help

Posted: Sat Nov 26, 2005 10:16 am
by Roja
anthony88guy wrote:I’ve made a test page for my navigation here: http://www.theeliteforces.com/testnav.php
It works fine in IE but not in firefox....

I believe the nav code is fine, just where the navigation inside the table is 5px padding. But I’m not sure; I’ve been playing around for a couple hors now and no go.

Thanks for any help.
Okay, you had more than a few things wrong, so I had to redo it quite a bit.

The online version is here: http://kabal-invasion.com/devnet/index.htm

First, you can't use an "id" for multiple elements. id's are unique. Classes on the other hand can be used multiple times. You did so on several classes, including menu, and a few others.

Second, you need alt tags for your images. It helps the blind and visually-impared (like me!) to see your page.

Third, your html was not compliant. I haven't completely fixed that for you. You need to fix the td background images. I made a stab at it, but I had problems.. hopefully you can figure it out from the code. Always use http://validator.w3.org/ to validate that you have valid html.

Fourth, your css was spread over multiple files, inline and not, and so forth. I've reduced it down to some inline, and two files: ie.css, and main.css. Ideally, you should move all the inline style="" items from the html into main.css so it can be cached.

Fifth, the padding was just as you thought - IE's box model was preventing you from getting a consistent result. I've used a conditional comment (thats the correct choice after IE7) to load an ie-specific stylesheet that solves the problem. This is the issue you wanted solved.

Sixth, and this is your homework assignment, please, please take the time to fix the validation errors in the css. ( http://jigsaw.w3.org/css-validator/ ). It shouldn't take long, and it would really help visually impared folks, not to mention your Google rating.

Hope that helps!

Posted: Sat Nov 26, 2005 10:17 am
by Roja
n00b Saibot wrote:most common prob with FF is omitting the damn 'px' after the numbers :evil: I'm just fed up of it, checking on IE then FF and so forth.. aaargh :evil:

If you open the JS Console you will see the error... xx-- something here --xx. Dropping Declaration!...
Can you cite an example? I've never had it happen.

Of course, px is evil. You should use em's where possible for anything font-related. But I'm still interested in an example.

Posted: Mon Nov 28, 2005 2:17 am
by n00b Saibot
Roja wrote: Can you cite an example? I've never had it happen.

Of course, px is evil. You should use em's where possible for anything font-related. But I'm still interested in an example.
I use px everywhere. its de-facto standard whlle designing my sites. well for the sake of an example, here is a rule in CSS

Code: Select all

TABLE.subCat    { border:1px solid #000000; position:absolute; left:50; top:50; background:#FF9A00; }
This gives error similar to following...
JS Console wrote: Couldn't parse values for attribute 'left' at line 19. Declaration dropped!

Couldn't parse values for attribute 'top' at line 19. Declaration dropped!
I can't remember exact wording but the error msg was more or less same... I can't why it didn't happen to you before... guess you are strictly glued to standards while coding and that has saved you some trouble :)

Posted: Mon Nov 28, 2005 6:47 am
by Roja
n00b Saibot wrote:I use px everywhere. its de-facto standard whlle designing my sites.
Keep in mind that px isn't consistent across multiple platforms, and can restrict users (like me) from being able to increase the size of their fonts. Or put another way, you are telling people with visual deficiencies ("No, you may not view my page!").

em is more consistent across platforms (pc's/macs especially benefit from em use), and is relative to the font setting of the user.
n00b Saibot wrote:well for the sake of an example, here is a rule in CSS

Code: Select all

TABLE.subCat    { border:1px solid #000000; position:absolute; left:50; top:50; background:#FF9A00; }
This gives error similar to following...
JS Console wrote: Couldn't parse values for attribute 'left' at line 19. Declaration dropped!

Couldn't parse values for attribute 'top' at line 19. Declaration dropped!
Thats because you dropped the declaration on "left:50" - you didn't list a px. Its giving a quantity of measurement without giving the unit. Or are you saying that in the original code it has the px after it?

If so, please show an example page so I can see that happen. I've never experienced it.
n00b Saibot wrote:I can't remember exact wording but the error msg was more or less same... I can't why it didn't happen to you before... guess you are strictly glued to standards while coding and that has saved you some trouble Smile
I literally can't *see* the page if I don't in many cases, so yes, I code strictly to standards whenever possible.

Posted: Mon Nov 28, 2005 7:09 am
by n00b Saibot
Roja wrote:Keep in mind that px isn't consistent across multiple platforms, and can restrict users (like me) from being able to increase the size of their fonts. Or put another way, you are telling people with visual deficiencies ("No, you may not view my page!").
OK I guess that applies to fonts only & not everywhere :?:
Roja wrote:Thats because you dropped the declaration on "left:50" - you didn't list a px. Its giving a quantity of measurement without giving the unit. Or are you saying that in the original code it has the px after it?
In the original code it was same as this which was running fine in IE6 but when I opened it in FF 1.5 JS Console popped the aforementioned errors... only when I added the 'px' after nos than it started behaving correctly. also FF's pixel locations differ from IE's... :?

Here is the source code of the said HTML page

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<title>American Benefits Plan for Seniors - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
BODY            { margin:0px; font:12px Arial; }
TABLE           { border:0px; text-align:center; }
TABLE.subCat    { border:1px solid #000000; position:absolute; background:#FF9A00; }
FORM            { margin:0px; padding:0px }
IMG             { border:0px; }
UL              { list-style:outside; margin-left:15px; }
P               { margin-top:0px; }
A:hover         { color:#FF0000; }
A:visited       { color:#0000FF; }
A:visited:hover { color:#FF0000; }
.box            { border:1px solid #000000; }
.menu           { border-right:1px solid #000000; background:#FF9A00; margin:0px; padding:0px; }
.menu A         { color:#000000; text-decoration:none; }
.menu A:hover   { color:#FFFFF0; }
.menu A:visited       { color:#000000; }
.menu A:visited:hover { color:#FFFFF0; }
.subCat A       { color:#000000; text-decoration:none; }
.subCat A:hover   { color:#FFFFF0; }
.subCat A:visited       { color:#000000; }
.subCat A:visited:hover { color:#FFFFF0; }
.contents       { background:url(images/bg.jpg) repeat-x top; }
.footer         { background:#DAD6D5; }
.small          { font:12px Arial;}
.menuTxt        { font:bold 12px "Times New Roman"; text-align:left; padding:5px 0px 5px 5px; border-bottom:solid 1px #E08000; }
.menuHead       { font:bold 11px Arial; text-align:left; padding:5px 0px 6px 5px; border-bottom:solid 1px #E08000; background:#E08000; color:#FFFFFF; }
.title          { font-weight:bold; font-size:14px; text-align:left; padding:5px 0px 5px 0px; }
.heading        { font-weight:bold; font-size:20px; padding:15px 0px 5px 0px; }
.smallHead      { font:20px Haettenschweiler, Impact; text-align:center; }
.info           { font:12px Arial; text-align:right; color:#006600; }
.results        { font:20px Haettenschweiler, Impact; text-align:center;  }
.hilite         { color:#0000FF; background:#FFFF00; font-weight:bold; }
.floatRt        { float:right; clear:right; margin:0px 0px 5px 5px; }
.imgFloat       { float:right; clear:right; margin:0px 2px 5px 5px; }
</style>
<script>
var Cats = Array("Home", "Benefits News Alerts", "Benefits for Daily Expenses", "Benefits for Prescription Drugs", "Benefits for Health Care", "Benefits for Health Care Info", "Benefits for Legal Help", "Benefits for Housing", "Benefits for Retirement Planning", "Have Fun For The Rest of Your Life:", "Benefits for Starting Your Own Business", "Benefits for Starting A Non-Profit", "Benefits for Jobs and Job Training", "Benefits for Education and Learning", "Benefits for Writing A Novel", "Benefits for Working on Your Invention", "Benefits for Volunteering", "Benefits for Travel & Recreation", "Benefits for Being An Artist", "Caring For Others:", "Benefits for Caring for Seniors", "Benefits for Caring for Grand-Children", "Benefits for < Addition-1 >", "Benefits for < Addition-2 >", "Benefits for < Addition-3 >", "Benefits for < Addition-4 >", "Benefits for < Addition-5 >", "How To:", "How To Find the Right Program", "How To Apply for Benefits", "Lesko's Lessons", "Q & A About Government Money", "Contact Web Site Librarian", "Ask Lesko: Customized Answers to Your Questions", "Free Help Filling Out Government Applications", "Who is Matthew Lesko?");
var SubCats = Array();
SubCats["Home"] = new Array("");
SubCats["Benefits News Alerts"] = new Array("Benefits News Alerts");
SubCats["Benefits for Daily Expenses"] = new Array("Help With Paying Bills", "IRS Grants");
SubCats["Benefits for Prescription Drugs"] = new Array("Getting Free Prescription Drugs");
SubCats["Benefits for Health Care"] = new Array("-", "Finding Free Health Care", "Help With Your Disabilities");
SubCats["Benefits for Health Care Info"] = new Array("");
SubCats["Benefits for Legal Help"] = new Array("-", "Legal Help");
SubCats["Benefits for Housing"] = new Array("-", "Money to Buy or Fix Up A Home");
SubCats["Benefits for Retirement Planning"] = new Array("");
SubCats["Benefits for Starting Your Own Business"] = new Array("-", "Help With Your Business");
SubCats["Benefits for Starting A Non-Profit"] = new Array("");
SubCats["Benefits for Jobs and Job Training"] = new Array("-", "Help Getting a Better Job");
SubCats["Benefits for Education and Learning"] = new Array("-", "Paying For An Education");
SubCats["Benefits for Writing A Novel"] = new Array("");
SubCats["Benefits for Working on Your Invention"] = new Array("");
SubCats["Benefits for Volunteering"] = new Array("");
SubCats["Benefits for Travel & Recreation"] = new Array("");
SubCats["Benefits for Being An Artist"] = new Array("");
SubCats["Benefits for Caring for Seniors"] = new Array("-", "Emotional and Grief Counseling");
SubCats["Benefits for Caring for Grand-Children"] = new Array("-", "Free Stuff For Kids");
SubCats["Benefits for < Addition-1 >"] = new Array("");
SubCats["Benefits for < Addition-2 >"] = new Array("");
SubCats["Benefits for < Addition-3 >"] = new Array("");
SubCats["Benefits for < Addition-4 >"] = new Array("");
SubCats["Benefits for < Addition-5 >"] = new Array("");
SubCats["How To Find the Right Program"] = new Array("How To Find The Right Program");
SubCats["How To Apply for Benefits"] = new Array("How to Apply For Benefits");
SubCats["Lesko's Lessons"] = new Array("");
SubCats["Q & A About Government Money"] = new Array("Q & A About Government Money");
SubCats["Who is Matthew Lesko?"] = new Array("Who Are You By Way?", "Who Are You?");
var menuTbl;
var timeObj;
var helpWin;
var leftOff;
var topOff;
var topFact;
var browser;

function showMenu(CatNo)
{
 //if(document.readyState != "complete") return;
 if (SubCats[Cats[CatNo]][0] == "")
 {
  menuTbl.style.display = 'none';
  return;
 }
 while(menuTbl.rows.length > 0) menuTbl.deleteRow(0);
 for(var i = 0; i < SubCats[Cats[CatNo]].length; i++)
 {
  newRow  = menuTbl.insertRow(i);
  newCell = newRow.insertCell(0);
  newCell.innerHTML = ':: <a href="index.php?cat='+SubCats[Cats[CatNo]][i].replace(/ /g,"_").replace(/&/,"^")+'">'+SubCats[Cats[CatNo]][i]+'</a>&nbsp;&nbsp;';
  newCell.className = 'menuTxt';
 }
 menuTbl.style.left = leftOff+'px';
 menuTbl.style.top = (topOff+CatNo*topFact)+'px';
 menuTbl.style.display = '';
}

function hideMenu(dur)
{ timeObj = setTimeout("menuTbl.style.display = 'none'", dur*1000); }

function showHelp()
{
 helpWin = open('help.php', 'helpWin', 'width=305, height=205, toolbars=0, directories=0, statusbar=0');
 helpWin.moveTo(screen.width/2-152, screen.height/2-205);
 helpWin.focus();
}

function initPage()
{
 menuTbl = document.getElementById('subCatMenu');
 leftOff = document.getElementById('mainTbl').offsetLeft + 240;
 topOff  = 195;
 topFact = 26;
 browser = window.navigator.appName;
 if(browser!="Microsoft Internet Explorer")
 {
  leftOff += 7;
  topFact += 1;
 }
}
</script>
</head>
<body onload="initPage()">
<table cellpadding="0" cellspacing="0" id="subCatMenu" class="subCat" style="display:none" onmouseover="clearTimeout(timeObj)" onmouseout="hideMenu(0.5)">
<tr><td>Menu Table</td></tr>
</table>
<table class="box" align="center" cellpadding="0" cellspacing="0" width="784" id="mainTbl">
<tr>
<td style="text-align:left"><img src="images/header.jpg" height="142" width="784" alt="" /></td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" width="784">
<tr>
<td colspan="2" valign="top" width="784">
<table cellpadding="0" cellspacing="0" width="784">
<tr>
<td valign="top" width="32%" class="menu">
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td>&nbsp;</td></tr>
<tr>
<td class="menuTxt" align="left">
<form name="frm" action="index.php?cat=Search" method="POST">
<b>:: Search</b>&nbsp; <input type="text" name="srch" size="12" />
<input type="image" src="images/go.gif" alt="" width="35" height="22" style="position:relative; top:5px;" />
</form>
</td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Home" onmouseover="clearTimeout(timeObj); showMenu(0)" onmouseout="hideMenu(1)">Home</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_News_Alerts" onmouseover="clearTimeout(timeObj); showMenu(1)" onmouseout="hideMenu(1)">Benefits News Alerts</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Daily_Expenses" onmouseover="clearTimeout(timeObj); showMenu(2)" onmouseout="hideMenu(1)">Benefits for Daily Expenses</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Prescription_Drugs" onmouseover="clearTimeout(timeObj); showMenu(3)" onmouseout="hideMenu(1)">Benefits for Prescription Drugs</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Health_Care" onmouseover="clearTimeout(timeObj); showMenu(4)" onmouseout="hideMenu(1)">Benefits for Health Care</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Health_Care_Info" onmouseover="clearTimeout(timeObj); showMenu(5)" onmouseout="hideMenu(1)">Benefits for Health Care Info</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Legal_Help" onmouseover="clearTimeout(timeObj); showMenu(6)" onmouseout="hideMenu(1)">Benefits for Legal Help</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Housing" onmouseover="clearTimeout(timeObj); showMenu(7)" onmouseout="hideMenu(1)">Benefits for Housing</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Retirement_Planning" onmouseover="clearTimeout(timeObj); showMenu(8)" onmouseout="hideMenu(1)">Benefits for Retirement Planning</a></td></tr>
<tr><td class="menuHead">Have Fun For The Rest of Your Life:</td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Starting_Your_Own_Business" onmouseover="clearTimeout(timeObj); showMenu(10)" onmouseout="hideMenu(1)">Benefits for Starting Your Own Business</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Starting_A_Non-Profit" onmouseover="clearTimeout(timeObj); showMenu(11)" onmouseout="hideMenu(1)">Benefits for Starting A Non-Profit</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Jobs_and_Job_Training" onmouseover="clearTimeout(timeObj); showMenu(12)" onmouseout="hideMenu(1)">Benefits for Jobs and Job Training</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Education_and_Learning" onmouseover="clearTimeout(timeObj); showMenu(13)" onmouseout="hideMenu(1)">Benefits for Education and Learning</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Writing_A_Novel" onmouseover="clearTimeout(timeObj); showMenu(14)" onmouseout="hideMenu(1)">Benefits for Writing A Novel</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Working_on_Your_Invention" onmouseover="clearTimeout(timeObj); showMenu(15)" onmouseout="hideMenu(1)">Benefits for Working on Your Invention</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Volunteering" onmouseover="clearTimeout(timeObj); showMenu(16)" onmouseout="hideMenu(1)">Benefits for Volunteering</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Travel_^_Recreation" onmouseover="clearTimeout(timeObj); showMenu(17)" onmouseout="hideMenu(1)">Benefits for Travel & Recreation</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Being_An_Artist" onmouseover="clearTimeout(timeObj); showMenu(18)" onmouseout="hideMenu(1)">Benefits for Being An Artist</a></td></tr>
<tr><td class="menuHead">Caring For Others:</td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Caring_for_Seniors" onmouseover="clearTimeout(timeObj); showMenu(20)" onmouseout="hideMenu(1)">Benefits for Caring for Seniors</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_Caring_for_Grand-Children" onmouseover="clearTimeout(timeObj); showMenu(21)" onmouseout="hideMenu(1)">Benefits for Caring for Grand-Children</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_<_Addition-1_>" onmouseover="clearTimeout(timeObj); showMenu(22)" onmouseout="hideMenu(1)">Benefits for < Addition-1 ></a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_<_Addition-2_>" onmouseover="clearTimeout(timeObj); showMenu(23)" onmouseout="hideMenu(1)">Benefits for < Addition-2 ></a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_<_Addition-3_>" onmouseover="clearTimeout(timeObj); showMenu(24)" onmouseout="hideMenu(1)">Benefits for < Addition-3 ></a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_<_Addition-4_>" onmouseover="clearTimeout(timeObj); showMenu(25)" onmouseout="hideMenu(1)">Benefits for < Addition-4 ></a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Benefits_for_<_Addition-5_>" onmouseover="clearTimeout(timeObj); showMenu(26)" onmouseout="hideMenu(1)">Benefits for < Addition-5 ></a></td></tr>
<tr><td class="menuHead">How To:</td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=How_To_Find_the_Right_Program" onmouseover="clearTimeout(timeObj); showMenu(28)" onmouseout="hideMenu(1)">How To Find the Right Program</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=How_To_Apply_for_Benefits" onmouseover="clearTimeout(timeObj); showMenu(29)" onmouseout="hideMenu(1)">How To Apply for Benefits</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Lesko's_Lessons" onmouseover="clearTimeout(timeObj); showMenu(30)" onmouseout="hideMenu(1)">Lesko's Lessons</a></td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Q_^_A_About_Government_Money" onmouseover="clearTimeout(timeObj); showMenu(31)" onmouseout="hideMenu(1)">Q & A About Government Money</a></td></tr>
<tr><td class="menuHead">Contact Web Site Librarian</td></tr>
<tr><td class="menuHead">Ask Lesko: Customized Answers to Your Questions</td></tr>
<tr><td class="menuHead">Free Help Filling Out Government Applications</td></tr>
<tr><td class="menuTxt">:: <a href="index.php?cat=Who_is_Matthew_Lesko?" onmouseover="clearTimeout(timeObj); showMenu(35)" onmouseout="hideMenu(1)">Who is Matthew Lesko?</a></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
</td>
<td width="68%" valign="top" align="center" class="contents">
<table cellpadding="0" cellspacing="0" width="526" style="margin-left:18px">
<tr><td class="heading"><a name="top">&nbsp;</a></td></tr>
<tr><td align="right">
<a href="#" onclick="showHelp()" title="Click Here for Instant Help">
<img src="images/instanthelp.jpg" style="position:relative; top:-41px"></a></td></tr>
<tr><td class="small" width="524" style="text-align:left;" valign="top">
<img class="floatRt" src="images/man.gif" title="Matthew Lesko" alt="" width="89" height="220" /><p><a href="#1">Test</a></p>
<br />
<p align="justify">This is the content for the home page.</p>
<p class="title"><a name="#1">Test</a></p>
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td colspan="2" class="footer">
<table class="box" cellpadding="5" cellspacing="0" width="100%">
<tr><td class="small">This Website is presented as a free service by
Matthew Lesko, Information USA, Inc.12081 Nebel Street, Rockville,
MD 20852 301-770-6685 <a href="mailto:customerservice@lesko.com">
customerservice@lesko.com</a></td></tr>
<tr><td class="small">A free service to help Katrina Hurricane survivors and
others Find Money, Help, Services nad Information from Government Resources and
Non-Profit Organizations. These Services and Programs are available to every
American with income requirements ranging from low income to no income
requirements at all.
</td></tr>
<tr><td class="small">Copyright &copy; 2005 Matthew Lesko Information USA,Inc.</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Posted: Mon Nov 28, 2005 7:26 am
by Roja
n00b Saibot wrote:
Roja wrote:Keep in mind that px isn't consistent across multiple platforms, and can restrict users (like me) from being able to increase the size of their fonts. Or put another way, you are telling people with visual deficiencies ("No, you may not view my page!").
OK I guess that applies to fonts only & not everywhere :?:
Sort of. Beyond fonts, if we are talking about layout elements (like tables, spans, or divs), then the discussion turns into "Fixed layout v. Fluid layout". Feel free to google fluid layout.. its a bit of a holy war, so I won't even try to claim its a simple question.

Personally, I prefer liquid layouts. Fixed layouts (while visually consistent) result in broken appearance when you increase your font size more times than not. Since I have to increase my font size regularly, the net result is many pages end up looking broken for me.

Your mileage may vary.
n00b Saibot wrote:In the original code it was same as this which was running fine in IE6 but when I opened it in FF 1.5 JS Console popped the aforementioned errors... only when I added the 'px' after nos than it started behaving correctly. also FF's pixel locations differ from IE's... :?
Hmm. That code doesn't produce any js errors for me, or did you already add in the px's in the example?

As to the layout varying between browsers, the best way to describe the difference between the browsers is:

"Internet Explorer will attempt to work around your errors, trying to understand what you meant. Firefox will do its best to render exactly what you told it to, including errors".

Since your page has more than a few compliance errors, its likely that the view in Firefox is affected. Without going through the code, fixing them individually, and seeing what the differences are, I can't be sure (pun intended) that the cause is the code, but there is a good chance of it.

Try fixing the compliance errors first, and we can troubleshoot from there if you'd like.

I am a little unclear on what differences in the layout you are concerned with. Do you mean the 2-4px gap at the bottom of the page, or is there another issue?

Posted: Mon Nov 28, 2005 7:59 am
by n00b Saibot
Roja wrote:Beyond fonts, if we are talking about layout elements (like tables, spans, or divs), then the discussion turns into "Fixed layout v. Fluid layout". Feel free to google fluid layout.. its a bit of a holy war, so I won't even try to claim its a simple question.

Personally, I prefer liquid layouts. Fixed layouts (while visually consistent) result in broken appearance when you increase your font size more times than not. Since I have to increase my font size regularly, the net result is many pages end up looking broken for me.
Yeah! Its the fixed layout which made me choose 'px' thing in first place. I preferred my layout to remain the same in every case whatever content was fed to it. Since most people try to copy content from Word and paste directly into the textbox, it introduces some inconsistencies... But sure I love to use liquid layouts when I am positive that the content will not botch the design elements.
Roja wrote:Hmm. That code doesn't produce any js errors for me, or did you already add in the px's in the example?
I removed the left and top in final version... please use TABLE.subCat rule I posted earlier instead of one in the HTML code...
Roja wrote:I am a little unclear on what differences in the layout you are concerned with. Do you mean the 2-4px gap at the bottom of the page, or is there another issue?
I don't see any gap when I run this page in FF :? Only differences I have seen is the position at which an element is rendered if I use absolute coordinates and the slight difference in size of font in IE & FF... which I suspect depends upon font setting in FF which only has +/- buttons instead of an exact number...

I've begun to think that we might have different versions of FF since we see things so much differently. I have IE6 SP1 & FF 1.5 Beta 1 with AdBlock, GreaseMonkey etc. Does that make any difference...

Posted: Mon Nov 28, 2005 10:03 am
by infolock
px, despite popular belief and from what i've personally seen in every browser that we test (which includes IE, firefox, konqueror, and others) has not had any effect on the browsers ability to display, and has been found to be supported in every instance. the only time it won't be, is if the browser itself does not support CSS..


good thing about using px is it will set an EXACT position and size, which is ideal for anyone who is developing. This allows the designer to set a layout that is the exact same no matter the display resolution (which is why it's recommended in every css designer handbook on the net).

As for the empty space or whatever, never seen it. So, unless you are using a browser dating back to windows 95 or earlier, you should not have a problem using it ;)

Now, liquidizing or whatever, i've never heard of or used. So i don't know if this is a good method or not. however, i do know that px is supported across 99.999% platforms, although i'm sure there are some *custom browsers* someone out there built with delphi or vb that doesn't support them. and if there is, they didin't build their browser to meet the w3c standards, which makes it the browser's creator's fault... not the css designer ;)

edit:

for anyone who might come back and say "it's not supported".. well, i'll post the link for you here just to save myself breath and keystrokes. :

http://www.w3.org/TR/2004/CR-CSS21-2004 ... ngth-units


also, for the use of those who need font enhancements, there are tutorials galour that will help you check for this and impliment it into your css layout (which is also recommeneded in all these same handbooks).

em, px, pts, whatever it is you wanna use are all viable options. just noting px is not bad, and is actually what we use for all our site designs (and we definately keep the impaired in prospective).

Posted: Mon Nov 28, 2005 12:12 pm
by Roja
infolock wrote:px, despite popular belief and from what i've personally seen in every browser that we test (which includes IE, firefox, konqueror, and others) has not had any effect on the browsers ability to display, and has been found to be supported in every instance. the only time it won't be, is if the browser itself does not support CSS..
I think you misunderstand the context, and the issue.

The issue is not browser support. Browsers, as you say, support px, pt, and em. There are two key questions: Which is most consistent across those browsers for rendering size, and which gives more accessibility?
infolock wrote:good thing about using px is it will set an EXACT position and size, which is ideal for anyone who is developing.
Now we are talking about consistency, so lets get specific. The monkey in the wrench is that IE doesn't respect resizing px, but almost everyone else does. Consistent? No. Read more: http://oliverhodgson.com/articles/friendlyfonts/

But wait - it gets better. IE on Mac does allow you to resize px based fonts. Different platform, same browser, different answer.

If its not consistent across multiple browsers (and platforms), then the only question is accessibility.
infolock wrote: This allows the designer to set a layout that is the exact same no matter the display resolution (which is why it's recommended in every css designer handbook on the net).
On the contrary, the leading recommendations are just the opposite:

A list apart recommends relative font sizes
Twice in fact.
Usable type would love to use pixels, but end up recommending relative font sizes because of IE
So did Webmonkey
But most important of all, lets ask the W3c:
W3c wrote: Do not specify the font-size in pt, or other absolute length units. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).
I think thats a pretty clear industry consensus.
infolock wrote:As for the empty space or whatever, never seen it. So, unless you are using a browser dating back to windows 95 or earlier, you should not have a problem using it ;)
I saw it in Firefox 1.07, but it does seem to vary. It may be because the html is invalid, and in quirks mode, which can result in inconsistent results.
infolock wrote:Now, liquidizing or whatever, i've never heard of or used. So i don't know if this is a good method or not.
Very odd. Google "Liquid Layouts". Its the most popular trend in webdesign today, precisely because it gives both accessibility and crisp design looks. In a nutshell, it means not using tables for layout and absolute-values for fonts. Its a design that allows resizing.
infolock wrote:also, for the use of those who need font enhancements, there are tutorials galour that will help you check for this and impliment it into your css layout (which is also recommeneded in all these same handbooks).
I'm really unclear what you mean here. *All* sites need to allow visitors to resize their text. Not doing so means users cannot view the site. Thats what accessibility is about. The site designer has to include that, not the user.
infolock wrote:em, px, pts, whatever it is you wanna use are all viable options. just noting px is not bad, and is actually what we use for all our site designs (and we definately keep the impaired in prospective).
You definitely do not consider the impared if you use px. It makes it impossible to resize sites in IE on windows, which is the dominant browser.

Granted, you *can* as an impared user *disable* all fonts on the page, using a somewhat obscure setting, but doing so also removes the one reason you advocate the use of absolute font sizes: Consistent layout. With the font sizing completely removed, the site design totally breaks. Not much of a choice for impaired users, certainly not one that will win you accessibility awards.

px is bad. It isn't consistent, it isn't accessible, and it only gives the illusion of layout control on a single browser, on a single platform.

Posted: Mon Nov 28, 2005 12:49 pm
by infolock
i stand corrected. very interesting. i'll have to look into this.


(side note: much better response, less critisim = greater response)

Posted: Tue Nov 29, 2005 12:47 am
by n00b Saibot
Question here is If I were to pursue Liquid Layouts how would I incorporate the fact that increasing font size will expand the layout... and in this case the elements with fixed dimensions (e.g. images) won't stretch... How can I cope with that :?:

Posted: Tue Nov 29, 2005 7:37 am
by Roja
n00b Saibot wrote:Question here is If I were to pursue Liquid Layouts how would I incorporate the fact that increasing font size will expand the layout... and in this case the elements with fixed dimensions (e.g. images) won't stretch... How can I cope with that :?:
I hate to say "Google it", but the top four results are exactly what I would have pasted anyways:

http://www.google.com/search?sourceid=m ... uid+layout

All four are excellent articles on specific liquid layouts and how to implement them.

Liquid layouts means starting with the assumption that the page will change. There are images that can stretch (background-image + repeat-x/repeat-y), ways to use background colors to extend graphics, and much more.

Read a few of those articles - I really think they are ideal to answer your general question.