this is an offshoot from another thread on a different topic. so let me post this with a better subject.<br />
<br />
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.<br />
<br />
i have tried it both with span and div.<br />
<br />
surely NS7 must be able to deal with this. what am i missing?<br />
<br />
<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;"> <br />
. . . bunch of <p></p> text lines . . . <br />
</span><!--content-->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.<!--content-->Originally posted by Beach Bum <br />
i have tried it both with span and div.<br />
<br />
surely NS7 must be able to deal with this. what am i missing?<br />
<br />
<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;"> <br />
. . . bunch of <p></p> text lines . . . <br />
</span> <br />
<br />
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<br />
<br />
<span></span><p></p><br />
<br />
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>).<br />
<br />
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.<!--content-->Stefan -<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<!--content-->While we are on the topic, let me hit you with one more question related to the above.<br />
<br />
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.<br />
<br />
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).<br />
<br />
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>.<!--content-->Originally posted by Beach Bum <br />
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).<br />
<br />
<br />
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
.<br />
<br />
<br />
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.<br />
<br />
<br />
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.<br />
<br />
The easiets is probably to take advantage of another IE bug.<br />
IE happens to also implement text-align in a compleatly bogus manner.<br />
Instead of only aligning inline-level elements it also applies it to block-level elements, even in IE 6 *sigh*.<br />
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.<br />
<br />
Eg<br />
<div style="text-align:center;"><br />
<div style="margin:0 auto; width:40%"><br />
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.<br />
</div><br />
</div><!--content-->the nested <div> approach works great in IE6 but does not work in NS7.<br />
<br />
guess I will just stick with <center>. I try and be as standards compliant as I can - but in some cases . . .<br />
<br />
* update *<br />
<br />
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).<br />
<br />
the world of web browsers is a bugy place to live.<!--content-->Originally posted by Beach Bum <br />
I am not sure that is any better than using <center> (except it may pass validation).<br />
<br />
<br />
The advantage is that you can control the behaviour of how every page looks on an entire website from 1 single external file.<br />
<br />
If you have 15 pages filled with <center> and suddenly want to change something, it's a lot more work.<br />
<br />
Also, the bugfix for IE does not always need you to place an extra <div> around somthing.<br />
<br />
Depending on your site layout the easy/smart way might be to simply combine it with <body> <br />
<br />
ie <br />
<body style="text-align:center;"><br />
<br />
Then you just have to specify the apropriate <div style="margin:0 auto;"> for the non buggy browsers and your set
<br />
<br />
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.<br />
I just hope the increasing popularity of good browsers like Opera 7 and the Gecko browsers forces MS to fix their shabby browser.<!--content-->
<br />
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.<br />
<br />
i have tried it both with span and div.<br />
<br />
surely NS7 must be able to deal with this. what am i missing?<br />
<br />
<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;"> <br />
. . . bunch of <p></p> text lines . . . <br />
</span><!--content-->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.<!--content-->Originally posted by Beach Bum <br />
i have tried it both with span and div.<br />
<br />
surely NS7 must be able to deal with this. what am i missing?<br />
<br />
<span style="text-align:left; overflow:auto; border-style:inset; width:480px; height:300px;"> <br />
. . . bunch of <p></p> text lines . . . <br />
</span> <br />
<br />
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<br />
<br />
<span></span><p></p><br />
<br />
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>).<br />
<br />
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.<!--content-->Stefan -<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<!--content-->While we are on the topic, let me hit you with one more question related to the above.<br />
<br />
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.<br />
<br />
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).<br />
<br />
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>.<!--content-->Originally posted by Beach Bum <br />
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).<br />
<br />
<br />
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
.<br /><br />
<br />
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.<br />
<br />
<br />
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.<br />
<br />
The easiets is probably to take advantage of another IE bug.<br />
IE happens to also implement text-align in a compleatly bogus manner.<br />
Instead of only aligning inline-level elements it also applies it to block-level elements, even in IE 6 *sigh*.<br />
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.<br />
<br />
Eg<br />
<div style="text-align:center;"><br />
<div style="margin:0 auto; width:40%"><br />
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.<br />
</div><br />
</div><!--content-->the nested <div> approach works great in IE6 but does not work in NS7.<br />
<br />
guess I will just stick with <center>. I try and be as standards compliant as I can - but in some cases . . .<br />
<br />
* update *<br />
<br />
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).<br />
<br />
the world of web browsers is a bugy place to live.<!--content-->Originally posted by Beach Bum <br />
I am not sure that is any better than using <center> (except it may pass validation).<br />
<br />
<br />
The advantage is that you can control the behaviour of how every page looks on an entire website from 1 single external file.<br />
<br />
If you have 15 pages filled with <center> and suddenly want to change something, it's a lot more work.<br />
<br />
Also, the bugfix for IE does not always need you to place an extra <div> around somthing.<br />
<br />
Depending on your site layout the easy/smart way might be to simply combine it with <body> <br />
<br />
ie <br />
<body style="text-align:center;"><br />
<br />
Then you just have to specify the apropriate <div style="margin:0 auto;"> for the non buggy browsers and your set
<br /><br />
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.<br />
I just hope the increasing popularity of good browsers like Opera 7 and the Gecko browsers forces MS to fix their shabby browser.<!--content-->