35 replies [Last post]
kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Hi. I'm troubled by a CSS layout I'm trying to get to work. I have made a sketch to show the idea, and it actually works perfect, except that the blue and red boxes can't scroll horizontal if the browser get below 800px in width - this is probably due to the fact that they are positioned with "fixed", witch by the way don't work in IE - I know Wink

Well don't know if there is more to say. - I want my layout exactly the way it is, but with the ability to scroll the fixed elements horizontal if needed. - I'm willing to accept that the little blue box is positioned at the left side of the screen, and the rest moves to the right though Smile

Hope some CSS genius can help me make this work Smile

- Rasmus L. Knabe

Link to my sketch: http://kongknabe.users.whitehat.dk/Layout%20tester/index.html

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 31 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Advanced layout problem...

Welcome...

I apologize but I am not following you... :?

- r

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Thanks Smile

I will try to explain Smile - I want everything on the site to be able to scroll horizontal if needed, but only the content of the white box to be able to scroll vertical! - All of this while maintaining the vertical scrollbar at the right edge of the browser window at all times, in the full height of the browser window!

Don’t remember if I mentioned that my sketch only works in FireFox (Or not in IE at least)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Advanced layout problem...

So

What you need is a minimum width set on the page, which will force a horizontal scrollbar if necessary.

The white area needs a height set and overflow:auto set. Normally IE treats height as min-height, but if you set overflow auto, it will fix the height and give you a scrollbar if necessary.

Trevor

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 31 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Advanced layout problem...

kongknabe -
Good question. Trevor to the rescue. Looks like we both learned something new today. Laughing out loud

- r

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hi Trevor.

Thanks for your reply. I’m not sure I understand you correctly? - Tried to change the things you mentioned but with the same outcome as before except that the horizontal scrollbar now is present at all times (but still only scrolls the white area)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Advanced layout problem...

Hi

I can see what you want, but I am not prepared to write the whole page for you.

One: You cannot have those top elements fixed in IE, and so you should re-think what you want. I had envisioned the top bits being where they are, with the white area having its own scrollbar.

Anyway, clearly what I envisioned wasn't what you wanted. It is so broken in IE because your concept, whilst valid and possible in CSS2, will not work in IE, which is the majority of visitors.

I would start again, but this time have:

A header (split into bits if you want).
Content section, which srcolls vertically if content longer than a fixed height.
A footer.

All with a minimum width, to give horizontal scrollbar if needed.

Trevor

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

So thereby you’re saying that what I want isn't possible?

I know that position: fixed don't work in IE - but it is possible to use a hack that makes it work - anyway, my sketch were only to illustrate graphically how I would want it to work - no necessarily how the code should be written.

Your solution with the top header, main content and a footer isn't what I want (but maybe what I will have to do anyway Sad )

- But thanks for your help Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Advanced layout problem...

Hi

Never say never.

But, as far as I know, IE can't do what you want. It simply isn't compliant to the CSS2 standard in this respect.

Too many folk have tried to do this, many asking for help on this forum (just search for position fixed), but none resolved it, as far as I know.

What I DO like about your approach to this subject is:

1. You tried.
2. You made a test layout that was easy to follow (not crowded with content).
3. Your request was polite.

May many more like you continue to seek help, and may we be able to help in some way.

Trevor

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

He he - No, I'm not quite ready to give op yet (I’m a stubborn bastard Wink ) - I'm still not sure if you understand my problem correct since you keep mentioning IE!? - My problem is not that can't get it to work in IE (at least not yet Laughing out loud) - My problem is that I cant scroll the fixed content horizontally when the browser becomes to small the display all the content..! - The layout doesn’t have to use position: fixed for the blue and the red box not to scroll vertically, this can be achieved in other ways, but that offers other problems... First of all I'm simply trying to find out if what I want is possible at all... And if yes, then I will have to make it work in all browsers afterwards Smile

But thanks for your help so far Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 49 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Advanced layout problem...

Hi

The way to make a horizontal scrollbar appear is for all browsers put a min-width on the body css

The for IE, you'll have to use an IE expression, which will work but won't validate (just google for min-width expression IE).

Trevor

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Just found this site witch does exactly as I want in IE - unfortunately horizontal scroll doesn’t affect the fixed box in Safari or Firefox for Mac - but there have got to be a way to fix that! Smile

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hmm.. forgot a link :oops:

http://www.cssplay.co.uk/layouts/fixed.html

Also it turns out not to work perfectly in the newest version of FF for PC.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

You must understand the meaning of the fixed value for the position property. If the element is fixed, it takes its positional reference from the viewport. That is the never changing (neglecting a resize) area of the browser where everything goes. Your fixed element will not, can not be scrolled. That is the definition of {position: fixed;}.

If the element sticks out of the window at smaller sizes, well, that's just it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Yearh, I understand this (now) - it's just very stupid.. Why haven't they made it so you can decide whether to fix it vertically, horizontally or both ?? - Also - all my problems would have been solved if they had made it possible to set overflow-y and overflow-x! - That makes now sense! - But I’m beginning to realize that it simply can't be done Sad

It can be done in IE since it possible to use overflow-y and overflow-x there, but nowhere else it seems...

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Just found this site - this is actualy what I want, and the way it handles low screen resolutions is perfect (try resize our browser).

I have tryed it out in Safari 2.0.2 - Firefix for mac 1.0.4 and IE 5.2.3 for mac, witch render the low end version of the site, only. The other to does it perfect! - Does it work for you?

http://rammstein.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

First, the top nav bar is fixed in modern browsers, but is treated as absolute in IE. Note that it scrolls with the page in IE. The width is declared as 100%, so it will be as wide as its parent.

The side logo image is fixed in modern browsers, but not, of course, in IE. In a modern browser, notice that if the browser is shrunk in height sufficient to cover the logo, the covered part is lost.

Jeez, I turned Flash on in case there was something there. What a mistake. How can anyone think that repetitive animation is anything other than annoying?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Have you tried to se the page in a browser window wider than 800 px? - I tried the page in IE on my virtual pc and it works almost perfect in the wide version. In the small one you are right about the fixed objects scrolling.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hmm.. Just made this sketch - any idea why it won't work in IE ?

http://kongknabe.users.whitehat.dk/html/index.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

kongknabe wrote:
Have you tried to se the page in a browser window wider than 800 px? - I tried the page in IE on my virtual pc and it works almost perfect in the wide version. In the small one you are right about the fixed objects scrolling.

Not until you mentioned it. Smile The page is dependent on javascript. Turn it off and see the result. (in IE, set security to high)

The page does degrade well. I notice that the xhtml seems well structured and semantic, and is well formed. The style sheets are well written and take advantage of selectors used by modern browsers. If I have a nit to pick, it's that a transitional DTD is used.

More of a flea is the use of the xml declaration and iso-8859-1 charset. XHTML should use the utf-8 charset, making the xml declaration redundant, and that's a Good Thing® because using it throws IE into quirks mode. The high html/css quality is especially surprising for a band or fanboy site. As a group, they're not known for well written web sites.

Give bit_design gmbh props for a good job. Points off, though, for the silly Flash animation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

kongknabe wrote:
Hmm.. Just made this sketch - any idea why it won't work in IE ?

http://kongknabe.users.whitehat.dk/html/index.html
Define 'won't work'. As far as I can see, it has broken behavior in all browsers. Look in a smaller window for scroll behavior.

Remove all overflow rules, and it acts as one would expect. If you want a different behavior, you'll need to describe that behavior.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hmmm.. here it works the same in Safari and Firefox - only IE is different - The way it works in Firefox is the way i want it to work!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

:shrug: I consider the behavior in Firefox to be broken.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

OK, but do you have any idea why it don't work the same way in IE as in Firefox?

Anonymous
Anonymous's picture
Guru

Advanced layout problem...

kongknabe wrote:
OK, but do you have any idea why it don't work the same way in IE as in Firefox?
Are you seriously going to use it like that?

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

I'm not sure yet, but it seems to me that the only problem is that the vertical scrollbar disappears from the browser window at low resolution so you have to scroll right to see it... But maybe I'm missing something?

The site I'm designing is not optimised for 800x600 and it's not important that it function perfect for this resolution. - But it is important that you can use it even at low resolution! - This is the best compromise I have yet seen... If you have an alternative solution I would really like to hear it Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

Obviously I am missing something that is important to you. I see no difference (but I don't know what I should be looking for) in the page except that the scroll bars work as normally expected when you follow my instructions. You will have to clearly describe the effect you're going for.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hmm.. I'm not sure I understand you Smile - Kind of hard sometimes when English isn't your native language.

Well. What I want is a site where only some of the elements can scroll vertically but they all can scroll horizontally! - In my most recent sketch the red box scrolls both vertically and horizontally while the green box only scrolls horizontally. - It's important for me that the horizontal scrollbar are located at the right edge of the browser window in the full height of the window and vice versa with the vertical scrollbar! I have almost achieved this in my most recent sketch but it just don't work in IE...

Hope this explains what i'm looking for and what my problem is Smile

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Furthermore I’m not sure whether the way I have chosen to position the to content divs is valid and if it might potentially screw things up!?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

I see more or less what you are doing, though I don't see how you would use it.

Valid? Yes. Do be aware that half of the green box is hidden behind the red box. Will that be an issue?

Now to IE. IE does not follow the rules where sizing by the top/right/bottom/left properties. Further, IE gets even more rules wrong when you fail to use a proper and complete DTD.

This would be a simple matter were IE to comply with css2, adopted 1998. But it doesn't. Further, I don't see a worthwhile real-world advantage for the design specs. Were you to show an example where the user experience is enhanced, I will reconsider. As is, I see no sane reason to pursue this line any further.

BTW, your English seems fine.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

I'm trying to make a layout for a community site witch have its one messenger incorporated in a JAVA application. - I would like to have the messenger window along with a little status window for your personal profile located in the left side of the screen - for this to be functional it should not scroll vertical with the rest of the page - this should be visible at all times know matter what else your doing on the site. - I know this could be achieved in other and more simple ways but to me it's important to maintain a simple layout with a feeling of coherency - thus only one vertical scrollbar positioned at the left side of the browser in the browser windows full height! - You an others might not agree or understand why this is so important to me, but it is. - Trouble and time is not a factor for me, I will use the time and effort to make this the way I want it, but off course I don't want to make anything that wont work for a lot of our users, or may be outdated in a short period of time... Usability is very important to me to, and I feel that this provides best usability for the most of our users! About 92% of our users run a screen resolution above 800x600 so in this case I feel it is most reasonable to focus on them - off course the rest should still be able to view the site but they will have to live with a horizontal scrollbar! - It will always be a compromise witch many people in my opinion don’t seem to realise... Not using the full width of a browser window for advanced WebPages, when possible, is not user friendly in my opinion! - But off course it all depends of what your doing and who your site applies to...

For me to give you a full description of what I’m trying to do is not easy and would require a lot of writing, but I have put a lot of thought in to this!

I know that I haven't put in a DTD, and must admit that I don't know much about that - will have to learn that and will read your link - thanks Smile

But one thing I didn't get from your last post I whether you think there is a way to fix it in IE or not? - Or did you simply just don't comment on that? Smile

By the way - the content of my sketch is not important, it is only there to illustrate how I want the scrollbars to work.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

OK. Now that makes sense. Make the div which holds the <object type="application/java" ... > element {position: fixed}. The placement will reference the viewport and it will not move when the rest of the page does. That will work for modern browsers. IE, not being a modern browser, will treat the div as {position: absolute;}. The cure for that lies in using javascript. Google 'IE position fixed' for plenty of articles.

If you're going to use Java, you should consider that there are a lot of folk who don't have or have disabled Java. Stats from one site I administer that has a pretty tech savvy visitor base show only 54.24% have enabled Java.

I did not speak of using less than the full browser window, I speak of the many people that do not run the browser maximized. Just because the great majority of your visitors have high rez screens does not mean their browsers are run at that rez. While it is true that an overwhelming number of my visitors have screens >=1024px wide, it is also true that a significant plurality, if not a majority, have their browsers sized at ≅800px wide to leave them room on the desktop for other applications. The more knowledgeable computer users seldom run apps maximized, preferring to have multiple jobs open and visible at the same time.

I don't know if this fills your needs, but it seems to meet specs;

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta name="generator" 
        content=" 
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
 
  <title>A fixed applet</title> 
<style type="text/css" 
       media="screen"> 
/*<![CDATA[*/ 
 
html, body { 
    margin: 0; 
    padding: 0; 
    } 
 
#applet { 
    background-color: #efe; 
    border: 1px solid green; 
    color: black; 
    height: 200px; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 300px; 
    } 
 
#applet object * { 
    background-color: #eef; 
    color: black; 
    } 
 
#main { 
    background-color: #fee; 
    color: black; 
    border: 1px solid red; 
    height: 700px; 
    } 
 
#blockout { 
    float: left; 
    height: 200px; 
    width: 300px; 
    } 
 
/*]]>*/ 
</style> 
</head> 
 
<body> 
  <div id="applet"> 
    <object type="application/java" 
         classid="java:some.class"> 
 
      <p>A message box would have been here.</p> 
    </object> 
  </div> 
 
  <div id="main"> 
    <div id="blockout">.</div> 
    <p>This is the main content.</p> 
  </div> 
 
</body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

Hi, and thanks for your help Smile - Unfortunately this is just not what I’m looking for. This could work perfect if I could maintain the main content all fluent in width, but that won’t work. So I need something where the fixed box are able to scroll horizontally with the rest of the page if the browser window gets to small... That’s why I tried to make the other sketch - it does exactly that if I could only get it to work in IE.

Here are a graphically sketch of how I want the site to look - it's just a sketch to illustrate. - I want the "personal profile" and the "HotChat IM buddy list" fixed so it doesn’t scroll vertically. - It could be positioned in the left side of the screen as well!

http://kongknabe.users.whitehat.dk/ny-hotflirt-udkast-v.11.3.png

Quote:

If you're going to use Java, you should consider that there are a lot of folk who don't have or have disabled Java. Stats from one site I administer that has a pretty tech savvy visitor base show only 54.24% have enabled Java.

You are right about that, but we have had great experience with just telling people to install it... Almost all of your users have it installed! - And they are not tech savvy users Smile

Quote:

I did not speak of using less than the full browser window, I speak of the many people that do not run the browser maximized. Just because the great majority of your visitors have high rez screens does not mean their browsers are run at that rez. While it is true that an overwhelming number of my visitors have screens >=1024px wide, it is also true that a significant plurality, if not a majority, have their browsers sized at ?800px wide to leave them room on the desktop for other applications. The more knowledgeable computer users seldom run apps maximized, preferring to have multiple jobs open and visible at the same time.

I understood what you meant Smile And I agree some of the way. I my self almost never use maximized browser windows - the Mac's GUI isn't design for that by the way. - But if I use applications witch requires a lot of workspace I off course maximise the window... In Logic for example I want as much works space as possible! - A lot of pages have no need to be wider than 800px tops, and since a lot of pages aren’t there is seldom any reason to maximise your browser if you run a high screen resolution. But that doesn’t mean that there couldn't be cases where it would actually be a good idea to make the design wider, and for the user to maximise his browser! - It all depends.... Smile Since almost all of our users have the ability to run the page at my desired size I see no reason not to take advantage of this - I believe that it will enhance the user experience in this case!

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

I want the top bar fixed as well by the way Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Advanced layout problem...

kongknabe wrote:
I want the top bar fixed as well by the way Smile

You ask too much. Shock

I'm beginning to think that you really need to write this as a complete java applet. Good luck with all that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kongknabe
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2005-11-23
Posts: 33
Points: 0

Advanced layout problem...

But i just need to get this sketch to work in IE, and then I'm there... Isn't that possible ?

http://kongknabe.users.whitehat.dk/html/index.html