The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

3 Pages V  1 2 3 >  
Reply to this topicStart new topic
> CSS page definitions not working?, 1 page is different than the rest
CharlesEF
post May 20 2013, 06:04 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi All,

I'm not sure what is going on and I think the best way to explain it to just let you see for yourself. If you visit my CSS layout website and click on the 2nd menu item then click on the 1st sub-menu item you will see that the page layout is different than all the rest of the pages. I have no idea why.

All the pages have passed the WDG validator as 4.01 Strict (the W3C validator will not work with php files) so any help with this problem will be of great help to me.

I should say that IE8 and Firefox v21.0 under WinXP Pro SP3 both show the same. I should also say that the paths are correct or the favicon would not show.


Thanks for looking,

Charles

This post has been edited by CharlesEF: May 20 2013, 06:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 20 2013, 08:03 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 21 2013, 01:04 AM) *

click on the 2nd menu item then click on the 1st sub-menu item

Why not link directly to the page? unsure.gif

QUOTE
you will see that the page layout is different than all the rest of the pages.

A positioned (or floated) element will shrink to fit its content unless you give the element a non-auto width. The text lines in #content are too short to make it expand all the way to the window edge. On the other pages the text lines are longer. To avoid this, don't position the element.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 12:46 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ May 20 2013, 08:03 PM) *

Why not link directly to the page? unsure.gif

You're right, sorry I did not think of that. (not enough sleep?)

QUOTE
A positioned (or floated) element will shrink to fit its content unless you give the element a non-auto width. The text lines in #content are too short to make it expand all the way to the window edge. On the other pages the text lines are longer. To avoid this, don't position the element.

Boy, just when I thought I had all the css problems worked out this pops up. Also, seems I have a lot more to learn about css.

I want the website to have a consistent look across all pages. I will see what I can do to fix this problem but maybe my frameset/frames approach was not so bad after all. At least I did not have to worry about the problems that css cause.


Thanks for your help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 21 2013, 01:08 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,308
Joined: 9-August 06
Member No.: 6



QUOTE(CharlesEF @ May 21 2013, 07:46 AM) *

maybe my frameset/frames approach was not so bad after all.


Yes it was. smile.gif

QUOTE
At least I did not have to worry about the problems that css cause.

Instead you would have to worry about the problem frames cause. Learning CSS is more productive. wink.gif

I didn't read all the CSS but if everything is positioned as I suspect giving #content a width of 100% should work.

Another approach, and maybe more "normal", is to not position #content at all. Give it margins that makes it go free from the fixed boxes instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 01:14 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi,

I have already tried a width setting of 100% and it causes all the pages to flow off the right edge of the window. You can not read the text and the scrollbar (if any) is no where to be seen.

I will try your margin idea and report back.


Thanks for the help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 21 2013, 05:08 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 21 2013, 08:08 AM) *

Another approach, and maybe more "normal", is to not position #content at all. Give it margins that makes it go free from the fixed boxes instead.

I posted an example of that here. It's what I'd do myself. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 05:46 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ May 21 2013, 05:08 AM) *

QUOTE(pandy @ May 21 2013, 08:08 AM) *

Another approach, and maybe more "normal", is to not position #content at all. Give it margins that makes it go free from the fixed boxes instead.

I posted an example of that here. It's what I'd do myself. cool.gif

Yes, I have looked at it but I get different display results with IE8 and Firefox v21.0 and I have not changed anything as far as your code goes.

In Firefox I see the pink bar at the top, the nav section is right below that on the left and the green h2 is to the right of the nav and right below the pink bar.
In IE8 I see the pink bar at the top, the nav section is right below that on the left but the green h2 bar is half way down the page. Not the same as Firefox.

Which browser gets it wrong?


Thanks for the help,

Charles

This post has been edited by CharlesEF: May 21 2013, 05:52 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 21 2013, 06:39 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 21 2013, 12:46 PM) *

In Firefox I see the pink bar at the top, the nav section is right below that on the left and the green h2 is to the right of the nav and right below the pink bar.

Yes that's how it should be.

QUOTE
In IE8 I see the pink bar at the top, the nav section is right below that on the left but the green h2 bar is half way down the page.

My IE8 (alas only emulated with IETester) looks the same as Firefox. Your description sounds more like my IE6, which doesn't support "position: fixed", or like IE8 in quirksmode.

Does your test page use a "standards mode" Doctype? Are you sure your IE8 is configured properly in the Developer Tools menu (press the F12 key to open)? For example, the Document mode can be set to Quirks which simulates older browser versions.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 21 2013, 07:18 AM
Post #9


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



If you want my CSS version to look better in IE6 you can give it "position: absolute" instead of "fixed" (using e.g. Conditional Comments in order to target IE6 only). That way it will look the same as the "fixed" version, except that the positioned elements will move when you scroll.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 10:47 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ May 21 2013, 07:18 AM) *

If you want my CSS version to look better in IE6 you can give it "position: absolute" instead of "fixed" (using e.g. Conditional Comments in order to target IE6 only). That way it will look the same as the "fixed" version, except that the positioned elements will move when you scroll.

I don't use IE6, I'm using IE8 and the problem turned out to be the lack of a doctype. Once I declared 4.01 loose dtd the display now looks the same as Firefox. However, I don't see a footer section. The way I see your css code is:

The pink bar could be header, the yellow nav is the menu, the lime h2 bar is the title and the rest is for content. I have not done any further testing because of the difference is display results. Now that I know the missing doctype was the problem I can do some testing.


Thanks for the help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 21 2013, 12:24 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 21 2013, 05:47 PM) *

I don't use IE6

I only mentioned IE6 because it doesn't support fixed positioning (even with a Doctype). I don't think many use IE6 anymore, so maybe it's not worth adding a fallback style for it.

QUOTE
However, I don't see a footer section.

Should there be one? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 12:33 PM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi,

Yes, I'm not going to worry about IE6 either. As for the footer, yes, I would like to get as close the my original frameset/frames design as I can. But you never know, maybe I will be forced to forgo it.

I thought I was doing pretty good with my current css design however, I do not like the fact that there could be pages that don't use all the content space. I don't want to see a scroll bar that is not on the right edge of the page.


Thanks for the help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 21 2013, 01:26 PM
Post #13


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 21 2013, 07:33 PM) *

As for the footer, yes, I would like to get as close the my original frameset/frames design as I can.

You could make a footer in a similar way as the top heading. Just remember to give #content a bottom margin to accomodate.

One thing to watch out for is if the #nav becomes taller than the browser window, in which case parts of #nav the will be inacessible. Let me know if you get problems with that.

QUOTE
I don't want to see a scroll bar that is not on the right edge of the page.

That won't happen with my layout, since it uses the ordinary window scrollbar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 21 2013, 05:42 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ May 21 2013, 01:26 PM) *

You could make a footer in a similar way as the top heading. Just remember to give #content a bottom margin to accomodate.

One thing to watch out for is if the #nav becomes taller than the browser window, in which case parts of #nav the will be inacessible. Let me know if you get problems with that.


During my testing I have found that the #nav section will not produce a scrollbar if the browser window is small. Now I know that a browser window that is too small is useless but I'm trying to plan for a larger menu. Right now I only have 4 menu items and 2 of those have sub-menu items to test but once I work out the layout I do have many more menu items to add.

QUOTE
That won't happen with my layout, since it uses the ordinary window scrollbar.


Another problem I have run into to is that the #content section will scroll into the header and footer sections. While the header and footer section have a background color assigned you do not see this. But, if I remove the background color then I can see the content section overlap the header and footer sections. Here is my current css version:

#header
{
position: fixed;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 7.5em;
background: pink;
}

#menu
{
position: fixed;
top: 8em;
left: 5px;
width: 15em;
overflow: auto;
background: yellow;
}

#content
{
margin: 8em 0 0 15em;
}

#footer
{
position: fixed;
top: 49.5em;
height: 40px;
left: 0;
margin: 0;
width: 100%;
background: lime;
}

To be honest, I like my current css design that I have posted on my test website but I wish I could fix the page layout problem so that the scrollbar is always on the right edge of the window (when a scrollbar is needed).


Thanks for your help,

Charles

This post has been edited by CharlesEF: May 21 2013, 05:47 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 22 2013, 06:40 AM
Post #15


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 22 2013, 12:42 AM) *

During my testing I have found that the #nav section will not produce a scrollbar if the browser window is small.

Actually I can't think of a good solution with CSS2. At best you'd get a menu scrollbar (in addition to the one you already have for the page content), which is not practical for the users. And creating such a menu scrollbar is tricky, since you'd have to define the menu, header and footer heights in percent --which brings us back to the problem with one of your first designs (where the content and header overlapped).

QUOTE
Now I know that a browser window that is too small is useless but I'm trying to plan for a larger menu. Right now I only have 4 menu items and 2 of those have sub-menu items to test but once I work out the layout I do have many more menu items to add.

CSS3 media queries might be used to avoid that. Perhaps you could make the heading and footer "position: absolute" instead of "fixed" when the window becomes too small, and at the same time give BODY a min-height:

CODE
/* put this style block after the fixed positioning rules */
@media screen and (max-height: 30em) {
    h1, #nav {position: absolute;}

    /* Tries to ensure you can view the whole #nav even in short windows. Value should be at least as large as #nav's height. */
    body {min-height: 50em;}
}

But it fels a bit kludgy, and older browsers will not support it. The ballpark height values I used likely require fine-tuning.

QUOTE
Another problem I have run into to is that the #content section will scroll into the header and footer sections. While the header and footer section have a background color assigned you do not see this. But, if I remove the background color then I can see the content section overlap the header and footer sections.

That's normal. If you can't use a background on the header and footer, you can use a background on #content and make it cover header and footer like this:

CODE
#content {
margin: 3em 0 3em 11em;
position: relative;
z-index: 2;
color: #000;
background: white;
}

but it doesn't look so good IMO.

QUOTE
Here is my current css version:
...

#footer
{
position: fixed;
top: 49.5em;

Side-note: you should use "bottom: 0" for the footer instead of a large "top" value, otherwise it will not work with different window heights.

QUOTE
To be honest, I like my current css design that I have posted on my test website but I wish I could fix the page layout problem so that the scrollbar is always on the right edge of the window (when a scrollbar is needed).

Here's the test page again. In newer browsers maybe this fixes it:

CODE
#content {
position: fixed;
top: 3em;
bottom: 3em;
right: 0;
left: 11em;
overflow: auto;
}

(the combined left and right properties should stretch it out).

The problem in older browsers is that positioned elements shrink to fit its content when width is "auto". If you give it a 100% width, it becomes too wide. If you give it say 80% width, you must give the nav menu a percent width as well (the remaining 20%), and then the nav menu may become too narrow in small windows. In CSS2 it's not possible to combine e.g. em units in the nav menu section with percent units in the content section so they'll add up to 100% in total.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 22 2013, 11:03 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi,

@Christian J

Wow, I never thought of that. Turns out all I had to do was add right: 0 to my current css #content section and the page will now stretch out. So, it appears that I have now solved all my known problems (with the help of fine people here). So, if the browser window is small (example: 5" by 5") then the #header and #footer section will still be shown and the #menu and #content section will produce a scrollbar when needed. I had to leave some white space between the #menu and the #content section in case the menu scrollbar appears but I can live with that.

As for browser support I only care about browsers that support position: fixed. For IE I think this is v7, while other browsers most likely support it sooner than IE7. As it is IE8 does not support a lot of CSS3 features that the menu uses so IE8 users will not see the menu as it is designed (I changed the title color to a pinkish hue to kind of match the menu color). They will only see a black and white version which will bold the menu item you click or hover over.

For FYI only, while I was working with your version of css my Windows XP computer crashed about 3 times with different blue-screen-of-death errors in a 4 hour period. Since I went back to my original version I have not had a single crash (and I never had a BSOD before either). Strange?

I'm going to upload the changes shortly, so if you want to test (or anybody else with a different browser) the new css please visit my test site here and report back any problems please.


Thank you (and everyone else) very much for the help,

Charles

This post has been edited by CharlesEF: May 22 2013, 11:14 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 22 2013, 01:47 PM
Post #17


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ May 22 2013, 06:03 PM) *

Hi,

@Christian J

Wow, I never thought of that. Turns out all I had to do was add right: 0 to my current css #content section and the page will now stretch out.

I didn't think about it either. blush.gif

QUOTE
As for browser support I only care about browsers that support position: fixed. For IE I think this is v7

Correct. I actually get a an extra grayed out browser window scrollbar in IE7, but at least the page seems functional.

QUOTE
For FYI only, while I was working with your version of css my Windows XP computer crashed about 3 times with different blue-screen-of-death errors in a 4 hour period. Since I went back to my original version I have not had a single crash (and I never had a BSOD before either). Strange?

No idea why that happened. blink.gif AFAIK my layout was simpler than the one you use now.

QUOTE
I'm going to upload the changes shortly, so if you want to test (or anybody else with a different browser) the new css please visit my test site here and report back any problems please.

My Opera12 has some problems adjusting to different window sizes, but my other browsers seem to cope.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 22 2013, 02:01 PM
Post #18


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi,

Great, thanks for the report. I have read in other places that Opera does have problems when re-sizing the window but there is nothing I can do about that.

I'm now working on some conditional css to allow IE8 and below a more robust menu. I may be back for more help. smile.gif


Thank you,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 22 2013, 04:01 PM
Post #19


.
********

Group: WDG Moderators
Posts: 8,178
Joined: 10-August 06
Member No.: 7



Something occurred to me. Since you're using "position: fixed" for everything on the page, it doesn't have any practical effect. You might as well use "position: absolute"...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post May 22 2013, 05:38 PM
Post #20


Programming Fanatic
********

Group: Members
Posts: 1,623
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ May 22 2013, 04:01 PM) *

Something occurred to me. Since you're using "position: fixed" for everything on the page, it doesn't have any practical effect. You might as well use "position: absolute"...

During my testing I did try changing some to position: absolute but it had negative effects. I will try again but this time I will change all position: to absolute and see what happens. I will report back later.


Thanks for the help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

3 Pages V  1 2 3 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th July 2019 - 09:23 PM