please HELP. My code works in ie but not firefox

Keyser520

02-09-2006, 02:08 AM

It works fine on ie, but has some serious freaking issues on firefox. I really need some help so I can get this up and running on the main page.

Thanks guys!

Here is the .css
BODY {FONT-SIZE: 100%; COLOR: #f0f0f0; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px; PADDING-TOP: 0px; background: url('images/mainpagebgdark.jpg');}

INPUT {FONT-SIZE: 100%; COLOR: #666; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif}

SELECT {FONT-SIZE: 100%; COLOR: #666; FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif}

#page {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 850px; PADDING-TOP: 0px; TEXT-ALIGN: left; z-index: -1; }

#logo { PADDING-LEFT: 0px; PADDING-TOP: 0px; z-index: 0; position: absolute; left: 10px; top: 10px; width: 222px; height: 43px; z-index:0;}

#content { BORDER-RIGHT: #ccd7e0 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #ccd7e0 1px solid; PADDING-LEFT: 20px; BACKGROUND: #fff; PADDING-BOTTOM: 20px; MARGIN: 0px 8px; BORDER-LEFT: #ccd7e0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #ccd7e0 1px solid; HEIGHT: 1em}

IMG {border-width: 0px;}

#google_ad_box {z-index: 0; background: black; position: absolute; left: 304px; top: 8px; width: 468px; height: 60px; }

#buttonmenu {z-index:0; position: absolute; left: 5px; top: 85px; width: 145px; height: 290px; TEXT-ALIGN: center; }

#button {z-index:1; background: url('images/button.gif'); position: relative; width: 142px; height:29px; margin-top: 0px; font-size: 100%;}

#maincontent {padding-left: 45px; padding-right: 50px ; padding-bottom: 10px; padding-top: 0px;z-index: 1; position: relative; left: 0px; top: 0px; width:100%; font-size: 100%; background: url('images/scrollbg.gif'); text-align: left; color: #A52A2A; font-weight: 900;}

#scrolltop {z-index: 1; position: relative; top: 0px; left: 0px;}

#scrollbot {z-index: 1; position: relative; top:0px; left: 0px;}

#scroll {z-index: 1; position: absolute; left: 190px; top: 100 px; width: 597px; font-size: 100%; text-align: center;}

#google_box_2 {z-index: 1; position: absolute; left: 15px; top: 400px; width: 120px; height: 600px; font-size: 100%;}

a { color: #8B0000;
}

a.button { color : white;
text-decoration : none;
font-weight : bolder;
line-height : 29px ;
font-family: Verdana;
font-size: 100%}

A.button:Hover {
color : #A52A2A;
font-style : italic;
font : bold;}

font.firefox {font-size: 60%; font-family: Arial; font: bold; text-decorate: none; color: #292929; }

p {text-indent: 10pt;}

And here is the index

<html>
<head>
<title>RuneEscape.Net</title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="re.css" type="text/css" media="all" />

<script>

function buttonupdate(buttonname) {
if(buttonname=='Xemos') {
str='<center><h1>Xemos</h1></center><p>RuneEscape.Net is the proud home of Xemos, which is an ongoing and promising project by one of our Founders, Owl. This client will take the RS world by storm... </p><p>...as soon as we get it finished, that is!</p><p>Owl has been hard at work on this, but we can use your help. Go download the Alpha version and try to find bugs and errors. Make suggestions, too!</p><p>You can download the alpha version from our forums.<p><p align="right">~Sincerely<br>The Founders<br></p>';
document.getElementById('maincontent').innerHTML=str;
}
if(buttonname=='Guides') {
str='<center><h1>Guides</h1></center><br /><p>Our members have been doing an incredible job of guide writing, though we still need a lot more. We will upload the ones we have very soon. Stay tuned for Quest Guides, City Guides, Skill Guides, and Guild Guides.</p><p align="right">~Sincerely<br>The Founders<br></p>';
document.getElementById('maincontent').innerHTML=str;
}
if(buttonname=='REPaper') {
str='<center><h1>RuneEscape.Net Paper</h1></center><br /><p>Our members have asked for an official paper, and we are doing what we can to make it happen. Articles are being written and a staff is being formed. If you would like to be a part of this new venture, let us know in the forums.</p><p align="right">~Sincerely<br>The Founders<br></p>';
document.getElementById('maincontent').innerHTML=str;
}
else if(buttonname=='History') {
str='<center><h1>History</h1></center><br /><p>On this page, you should be reading about the History of RuneEscape. However, it is two hours after midnight as I write this, and I am feeling a bit tired. I will try to get the history up soon.</p><p>Stay tuned...</p><p align="right">~Sincerely<br>The Founders<br></p>';
document.getElementById('maincontent').innerHTML=str;
}
else if(buttonname=='Ebay'){
str='<center><h1>Contributions</h1></center><br /><p>Many of our users have inquired about how to contribute money to the developement and betterment of RuneEscape.Net. As of this moment in time, Keyser520 has spent almost $400 on the site, for the hosting server and for the purchase of vbulletin. He is trying to recover some of this expense with the google ads that you see on our pages.</p><p>Those of you that have inquired about how to contribute to this site can do so through <A HREF="https://www.paypal.com/us/mrb/pal=VW8EYR4B6BXR6">Paypal</a>.</p><p>Send your contributions to the paypal account:</p> <center>keyser520@gmail.com</center><br /><p align="right">~Sincerely<br>The Founders<br></p><center><A HREF="https://www.paypal.com/us/mrb/pal=VW8EYR4B6BXR6" target="_blank"><IMG SRC="http://images.paypal.com/en_US/i/bnr/paypal_mrb_banner.gif" BORDER="0" ALT="Sign up for PayPal and start accepting credit card payments instantly."></A></center>';
document.getElementById('maincontent').innerHTML=str;
}
else if(buttonname=='REClans'){
str='<center><h1>RuneEscape Hosted Clans</h1></center><br /><p>RuneEscape.Net is proud to offer hosting to active Runescape clans. We provide you with your own domain at <i>yourclanname</i>.runeescape.net, and we only ask two things in exchange. <ul><li>You allow us to put an ad box on your page</li><li>Your clan page links back to RuneEscape.Net</li></ul></p><p>If you want to join the ranks of the RuneEscape hosted clans, you need to<ul><li>send a private message to Keyser520 on our forums</li><li>have a clan with at least 20 <i>active</i> members</li><li>have a clan with potential and that has survived for at least 2 months</li><li>send your coded pages to keyser520@runeescape.net</li></ul></p><center><h3>Hosted Clans</h3><table border="1" bgcolor="#A3A3A3"><tr><td>Gods of Glory</td><td><a href=http://godsofglory.runeescape.net>godsofglory.runeescape.net</a></td></tr></table></center><p align="right">~Sincerely<br>The Founders<br></p>';
document.getElementById('maincontent').innerHTML=str;
}

}

</script>

</head>

<body>

<div id="page"><img src="images/Graniteslab.gif">
</div>
<div id="logo"><a href="http://www.runeescape.net"><img src="images/logo.gif"></a>
</div>
<div id="google_ad_box">
<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>
<div id="buttonmenu">
<div id="button"><a class="button" href="#" onClick="buttonupdate('Xemos')">Xemos</a></div>
<div id="button"><a class="button" href="http://www.runeescape.net/forums" target="_blank">Forums</a></div>
<div id="button"><a class="button" href="http://www.runeescape.net/theaddiction" target="blank">Addiction</a></div>
<div id="button"><a class="button" href="#" onClick="buttonupdate('Guides')">Guides</a></div>
<div id="button"><a class="button" href="#" onClick="buttonupdate('REPaper')">RE Paper</a></div>
<div id="button"><a class="button" href="#" onClick="buttonupdate('REClans')">Clans</a></div>
<div id="button"><a class="button" href="#" onClick="buttonupdate('History')">History</a></div>
<div id="button"><a class="button" href="#" onClick="buttonupdate('Ebay')">Contribute</a></div>
<font class="firefox">best viewed with</font>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>
</div>
<div id="google_box_2">

<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id='scroll'>
<div id='scrolltop'><img src="images/scrolltop.gif"></div>
<div id="maincontent">
<center><h1>Welcome to RuneEscape.Net!</h1></center>

<p>Whether or not you came here with a purpose or merely got lost on your way to the game, we're glad you're here!</p>
<p> You have arrived at a fansite for Runescape--a site that's seeing new developements and additions almost everyday! We opened our doors in January 2006 and are looking to be one of the best and biggest runescape tip sites out there...
<p> Make sure to check out the links to the left and see what we have to offer. Check back often for more developments. And make yourself at home on our forums!</p>

<p>And remember, always...</p>
<center><h2>Make your Escape at RuneEscape.net!</h2></center>

<p align="right">~Sincerely<br>
The Founders<br></p>

</div>
<div id='scrollbot'><img src="images/scrollbot.gif"></div>

</div>
</body >
</html>

all images can be found at www.runeescape.net/images

mark87

02-09-2006, 02:37 AM

Actually it's most definately Firefox displaying it how you've written it, and IE displaying it how you want it to look. ;)

There's no Doctype for starters, placing IE into quirks mode.

Do you have a link to the page?

Keyser520

02-09-2006, 04:09 AM

Sure.

http://www.runeescape.net/test

The css and index have changed slightly from what I posted but you can see them here

http://www.runeescape.net/re.css
http://www.runeescape.net/index.html

Keyser520

02-09-2006, 06:15 AM

I tried making a simple example to figure things out, but I'm still having issues.

I just dont' understand why it's interpretting things differently in firefox vs ie. What is the correct way to get this dang thing to work?

the .html is
<html>
<head>
<title>RuneEscape.Net</title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="test.css" type="text/css" media="all" />

</head>
<body>freakin
<div id="page">
<div id="content">content</div>
<div id="left">left
<div id="menu">menu</div>
<div id="ad">ad</div>
</div>
<div id="right">right
<div id="scrolltop">scroll top</div>
<div id="maincontent">middle scroll</div>
<div id="scrollbot">scroll bot</div>
</div>
</div>
</body>
</html>

and the .css is
BODY {
FONT-SIZE: 76%;
COLOR: #666;
FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial, sans-serif;
PADDING-RIGHT: 25px;
PADDING-LEFT: 25px;
PADDING-BOTTOM: 0px;
MARGIN: 28px 0px;
PADDING-TOP: 0px;
TEXT-ALIGN: center
}
#page {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND:#8A8A8A; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 850px; PADDING-TOP: 9px; TEXT-ALIGN: left
}
#topbar {
BORDER-RIGHT: #ccd7e0 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #ccd7e0 1px solid; PADDING-LEFT: 20px; BACKGROUND: #802A2A; PADDING-BOTTOM: 20px; MARGIN: 0px 8px; BORDER-LEFT: #ccd7e0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #ccd7e0 1px solid; HEIGHT: 10em
}
}
#left {
FLOAT: left; MARGIN: 20px 0px; WIDTH: 460px; POSITION: relative; BACKGROUND: #9C661F;
}
#right {
FLOAT: right; MARGIN: 20px 0px; WIDTH: 300px; POSITION: relative; BACKGROUND: #93DB70;
}

#menu { FLOAT: top; POSITION: relative; HEIGHT: 400px; BACKGROUND: white;
}

#ad { POSITION: relative; FLOAT: bottom; HEIGHT: 200px; BACKGROUND: black;
}

#scrolltop { FLOAT: top; POSITION: relative; HEIGHT: 100px; BACKGROUND: white;
}
#maincontent { POSITION: relative; top:0px; left: 0px; HEIGHT: 100px; BACKGROUND: black;
}
#scrollbot { FLOAT: bottom; POSITION: relative; HEIGHT: 100px; BACKGROUND: white;
}

blain

02-09-2006, 07:57 AM

FF is a lot more compliant than IE.

So may I recommend that you get it to work in FF first and then get it to work in IE.

mark87

02-09-2006, 01:08 PM

Keyser520

02-09-2006, 01:59 PM

Adding the standards mode to it did make it screw up...

But does anyone have any idea how to fix it?

It now lines the scroll div box up with the bottom of the button menu box... and it no longer pays attention to the padding commands..or doesn' see to.

Help :-(

I thought I understood this stuff, but now I'm just getting frustrated.

Vin0rz

02-09-2006, 04:28 PM

As mentioned above, first thing you should do is add in a doctype before the <html> of your page. This will put IE into 'standards' mode. Then see what happens (chances are it will mess up what it looks like in IE).

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

This doctype obviously is the wrong choice seeing the use of <font>, <center> and whatnot. In this case I think you need the transitional one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">

How about changing the float for #menu to left?

Keyser520

02-10-2006, 09:29 PM

Well I redesigned the whole thing from scratch, using the strict standards, and reveiwing the changes each step made in firefox and in ie.

The result is here http://www.runeescape.net .

If you have any suggestions for improvements, let me know.

drhowarddrfine

02-10-2006, 11:17 PM

Vin0rz

02-11-2006, 11:52 AM

Well, no, you did not design to 'strict' standards. You used loose. You should have used html4 strict. The second problem is you designed your site using IE first. IE is a buggy, old non-compliant browser. FF is a modern, up to date, standards-compliant browser. If you want to use modern techniques, you must design to standards and not to bugs, ie, IE. Just changing the doctype is not going to make your code work automatically.

Also, you use the xhtml ending tag '/>' with a html doctype. Remove the slash.
You have 70 html validation errors and a number of CSS errors. Validate your code, fix it, then come back.

Yeah, Fx notes 149 warnings, which are basically just errors. But as you did close the tags with the slash and use lowercase letters, I recommend switching to XHTML 1.0 Strict.

Also, it's a nice effect that you visit a link by hovering it, but it's not handy. Most people aren't used to it, and if you're about half on a page and you hover a link then you'd have to scroll back to were you were, assuming you know what happened. Also, this increases page load time, if you'd only load page when they're actually visited it would be much better, in my opinion. So nice work, but overdone, though I can imagine you not wanting to remove it because you worked on it.

Also, the second "f" in Firefox isn't spelled with a capital letter ;) . Just my two cents.

Keyser520

02-11-2006, 03:52 PM

drhoward, could you go into more details on how to do what you've suggested? I basically knew nothing about how to make any of this work until about 3 days ago--so I've taught myself all of the stuff you see on that page. I *thought* that I had designed it according to "strict" standards, but, apparently, I was quite wrong. Any help you could offer as to WHAT it is that I did wrong would be much appreciated.

So you are saying that you should never use the /> but only > ? How do you check for errors and "validate"?

I designed it by looking at both ie and ff after every change and seeing what worked in both. I guess that's the wrong approach?

Vin0rz, are you saying to remove the "onmouseover" bit?

Vin0rz

02-11-2006, 04:52 PM

Keyser520

02-11-2006, 07:31 PM

I have no knowledge of Javascript, all I'm saying is that I don't think hovering links is better than clicking them.

As for the validator, http://validator.w3.org/

For the validation http://validator.w3.org/check?uri=http%3A%2F%2Fwww.runeescape.net

Ok, I can't figure out what causes all of these "end tag for element which is not open" errors

I presume that I need to change my id="button" to class="button" ?

I don't understand error 97 and 98.

99 i need help on as well.

What does it mean by "center" is undefined in error 102?

You said that I should use xhtml rather than html? What does this entail changing? I tried validating with xhtml strict 1.0 but got lots of errors (150) that i don't quite understand. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.runeescape.net%2F&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict

Also, how can i validate the style sheet?

Thanks!

drhowarddrfine

02-12-2006, 12:57 AM

CSS Validator (http://jigsaw.w3.org/css-validator/) You are right to check both browsers but IE is the buggy one so make it work in Firefox first so you know the code is correct. Then you can adjust for IE. More after I look at it.

drhowarddrfine

02-12-2006, 01:09 AM

Let's clean this up first. Lose the slashes like I said above. Change your doctype to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

No, it's not xhtml but you aren't serving xhtml anyway. Your slashes in html loose are confusing the validator and getting it out of sync trying to track where the start and end tags are. So your start tags don't have a proper ending and every start and end becomes an error.

Make the changes and revalidate to see where we are.

Keyser520

02-12-2006, 06:30 AM

ok, i can make those changes. What is the difference in that doc type and the one that I'm using?

Also, what is the diff in xhtml and html?

Keyser520

02-12-2006, 06:49 AM

ok, i have it down to 23 errors...

help would be greatly appreciated. thanks!

Vin0rz

02-12-2006, 10:01 AM

For the validation http://validator.w3.org/check?uri=http%3A%2F%2Fwww.runeescape.net

Ok, I can't figure out what causes all of these "end tag for element which is not open" errors

I presume that I need to change my id="button" to class="button" ?

I don't understand error 97 and 98.

99 i need help on as well.

What does it mean by "center" is undefined in error 102?

You said that I should use xhtml rather than html? What does this entail changing? I tried validating with xhtml strict 1.0 but got lots of errors (150) that i don't quite understand. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.runeescape.net%2F&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict

Also, how can i validate the style sheet?

Thanks!

Well, xhtml is newer, and it's bound to tighter rules (won't bother you with the reasons), therefore it is quicker rendered by the browser. You can learn about XHTML here (http://www.w3schools.com/xhtml/), it's really short but worth it.

End tag for element which is not open presumably means that you had a tag, e.g. <div /> which you already closed, but then did </div> too, or you did not open <div> but you did close </div>. Hope that was clear enough.

When I validated it, it got way less errors, that's a bit confusing...

The CSS validator was already pointed out ;)

drhowarddrfine

02-12-2006, 02:41 PM

drhowarddrfine

02-12-2006, 02:42 PM

I'm not sure which link we are supposed to be helping with.

Vin0rz

02-12-2006, 02:45 PM

XHTML is HTML using XML, though I can't think of the better wording of that. There's a 99% chance your server is serving xhtml as html so using the xhtml doctype does no good. IE doesn't know xhtml either, only modern browsers do. So sticking with html for now means we don't have to bother with some of the xhtml differences. Using strict means any sloppy code won't be allowed so you won't get fooled by browsers that let some errors slide by.

Erm... No. XHTML is parsed by the XML parser, whereas HTML is parsed by the SGML parser. IE is pretty good at parsing XML (due to M$'s fanatic support of XML) and therefore at that point there's no disadvantage of using XHTML. The only disadvantage might be that you're used to coding in HTML in capital letters and such and therefore find XHTML too difficult.

ronaldb66

02-13-2006, 12:26 PM

XHTML is HTML using XML... XHTML is HTML redefined as an XML application?

XHTML is parsed by the XML parser, whereas HTML is parsed by the SGML parser. IE is pretty good at parsing XML

I don't know where you get that from, but since IE stinks at parsing XML and does not support the text/xhtml+xml content type, I can only imagine you're wrong. Serving XHTML 1.0 as html offers no advantage--and is considered pointless and incorrect by many hardliners--over HTML 4.01, besides the stricter well-formedness rules (which is the main reason why I still slightly prefer XHTML of HTML).

coding in HTML in capital letters and such If you're aiming at XHTML stricter well-formedness requirements, you haven't even begun to scratch the surface.

drhowarddrfine

02-13-2006, 02:02 PM

Here's what I was trying to say, from the W3C: "XHTML 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML.

Vin0rz

02-13-2006, 02:55 PM

If you're aiming at XHTML stricter well-formedness requirements, you haven't even begun to scratch the surface.

..and such...

I knew :D

Keyser520

02-13-2006, 07:04 PM

Err....ok...thanks for that (am I confused now?)

So what I'm trying to figure out is how to fix the validation errors at www.runeescape.net and the .css that is uses found at www.runeescape.net/re.css

VIPStephan

02-13-2006, 08:51 PM

Yeah, the guys got a little off topic...
As for the CSS: The validator says pretty clearly what's wrong, so you've just gotta fix it.
You've got typos in there. It's called text-decoration, not text-decorate. And there is no float: bottom;, only left or right.
You've used some CSS that isn't officially W3C compliant, such as the properties beginning with "-moz" and, as far as I know, box-sizing is CSS3 and thus not yet valid either.
If you use the font property you have to apply more values in order to work. The values are (in the exact order): font weight, font style, font size, and font family; hence it must be

.whatever {font: bold normal 10pt Arial, Helvetica, Sans-serif;}

As for your HTML:

The <font> tag is deprecated. Use <span> instead.
The <center> tag is deprecated. Use a div and apply margin: 0 auto; to it.

I can't really validate your code right now 'cause the w3c validator won't load but this is what I've got by checking it in Dreamweaver MX 2004.

Keyser520

02-13-2006, 09:00 PM

Center is deprecated? Why? How does margin:0 auto work? Does it even the margins on both sides?

you said the values are "font weight, font style, font size, and font family; hence it must be
and you typed "bold normal 10pt Arial, Helvetica, Sans-serif;}"

this may seem like a silly question, but what does it mean when you have three font families?

VIPStephan

02-13-2006, 09:16 PM

Yes, the <center> tag has been deprecated for years now. margin: 0 auto; means top and bottom margin are zero and left and right margins are set to automatic, so it will align to the center - like the center tag actually but a more modern and standards compliant way. :)

It is always good to have some alternative fonts specified if, for some reason, one font isn't installed on the user's machine and for that reason can't be displayed. So if the first font you specified isn't working the browser checks for the second one. And if that's not available, it checks for the third one... the fourth one, the fifth one... as much as you've written there and as long as it finds a font that IS working (if it's the second it will ignore the rest).
When using fonts always think of the very basic ones for use (where you can assume they are on virtually every computer by default) such as Arial, Verdana, Sans-serif, Times, 'Courier New' or 'Times New Roman' ( -> fonts with more words are better to be within single quotes in the CSS)

Vin0rz

02-14-2006, 07:29 AM

Yeah, the guys got a little off topic...
As for the CSS: The validator says pretty clearly what's wrong, so you've just gotta fix it.
You've got typos in there. It's called text-decoration, not text-decorate. And there is no float: bottom;, only left or right.
You've used some CSS that isn't officially W3C compliant, such as the properties beginning with "-moz" and, as far as I know, box-sizing is CSS3 and thus not yet valid either.
If you use the font property you have to apply more values in order to work. The values are (in the exact order): font weight, font style, font size, and font family; hence it must be

.whatever {font: bold normal 10pt Arial, Helvetica, Sans-serif;}

As for your HTML:

The <font> tag is deprecated. Use <span> instead.

Meaning <span style="..."> or <span class="..."> but you probably got that.

The <center> tag is deprecated. Use a div and apply margin: 0 auto; to it.

I can't really validate your code right now 'cause the w3c validator won't load but this is what I've got by checking it in Dreamweaver MX 2004.

Why not use text-align: center? margin: 0 auto doens't look like the way the W3C would want it to be done...

Keyser520

02-14-2006, 12:14 PM

Vin0rz

02-14-2006, 01:43 PM

When you all figure out if text-align or margin:0 auto is the correct way, let me know :-)

As far as fonts go, how can i "embed" a font that isn't a standard one?

I thought, from reading what you wrote about margin, that margin:auto would center vertically as well, but it doesn't seem to :-(

p.s. thanks for all your help guys. It's great knowing that there is a friendly and fun community out here for us coding "noobz" to get answers from. I really appreciate the fact that you all have taken time out of your day to answer my questions. Less than a week ago, I knew nothing more than the ultra-basic html I had learned in college 7 years ago, and now I'm trying my hand with some php...thanks so much.

It's great when you have the opportunity to help someone :D

Anyway, centering vertically isn't exactly like, possible, there do exist some hacks but I would not recommend it. I did find this (http://www.w3schools.com/css/pr_pos_vertical-align.asp) now, don't know if that will help. I also found this (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html), but I didn't feel like reading it through.

You can't use a font if your visitor hasn't installed it on his or her own computer, that's one of the limitations, that's why you should specify an alternative font.

Keyser520

02-14-2006, 02:24 PM

It's great when you have the opportunity to help someone :D

Anyway, centering vertically isn't exactly like, possible, there do exist some hacks but I would not recommend it. I did find this (http://www.w3schools.com/css/pr_pos_vertical-align.asp) now, don't know if that will help. I also found this (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html), but I didn't feel like reading it through.

You can't use a font if your visitor hasn't installed it on his or her own computer, that's one of the limitations, that's why you should specify an alternative font.

Err...... I think I can prove you wrong :-) You can embed fonts--I just found it on google, though it doesn't seem to be all that easy..
http://webmonkey.wired.com/webmonkey/design/fonts/tutorials/tutorial2.html

I'll be back with more questions soon enough.

drhowarddrfine

02-14-2006, 03:17 PM

Can someone restate the current question and post the link to the page we're talking about?

Keyser520

02-14-2006, 03:21 PM

Can someone restate the current question and post the link to the page we're talking about?

The question is "How do I embed fonts in my page that aren't standard on the user's computer?"

mark87

02-14-2006, 03:28 PM

There are a few options....

Use images with text written in the font you want to use (could use Fahrner replacement (http://www.stopdesign.com/articles/replace_text/) to cater for non-image users), use sIFR (http://www.mikeindustries.com/sifr/) (relies on Flash, but is very versatile from what I've heard), or WEFT (http://www.microsoft.com/typography/web/embedding/weft3/default.htm) (Microsoft only).

Keyser520

02-14-2006, 03:30 PM

is WEFT compatible with non-ie browsers?

mark87

02-14-2006, 03:34 PM

No, hence I said MS only. sIFR is the best option really if you plan on using an obscure font on lots of text, as it still allows the user to copy and paste as desired, and also degrades nicely when it's not supported. I'd say images are best for headings though just for simplicity.

drhowarddrfine

02-14-2006, 03:39 PM

mark87 has it right.