Forum Moderators: not2easy
I'm having real trouble solving this problem. I'm desinging a website to be compatible with different browsers. I thought using a doctype would be the way to go, but it gives me one big problem.
Note: It may look like there's a simpler solution to the problem by using a different approach. I'm using this approach because of something which, to explain, is outside the scope of this question.
Take a look at the following html:
<!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%">
Text
</span>
</div>
</body>
</html>
I'm using the loose doctype. I want the span inside the div to be 50% of the size of the div. But it never gets any bigger than the size of the text in it.
Maybe someone knows how to solve this?
You cannot set the width or height of a span, but you can on a block level element like a div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I guess this was automatically inserted by dreamweaver when you create a new html document.
I have the same problem though, and some Javascript may not work properly. The solution is just to remove the "http://www.w3.org/TR/html4/loose.dtd"> and everything woks fine.
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.
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>
<span style="border: 1px solid blue; width: 50%;
display: block">
Would a div by any other name smell as sweet?
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.
It has to look something like below:
---------------------
¦ -------- -------- ¦
¦ ¦ span ¦ ¦ span ¦ ¦
¦ -------- -------- ¦
---------------------
Also a span cannot contain block level elements so it would be no use to you even if you go it to work.
To do what you want you should use a div. Really. Honestly. :)
A simple two column display with divs typically looks something like this:
#col1 {
width: 50%;
float: left;
}
#col2 {
width: 50%;
margin-left: 50%;
}
Or alternatively you could use absolute positioning to control the layout.
