Greetings,
I have a php site that was working fine as of the start of the year. Then a patch came out for IE8 which caused the CSS I had to malfunction.
Is this a know problem or an isolated issue?
My main problem stems from trying to lock a header into place while allowing the body to be scrollable with:
position: fixed;
overflow: scroll;
top: 135px;
left: 0px;
One of my colleagues has also encountered the same issue as I have.
Any assistance would be greatly appreciated.
Thank you,
Jordan Trulen
.belt
{
position:fixed;
top: 0px;
left:0px;
}
.header-table
{
position:fixed;
top:65px;
width:100%;
}
.header
{
position:fixed;
height:40px;
width:98%;
top:95px;
}
.body
{
position:fixed;
overflow:scroll;
height:74%;
width:99%;
top:135px;
}
You're not giving us any html or a link to see what's up.
But there's a key difference in using position:fixed and position:absolute.
Fixed is used when you don't want the container to scroll with the page, but remain at that position no matter how much you scroll the remaining page. This is good for headers that should always be visible.
Absolute should be used when you just want it to be fixed in relation to the surrounding content.
And you're using overflow:scroll; in a fixed container, which only in extremely rare cases makes sense. I think you problem is with the overflow:scroll; being on the wrong tag. It only has to do with the content of that tag being limited to the width and height (which you haven't even specified!) of the container. If the content overflows that width and height, scrollbars are inserted ON the container.
Why are you using position fixed on the "content" area (i assume thats the "content" area as scroll on a header doesnt make much sense)? Apply position: fixed; to the header instead.
Related
I have made an element sticky but I don't arrive in defining the area in which the elements should stay sticky. The current area was not picked by me but was defined automatically when I applied the position:sticky. Obviously I want full control over the space my sticky elements uses as active area, and I want to pick precisely where the element must stop during the scrolling.
The element uses roughly 50% of it's space where it's supposed to stay sticky.
Here is the url in question: https://www.varamedia.be/website-laten-maken/restaurants/
I get my inspiration from the google marketing platform sales page. Here you see the same kind of behaviour I'm trying to replicate: https://marketingplatform.google.com/about/enterprise/
Probably I'm missing something here... Thanks a lot for any kind of help.
I read through SO but did not find a proper answer to this question, hence the new thread.
Here is the custom CSS I added in my WP child theme style.css file:
.stickyimage{
width:100%;
background:orangered;
height:0px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
body {
direction: ltr;
color: #a1a1a1;
background-color: #FFFFFF;
line-height: 24px;
background-repeat: repeat;
background-attachment: fixed;
overflow-x: visible;
overflow-y: visible;
background-position: 0 0;
letter-spacing: 0.01em;
word-spacing: 0.01em;
}
If you are still struggling with this, I inspected your web page and may have found the problem.
The problem lies in the parent container of #sidebar, its position: relative causes the unexpected behavior.
To fix this you can overwrite its CSS. To target the parent div of #sidebar you can simply do:
div > #sidebar {
position: static;
}
The code above targets div elements which have a #sidebar element as child. You can change its position to anything but absolute, relative, sticky or fixed. More information on CSS positioning here.
The key takeaway here is if you want to dynamically position an element, make sure its parent is statically positioned to avoid unexpected behavior.
HI hope someone can help answer my question its really starting to bug me!
The site is here http://www.calypsopretattoo.com/
When you click on the about tab the information comes up but a margin on the right hand side of the page appears and creates a massive white space?
I've tried editing the css a number of times but nothing. any ideas??
#aboutp
{
width:100%;
}
causes the issue..remove it...:)
Remove width:100%; form #aboutp ID this will work
the parent div miss a position relative.
you use position absolute without using position relative to parent div
div {
height: 900px;
width: 1000px;
overflow: hidden;
margin-right: 0px;
position: relative; /*add to inline style or make a class for this parent div*/
}
I'm really working hard on this thing but I can't figure out how to create this through CSS.
Basically on this website here I'm trying to add images to go outside of the main-content background as you can see on this image below. Where it says "Lattest Lessons" (sorry for the typo) or where it says Receive our newsletter.
Does anybody have a club? I'm lost!
Here is some code:
.main-content {
position:relative;
z-index:100;
padding:1em 0 8.5em 0;
background:#fff;
}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
}
What I would recommend doing is creating a div in the background that looks like this:
HTML:
<div id="backgrounddiv">
</div>
So the HTML is really easy. Don't put anything in those divs. Now for the CSS:
CSS:
#backgrounddiv {
length:100%; //spans length of page
width:100%; //spans width of page
z-index:1; //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
What you're likely looking for is positioning the element correctly. This can either be relative or absolute positioning based on your needs. In either case, ensure that the PARENT container is a positioned element (in your example it is: relative)
See this fiddle:
http://jsfiddle.net/callseng/UUxqG/
The paragraph with class 'move-left' is housed inside of the main-content element, it is relatively positioned and then pushed to the left by 25px.
position:relative;
left: -25px;
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
I would like to have an IFRAME dynamically sized using the following CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
However, no browser seems to support this.
In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?
Update
MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
if you now place height: 100% on the IFRAME it will not size correctly.
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
http://jsfiddle.net/sg3s/j8sbX/
Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.
And this is how we would put an element above it:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
Edit Some extra explanation
We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.
Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.
After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.
Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.
Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0px;
height:100%;
width:100%;
}
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
#myiframe {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
This works for me (Tested on IE9).
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
work fine for me even with IE7.
I would say take a look at this stack overflow question. It might help:
Make Iframe to fit 100% of container's remaining height
You can try to use this:
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';