homepage Welcome to WebmasterWorld Guest from 54.161.192.130
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Doctype loose and nested span width
sschutten

10+ Year Member



 
Msg#: 2957 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2957 posted 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

10+ Year Member



 
Msg#: 2957 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2957 posted 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

10+ Year Member



 
Msg#: 2957 posted 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

10+ Year Member



 
Msg#: 2957 posted 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

10+ Year Member



 
Msg#: 2957 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2957 posted 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