I run a site using a liquid tri-column layout with a header. The layout runs nicely for more than a decade with all browsers I ever dared to try. It is based on absolute positioning in CSS. This page provides an example of the actual site.
Watching the page from my tablet I found that the right column overlaps the center matter. Further investigation using Firebug showed that once the center content reaches 360px width, the right margin of the div shrinks. Why is that? Since Firefox and Android render the same, I guess that this is something, which is actually supposed to be.
However, I tried to make virtue out of necessity and experimented setting min-width for body and content and made the body scroll overflow. The body actually scrolls, but the right column is positioned on the right edge of the viewport instead of the body element (Firefox). Is this intentional CSS standard?
Any ideas how to solve the presentation on small displays?
Thanks for your efforts,
– lars.
I pondered a while whether I should revoke the question or provide this self-answer. I decided for the self-answer since I wished some of the answers in related had been presented when I wrote the question.
First the 360px limit apparently is my own stupidity. There is a comment form, which refuses to shrink. It scrolled out of my view.
The issue of the wiered positioning had been solved by adding position:relative; to the body. The reason is explained in this question.
The overflow setting I used during experimenting is not necessary, since the default behaviour scrolls already. But using any overflow directive wrecks IE8.
So thanks a lot, the pool of answers finally had it all.
Related
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.