I was looking recently for a dynamic css sticky footer solution and came across this one:
http://pixelsvsbytes.com/examples/sticky-footers-the-flexible-way/simple.html
it seems to work great in most of the popular newer browsers that i've tried but for some reason chrome doesn't display it in the same way and my guess is that safari acts in the same way.
can anyone point a finger on where the problem might be?
Thank you.
ok I solved it thanks to Explosion Pills comment.
It is most likely a bug if you set the body tag display property to be display: table.
to solve it just place the elements inside another div tag and set it as display: table
Related
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
site in progress: http://www.modernfuture.net/wordpress
my site is finally looking and behaving as expected in Firefox 23!
However if I view the site in Chrome 29, or Safari 5, my social div, logo image, and featured post image are positioned differently than expected.
Any thoughts on what's causing this?
Also this site looks completely different than expected on my Galaxy S3 but I should probably save this question for a different thread. Either way not sure if it has something to do with this cross-browser funkiness or not but thought I should mention it regardless.
Thanks for your help SO!!
Use a CSS reset and it will minimalize the differences between browsers.
Here is an example
The layout seems to be based on a really funky set of relative positioning without a solid base. For instance, the header's pieces could be made into inline-block elements and vertically aligned before fine-tuning with position:relative;
I think I'm going to tear my hair out if I don't figure this out.
http://www.keystoneelderlaw.com/
If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?
I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.
Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.
RESOLVED:
Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".
I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.
In your css add property to #slide
#slide
{
z-index:-999
}
it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp
This is my website http://www.miloads.com/
You can see the problem pretty easily lol. I have been up and down my css file and just can't figure it out!
Here's a link to my css file:
http://www.miloads.com/sites/all/themes/cmsflare/css/cmsflare.css
Also the header is larger than on firefox/ie and if you click on learn more it also acts weirdly on webkit browsers. These are minor issues though.
Any help would be INSANELY appreciated. Thanks.
There is an in-line style set in your mark up which is preventing the inner div from growing. Removing the fixed height will show the inner content correctly. Probably why you cant see it in the CSS also.
<div class="block-inner" style="height: 1059px;">
I have problem with displaying adsense ads in ie7
google adsense adds an iframe to display ads with id google_ads_frame1 with position:absolute the problem is this absolute position makes the ad stay there even if the page size changes (in ajax)
so how can i force it to have position:relative, i tried wrapping it in div and applied every possible property like positions, display, wrapping the whole content in a table, floats, zoom, height & width.
i also tried adding a css below the adsense
<!--[if IE7 ]>
<style type="text/css">
#google_ads_frame1 {
position:relative;
}
</style>
<![endif]-->
can anybody please help me, this thing has made me crazy...
the ads got unpositioned only when the page resized so everytime a function that cause change in size of the page i added one more javascript to it.
var googleAds = document.getElementById('googleAds');
googleAds.style.paddingTop= '1px';
googleAds.style.paddingTop= '0';
it you have better solution please let me know
you should be able to wrap the iframe with a div set with position:relative. are the elements on the page that change size with ajax set with position:absolute or floated as this may cause issues too.
Josh
I've had the same problem and I 'fixed' this by removing a 'background-color' on a wrapping div. Don't ask me why, this has to be the weirdest IE bug ever :)
The wrapping div encompasses almost everything on the page and is fairly unrelated to the table cell that contained the AdSense banner, I have absolutely no idea why this background-color had any effect on the positioning of the banner.
I found this 'solution' by just stripping the page bit by bit. At one point almost all HTML was gone but the problem still persisted. I the removed the CSS file after which the banner behaved normally. Then started stripping the full CSS until I found the line that (seems to) have caused the problem.
Making a proper test case of this is still somewhere on my list but haven't come around to doing that. Also pretty unsure that this is a generic solution. Main advise for now: If you see this problem, remove all CSS and see if that fixes the problem, if it does figure out what part of the CSS seems to be responsible and get rid of that :)