Layout: Need some general layout advice

started by Kjin on Jul 2, 2004 — RSS Feed

Kjin Kjin
Posts: 5

Over the past couple of weeks I've noticed some formating errors when viewing my site from friends computers.

http://www.johndoefilms.net

I've built the site using Dreamweaver on a Mac and have been testing it using both Internet Explorer v 5.2.3 and Safari v 1.2.2. It appears just as it should on my system (see the screen grabs). However on other systems I have notice problems with, fonts (I'm using Trebuchet MS @ 12pt for the main body text), cell layout, and the background picture (on some systems it just doesn't appear).





I've been working on the site for the last couple of months, on and off and am a relative newbie to web design, so if anyone can see any obvious errors or problems could you let me know.

Thanks,

Ben

Joe Gillespie Joe Gillespie
Posts: 528

Hi Ben, the first thing to do when you get problems like this is to validate your markup and CSS at W3C and follow the recommendations given. When you are 100% sure that your markup is corevt, then you can start looking at browser quirks. IE 5.x is the most troblesome!

You shouldn't be using table background images. They never did work reliably and are now depreciated (I think). Instead, use a div with a background image and a foreground image for the overprinted text. You can just put the div inside the table cell if you aren't ready to do the whole thing with CSS.

Kjin Kjin
Posts: 5

Thanks for the advice, I've validated both the markup and CSS at W3C and made several adjustments, all validated ok now. I've also got rid of the table background as you suggested and am now showing no browser errors in dreamweaver.

However, when I checked the site on my friends computers (3 windows machines) They all came back the same.

This is how the new version should look:


And this is how is comes out:


I'm thinking it has something to do with the justified text, but would like to keep this if at all possible.

Kjin Kjin
Posts: 5

Oops the website address at the top is a cloaked domain, the address for this page is:

http://homepage.mac.com/benporter/johndoefilms/newhome.htm

Joe Gillespie Joe Gillespie
Posts: 528

It's funny that the headline changes in the Windows version Are you sure you are looking at the same page? I run this page through my validatior and it says...

Line 100:  Document type doesn't permit attribute “background” within element “<table>”.

It would seem to me that the long headline is pushing the right hand column down.

You are also attempting to make two or more columns match in height. This is very unlikely to work on machines other than your own no matter what you do.

The main problem you have is with your use of tables. You are kludging the tables to try to achieve a layout that is essentialy alien to Web design. That is only going to cause you heartaches.

My advice is to change the layout to one more sympathetic to the medium.

Kjin Kjin
Posts: 5

Oops the two pics are different versions, but the same problems were happening before I changed the header. The right hand column gets squished and lengthened.

I could change the use of tables but I've seen other big sites that seem to have two or more columns with the same height, the BBC and Apple websites are the first to spring to mind.

How have they managed it with this one? It's similar to what I had in mind:

http://www.apple.com/powermac/

Joe Gillespie Joe Gillespie
Posts: 528

http://www.apple.com/powermac/

Mmm, try changing the type size and see what happens. At 90%, there are two inches of blank space at the bottom of the left column. The thing is that you can't depend on type being what you specified - especially if the site is aimed at a general audience. Interestingly, this Apple page fails validation quite miserably. It would seem that they expect a Mac audience - so much for their 'switch' campaign!

If you have two columns of type with exactly the same words set to exactly the same width, they will always make the same height. If you have two columns of type the same width with the same number of words inside, they will be approximately the same height - depending on how the lines break.

If you have different column widths or different type sizes or faces, you don't have much chance. Using 'justified' type in narrow columns is especially troublesome as there is no concept of hypenation on the Web. You really should avoid that 'print' technique in this medium - it just doesn't make sense.

If you have two or more columns of text on a web page, you have to assume that they are going to make different heights and design the page accordingly. You have NO control over the height of a column of text - that's why table height is no longer valid markup. You can set the width, but the height is the 'elastic' property that allows for the fact that even the same font on Mac and Windows will make a different column height. If you try to control the width AND height of a page, it will break.

I have made warnings in the past about designing Web pages on a Mac. Unless it is a Mac specific site, 95% of people are going to be viewing them on a PC. In Web design, you should try to avoid situations where this is an issue. Design flexibly!

You have, quite rightly, tested you pages on a PC. They are not what you expect. That is par for the course I'm afraid.

Now, have a look at your layout and ask yourself, how can I make this work if I can't control the text height? That will change the look of your page but it won't necessarily ruin it, it will just be different - and more suited to the medium. That's what 'design' is all about.

When you have done it, try changing the type size. You can do this easily in any browser except Win Explorer - Safari, Mozilla, Firefox, Opera will let you preview text at different sizes, even if specified in pixels.

Kjin Kjin
Posts: 5

Thanks once again, I've played around with it a bit more and it's obviously the text height and/or line spacing that's causing the problem, (as you suggested).

However whilst digging around other peoples websites I discovered some useful code for my css

.style25 {font-size: 12px}
/* Show only to IE PC */
* html .style25 {font-size: 10px;} /* For IE 5 PC */

Now all I have to do is build the css into an external file and add the PC only code (make the cell padding less, or font smaller), a bit of fine tuning and fingers crossed.

What do you think, any problems here?

Joe Gillespie Joe Gillespie
Posts: 528

Yes, you will have problems. Hacks like this are like using crutches when you don't need them. It's your philisophy that's flawed. Workarounds are okay, they solve the problem by avoiding it in the first place. Hacks introduce new problems and solve very little - like using sellotape to fix leaking pipes!

You must login to reply