The solution is just to remove the "http://www.w3.org/TR/html4/loose.dtd"> and everything woks fine.
I highly recommend you don't remove the url. Using a full doctype (including a url) is the correct thing to do and it means that the browser will render the page in 'standards compliant' mode, which makes life much easier when writing cross-browser code.
Without a full doctype the browser will render the page in 'quirks mode' or as Microsoft like to call it 'backwards compliant mode' - which basically simulates all the nasty old browser bugs of the tag soup days.
I used the span for the reason that i want to create columns with it. Therefor I need an inline container, such as span. I could use a div with display: inline but it then acts the same way as the span.
Allso, I put the doctype there myself for the reason I want the same behaviour in different browsers. Removing the doctype is NOT an option. Still no cure for the problem...
Let me rephrase my problem with a somewhat more specific example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... </head> <body> <div style="border: 1px solid red; width: 50%"> <span style="border: 1px solid blue; width: 50%"> Left column </span> <span style="border: 1px solid blue; width: 50%"> Right column </span> </div> </body> </html>
I want each span to fill 50% of the parent div (which is 50% of the screen). Somehow the width: 50% isn't working with the loose (or strict) doctype as I would expect. My question is if somebody knows what I have to do to make the spans 50% of the div?
Hmm...it seems like I'm not making my problem clear to you. Let me try again...
When I set the display to block, the span acts as a div and the spans (or divs) will be placed underneath each other. This is NOT wat I want. I want the spans (or divs) to be placed side by side; on the same height; in the same line. Think of it as two cells in one row of a table.