ie7 is at it again - my accordion works in all other browsers but in ie7 it does not push down the footer, but overlaps it and heads way down the page. Any idea what I can do to make it so that when I open one of the accordions the div expands and pushes down the footer?
Thanks in advance!
jeez sorry. heres the link
http://184.172.137.64/~laserlof/temp/services.php
IE is a pain that way. I would suggest having the div display in a block and adding either padding or a margin to the bottom of it. I have this on one of my sites and it pushes the footer down in IE:
div {
display: block;
padding-bottom: 20px;
}
Edit:
Ok remove the height: 100% on the accordian id in your css
You have this in your css somewhere
#accordion {
float:left;
height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
width:950px;
}
If you remove the
height:100%;
it will allow the accordion to expand properly
Related
I had a footer on my site which stayed at the bottom of the visible screen at all times. I added the following piece of CSS to make the screen stay centered when the browser is resized:
CSS
position: absolute;
left: 50%;
transform: translateX(-50%);
min-width:600px;
And now the footer is no longer stuck to the bottom of visible screen. On pages with lots of content, the footer is at the very bottom of the page, but on pages with little content, it is just floating in the center of the page.
Here is the footer CSS:
Footer.css
#footer{
position:fixed;
bottom:0;
left:0;
right:0;
min-width:100%;
width:100%;
height:50px;
opacity:0.8;
}
And here is a before and after Image of what it did and now does look like:
Before & After
Can anyone help fix this?
Thanks!
The problem is caused by the translateX applied on the HTML tag, so try to remove that style from applying on the HTML tag.
In order t solve this try to add a wrapper for your content <div id="main"> and applying your style there #main{}.
Live example here:
https://jsfiddle.net/cwmz9r7u/1/
Generally how you have keep the footer at the bottom on the screen was good but if you move your content including the footer using translateX on HTML, your position is not kept any longer as your user case.
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I have a navigation bar with 40px height and I can't place my other content (just a textarea) below this bar. I tried to set margin-top:40px; to the textarea but it doesn' t work.
Then I used padding-top:40px which is ok for the content inside the textarea but as you will see has a problem with the scrollbar (it gets behind the bar).
Just take a look at this jsFiddle
Add padding-bottom: 40px to the nav, and remove it from the text-area.
use
postion:fixed;
and margin to push contents out
http://jsfiddle.net/4Y63u/3/
As an alternative to #Andrw Ice's answer
You just have to give the textareas margin something to push against.
JSfiddle Demo
This is common...as the advantage is that it doesn't cause any of the elements to moveif the navbar is hidden.
body {
border:1px solid transparent;
}
nav + textarea{
margin-top: 40px;
}
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer