HTML & CSS
Just added horizontall menus to my website (each page) Now however when I view it there are parts of pages where apostrophe's, quotation marks, etc. are indicated by blocks. What has caused this?
I understand I did not use correct code with these grammatical marks, but the site has been okay until I made the recent menu changes. Please help....embarrassed at the way it looks.
for example look at Malamute link.
The http-equiv meta in the head of your pages informs web browsers of the character set that they should expect to encounter in the page, in this case UTF-8.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
This is fine as long as the HTML file itself has been saved with UTF-8 text encoding, but yours have probably been saved as ISO-8859-1 (ISO Latin 1) or Windows-1252. The meta therefore misleads browsers as to the text encoding of the content.
If it's not clear how to save your files as UTF-8 in whichever editor you use, state the program's name and perhaps someone can help.
The alternative would be to change the charset specified in the meta to ISO-8859-1, but UTF-8 tends to be the modern choice.
Text editor is Scite.
Why does one paragraph look fine, but the next one not?
Perhaps you've used ' and " in some places and ‘ ’ “ ” in others. The former are more likely to render consistently across character sets.
okay changed to ISO-8859-1, and the probelm goes away.
Now I have a problem with a small white bar appearing over my tables...suspect it's more bad code on my part.
Looks like this:
<table border="8" cellpadding="20" cellspacing="20" "border color="#BC8F8F" align="center">
<table border="0" style="border:1px #8A360F solid">
<td style="border: 1px solid black; background: #FEF1B5" span style="font-family: Comic Sans MS">
<p><b>As most of you know I am a White's user, and have been for most of my detecting life. Over the years they have not only produced a quality product, but one that is long lasting, dependable and
always backed up by the best customer service in the industry. I mention this now because I was reminded of it a couple of days ago when I emailed Mary Hand (Administrative Assistant to
the Director of Marketing) asking if she might have a copy of Daryl Townley's "Spectrum, Better Depth & Performance", a great book, but one that is now out of print. I had received an email
from a gal who wanted to get this book for her father, but was having trouble finding it anywhere.</p>
<p>About thirty minutes later Mary emailed that they had found a "coffee stained" copy somewhere in the deepest recesses of the factory, and would gladly sent it right out "no charge" if the
customer didn't mind it's condition. Needless to say she was thrilled, and just today emailed to say her Dad had received it and was one happy hunter.</p>
<p>This is one small incident, one small favor, and one small reason I love the folks in Sweet Home. I could mention many other customer service examples similiar to this, but I know
there are many of you who have experienced it first hand. I am proud to know many of the folks who work at the factory, and very proud to be part of the family.</p>
<img src="images/ColorLogo.jpg" alt="White's Homepage" width="300" height="195" border="0">
in viewing your code, your table layout is incorrect.
If you are going to use nested tables (which is a bad idea.) it must have a table contained in a table cell. So your first two lines of tables above should read.
Also 'border color="#BC8F8F' is not an html attribute. You must use it in a CSS style.
span style="font-family: Comic Sans MS"
Needs to be inside your cell.
<td><span style="font-family: Comic Sans MS">asdfasdf</span></td>
I would suggest brushing up on using divs and css. You are starting in the right direction but the way your implementing/using code is outdated and can cause you problems down the line.
Pretty much everyone is pointing you the right way with the 'lose the tables' -- you have not a single page on the entire site that has anything resembling tabular data.
From there you have other stuff to clean up/get rid of like CSS in the markup, use of tags that have NO place on a website after 2001 like CENTER, U and FONT -- much less that none of your tag orders make the least bit of sense.
It would appear you are not grasping the two basic types of tags -- block-level and inline-level. (which is NOT the same thing as CSS' display:inline and display:block, though those are the default behaviors for 'level'). Basically block level tags can contain almost any tag, while inline-level tags cannot be wrapped around block-level ones.
FONT, SPAN, I, B, EM, STRONG, A -- inline-level.
DIV, LI, UL, P -- block level.
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="index.html"><font color="#8A360F">Home</a></li>
Not only is using tags that have no business being on a website that is less than a decade old (FONT), you have a B and a FONT tag trying to wrap a LI -- you can't do that! At the bottom you have a <br> wedged between the </LI> and </UL> -- you can't do that either.
Also, certain tags can only DIRECTLY wrap certain other tags... For example the only valid child of a UL is LI, so you can't put tags after UL and around LI -- doesn't work that way. Another is the one Atsea just pointed out -- TABLE can only have as child elements THEAD, TBODY, TFOOT, CAPTION and TR. TR can only have as child elements TD and TH... while TD and TH can wrap just about anything.
Another example is this:
That's complete gibberish -- again the tag that has no business even being used in modern markup, you have it and a bold tag trying to wrap a paragraph... invalid/improper markup.
You also have a LOT of unclosed tags. You open tags they need to be closed in the SAME order you opened them.
You didn't close FONT, FONT and CENTER have no business on a properly written page unless you take a trip in the wayback machine to 1997 -- this one's even wierder as what the devil makes a bunch of asterisks the heading for a section of content? That's not a heading...
Even some of the simpler stuff is just waste -- like the string of line-breaks doing padding's job.
It may also help on your home page to turn it into meaningful content instead of it being a glorified splash page with nothing for screen readers, search engines or people browsing with images disabled to use... especially since that gives your keywords meta zero relevance to the page content, at which point it's pretty much ignored by everything...
... and some consistency in your code formatting would help show all the times you fail to close tags like LI.... and "image/title.ico" is NOT a valid mime-type.
... and copyright copyright? seems a little redundant.
Basically boils down to how you have 7.5k of markup doing 3.5k's job.