Damned incompatabilities 1

[GladysPym]

http://www.aswab.co.uk/li-uk/therapist.htm

Just realised just how messy this looks in anything but IE

Down to 2 basic problems, after an hour hacking away at it

1: The regions area (li 34) floats up just where I want it in IE but dangles down the bottom in chrome, ff, etc. This is because in the css it was fixed, big nono, now static, but it won't float up. A help would be helpful, but also an explanation or point at a tutorial, as I can't get my head around floating.

2: At the bottom, the areasbox and aresboxgrey seem to be lining up OK, but in ff and chrome they're not - errm - grey
I mean, the css checks out. IS ff making an assumed background of white, while ie assumes transparent?

Thanks, guys

This is SUCH a headache

 

[audiopro]

From my experience, hacking is something which will make you go grey very quickly.

My suggestion would be to start again with the page.

Before you start thinking of all the time you have spent on it so far being wasted, stop and think. The time you have spent so far has achieved the layout you desire.
Now design it again. All of that layout could be fitted into a small number of nested divs and it would work without a 'valign' tag in sight.
I am not saying don't use tables but I am saying use tables which fall naturally. That way all the browsers are happy and you can get on with the rest of the project.

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

At this point it is useless to try to make your page work across various browsers. You're using an incomplete doctype, which shifts IE (and other browsers to lesser extent) into quirks mode. With quirks mode, it is impossible to get uniform results across the browsers.

1. Change to a complete and valid doctype (see list here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html)

2. At that point, IE will render your page somewhat similarly to other browsers and you can start working on it then.

A few pointers: position: static is the default position and can be omitted. With position static, top/left/bottom/right play no role -- you should remove them. After every element that has a clear in its properties, next element will appear at the bottom of the element with clear.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[GladysPym]

OK

Thanks for those.
New version is at

http://www.aswab.co.uk/li-uk/therapistnew.htm

But. The second Scotland is up at the top
(why not the first, but better still, I'd rather neither)

And. At the bottom, while areasboxgrey is supposed to be - err - grey, it's not

Thanks for the above answers, though.
It's far cleaner now

 

[BillyRayPreachersSon]

#areasboxgrey is grey - well, it would be if it had any dimesntions.

It doesn't have dimensions because all of its content is floated, and you haven't cleared your floats.

I suggest reading these resources and learning about clearing floats:

http://www.positioniseverything.net/easyclearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisHunt]

A few tips:

Remove this from the top of your document:

<?xml version="1.0" encoding="utf-8"?>

It's optional, and it can throw some versions of IE into quirks mode. The first thing on your page should be the DOCTYPE.

You should add a [tt]alt[/tt] attribute to your logo image, for the benefit of people and search engines who can't read it. I'd suggest:

<img src="images/li-uk-logosmall.jpg" width="286" height="130" [red]alt="Lifespan Integration in the UK" title=""[/red] />

There's really no reason to do this:

<span class="headstyle">Find a Lifespan Integration Therapist in the UK</span>

HTML provides elements specifically for headings - <h1>, <h2>, etc... (the numbers indicate the importance of the heading). So your main heading should be marked up as

<h1>Find a Lifespan Integration Therapist in the UK</h1>

If you don't like the way these headings appear (and you probably won't), you can use CSS to change it. Using heading elements can improve your search engine profile too.

With regard to the list of areas and therapists at the bottom, it looks like an array of information organised in rowa and columns. The proper element for such a thing is a <table>! Trying to build your own pseudo-table with floating <div>s is a doomed venture.

<table>s aren't evil, it's just that there are places where you should use them and places where you shouldn't. This is one of the ones where you should.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

P.S. I forgot to say that "Damned incompatabilities" seems to more a case of "Programmer error", given all these issues seem to be related to bad coding practices rather than any browser issues.



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[feherke]

Hi

The proper element for such a thing is a <table>!

She knows that. We already told her in thread215-1572509.

Feherke.

http://rootshell.be/~feherke/

 

[GladysPym]

Well, OK then

The big question is: who do I go with?
I DID ask about how to do this with CSS.
I used tables. So I did.
Then was told not to.
This version is without.

I was querying the incompatabilities, and was told by Vragabond to use a different doctype, now I'm told this is wrong, too.

I'm not complaining, but I seem to be being pulled in a variety of directions, and I suppose like so many things, there are no completely 'right' ways to do things.

Thanks for your feedback, everyone. Genuinely.

I just feel a bit beaten up, and about as confused as when I started.


G

 

[audiopro]

There are numerous ways to achieve the same goal but some are proven to work better than others.
There has been a debate about the use of tables or CSS for as long as I can remember. The truth is, either way will work but as a rule, CSS is used for page layout and tables are used for tabular data. It is possible to do the job either way - personal choice.
One of the most important things to do is get your page to validate, it can still break when you add new elements, but it is easier to fix.

Keith

http://www.studiosoft.co.uk

 

[BillyRayPreachersSon]

Hi Gladys,

I'll summarise a few of the key points of advise you've been given (and some which you have not) which you should heed...

- Remove the "xml" declaration above your DOCTYPE. This will put some versions of IE into "quirks" mode which is definitely not a good thing.

- Get your HTML code to validate. Granted, the only errors you have at the moment are minor ones (such as using "<br>" instead of "<br />"), but are few exist such as duplicate IDs. At the end of the day, if your code validates, you have a better chance it will display correctly in more browsers. Your CSS validates already - which is great.

- Regarding the table / no table debate... if the data is truly tabular, then a table is the right way to go. If it's a case of having non-tabular data but wanting to lay it out in a tabular form, then you need to make that call. You might even find that a "definition list" is more suitable for your purposes if that is the case. At the end of the day, it's not a life-or-death call, so whatever code you feel more comfortable writing and maintaining might be best for you.

- Chris's tips on using correct heading elements is worth heeding... using them also helps to better picture the structure of documents, I find.

- If you are going to use floats, read the two links I provided to learn how to clear them.

Hope this helps,
Dan






Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[GladysPym]

Thanks, Dan

Off to try those things now

S

 

[ChrisHunt]

A little more on tables:

Once upon a time, in a galaxy far away (well, in Switzerland actually), a bunch of physicists invented HTML as a way to share scientific papers. One of the things they needed to include was tables of figures, so they dreamt up the <table> element and its kin to do the job.

They weren't too bothered about how their HTML documents looked. Indeed, one of the points of HTML was to concentrate on the content and ignore the presentation. Tables were just for data. Period.

Roll forward a few years and people were beginning to build HTML web pages that had nothing to do with science. They were using it to present all kinds of information, and wanted to present it in an attractive way. The original HTML offered very few ways of doing that - it's not what it was designed for - so folk latched on to whatever they could use (or misuse) to do the job.

Tables were an important part of that. If you put the whole page into a table, you can divide it into columns and rows and slice up images for slow-loading modems and all manner of 90's goodness. It's not what they were designed for, but it worked and it was the only thing we had. The problem is that layouts with any degree of complexity spawned horribly complex tables, tables of tables, single-cell tables and lord knows what else. These are difficult to maintain, slow to load, and (importantly) hard for people to understand if they have to use a screen reader to read the screen instead of looking at it.

Enter CSS. A technology specificly designed for laying out and presenting HTML pages. Support was flaky at first, but with increasing stability it's pushing tables out of the picture as a way of laying out pages (amongst professionals anyway). I'm not going in to the whole CSS v Tables thing here, but the growing consensus is that CSS is the better way to lay out pages, and that you shouldn't use tables to do so.

So tables are evil, right? No! Tables are fine for the purpose they were designed for. If you want to lay out some data in rows and columns, a table is pretty much the element you should use. People vary on how freely they use the term "data" - personally I'm pretty liberal in that regard, but no sensible person would ban tables altogether.

It's not helpful to the newcomer to read so much conflicting advice on tables. Web design is a young discipline, and things that were 100% true ten years ago are false now. You can read all that (relatively) old advice online and it's not obvious that it's outdated. Geeks don't always help matters in the way that their minds work - everything that I think is obviously right, and if you disagree you're both wrong and an idiot. We try to be more friendly on this forum!

Hopefully this goes some little way to explaining the tables situation.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[audiopro]

Many of us here grew up with tables and the transition to CSS has not been an easy one. I personally had to be dragged kicking and screaming out of the 'tables for layout' camp as it seemed the best way to do any sort of alignment and the results that produced CSS seemed ever so random.

However, once you have climbed the learning mountain, which wasn't very high in the end, the power you have over page layout and simplicity of coding was well worth the effort.

I too can confirm that most of the people on this forum are helpful and friendly.

Keith

http://www.studiosoft.co.uk