CSS page definitions not working?, 1 page is different than the rest Options

[CharlesEF]

Hi,

Ok, I just tried and you are correct. The position seems to be maintained just like if it were fixed. However, now there is a scrollbar at the bottom which is really not needed but I can't seem to get rid of it. The scrollbar only moves a fraction and does not affect the page display. Not sure why it shows up. I only tested with Firefox v21.0

I will try working on it some more later.


Thanks,

Charles

This post has been edited by CharlesEF: May 22 2013, 05:53 PM

[CharlesEF]

Hi,

I just tested again and I think I fixed the problem. I changed all 4 position: fixed to position: absolute and then I changed the width of the #header and #footer from 100% to 99%. The scrollbar at the bottom is gone now and resizing the browser windows still maintains everything as it should. Seems to have worked.

Now, since I no longer use position: fixed does this mean older browsers may work, like IE6? I have made some conditional styles to apply to IE8 and below so the menu looks better than it did. I have not uploaded the changes yet, I am busy with a client computer, but I will later tonight. I will post back when my website is updated.


Thanks for the help,

Charles

This post has been edited by CharlesEF: May 22 2013, 08:31 PM

[CharlesEF]

Hi,

Ok, I have uploaded the changes to my website. Please visit here to test.

If anyone with older browsers could test I will be most happy to hear from you.


Thanks for your time and help,

Charles

This post has been edited by CharlesEF: May 22 2013, 09:47 PM

[Christian J]

since I no longer use position: fixed does this mean older browsers may work, like IE6?

No, since IE6 doesn't support using both top/bottom or left/right at once. But your test page seems viewable anyway (even in IE5.5), it's just that it scrolls with the window scrollbar. However, if you add a footer it will stay in the middle of the content section when you scroll.

I have made some conditional styles to apply to IE8 and below

You could try adding

CODE

html {overflow: auto;}

to get rid of the extra, unused window scrollbar that shows up in IE7.

[CharlesEF]

since I no longer use position: fixed does this mean older browsers may work, like IE6?

No, since IE6 doesn't support using both top/bottom or left/right at once. But your test page seems viewable anyway (even in IE5.5), it's just that it scrolls with the window scrollbar. However, if you add a footer it will stay in the middle of the content section when you scroll.

I'm not sure I understand, since I already use a footer section. Right now it is blank but it is defined and the space is there.

I have made some conditional styles to apply to IE8 and below

You could try adding

CODE

html {overflow: auto;}

to get rid of the extra, unused window scrollbar that shows up in IE7.

I made this change and tested in IE8 using IE7 mode. While the main scrollbar on the right is gone some pages show up with a left/right scrollbar when not needed. Any idea how I could fix that?


Thanks for the report and help,

Charles

[CharlesEF]

Hi,

I don't know for sure but it seems that overflow:auto in the content section causes the bottom scrollbar. IE7 mode seems to display both scrollbars even thou only the up/down scrollbar is needed.

Am I 'assuming' correctly?


Thanks for the help,

Charles

[CharlesEF]

Me again,

Using this code for IE7 seems to have fixed the left/right scrollbar problem.

#content
{
overflow-x: hidden;
}

There is only 1 page that has data all the way to the end and it still wraps so I can read it: here. Also, IE8 still seems to display correctly even with this css set. I know W3C states 'The overflow-x property does not work properly in IE8 and earlier.' but it seems to work for me.

Do you think using hidden will come back to bite me? Or, should I just let the bottom scrollbar show and forget about it?


Thanks for the help,

Charles

This post has been edited by CharlesEF: May 23 2013, 11:00 AM

[Christian J]

I'm not sure I understand, since I already use a footer section. Right now it is blank but it is defined and the space is there.

Oh I didn't see that. You should make it visible during debugging. Anyway, in IE6 you can only scroll with the window scrollbar (there is no scrollbar for the content section), which makes the footer will move up with the scrolled content. As a workaround maybe you could remove all positioning for IE6 (except maybe the nav menu's).

While the main scrollbar on the right is gone some pages show up with a left/right scrollbar when not needed.

I don't get that on my test version. Maybe you have some extra margin/border/padding somewhere?

Any idea how I could fix that?

How about

CODE

html {overflow-y: auto;}

?

[Christian J]

I know W3C states 'The overflow-x property does not work properly in IE8 and earlier.'

Just curious, where do they say that?

Do you think using hidden will come back to bite me?

If a word is longer than the content section it will be cut off...

Or, should I just let the bottom scrollbar show and forget about it?

Up to you.

[CharlesEF]

I'm not sure I understand, since I already use a footer section. Right now it is blank but it is defined and the space is there.

Oh I didn't see that. You should make it visible during debugging. Anyway, in IE6 you can only scroll with the window scrollbar (there is no scrollbar for the content section), which makes the footer will move up with the scrolled content. As a workaround maybe you could remove all positioning for IE6 (except maybe the nav menu's).

Since I don't have IE6 I hope you can test these changes once I make them. I will post back when I'm ready.

While the main scrollbar on the right is gone some pages show up with a left/right scrollbar when not needed.

I don't get that on my test version. Maybe you have some extra margin/border/padding somewhere?

Yes, I do have some left and right padding in the main css file but it is global so all browsers should have it. I removed the padding and did a test, I found the left/right scrollbar still shows up for me.

Any idea how I could fix that?

How about

CODE

html {overflow-y: auto;}

I tried this on my localhost and it made no difference, whenever the up/down scrollbar appears the left/right scrollbar also appears.


Thanks for the help,

Charles

[CharlesEF]

I know W3C states 'The overflow-x property does not work properly in IE8 and earlier.'

Just curious, where do they say that?

I found it here, in the browser support section.

Do you think using hidden will come back to bite me?

If a word is longer than the content section it will be cut off...

I tested by adding a bunch of s characters to the last word on the longest line. It wrapped the whole word, it did not hide anything.

Or, should I just let the bottom scrollbar show and forget about it?

Up to you.

Yeah, I will have to think it over.


Thanks for the input,

Charles

[Christian J]

Maybe you have some extra margin/border/padding somewhere?

Yes, I do have some left and right padding in the main css file but it is global so all browsers should have it. I removed the padding and did a test, I found the left/right scrollbar still shows up for me.

I was thinking of the element that produces the scrollbar. OTOH I recall there used to be some IE scrollbar bug a few years ago. Maybe you'll find a fix if you search.

How about

CODE

html {overflow-y: auto;}

I tried this on my localhost and it made no difference, whenever the up/down scrollbar appears the left/right scrollbar also appears.

The above was meant to remove the disabled vertical window default scrollbar in my IE7 (didn't more IE versions have that BTW?). AFAIK it won't affect any horizontal scrollbar.

[CharlesEF]

Hi,

Ok, I added your suggestions to the conditional css for IE6 and below. The website is ready for testing here.

Please let me know how it works out for you.


Thank you,

Charles

This post has been edited by CharlesEF: May 23 2013, 01:28 PM

[Christian J]

Just curious, where do they say that?

I found it here, in the browser support section.

Apparently W3C's definition is different from IE's behavior. Found this test page that mentions some differences: http://www.brunildo.org/test/Overflowxy2.html

BTW w3schools is not related to W3C (I've too made that mistake).

If a word is longer than the content section it will be cut off...

I tested by adding a bunch of s characters to the last word on the longest line. It wrapped the whole word, it did not hide anything.

I meant that a single word that's longer than the whole box will be cut off. This will probably only happen if you both have very long words (for example URLs) and the window is narrow.

[CharlesEF]

Maybe you have some extra margin/border/padding somewhere?

Yes, I do have some left and right padding in the main css file but it is global so all browsers should have it. I removed the padding and did a test, I found the left/right scrollbar still shows up for me.

I was thinking of the element that produces the scrollbar. OTOH I recall there used to be some IE scrollbar bug a few years ago. Maybe you'll find a fix if you search.

Ok, I will do some searching.

How about

CODE

html {overflow-y: auto;}

I tried this on my localhost and it made no difference, whenever the up/down scrollbar appears the left/right scrollbar also appears.

The above was meant to remove the disabled vertical window default scrollbar in my IE7 (didn't more IE versions have that BTW?). AFAIK it won't affect any horizontal scrollbar.

Your first suggestion already took care of that right scrollbar: overflow: auto;. The overflow-x: hidden; took care of the left/right scrollbar at the bottom.

Please let me know how IE6 works out.


Thank you,

Charles

[CharlesEF]

Just curious, where do they say that?

I found it here, in the browser support section.

Apparently W3C's definition is different from IE's behavior. Found this test page that mentions some differences: http://www.brunildo.org/test/Overflowxy2.html

BTW w3schools is not related to W3C (I've too made that mistake).

If a word is longer than the content section it will be cut off...

I tested by adding a bunch of s characters to the last word on the longest line. It wrapped the whole word, it did not hide anything.

I meant that a single word that's longer than the whole box will be cut off. This will probably only happen if you both have very long words (for example URLs) and the window is narrow.

As for the left/right scrollbar, I think I will just leave it alone. I'm pretty close to what I want and I never really wanted to support IE6 and below anyway. If it works then that is an extra bonus.

Well, when I want to learn I go to school. I 'assumed' they were related, learned something new.


Thanks,

Charles

[CharlesEF]

Hi,

@Christian J

Have you had a chance to test IE6 on my website here? No big rush but I would like to know if the additional conditional styles made any difference.


Thank you,

Charles

This post has been edited by CharlesEF: May 24 2013, 02:42 PM

[Christian J]

Have you had a chance to test IE6 on my website here?

Sorry about the delay.

The W3C buttons cover the text even when you scroll down. You might try making the footer "position: static" for IE6 to avoid that.

I get a large horizontal scrollbar on all pages, but that's purely cosmetical (you don't need to use it to see all content, there's just extra empty space if you scroll sideways).

Looking at the CSS, IE6 will not understand "left" and "right" properties combined (ditto for "top" and "bottom" combined) but it doesn't seem to cause any problems in this case.

[CharlesEF]

Have you had a chance to test IE6 on my website here?

Sorry about the delay.

The W3C buttons cover the text even when you scroll down. You might try making the footer "position: static" for IE6 to avoid that.

I get a large horizontal scrollbar on all pages, but that's purely cosmetical (you don't need to use it to see all content, there's just extra empty space if you scroll sideways).

Looking at the CSS, IE6 will not understand "left" and "right" properties combined (ditto for "top" and "bottom" combined) but it doesn't seem to cause any problems in this case.

No problem, thanks for testing. I have an old computer sitting around so I think I will install WinXP with IE6 to test myself and not bother you.


Thanks for your time and help,

Charles

[Christian J]

I use IETester: http://my-debugbar.com/wiki/IETester/HomePage even though it's not completely stable, and may sometimes (rarely) make mistakes in its emulation.