Problems with switching from XHTML Transitional to Strict 3

[Stormheart]

Hi!

This is my first post here. I always learned and did HTML by my own, have never ever learned it in school... Now I am working with PHP and mostly XHTML Transitional.
I decided some time ago that I create my new website in Strict. But it seems, some things that were simple and usable in Transitional, are totally twisted, unusable and uber-complicated in Strict!
Sometimes I think that W3C gone too far... but nevermind...

What makes this hard is that there is absolutely no help or information about this problems in XHTML tutorials or references - or at least I didn't find.


So my simple, but heavy problems are:

- Positioning tables and other lements to the center, both vertically and horizontally.
It seems to me that Strict tries to prevent me to center anything. Even in Transitional, the only way I found to center a table is <div align="center"> ...

- Table falling into pieces.
I've created a table (it contains parts of an image, as two parts are rollovers) and with Transitional header it works perfectly. As soon as I change the header to Strict, it falls into pieces... Under every image part (jpeg file), there will be apr. 5 pixel of SPACE. I tried all the CSS formatting I know, without any result. The W3C validitor says it is valid Strict... If I change the header back to Trans. everything works again.

- <map> problem.
In the w3schools XHTML ref. the example for <map> tag shows that the tag stands alone in the BODY. But the validitor says that it MUST be inside DIV, P, or some other tags... What the hell is that then? Why should I put something into DIV or P, what is NOT a visible element itself?


So far these are the greatest problems that are sometimes make me postal.... I hope you can help me.


Ps.: If you would say use DIVs and no TABLEs than I would say that I have no even the slightest idea about 1, How to replace a complicate table with divs 2, Why the hell TABLE is soooo bad? I didn't found anything on the waht would answer these two questions, so far. Yes, Google is my friend but he didn't help in this...

 

[Bandenjamin]

Use divs instead of tables

Found using google search(Tables vs Divs)

--Dan
Whenever you find yourself on the side of the majority, it is time to pause and reflect.
Mark Twain

 

[Vragabond]

Don't use tables for layout. If you're used for table layout, then maybe it seems easier to you now. But if you think about it, it cannot be easier than simply putting things on the page the way you want them... if you drew something on paper, would it be in complex tables?

Your problem seems to be more with having a complete and valid doctype against having an incomplete one. My pages are coded in XHTML Strict, but whether I use Transitional or Strict, the way they're rendered does not change. It only changes the validity of some elements or attributes.

That is why I think you're using a browser that is heavily in quirks mode when you think it is running Transitional and in standards mode when you run Strict.

What you're describing is not hard to do with any doctype though.

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

 

[Stormheart]

Well, at first thanks that you try to help me...


Bandenjamin: Okay, that page tells me why table is soo evil. OK. But it still not tells or shows how to use divs for a COMPLICATE structure, it only has a most simple and basic example.


Vragabond: As I still don't know how to use divs for such, I tried to do it in the login page with the same logic as I create a table...

Whyt I gotusually works like a tabel - good! But in Strict, it also falls apart. Browsers - it works fine in Iexplorer but it not in Firefox! What the... This is the first time that something works better in Ie than FF. I use FF only, IE is jost for testing and optimizing. There is still a space between the images, it not counts if I put all of them into a different DIV or in the same DIV using <br>.

The header looks like it is created by Dreamweaver when I create a new file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>


At least the centering works now...

 

[Stormheart]

Okay, New problem...

Horizontal centering works here (vertical works not!):

<div style="text-align:center; vertical-align:middle;">
<div><img ... /></div>
<div><img ... /></div>
<div><img ... /></div>
</div>

But as soon as I put this three into another div...

<div style="text-align:center; vertical-align:middle;">
<div>
<div><img ... /></div>
<div><img ... /></div>
<div><img ... /></div>
</div>
</div>

The whole goes back to the left side of the browser - in FF only.

In IE, almoust the whole works, it is horizontally centered and there is no space between images. Thought v aling still does nothing.

 

[Stormheart]

Ouuppsss.... sorry, forgot to mention the most important...

This is OK basically

<div style="text-align:center; vertical-align:middle;">
<div>
<div><img ... /></div>
<div><img ... /></div>
<div><img ... /></div>
</div>
</div>

But if I add CSS FORMATTING

<div style="text-align:center; vertical-align:middle;">
<div style="width:100px;">
<div><img ... /></div>
<div><img ... /></div>
<div><img ... /></div>
</div>
</div>

it goes to left side in FF

 

[Vragabond]

Why are you using so many divs? You have three images, you don't need any other elements (according to your current code). When you stop making your code overly complex, you will find it easier to work with it.

As for vertical centering... You're right, the vertical align does nothing. It only works in table cells and on inline elements. Actually vertically centering a box is pretty complex, so I would mostly advise against it. If you really have to use it, then you can find good examples of how to do it on the net.

As for horizontal centering. Why would you expect a div (which is a block) to be centered when you request that text-align is center? There are different methods to center blocks and center inline content. Use margins for blocks.

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

 

[Stormheart]

Well... there is one DIV in this code per image, but as I wrote I tried it also top put all them in the same. No difference, they will still have a damned gap between them...

The whole thing looks like this:
There is a big graphic, as a "welcome image" and in the same way, it contains tge enter links too. (One for English language, one for Hungarian) I mean there is two image map. Also, the two parts are rollovers. So instead of rollover the whole big graphic (two times as there is two diff. effekt for the two map), I cut it into six pieces. From the six, two are the rollovers.

#############.#############
#-----------#.#-----------#
#-----------#.#-----------#
#############.#-----------#
..............#-----------#
#############.#############
#-ROLLOVER--#..............
#############.#############
..............#-ROLLOVER--#
#############.#############
#-----------#..............
#-----------#.#############
#-----------#.#-----------#
#-----------#.#-----------#
#############.#############

And they should stand together as ONE graphic. So I need One "container" (DIV, TABLE, or anything, I do not care) what contains the whole. That must be aligned to the center. And it must contain two more "container", one for the left three image and one fore the right. So in the most simple way it would be look like:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

or

<div>
  <div></div>
  <div></div>
</div>

But this is where is the problem.
1, Table cannot be centered
2, Div cannot be centered properly
3, In both, there are gaps between the image parts.


My problem is simple. In Transitional, it was sooooooo simple:

<center>
<table>
... content ...
</table>
</center>

And now this most simple thing turned into a nightmare.


BTW Yes, I KNOW that iot is TEXT-align... but well, I didn't find any CSS code what sounds like "align in general" or "align-divs"...

P.s.: I still do not see any reason why tableas are evil. But well, I do not really care... I will use what solves my problem.

 

[ethorn10]

You don't see why they're evil? All of this trouble caused by using tables for layout and you STILL can't figure out why they're evil? A properly designed layout with divs from the start would have worked regardless of the doctype...

 

[Stormheart]

Exuse me....

What are you talking about?????????????????????????

1, I always used tables, and they are perfect fro creating the structure.
2, My problem is with the fatc that nowadays Centering counts as crime, and with that damned Strict puts gaps between my images
3, I recreated the page with Divs and I got TOTALLY THE SAME ERRORS.


It is so easy to tell me "use DIVs corerctly" but well, so far nobody was able to SHOAN EXAMPLE of that so called correct DIVs.

Hmmm.. woudl be better to search the Bible, maybe it writes about Tables in the section of the Apocalypse. XD

 

[kaht]

I always used tables, and they are perfect fro creating the structure.

If they're so perfect just keep using them. No need to reinvent the wheel if that's what you're comfortable with.

The same thing with strict doctype. If you're comfortable with using transitional, then use that. It's not a hard and fast rule that you have to use a strict doctype.

On a side note, I find tabled layouts to be very unprofessional. But if this isn't something you're concerned with then, who cares? No sense in coming to this forum and starting a shouting match over it. If you're going to come here and ask for help with something and then argue with the answers you get then there's no sense in posting anything, because it doesn't seem to be helpful to you anyway.


Oh, and SHOAN isn't a word.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[traingamer]

There are lots of different ways of doing this. If you're happy with your tables, by all means stick with a transitional doctype.

You could also try one large container div with a background graphic, with two additional divs for your rollover images, or an almost endless number of other variations without resorting to tables for layout.

Cutting a graphic into 6 pieces and stitching it back together using a table is not a recommended best practice, but do whatever works for you.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[vacunita]

Of course you have gaps, your pieces are of different sizes.

However you expect an image in the second row to fill the gap left by the image in the first row, that is shorter than the other image in the first row.

[red]#############.#############[/red]
#----0------#.#-----------#
#-----------#.#-----1-----#
#############.#-----------#
..............#-----------#
[blue]#############.#############[/blue]
#-ROLLOVER--#..............
#############.#############
..............#-ROLLOVER--#
[green]#############.#############[/green]
#-----------#..............
#-----------#.#############
#-----3-----#.#-----4-----#
#-----------#.#-----------#
#############.#############

Not sure how its possible that it works in Transitional. There's no way it could work.

Make your images the same height, so instead of having 6 images, you have 8 images.

Images in a row should be of equal height.

Cut your larger images so they are the same length as the shorter ones in the row, and move the cut piece to the rollover row.

[red]#############.#############[/red]
#----0------#.#-----------#
#-----------#.#-----1-----#
[blue]#############.#############[/blue]
#-ROLLOVER--#.#New piece--#
#############.#############
#-New Piece-#.#-ROLLOVER--#
[green]#############.#############[/green]
#-----3-----#.#-----4-----#
#-----------#.#-----------#
#############.#############

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Stormheart]

kaht:

Tables work perfectly for me, the only problem is that nowadays they cannot be centered (Strange thought they were centerabel some years ago...). I come here and asked how could I center the tables. But nobody wanted to answer, only tell me that I am wrong woth using tables, use divs (without a proper reason).

Okay... I tried to make the same with divs. But I got the same problems again. So it not counts if I use divs or tables for me as I got the same problem with both.

"Tables are unprofessional" - Okay. Tell me why? I asked this from many but nobody was able to answer it. "Juts because!" I don't want fight against anybody. If you can tell a proper reason, I accept. (But this reminds me when some Linux guyz started tell me that any OS that has graphical interface is sooo unprofessional... Okay, I will draw images in terminal, LOL...)

Oh and ASDASDASD is also a not word. Nor jugjVGjGVGH. Bit this is not a reason to instruct me about english language.
(Avagy nem közelez? ám bunkónak lenni.)


vacunita:
it seems you absolutely do not understood how that table looks like. There are no different size pictures in the same cell. This is why there is a left side and a right side.


traingamer:
I have no problems with tables, only that I can't center them. I just tried to make my new site in Strict as my main aim is us things what are 1, simple 2, usabel 3, and Working over them all.
I could use the graphic as background but the two rollovers are parts of it, cannot be separated, so if there is only a little error in the positioning, the whole picture will look idiot...

About DIVs, I would use them if
1, Somebody would tell me how to use them for the same solution
2, They would be better for the given solution
3, They would work... (Cannot be centered properly, there are gaps between images.)

I have no reason for not use divs, I just have no reason for use them.

 

[kaht]

Tables work perfectly for me, the only problem is that nowadays they cannot be centered (Strange thought they were centerabel some years ago...). I come here and asked how could I center the tables.

In your first post, why didn't you put this:

"Hi everybody. I'm new to the forum. How do I center a table?"

If that's ultimately the question you're wanting answered, your would have quickly gotten your answer. Instead, since your post was riddled with stuff about moving to a new doctype and what seemed to imply that you were trying to do things the "right way", you got bombarded with info about how to do it the right way.

If centering a table is really all you're concerned with, then apply this style to your table:

<table id="imUsedForLayout" style="[!]margin:0px auto[/!]">

"Tables are unprofessional" - Okay. Tell me why? I asked this from many but nobody was able to answer it.

Did you not read the link that Bandenjamin posted in the first response to this thread? I think that it hits on most of the major points.



Listen man, I'm not gonna sit here and fight with you on this. Like it or not, using tables for layouts is the unprofessional way to build a web page. I would guess that the majority of professional web developers would agree with me. Demanding an explanation why from all of us is silly when you could just go google it yourself. It's been explained 1000s of times (may of them on this forum), no sense in any of us typing it all back out for you here. If you wanna make your webpages using tables for layout, I couldn't really care less....

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[Stormheart]

kaht:

"Hi everybody. I'm new to the forum. How do I center a table?"

So my simple, but heavy problems are:

- Positioning tables and other lements to the center, both vertically and horizontally.
It seems to me that Strict tries to prevent me to center anything. Even in Transitional, the only way I found to center a table is <div align="center"> ...

...

"Did you not read the link that Bandenjamin posted in the first response to this thread?"
Yes I did. It not gives no any practical reason nor solution for DIV-s.

"The real problem with using tables for structure is the complex and (sometimes incredibly insane) nested tables"
- I can understand it, browsers can understand it, it works. Where is the problem?

Also it says tables are originally created ofr DATA. That is true but they still wotk perfectly as layout so where is the problem?


Just for Tek Tips Forums:

Valid XHTML Transitional (original version)

http://storm_test.extra.hu/trans.html

Firefox: Works perfectly
IE: Works perfectly
Konqueror: Works perfectly

Valid XHTML Strict (second attempt)

http://storm_test.extra.hu/strict.html

Firefox: Not works
IE: Works perfectly
Konqueror: Not works

Strict with DIV-s (third attempt)

http://storm_test.extra.hu/div.html

Firefox: Not works
IE: Not works
Konqueror: Not works


What I want is not ideology, nor a "nice" argument... I wisht to creat a goddamn website and need PRACTICAL solutions. I come here to ask if somebody could help.

I care about ONLY ONE THING: That the website must work perfectly. So far my table-layout Transitional code works perfectly in buth Firefox, IE and Konqueror. This is what I want.

I only wished to "upgread it" fro Strict. If it is not possible to get the same result (a working webpage) with Strict, I forget it once and for all, and W3C can go to the hell.
But if there is a soultion, I would be grrateful if someone could help.


P.s.: I wait a day or two mre, and after that I forget divs and Strict once and for all, as I need a working site and since two days, I am stuck in the creation, because i thought it could be done n Strict. I have no time to wait forever...

 

[Vragabond]

Stormheart, I gave you the solution on how to center blocks. I told you to use the margins. With that information, you would be able to query google and find a way or ask for explanation. Just don't say we did not answer how to center, if you weren't paying attention to our answers because you were too busy bickering.

Anyway, here is a nice technique on how to do a nice rollover image map with today's technology:

http://www.frankmanno.com/ideas/css-imagemap/

or

http://www.alistapart.com/articles/imagemap

or

http://www.cssplay.co.uk/menu/imap.html

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

 

[Vragabond]

Also, in response to your last post, I suggest you stick to transitional doctype. You're not willing to program pages in strict, why would use that doctype anyway? There's no gain from declaring your page xhtml transitional, strict or even html 4 transitional. The only thing that matters is that it validates. If it validates in xhtml transitional be happy and move on. If you want it to validate in xhtml strict, then code in xhtml strict.

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

 

[Stormheart]

This CSS map looks really interesting. I didn't know this technique nor heared about it so far, but as they seem to work good, I am going to check it. Thank you for the links!

About margins, I was really tired today, tired in general, tired of playing with the code and tired of that everybody just said tables are evil... It seems I missed your suggestion, sorry. I am going to check it out now, with fresh head.

About doctype, in Transitional, I can easily do what I want. There is challange in it - this is why I tried to make it in Strict. I thought for this I will only need to rework some things, and not the whole code! :-O Now it seems to me that the difference between Transitional and Strict is like between Arabic and Japanese. XD
So... I try to make it in Strict once more, but if I would feel that I have to sacrefice usability for this, than I forget Strict once and for all...

 

[Stormheart]

So, the contering with margins works perfectly in Strict Great! One problem is solved. (Thought it is so funny that it works not in Trans. XD But nevermind, In Trans there are another methods to center.)

But some problems remained:

In strict, there are still those damned gaps between the image parts... Okay, maybe I will use another method for the rollover after I read the articles on the CSS thingie but this still makes me upset.

http://storm_test.extra.hu/strict.html

And also, my site will be an art site (I am a digital and conventional graphic artist) so it contains many graphics - I know, not the most "user friendly" but, hell, this is an art site, not a service site. If somebody has problems with the design, than how yould it take a look in the gallery???
So the point is that I NEED a method, I can put image parts together anyway, but in Strict, it puts gaps in, both woth tables, both with dives.

http://storm_test.extra.hu/div.html