homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Doctype loose and nested span width
sschutten




msg:1200002
 5:44 pm on Feb 19, 2004 (gmt 0)

Hi,

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?

 

grahamstewart




msg:1200003
 6:12 pm on Feb 19, 2004 (gmt 0)

Yup, use a div not a span.

You cannot set the width or height of a span, but you can on a block level element like a div.

sambs




msg:1200004
 6:32 pm on Feb 19, 2004 (gmt 0)

Hi,

<!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.

grahamstewart




msg:1200005
 6:49 pm on Feb 19, 2004 (gmt 0)

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.

sschutten




msg:1200006
 9:54 pm on Feb 19, 2004 (gmt 0)

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?

aevea




msg:1200007
 11:50 pm on Feb 19, 2004 (gmt 0)


<span style="border: 1px solid blue; width: 50%;
display: block">

Would a div by any other name smell as sweet?

sschutten




msg:1200008
 8:45 am on Feb 20, 2004 (gmt 0)

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.

It has to look something like below:

---------------------
-------- --------
span span
-------- --------
---------------------


grahamstewart




msg:1200009
 11:59 am on Feb 20, 2004 (gmt 0)

You cannot set a width for a span, it is an inline element and only block level elements have widths.. thats why it doesn't work.

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved