HTML Problems...

[camthalion95]

Hi,

I've been working on this page for quite a while: http://www.mymusiclair.com/supporter
It displays correctly in Chrome, IE, and FF on my hard drive, but once i upload it it displays wrong in everything except IE. I used FrontPage 2003 to make it... any suggestions?

Thanks,
camthalion95

[diafol]

Yeah, drop Frontpage like a bad habit. It's sh*t. Use a text editor like Notepad++

[Veneficae]

FrontPage is a bane of existence when it comes to coding websites. It creates a lot of unnecessary code that makes your page load slower for your visitors and customers, and makes it a massive hassle to edit.

That's a lot of muddled code. Hand-coding from Notepad will be better than FrontPage, really. That said, I don't know how much HTML you know, so I'll put a bit of sample code here you can use to tidy things up a bit.

You're currently using tables for the Features/Membership/whatever table, so I'll put up a bit of tidier table code.

<table>
<tr>
<th style="color: #ffffff;">Features</th>
<th style="color: #828282;">Registered User</th>
<th style="color: #aa0000;">MML Supporter</th>
<th style="color: #00aa00;">Lifetime Supporter</th>
<th style="color: #1c45fc;">Band</th>
<th style="color: #abb141;">Lifetime Band</th>
</tr>
</table>

That's the top row of the table you currently have, and a lot more concise. The colour codes I used are called hex values, which are a method of getting a much larger array of colours than what are indexed as defaults. You can find other common colour codes here.

Apart from the colour codes and the text in them, you can copy and paste those rows (<tr>) and header cells (<th>, normal table cells for data are <td>) and put existing code inside them. If you open FrontPage I'm hoping the code is indented? If so, you can then just cut and paste existing code pieces into the header cells, make them <td> instead of <th> (as the rest of the data aren't headers) and you'll have the same layout for the table, but a lot easier to read and modify.

Try hand-coding the page instead of using the Design view, as it'll be much cleaner, more readable for you and easier for search engines to index.

[diafol]

Just looked at the source. Yuk! It's full of upper case tags, font tags, inline styling - everything that you want to avoid. In fact, I'd go as far as to say, it's disgusting.

Not your fault by the way.

If you use WYSIWYG to create pages, don't be surprised to find that pages do not show correctly across browsers. The ONLY way to ensure compatibility is to hand code semantic (X)HTML with proper CSS. When layout issues arise, these can usually be sorted using CSS - or at worst by using conditional HTML statements.

If you are new to coding/markup, get some quality online resources, or better still a book (Beginner's Guides, etc).

BTW - avoid tables for layout - it'll end in tears. Unordered lists are the best way to maintain navigation lists:

<ul id="nav">
  <li>Features</th>
  <li>Registered User</th>
  <li>MML Supporter</th>
  <li>Lifetime Supporter</th>
  <li>Band</th>
  <li>Lifetime Band</th>
</ul>

Then in your CSS file (or in a style tag in the head section if you really must):

#nav li:nth-child(1) {
  color:blue;
}
#nav li:nth-child(2) {
  color:green;
}
#nav li:nth-child(3) {
  color:yellow;
}
#nav li:nth-child(4) {
  color:red;
}
#nav li:nth-child(5) {
  color:purple;
}
#nav li:nth-child(6) {
  color:black;
}

Oops - sorry, did I mention problems with browsers. I don't know if IE will take this - it's a bit advanced for the poor beggar.

[Veneficae]

I didn't mean to imply that you were at fault camthalion95, if it was perceived that way I apologise.

I didn't notice he did his navigation in tables, I was aiming at that main table, cheers for covering that, :). (You left some closing <th> tags with open <li> tags in your example code, was going to PM that instead but it said you couldn't receive PMs...)

The only way that 'nth-child' will work in IE is with jQuery; pure-CSS isn't handled. If you want to take that route camthelion95, more information can be found on the Official jQuery nth-child page.

[almostbob]

Along with everybody else
ditch frontpage,
the failure on other browsers is likely deliberate,
MS => IE
MS => Frontpage
ditch all the fixed sizes, they dont work on anybody's browser except yours current best practice is em and % for screen layout not px

[diafol]

Sorry, forget nth child - was being silly. Can do this (without resorting to jQuery):

ul#nav > li {
  color:blue;
}
ul#nav > li + li {
  color:green;
}
ul#nav > li + li + li {
  color:yellow;
}
ul#nav > li + li + li + li {
  color:red;
}
ul#nav > li + li + li + li + li {
  color:purple;
}
ul#nav > li + li + li + li + li + li  {
  color:black;
}