The situation: So my website is divided into sections first div inside the body is just a main container then inside of that main container there's 3 div elements first is the header second is the body or content and third is the footer.
The problem: On some browsers or more specifically on any browser on Iphone mobiles or ios. my footer is showing on top of the middle of the body div (content section) but on any other android phone it's looking just fine or on the normal browser..
screenshots:
(normal) on any android device:-
screenshot on any android phone
(problem) on any IOS device:-
screenshot on any ios phone
shared.css file that contains all the css for these pages:-
https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css
link for the page that has the problem:-
https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html
UPDATE:
I'm only using the flex on #clouds_body so I can be able to fit the body right in-between the header and footer and I want the footer to stuck on the bottom even if the body wasn't taking enough space.
please help, thanks in advance.
This is a Safari issue, and you can solve it by removing display: flex on #clouds_body. If you're not using flex-direction: row, it's kind of useless to use flex on it anyways.
I also removed the flex while watching the page on Mac Firefox, and nothing changed.
EDIT
Based on the comment I got.
Change height: 100% to min-height: 100vh in #clouds_body.
This will, however, open up for other issues Safari have with your page, but that's beyond your original question.
html code:
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
css code:
#container{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
This will work! This will arrange div's one below the other!
Related
I'm in the process of building a mobile website that is targeted towards developing countries, which means that most of the mobile phones will be older feature phones using pretty basic browsers with limited css support and typically no javascript.
One of things I'm trying to achieve is a fixed footer solution that would be supported on older browsers.
Via this site I found a link to this solution Ryan Fait Sticky Footer which seemed good in theory but which I cannot get to work.
Here is my jsfiddle which is my understanding of how the code should be implemented. Would appreciate it if you could have a look and let me know what (if anything) I'm doing wrong
Jsfiddle
Here is my partial code;
HTML Code
<body>
<div class="wrapper">
<p>Text</p>
<div class="push"></div>
<div class="footer">This is a test</div>
</body>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -155px;}
.footer, .push {height: 155px;}
You've not closed the wrapper DIV. Close this before the footer. See the new fiddle.
http://jsfiddle.net/sF4EB/3/
Be aware, this won't stick the footer to the bottom of the window at all times (you need to use position: fixed for that), just at the bottom of the window if the page isn't tall enough to push it there, otherwise it will remain at the bottom of the content.
I'm having an issue when using a negative top margin. Firefox and IE are rendering it differently from Chrome.
I have a layout similar to the following.
Here is the basic structure of my html
<div class="blue">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
<div class="red">
<div class="column">Column</div>
<div class="column">Column</div>
</div>
And here is an example image of what I'm trying to do.
The blue div is a row of columns with a 1px right border. The red div has the slanted image for the background image (transparent png). I'm using a negative margin on the red div to pull it up and cover the very bottom edge of the blue div so that the borders in the blue div touch the slanted area in the red div. (purple area)
My issue is that in Firefox and IE the position of the content in the red div is being pushed down by the amount of negative top margin that I apply to it. In Chrome this issue doesn't exist. For example. If I apply margin-top: -70px to the red div it will push the content down 70px in IE/FF as well.
I'm not sure what is going on here. Any help would be appreciated.
I'm not sure what it could be because you didn't post your CSS but maybe you could some Reset CSS to reset the default CSS settings. Sometimes you need this because all browsers have different default CSS settings.
Different browsers do support different code. Try writing code that is only called if it is in that browser. Example:
/* Configure the animation for Firefox */
-moz-animation-duration:6s;
-moz-animation-name:spin;
-moz-animation-timing-function:linear;
/* Configure it for Chrome and Safari */
-webkit-animation-duration:6s;
-webkit-animation-name:spin;
-webkit-animation-timing-function:linear;
This is detecting different browsers and saying different things for each. I used this example because it shows that different code can be used for different browsers and sometimes it is needed. This is on one of my own web apps.
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck