...

View Full Version : Problems with my CSS fonts!



poliking
10-18-2007, 09:31 AM
Hey everybody.
I've designed a website at http://www.johnpoliquin.com/lucid/2/insidecharlie.html and the fonts aren't being read on IE 6.0. They do work on Firefox & Safari though.

The main problems:
My fonts named <H7>, <H8> & <A1> aren't working and are being read as the standard page font. I'm therefore losing the uppercase subheadings and the links at the bottom of the page.

Am I defining my fonts wrong?!?! Arg any help would be greatly appreciated.

JP

abduraooft
10-18-2007, 09:35 AM
Use any one from h1-h6 http://www.w3schools.com/tags/tag_hn.asp

poliking
10-18-2007, 09:50 AM
Ok, that makes sense. But how can I use more than 6 fonts on my page? And how come my <h7> & <h8> work in Safari/Firefox?

NancyJ
10-18-2007, 11:02 AM
...I don't even know where to start with what is wrong with this. The best thing would be for you to actually learn html and css before trying to make websites.... or better yet, hire someone who knows what they're doing.

But in summary,

Hn tags are for Headings not arbitrary tags used to give different fonts. H1-6 are valid, anything greater than that is not valid.
anchor tags (<a>) are not numbered.

If you want to style different elements of the same tag use classes or ids to distinguish between them.

Arbitrator
10-18-2007, 12:11 PM
The main problems:
My fonts named <H7>, <H8> & <A1> aren't working and are being read as the standard page font. I'm therefore losing the uppercase subheadings and the links at the bottom of the page.

Am I defining my fonts wrong?!?!Those elements are not valid HTML elements. If you want to make up elements, perhaps you should use XML.

Iím not going to double‐check this, but I believe that Internet Explorer treats the tags of unknown elements as individual elements. Thus, <h7>header</h7> would be treated as <h7></h7>header</h7><//h7> in that browser. That would explain why your CSS is not being applied.


Ok, that makes sense. But how can I use more than 6 fonts on my page? And how come my <h7> & <h8> work in Safari/Firefox?Use different elements or use class and id attributes.

I should point out that the hx elements are used to signify headers. For example, letís look at a snippet of your code:


<table width="706px" border="0" cellpadding="0" cellspacing="0" bordercolor="#ACACAC" bgcolor="">
<tr>
<td width="100px" height="20" background=""></td>

<td width="606px" bgcolor="#999999"> <h7>Cast</h7>
In Order of Appearance</td>
</tr>
</table>
<table width="490" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p>Charlie
<h7>Nelson Wong</h7>

<br />
The Therapist
<h7>Pattie Dwyer</h7>
<br />
The Boss
<h7>Pete Seadon</h7>
<br />
Molly
<h7>Kiana Unger</h7>

<br />
Ange
<h7>Kallie Val-Zehan</h7>
</p>
</td>
</tr>
</table>Those names are not being used as headers for anything so I donít see why you would want to mark them as such; use more appropriate elements. Additionally, youíre misusing a p (paragraph) element to mark up content that is not a paragraph and tables for layout rather than data association.

Below is an example of the above snippet rewritten to use proper code. I estimated the header element number and excluded CSS that would match your layout. A live example can be found at http://www.jsgp.us/demos/cf125948.html.

You could use a (properly written) table instead, but I didnít to avoid likely Internet Explorer issues.


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

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 125948</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-10-18">
<meta name="Revised" content="2007-10-18">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white url(bg_b.png); color: black; font: 16px/1.2 sans-serif; }
h4, dl { margin: 1em; font-size: 1em; font-weight: normal; }
.label, dd { text-transform: uppercase; font-weight: bold; }
dt, dd { display: inline; }
dd::after { content: "\a"; white-space: pre; }
</style>

</head>
<body>

<div id="cast">
<h4><span class="label">Cast</span> <span class="sort-order">In Order of Appearance</span></h4>
<dl>
<dt>Charlie</dt>
<dd>Nelson Wong</dd>
<dt>The Therapist</dt>
<dd>Pattie Dwyer</dd>
<dt>The Boss</dt>
<dd>Pete Seadon</dd>
<dt>Molly</dt>
<dd>Kiana Unger</dd>
<dt>Ange</dt>
<dd>Kallie Val-Zehan</dd>
</dl>
</div>

<!--[if IE]>
<script type="text/javascript">
// This script is an alternative for the after pseudo-class that Internet Explorer does not support.
var d = document;
var dd = d.getElementById("cast").getElementsByTagName("dd");
for (var i = 0; i < dd.length; i++) {
dd.item(i).appendChild(d.createElement("br"));
}
</script>
<![endif]-->

</body>
</html>

Fang
10-18-2007, 12:37 PM
Avoid the JavaScript:
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white url(bg_b.png); color: black; font: 16px/1.2 sans-serif; }
h4, dl { margin: 1em; font-size: 1em; font-weight: normal; }
.label, dd { text-transform: uppercase; font-weight: bold; }
dt {float:left; margin-right:.5em;}
</style>

VIPStephan
10-18-2007, 12:59 PM
Avoid the JavaScript:
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white url(bg_b.png); color: black; font: 16px/1.2 sans-serif; }
h4, dl { margin: 1em; font-size: 1em; font-weight: normal; }
.label, dd { text-transform: uppercase; font-weight: bold; }
dt {float:left; margin-right:.5em;}
</style>


What JavaScript? Thatís all CSS. :confused:

And to start on the right foot with HTML: Semantic HTML is the keyword.

Hereís something to read:
http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.thefutureoftheweb.com/blog/writing-semantic-html
http://en.wikipedia.org/wiki/Semantic_HTML#Semantic_HTML

Arbitrator
10-18-2007, 01:00 PM
Avoid the JavaScript:
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white url(bg_b.png); color: black; font: 16px/1.2 sans-serif; }
h4, dl { margin: 1em; font-size: 1em; font-weight: normal; }
.label, dd { text-transform: uppercase; font-weight: bold; }
dt {float:left; margin-right:.5em;}
</style>
That code wonít work. I suppose that you meant to add something like the following, which should work:


dt, dd { float: left; margin: 0 0.5em 0 0; }
dt { clear: left; }

However, the keyword there is ďshouldĒ. It doesnít work in Internet Explorer which, instead, floats all of the dd elements onto the first line. I donít know how you would overcome this problem.

I also prefer an actual space instead of an approximated space in the form of a margin. Of course, that could be achieved with the style rule dt::after { content: " "; white-space: pre; }. If avoidance of scripting were desired and the aforementioned float issue were not present, Internet Explorer might be served a margin as an alternative.

Fang
10-18-2007, 01:40 PM
That code wonít work.
I think you will find that it does.

Arbitrator
10-18-2007, 02:14 PM
I think you will find that it does.My mistake. I was forgetting a detail with regard to how floats work and didnít notice that it was necessary to remove the last two lines of the original style sheet. While your code does work, there is a minor aesthetic issue: the text within the dt and dd elements have baselines that do not line up in Internet Explorer. I can fix that with a little relative positioning though.

A second version of the demo with your code, slightly adjusted, can now be found at http://www.jsgp.us/demos/cf125948v2.html.

Fang
10-18-2007, 02:35 PM
No conditional comment

<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white url(bg_b.png); color: black; font: 16px/1.2 sans-serif; }
h4, dl { margin: 1em; font-size: 1em; font-weight: normal; }
.label, dd { text-transform: uppercase; font-weight: bold; }
dt {float:left; margin-right:.5em;}
dd, dt {line-height:1.4;} /* fix alignment in IE */
</style>

Arbitrator
10-18-2007, 02:48 PM
No conditional commentYour code changes the line‐height for the other browsers too though and a line‐height of 1.4 may not be desired in Internet Explorer either.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum