Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with my CSS fonts!

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    ...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.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by poliking View Post
    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.

    Quote Originally Posted by poliking View Post
    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:

    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.

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Avoid the JavaScript:
    Code:
    <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>

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,698
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Fang View Post
    Avoid the JavaScript:
    Code:
    <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.

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

    Here’s something to read:
    http://www.boagworld.com/archives/20...t_why_how.html
    http://brainstormsandraves.com/artic...ics/structure/
    http://www.thefutureoftheweb.com/blo...-semantic-html
    http://en.wikipedia.org/wiki/Semanti...#Semantic_HTML

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Fang View Post
    Avoid the JavaScript:
    Code:
    <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:

    Code:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Quote Originally Posted by Arbitrator View Post
    That code won’t work.
    I think you will find that it does.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Fang View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    No conditional comment
    Code:
    <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>

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Fang View Post
    No conditional comment
    Your 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •