I am trying to get the following code to work without the 670px hardcoded into the app:
<tr>
<td height="100%">
<div id="navigation" class="navigation">
<jsp:include page="menu.jsp" flush="true"/>
</div>
</td>
<td>
<div style="height:670px; overflow: auto; width:100%;">
<jsp:include page='dynamicContent.jsp' flush="true"/>
</div>
<div>
<center><jsp:include page="footer.jsp" flush="true" /></center>
</div>
</td>
</tr>
It renders fine in IE7 before a window resize - the content pane scrolls with the footer at a fixed height above the page bottom.
However, this stops working (for obvious reasons) when I make the window smaller as I have the HTML of the page set to use overflow:hidden.
Unfortunately, using "height:75%" doesn't seem to be compatible with overflow in IE7.
Does anyone have any idea how I might fake this for IE7 (it needs to be compatible with IE7 cause of project requirements)? Unfortunately this code is pretty embedded so using CSS positioning instead of a table is also probably more work than we will be able to handle before our next release.
Get rid of the overlow: auto, the overlow: hidden, and the fixed height. Instead give your footer a fixed position and add a bottom margin to the body the height of the footer.
body
{
margin-bottom: 100px;
}
.footer
{
position: fixed;
bottom: 0;
height: 90px;
padding-top: 10px;
background-color: #fff;
}
Make sure to set a background for the footer, or else the page content can show through.
Here's a working live example: http://jsfiddle.net/ADpMs/
Related
I have a relatively simple skeleton for a 1-page site.
The header area I'd like to stay put which I accomplished (at least in Chrome and my smartphone's native browser) by setting overflow:hidden on the overall container, then setting overflow:scroll to the scrollable area.
But then I went to double check this on FireFox and basically ran into all sorts of issues. Troubleshooting resulted in a mind-numbing amount of things falling out of place.
<div id="mainBlock">
<div id="tabContent">
<div id="one">
<h1>one</h1>
</div>
<div id="two">
<h1>two</h1>
</div>
<div id="three">
<h1>three</h1>
</div>
<div id="four">
<h1>four</h1>
</div>
</div>
<div id="bottomBlock">
<div>hellow</div>
</div>
</div>
with these styling rules
#mainBlock {
overflow-y: scroll;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-flow: column;
align-content: center;
align-items: center;
}
#tabContent {
height: 100%;
width: 100%;
}
#tabContent > *{
height: 500px;
}
#bottomBlock {
background-color: #444;
height: 24px;
width: 100%;
}
When working, this results in the head area staying put while allowing for the rest of the content to scroll, with bottomBlock appearing at the end of the scrollable area.
However, in firefox, while scrolling is possible bottomBlock is stuck at end of initial viewport. As in if the viewport height is 900px, bottomBlock is seemingly absolute positioned at 901px.
If I move bottomBlock to within tabContent, then it works as it should.
But this issue has given me far too great of a headache to simply let it go.
I'm not sure how to make a fiddle of this, since the scroll bar is the main issue here, and fiddle's render box also has one.
Any help is greatly appreciated!
It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.
Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).
I'm using MadMimi for email promotions. So far, my emails look consistent across all browsers and devices, including iOS on iPad (in the Mail app). There is, however, a weird resizing issue with images on iOS on the iPhone (again, the Mail app). See the CSS and screenshot below. As you can see, the image bursts out of the width of its parent element. Does anyone know why this happens or how to correct it? Thanks.
CSS:
.outer-wrapper {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.inner-wrapper {
width: 100%;
border-radius: 10px;
overflow: hidden;
background-color: white;
border: 1px solid #dddddd;
}
img {
width: 600px;
max-width: 100%;
height: auto;
}
HTML:
<body>
<div class="outer-wrapper">
<div class="browser">Email look weird? Be sure to enable images, or view it on the web here.</div>
<div class="inner-wrapper">
<img src="http://pintsizedtreasures.com/newsletters/header-2.jpg">
<div class="body-wrapper">
[content...]
</div>
</div>
</div>
</body>
I found the answer by trial and error. I had reversed the values for .outer-wrapper max-width and width. The correct CSS should read:
.outer-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
What I think is happening is that when the user is on an iPhone, there is less than 600 pixels in the viewport, so the renderer is falling back to max-width for .outer-wrapper. And since it is set to 100% and not a declared pixel value, the img 100% width is falling back to the viewport width, not its parent width. All other browsers have a viewport larger than 600px, which is a declared pixel value, and the problem doesn't occur (iPad, desktop, etc.). Stupid oversight of mine, apparently.
This is how it's supposed to look.
Since the image states 100% it will take up the whole width. If you want it to be the same width as the letter you should move it inside that div tag. I'm assuming it is not since I can not see the html code.
If you have a specific css section for different devices you can change it there. Or another option is to create a css class just for this ios device and edit the width there so you will not change the rest of the working devices.
If you use the table with nested div approach you should fix the inline style syntax.
<table>
<tr>
<td>
<div style="width:100%; max-width: 600px">
<img src="url/file.jpg" alt="image description" />
</div>
</td>
</tr>
</table>
Use tables `
<table>
<tr>
<td>
<div style="width=100%">
...your content
</div>
</td>
</tr>
</table>
`
Its worked for me.
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
EDIT 2:
There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:
<div id="footer">
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>
I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.
Note: I have tested in Chrome and Firefox.
EDIT:
I have attempted to use the CSS Sticky Footer per instructions on the website.
I assume there is a conflict in my CSS(?) here is a Fiddle of the page.
I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.
Original Question
I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.
Here is a screenshot:
Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.
I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.
How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses jQuery/Javascript)
CODE:
HTML:
<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Ipsum</p>
</div>
</div>
</div>
CSS:
html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
/* Vendor Specific Background Gradients... */
}
#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
border-top: 5px solid #E31836;
padding:1.250em;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .twelvecol {
width: 100%;
float: left;
}
If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.
EDIT:
I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:
* {margin:0;padding:0;}
html, body {height: 100%;}
#content-wrap {min-height: 100%;}
Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.
After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:
#main {overflow:auto;
padding-bottom: 100px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;}
You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!
Majority of the sticky footer codes seem to cause issues with my page. To work around this issue I am using the following code:
HTML
<body>
<div id="page-content">
<header>
<!-- Header Content Goes Here -->
</header>
<!-- Page Content Goes Here -->
<footer>
<!-- Footer Content Goes Here -->
</footer>
</div>
</body>
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
What this does is calculate the height of the page and set a minimum height for the page, thus sticking the footer to the bottom. It works beautifully.
Note: I am using HTML5.
<div class="sectiuni_home_box" style="width: 626px; padding-left: 0px;">
<div class="sectiuni_home_box_t" style="border-left: 0; width: 618px;">
<div class="sectiuni_home_box_v" style=" width: 616px;">
<div align="left" style="width: 1px; border: 0; border-left: 1px solid #c3c3c3; float:left; height: 100%; padding: 0; vertical-align: middle;"></div>
<div id="actiuni" name="actiuni">
<table style="border: 0;"></table>
<div id="lista_actiuni" name="lista_actiuni">
<div id="actiuni_scroll" class="scroll" style="width: 100%; height: 428px; overflow-x: auto; overflow-y: scroll;">
</div>
</div>
</div>
</div>
</div>
This is the layout i'm talking about. the only div that has the float is suppsoed to be to the left of #actiuni and #lista_actiuni. Looks exactly like that in Firefox, but IE puts #lista_actiuni below everything else. It puts the float div to the left, the table to the right of it starting at the top but then when it's time to place #lista_actiuni it drops it all the way down to where the floaty div ends. To make it worse it sometimes corrects itself and places everything nicely, only to be broken again when I switch pages or refresh.
Any ideas on what could be causing it?
I've scrapped together a demonstration using code from the page. Closest thing I can get. The problem is that in the example it looks wrong both in ie and in Firefox but on the actual website it works corectly.
edit: edited the jsfiddle, replaced with a version that works properly in Firefox yet fails in IE.
update: it seems removing the #actiuni_scroll div and the table within it and leaving only the bare data i've managed to make it display properly so my guess is that's where the problem is
update 2: I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.
Completely off the top of my head (without anything visual to play with) I reckon you could try adding overflow:hidden to the .sectiuni_home_box_v div.
Floats need to be cleared, it does not look like you are doing this.
HTML
<div class="sectiuni_home_box_v">
<!-- IE6 has problems with more than 1 css rule & IE7 does not recognise psudeo's SO -->
<br class=clearfix />
</div>
CSS
.clearfix{
clear:both;
visibility: hidden;
height:0;
*zoom:1;
}
NOTE: IE7 will apply double margin to some elements and in some cases
double padding, you can do a quick fix with a css rule {
*display:inline;*zoom:1; }
I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.