A website that I'm currently working on works completely fine in regards to the footer, however when viewing the website on the iPad's Safari, the footer is misplaced quite a bit above the bottom of the page and after an hour of trial and error I'm not getting anywhere fast. I was hoping someone had this very issue and can perhaps aid me by explain what you did to resolve the issue.
This is the basic markup of my HTML.
<html>
<body>
<form>
<iframe></iframe> <!-- This is where the different pages are set -->
</form>
<footer>
</footer>
</body>
</html>
Here's the CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:40px; /* Height of the footer */
background:#6d8085;
}
Chrome
iPad
Thanks a lot for the help!
Try position:fixed;
or changing height to min-height on your css declaration
Basically your content is peeking out of your page. To see this add body{background-color:red;}
Related
I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.
I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;
I've got a strange problem with Chrome, Firefox and obviously IE.
I'm building a WordPress theme for my portfolio site/blog and everything has been okay, up until today when I viewed the site in chrome and suddenly there was a large white bar at the bottom of the page, when the page is viewed in Firefox/IE it shows a double sidebar.
here is the page http://iamdannygreen.com/?p=5
Please excuse the ugly header in firefox, havent yet bug fixed all browsers.
Any help would be greatly appreciated.
Thank you
Fix your header and remove overflow-x: hidden from body and it'll work just fine.
By fix your header, I mean, what is this...?
margin-left:-1000px;
padding-left:1000px;
padding-right:1000px;
margin-right:1000px;
If you want the header background to span the width of the window, move it outside of #wrapper and put another wrapper inside for the content (so the content stays centered).
<div id="header">
<div class="wrap">content here</div>
</div>
<div class="wrap" id="content"> body stuff here </div>
.wrap {
width: 500px;
margin: 0 auto;
}
#header {
background-color: #CCC;
}
#content {
background-color:#FFF;
}
DEMO.
I have a strange problem that I can't get my head around:
I have a header div and I would like to display a background image to be repeated horizontally:
The HTML:
<div id="headerwrapper">
<div id="header">
<p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
</div>
</div>
Here is the CSS:
* {
margin:0;
padding:0;
}
#headerwrapper {
margin:0 auto;
width:630px;
}
#header {
width:630px;
background-image:url(../images/headermiddleback.jpg);
background-repeat:repeat-x;
}
When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.
Any idea what I am doing wrong here?
You might want to use repeat-y instead of repeat-x
#header {
width:630px;
background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
background-repeat:repeat-y;
}
Here is your example on jsFiddle, seems to be working.
http://jsfiddle.net/MgvLT/1/
Perhaps you have some other CSS that's getting into the way or maybe your background image has lots of empty space. Please post your example on jsFiddle.
Perhaps you need to clear your browsers cache?
For example, here's a SO Post showing how to do it for Chrome.
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext