The #footerdetails div of my page is absolutely positioned and anchored to the bottom. (i know, IE problem iminent)
anyway...
http://talga.sanscode.com/blog
Take a look at the footer in IE 7 (ie 8 compat). has a number all the way on the right hand side of the screen.
In every other browser it's on the left where it should be.
Any ideas how to fix this?
Jason
#jason;
i saw it in IE may you have to define width like width:200px; to your #footerdetails div because in IE7 it's take width 100% of the screen.
css
#footerdetails {
color: #FFFFFF;
display: block;
height: 100px;
left: 0;
position:fixed;
text-align: right;
top: 0;
width: 200px;
z-index: 100;
}
IE 7 doesn't do position:fixed, can you not make it absolute to the sidebar?
Try this:
HTML:
<div id="sidebarmenu_container">
<ul id="sidebarmenu"/>
<div id="footerdetails"/>
</div>
CSS:
#sidebarmenu_container {
position: relative;
}
#footerdetails {
position: absolute; //instead of position: fixed;
}
Related
EDIT/UPDATE: 7th June 2019
I've determined this is a bug in Safari, as the CSS works perfectly in all other browser. For anyone who finds this, if you're creating a sliding menu (which slides offscreen to the right of the viewport), as of Safari 12.1.1, adding overflow-x to the body tag will not work (it does work on Chrome, Firefox etc) - this means that when your menu div is positioned offscreen to the right, the user can scroll horizontally and see the menu.
I've found a (sort of) workaround is to give the parent container of the menu dive a position:fixed attribute - this obviously only works if you intend for your header to be fixed.
Original Question
I'm building a simple header with a menu that slides from right to left when the menu button is pressed. However, when I position the menu div offscreen (left: 100%), on Safari, I can scroll horizontally right to see the menu div. (No scroll bars appear, but I can scroll right via the Mouse)
If I set overflow-x:hidden on the header, then it hides the offscreen div, but also won't show it if you set the left:0 (ie. overflow-x seems to be hiding x and y directions).
Even more perplexing, if I change the header to position:fixed, then it works and you can't scroll right to see the offscreen menu div.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
width: 100%;
padding: 10px;
background: #CCC;
position: relative;
}
.slideMenu {
position: absolute;
top: 100%;
left: 100%;
width: 100%;
padding: 10px;
background: #666;
}
<div class="header">
Header ---> Scroll to Right
<div class="slideMenu">
Menu is visible offscreen- :(
</div>
</div>
Here's an example of the problem: https://jsfiddle.net/ar7qyfgt/
I ran into a similar issue with Safari. Solution that appears to be working is to apply overflow-x: hidden; to the html AND body tags.
Adding to body resolved issue in all browsers expect Safari. Applying it to both seems to do the trick with Safari while still supporting the other browsers.
I have the same issue in my Safari(Version 12.1.1) when I set my div to position: absolute and right: -15rem;
To fix it, I added a to include all elements within and have the CSS like this:
.wrapper {
position: relative;
overflow-x: hidden;
}
Hope this help.
What you currently have works, you just need to set overflow-x:hidden on the body instead of the .header
What are you trying to accomplish? This?:
JSFiddle: (https://jsfiddle.net/pzeqfb51/)
HTML:
<div class="header">
Header ---> Scroll to Right
<div class="slideMenu">
Menu is visible offscreen- :(
</div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
width: 100%;
padding: 10px;
background: #CCC;
position: relative;
}
.slideMenu {
position: absolute;
top: 100%;
left: 100%;
width: 100%;
padding: 10px;
background: #666;
}
div {
display:inline-block;
}
I've encountered a strange issue with text positioning in Safari for buttons on a site I've been working on.
1. Is it possible to keep the text center aligned on the buttons while using left: ...; ? Would this fix the issue?
2. Would placing span in a relatively placed div .text-pos with a sub-class .text-pos span ... position: absolute; be bad form? Would it fix the issue?
Code:
.button a span {
z-index: 2;
width: 100%;
position: absolute;
top: 12%;
color: #000000;
text-align: center;
font-size: 4vmin;
}
.button a img {
height: 100%;
display: flex;
}
<div class="button antiques">
<a href="/landing/gallery/antiques/antiques.html">
<img alt="antiques" src="/assets/img_style/plank.png">
<span>ANTIQUES</span>
</a>
</div>
Did not include left: ...; as the text needs to be center aligned on the button.
Result(too new to post images):
http://i.imgur.com/3E55EMH.png
My first thought was that the issue was with vmin, but:
1- Text scales appropriately with browser adjustments.
2- Text on the hover(upper left image frame) also uses vmin, but is
appropriately positioned.
In reference to point two, the text is placed in a relatively positioned div container to force aspect ratio like so:
<div id="wide-container"> /* position: relative; */
<div id="content"> /* position: absolute; */
...
</div>
</div>
I don't have ready access to an OSX machine so any input would be appreciated!
Open minded to any other approaches you may have to offer. Thank you (:
SOLVED
.button {
height: 6vmin;
margin-top:1.5vmin;
margin-bottom:1.5vmin;
position: relative;
}
.button a {
height: 100%;
}
.button:before a {
content: "";
display: block;
}
.button a span {
z-index: 2;
position: absolute;
top: 9%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
width: 100%;
height: 100%;
color: #000000;
font-size: 4vmin;
}
Found the solution by setting the button to be relatively positioned while leaving the text position as absolute. Solution outlined in more detail in the edited question.
The problem came from my misunderstanding of how browsers treat the box model differently. Safari seemed to be taking the contained elements and floating them left individually since the the image had no positioning attributes.
This solution displays more or less the same on Chrome, Firefox, and Safari.
I have the following html...
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
And following css...
.header{
position: fixed;
background-color: #f00;
height: 100px;
}
.main{
background-color: #ff0;
height: 700px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;}
But why the header and footer is not fixed, anything I did wrong? I want only "main" to be scrollable and "header" and "footer" to be at a fixed position. How to do?
+-------------------------------------+
| header | -> at fixed position (top of window)
+-------------------------------------+
| main |
| |
| | -> scrollable as its contents
| | scroll bar is window scroll bar not of main
| |
| |
+-------------------------------------+
| footer | -> at fixed position (bottom of window)
+-------------------------------------+
See this fiddle
My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...
It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.
(It's a popup that goes from scale(0) to scale(1))
if a parent container contains transform this could happen. try commenting them
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
you need to give width explicitly to header and footer
width: 100%;
Working fiddle
If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.
Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...
Working jsFiddle Demo
When you are working with fixed or absolute values,
it's good idea to set top or bottom and left or right (or combination of them) properties.
Also don't set the height of main element (let browser set the height of it with setting top and bottom properties).
.header{
position: fixed;
background-color: #f00;
height: 100px;
top: 0;
left: 0;
right: 0;
}
.main{
background-color: #ff0;
position: fixed;
bottom: 120px;
left: 0;
right: 0;
top: 100px;
overflow: auto;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
I had a similar problem caused by the addition of a CSS value for perspective in the body CSS
body { perspective: 1200px; }
Killed
#mainNav { position: fixed; }
As others pointed out, certain CSS properties on a parent element will prevent position: fixed from working. In my case it was backdrop-filter.
This might be an old topic but in my case it was the layout value of css contain property of the parent element that was causing the issue. I am using a framework for hybrid mobile that use this contain property in most of their component.
For example:
.parentEl {
contain: size style layout;
}
.parentEl .childEl {
position: fixed;
top: 0;
left: 0;
}
Just remove the layout value of contain property and the fixed content should work!
.parentEl {
contain: size style;
}
Another cause could be a parent container that contains the CSS animation property. That's what it was for me.
For anyone having this issue primarily with navbars, not sticking to the top, I found that if any element in the parent container of the positon: fixed; element has a width exceeding 100% - so creating horizontal scrollbars - is the issue.
To solve it set the 'parent element' to have overflow-x: hidden;
You forgot to add the width of the two divs.
.header {
position: fixed;
top:0;
background-color: #f00;
height: 100px; width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px; width:100%;
}
demo
You didn't add any width or content to the elements. Also you should set padding top and bottom to your main element so the content is not hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content.
http://jsfiddle.net/BrmGr/12/
.header{
position: fixed;
background-color: #f00;
height: 100px;
width:100%;
}
.main{
background-color: #ff0;
padding-top: 100px;
padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
width:100%;}
You have no width set and there is not content in the divs is one issue. The other is that the way html works... when all three of fixed, is that the hierarchy goes from bottom to top... so the content is on top of the header since they are both fixed... so in this case you need to declare a z-index on the header... but I wouldn't do that... leave that one relative so it can scroll normally.
Go mobile first on this... FIDDLE HERE
HTML
<header class="global-header">HEADER</header>
<section class="main-content">CONTENT</section>
<footer class="global-footer">FOOTER</footer>
CSS
html, body {
padding: 0; margin: 0;
height: 100%;
}
.global-header {
width: 100%;
float: left;
min-height: 5em;
background-color: red;
}
.main-content {
width: 100%;
float: left;
height: 50em;
background-color: yellow;
}
.global-footer {
width: 100%;
float: left;
min-height: 5em;
background-color: lightblue;
}
#media (min-width: 30em) {
.global-header {
position: fixed;
top: 0;
left: 0;
}
.main-content {
height: 100%;
margin-top: 5em; /* to offset header */
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
}
} /* ================== */
I had the same issue, my parent was set to transform-style: preserve-3d; removing it did the trick for me.
We'll never convince people to leave IE6 if we keep striving to deliver quality websites to those users.
Only IE7+ understood "position: fixed".
https://developer.mozilla.org/en-US/docs/Web/CSS/position
So you're out of luck for IE6. To get the footer semi-sticky try this:
.main {
min-height: 100%;
margin-bottom: -60px;
}
.footer {
height: 60px;
}
You could also use an iFrame maybe.
This will keep the footer from 'lifting off' from the bottom of the page. If you have more than one page of content then it will push down out of site.
On a philosophical note, I'd rather point IE6 users to http://browsehappy.com/ and spend the time I save hacking for IE6 on something else.
You can use it in the same way because if the parent container has the transform effect, you could create a child where it occupies 100% of the parent container and add a position realtive and then the container that you want to add the position fixed and it works without problems.
might be an answer for some cases https://stackoverflow.com/a/75284271/7874122
TLDR position: fixed is attached to containing element, by which element is positioned. if containing block is different than viewport dimensions, fixed element will be placed according to containing block.
I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
Why?
What are my options for workarounds?
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML:
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS:
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
I once fixed this issue by:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Make sure your page is declared as HTML5
<!DOCTYPE html>
The problem with the vertical aling in IE<9 should be solved with this:
.bg {
text-align: center;
}
.a {
text-align: left;
}
But I don't know what's going wrong with the absolute position
I am trying to get a page layout like the following
Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page
This works great in all browsers except ie6 and ie7.
Can any one help me how to fix this? I am a server side developer and new to front end. I did some searching but could not found the solution.
Thanks for you help in advance.
Centering vertically with CSS can be a pain. Check out Dead Centre. It requires an extra container 'horizon' to know where the vertical center is, and unfortunately you must know the dimensions of the content you want centered so that you can offset it.
Goes something like this...
body {
margin: 0px
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
<body>
<div id="horizon">
<div id="content">
content you want centered
</div>
</div>
</body>
.centered {
background-color: red;
width:50px;
height:50px;
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<div class="centered">
This no longer works well on Chrome 38. Try loading the dead center site above and resizing the browser - see the distortion in the text.