I am working on a site and I have to align the bottom of the right box (Affiliation) with the bottom of the right box (Contact Us).
The problem is, I can make it work in Chrome, IE and Mozilla and even Safari on Windows, but NOT when it is Safari on Mac. I don't have Mac but I am using Adobe BrowserLab to see how it is (and the client says it doesn't work :P)
I've tried several codes / CSS including #media but still no luck (if you see the code / layout is changing then it may be me working on it).
Both the markup and CSS is simple and standard one, just need help to make it work in major browsers, Chrome, Firefox, (modern)IE, and Safari on Mac.
Current code:
#bottom-aff{
display:inline;
height: 145px !important;
}
but as I said, I am working on it.
Please help, thanks.
Definitely not the most elegant solution, but it seems to work:
#contentleft {
position: absolute;
top: 0;
bottom: 0;
}
.postarea {
position: absolute;
top: 0;
bottom: 10px;
left: 0;
right: 0;
}
It basically lets the right sidebar decide the height of #content, and then forces the left content to expand to fill the remaining space. Content might get cut off if the left column is taller than the right sidebar.
Please try to use max-height,min-height property.
Related
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I created an image with some links on top of it here. It works as it should in Google Chrome and Firefox but not in Internet Explorer 8. Does anybody know how/whether I could fix that?
For some obscure reason, IE sometimes "doesn't like" completely transparent areas of absolutely positioned links. Setting any explicit background to them other than default transparent none (background: url(about:blank) "hack" usually does the trick) seems to make IE treat them correctly. In IE9+, background:rgba(0,0,0,0) also seems to do the trick (although it should be just the same as transparent per CSS spec).
You might need to specify the z-index of the image to ensure it appears behind the links in IE8.
i dont have your code but i think this may help you. try this class:
.dict {
position: relative;
margin-top: -138px;
float: left;
display: block;
height: 116px;
On the links there should be a z-index value for start, in IE(6-7-8), z-index is only working when the parent element also has a z-index value:
.dict {
display: block;
height: 116px;
position: absolute;
top: 79px;
z-index: 2;
}
<div style="position:relative;width:860px;height:200px;z-index:1;">
I still don't know why it's not working. But the problem is solved (even for ie8) by removing the img from the html and using it as a background with CSS.
The search section in my site www.anahatainternational.org displays correctly across FF, Chrome, and Safari. But in Safari mobile it displays in the middle of the page.
#search_section {
position: absolute;
right: 490px;
top: 10px;
z-index: 5;
}
Thanks.
I would suggest making few changes to the layout of the page so that you could make the #search_section relative to the header.
I have create a skeletal structure for it. http://jsfiddle.net/AACuy/
Also remove the left, top and position:absolute properties.
There are too many classes in the site for me to make changes using firebug and show the result.
I have a DIV that must always stay on bottom/left of the page, something like a footer menu.
div#bottom_menu
{
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 90%;
}
My page has min-height defined and when the user shrinks it below that it gets scroll bars.
The problem is when it happens, in IE8 the div moves up to match the new viewpoint lowest point like it would behave if it were with position: fixed. Worse than that, when you scroll down again the element does not move down (like in position: fixed) but ridiculously stays in the middle of the page. This works perfectly in Firefox, Opera and Chrome. Is that a known IE bug and how to work around it?
Great, I got Tumbleweed badge for super unpopular question.
While waiting someone to help me here I solved it myself (as usual). I did it by putting bottom_menu in a wrapper div pretty similar to the old container, only difference is that is has no overflow: hidden; and is not directly inside the body. That fixed it by some strange reason. Maybe it will help somebody.
Well, this is my first post here and really enjoying the site.
I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.
The URL is http://dev.aipoker.co.uk
I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.
Can anyone help put me out of my misery please?
Thanks, guys and gals.
I've had success with code like this:
footer {
display: block;
position: absolute;
width: 100%;
bottom: 0px;
}
Try this one, it works well on Firefox.
BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)
Cheers.
The minimal changes I can see to do this would be:
move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection
which ends up with something like this in your head:
<style type="text/css">
#body, #footerSection { position: absolute; }
#footerSection { bottom: 0px; }
</style>
<div id="body">
...
<div id="footerSection">
...
</div>
</div>
This is all you need to know about css only sticky footers & sticky navs:
Stick to bottom of page
Position: absolute;
top:auto;
bottom: 0;
Stick to bottom of screen
Position: fixed;
top:auto;
bottom:0;
Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.
You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.