Site design problem

[asmqb]

Hi everyone!

After going through quite a number of site designs, I've finally come to something I like. Although (most of) it validates, the code does not work properly in any version of IE below 7, and Opera also has a slight rendering problem with the links.

Basically, I've been developing HTML for probably just over a year, and developing according to the W3C for less than a week. (!)
I really need your help with this, guys.
The design can be downloaded below in its entirety (the ZIP contains the HTML and CSS).

Some info about the site:

>> I modelled the design off fluxbox (a Linux windowmanager).

>> The setup currently uses frames. I am willing to remove the frameset (from index.html), but please don't remove the iframe in content.html. This is a required part of my site's design, and unless you can recommend a way for me to change the data/layout of the contents of that box without the entire site flickering, please leave it alone!
>> No version of IE below 7 works with this site - and I have the screenshots to prove it, which I can post upon request (for bandwidth reasons).
>> Opera slightly messes the link bar structure up a bit - the link "hover color" overlaps the top border, and is slightly dislocated.
>> Opera uses a different font for the link bar (and I have no idea why) than IE/FF and I want to change this.

Thanx for your help, everyone.
-David

NB. If anyone doesn't understand some part of this post then just announce it and I will do my best to explain.

[MattEvans]

Have you got a live (hosted) version of the site that we can look at? my browsers are spread across different computers. I haven't looked at your code yet, if you don't have an online version, let me know, and I'll look at it anyway.

Personally, I avoid trying to force myself into the W3C validation rules; insofar as I take their advice as useful, but their rulings as non-mandatory. The main reason for that attitude being, all of the browsers seem to have that kind of attitude also. ^_-

It's pretty easy to write W3C compliant code. It's probably easier to write compliant XHTML than it is to write compliant HTML. The main differences will come when you force the browser to draw a page as standards-compliant when it's always worked on the nuances of quirks.

Some notes though;

>> frames are legal HTML and XHTML, there are document types specifically designed to accomodate framesets
>> opera may not have the font you want available. even on the same machine as browsers that can use a certain font; it might legally chose not to allow it. it's best to always have a prefered 'default' font (monospace,sans-serif,serif; that will always exist in some form for any modern browser) as the last resort for a font-family CSS attribute (a comma delimited list of fonts indicates a left-to-right compatibility-dependant preference)

in what way does it not work in IE < 7 ? Does it not show atall, does it fragment all over the place, or something else?

If the page comes up all blank in IE6, and you're using XHTML; check any sourced script in the header. If it looks like this:

<script src="la.js" type="text/javascript"/>

change it to this:

<script src="la.js" type="text/javascript" />
(note the space at the end)
OR
<script src="la.js" type="text/javascript"></script>

for some reason, IE6 goes mental if its confused about the termination of script blocks, and perhaps interprets the whole page as if it were JS.

[asmqb]

Thanx for the tips.

Well, I *do* have a live copy of my website on my desktop, which can be found at http://60.229.251.253/.

My IP has a forum sort of thing in it, at http://60.229.251.253/forum/index.php. I don't use this as a "real" forum but instead as a private paste service. Don't be afraid to put whole HTML pages into it!

At http://60.229.251.253/pix, you can find a variety of versions of IE displaying my site - IE3/4.01/5.01/5.5/6.0 & 7.0.

However, I'm one of those people who likes to switch the PC off at night, so you'll find that the IP probably only works between say about 1pm to 11pm GMT +10. If you can try in those hours, great.

Finally, thankyou once again for your help!

-David

PS. There is *no* JS anywhere in the site, and it's all XHTML.

[MidiMagic]

This is my list of things to do to change my old code to make it validate:

1. All html tags and properties must be in lowercase.

2. Close all nonempty tags, including p, li, tr, td, dd, and dt.

<tag>contents</tag>

3. Make all empty tags self-closing. Be sure to put the space before the slash, or IE goes nuts.

<img src="stick-out-tongue.jpg" alt=":p" />

4. Block tags can not be inside inline tags. For example:
- ul or ol can't be inside p
- div can't be inside strong
- table can't be inside h1
- li can't be used without ol or ul, or inside another li without another ol or ul

5. ALL values for properties, including numbers, must be inside quotes.

6. The character code must be supplied for any ampersand, less than, greater than, or quote signs which appear within text. Precede the code with an ampersand, and end it with a semicolon. Use:

& < > "

7. With tables, the tags thead, tfoot, and tbody must either be all present or all absent. If present, they must be in the order I listed them.

8. The center and font tags, and the height and width properties are deprecated.

9. Style sheet names and properties are case-sensitive.

Remember that different browsers display valid code in different ways. The most common difference between browsers is whether the styled widths or heights of block objects include the padding, border, and margin sizes. Some browsers include them, others exclude them. This causes the following rendering problems:

- Columns made with div collapse into single file if the resulting widths are wider than the browser window.
- Column widths are uneven in both div and table constructions.
- The page is wider than the window and causes a scroll bar to appear.
- Centered objects are displaced to the left or the right.

[asmqb]

Thanx for that.

Well, I have taken the above to heart and will use it... when my site has content.

Right now all the site is is a design with an example title and text. I'm still trying to get a design that looks great and scales down to older browsers acceptably!

Once again, thanks for all the help!

[MattEvans]

Ok, some notes:

- First up, the Opera bar-overlap problem; you can solve it by adding a tiny top padding to the div.bar element. You may need to adjust the size of your bottom frame to compensate. Make it tiny so that other browsers don't over-compensate. It's pretty difficult; Opera wants a padding of about 3px; all other browsers will show that as an obvious gap.
- The reason the bar screws up in IE is because display:inline isn't implemented properly (atall) in IE 6. You might have more luck using the float attribute; or you might have more luck using a table. Table's aren't evil; this is a valid use for a table (a 1-row tabular button layout) Solving this with a table MAY solve the Opera problem more elegantly, but.. I'll leave that up to you to decide.
- The iframe disapears into a single pixel on IE6 because you use position:absolute; and then try and scale to a relative size (100%). Ordinarily this should be legal, but IE6 is a bit ditzy, and isn't going to do what you want it to. In XHTML you can't reliably use height:100% anywhere outside of a container (it seems 'screen' doesn't count as a container) The best workaround for the layout you want is maybe more frame division. :S, or perhaps, some trick with huge divs along the sides and top to create that thick border; and make the top div positon:fixed so it always completes the page border. Seems like a waste of time though, as the page looks ok in Opera and Firefox, so perhaps it might be best to use an IE-only JS hack on page resize... Again, it's up to you really.

It might take quiiiite alot of messing about before the site looks how you want in those browsers... I can send you the slightly edited version i've been playing around with if you like. it's not quite there yet..

You'll get there, or you'll come up with something better that is easier to implement. I think that's the way it works ^_-

[MidiMagic]

Height with a percentage works only inside block objects, where it takes a percentage of the height of the block object. Inline objects have no usable height value for this purpose.

The body tag has no definite height, so it supplies the rendered height of the entire document.

[asmqb]

Hi everyone... sorry I haven't replied in a while :-)

My site has quite radically changed since everyone last saw it. I've found myself quite a respectable design, and while Opera doesn't entirely like it, IE7 and FF2.0 do. IE4.x/5.x do rather strange, interesting and diverse things to it.

All versions of Firefox will probably display the design perfectly because I've tested the design in Phoenix 0.1 - the first ever version of Firefox (Google "phoenix 0.1") - and it displayed pixel-perfect.

The design does have problems, however, if the user does not have Helvetica and Verdana installed (or Tahoma, the design's fall-back font).

The bar is actually now at the top (and is semitransparent... with solid text!), and overall the design actually looks quite good. You can find the new design at http://60.229.251.253/ (the "site hours" in my first post still apply).

I've thought about an alternative to frames, and ever since someone from IRC dropped a tiny bit of PHP code into a message in my aforementioned forum, I played around with the bit of code, and I haven't turned back. It's not MySQL etc, but it does work! (I use plain HTML which the PHP code reads in, applies the menu/CSS to, and then readfile()s).

Even though I'm not going to be using the design discussed in this thread on my own site, I would like to thank you all for the help you've given me; I've learnt alot in the process, and it is possible that the layout/code discussed here will be used in another site that I am working on every now and the.

Therefore, I would very much appreciate anyone sending any code they may have worked on or tweaked.

Thanks everyone!