NS and span tag

[Beach Bum]

this is an offshoot from another thread on a different topic. so let me post this with a better subject.

i have the following code that works perfect in IE6 but NS7 ignores it. i mean NS7 just lists all the text lines ignoring what is in the span tag. in IE6 you get a nice scrolling box that is 480 by 300.

i have tried it both with span and div.

surely NS7 must be able to deal with this. what am i missing?

<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;">
. . . bunch of <p></p> text lines . . .
</span>

[Beach Bum]

i also tried overflow:scroll - it appears to me NS does not support putting H/W dimensions on the span or div tags - so overflow does not mean anything to it anyway.

[Stefan]

Originally posted by Beach Bum
i have tried it both with span and div.

surely NS7 must be able to deal with this. what am i missing?

<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;">
. . . bunch of <p></p> text lines . . .
</span>

As I posted in the other thread, <span><p></p></span> is incorrect HTML. The only correct way to implement that for a browser at all is something like

<span></span><p></p>

becuase <span> CANNOT nest a <p> tag (if it shows up right in IE that is only a proof how buggy IE is since it's impossible for the style in the <span> to apply to the <p>).

Why it doesn't work with NS 7 with a <div> tag I can't answer right now. The reason is probably due to some other error on the page. Leave an URL or attach it to the website and I will help you find the problem.

[Beach Bum]

Stefan -

Well - back from a turkey day vacation. Saw your response above. Went to post a page for you to look at. Copied the section of HTML to a new page to post. Now it works just fine (with <div> tag). So yes . . . you are right. Must be something else on the page. I will work backwards to find it.

Thanks for the offer to look at the page. Your commments have been very helpful. Without your reinforcement that it will work I would have just given up on it.

So now . . . off to find the real problem. I violated a very basic rule of debugging - when something appears to not work - isolate it first before you claim it does not work.

[Beach Bum]

While we are on the topic, let me hit you with one more question related to the above.

In the above example - the <div> with a bunch of <p>'s in the middle. How do you center the whole <div> on tha page.

I know you center within the <div> with the style text-align (which also works for graphics within the <div> so I am not sure why they called it text-align rather than just align).

I currently have the <div> centered with a <center> above it, but I know that does not meet current standards. But I have not found the "correct way" to center the whole <div>.

[Stefan]

Originally posted by Beach Bum
I know you center within the <div> with the style text-align (which also works for graphics within the <div> so I am not sure why they called it text-align rather than just align).


Yes, I agree that text-align is a bit inapropriate. It should rather be inline-align (both text and <img> is inline-level content), but I guess many don't really know what inline-level content is anyway, so they used text-aling instead :D.


In the above example - the <div> with a bunch of <p>'s in the middle. How do you center the whole <div> on tha page.


With CSS you do it by specifying a width on the div (default start as 100%) and then you set left and right margin to auto. However IE is buggy with margin auto so you need to find a workaround for it.

The easiets is probably to take advantage of another IE bug.
IE happens to also implement text-align in a compleatly bogus manner.
Instead of only aligning inline-level elements it also applies it to block-level elements, even in IE 6 *sigh*.
However this happens to work in our advantage in this case. If we place our <div> inside another container with text-align:center the div will suddenly appear centered.

Eg
<div style="text-align:center;">
<div style="margin:0 auto; width:40%">
This div will be centered both in IE and correctly working browsers. The text will also be centered, but if you don't want that you can just add eg text-align:left to this div.
</div>
</div>

[Beach Bum]

the nested <div> approach works great in IE6 but does not work in NS7.

guess I will just stick with <center>. I try and be as standards compliant as I can - but in some cases . . .

* update *

just reread what you said - got it - combine both to work in NS and IE. works fine. but I am not sure that is any better than using <center> (except it may pass validation).

the world of web browsers is a bugy place to live.

[Stefan]

Originally posted by Beach Bum
I am not sure that is any better than using <center> (except it may pass validation).


The advantage is that you can control the behaviour of how every page looks on an entire website from 1 single external file.

If you have 15 pages filled with <center> and suddenly want to change something, it's a lot more work.

Also, the bugfix for IE does not always need you to place an extra <div> around somthing.

Depending on your site layout the easy/smart way might be to simply combine it with <body>

ie
<body style="text-align:center;">

Then you just have to specify the apropriate <div style="margin:0 auto;"> for the non buggy browsers and your set :)

But I do agree, it would be a lot easier if especially IE wasn't so damn buggy, especially in the real basic CSS stuff.
I just hope the increasing popularity of good browsers like Opera 7 and the Gecko browsers forces MS to fix their shabby browser.