I have a div fix on bottom of the page it is working fine in IE7, IE8, FF and chrome. But in IE6 it is not fixing itself on the bottom how can I fix that.
Suggestions:
use a CSS "reset"
use a CSS framework
use conditional styles (browser dependent) to work around such problems
use JavaScript only as a very last resort
More information:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
See also the three links at the end of the Reset section.
IE6 doesn't support position: fixed natively. There are some workarounds:
http://www.howtocreate.co.uk/fixedPosition.html
http://tagsoup.com/cookbook/css/fixed/
Related
I am working on a wordpress project. The issue is though the container where the content area and sidebar along with the top logo positions seems perfect in chrome with 30px margin-top.
But in firefox the margin seems to go down more, though the margin value is same. Any recommendation for FF compatibility with css would be great...
Hard to see without code, but you may have some problems with the two browsers' base CSS styles being different. You could try using a thing like normalize.css as a way of normalising these styles before your own stylesheet.
You could also use the web inspector/Firebug in firefox to see what surrounding elements have an effect on the positioning.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
i am working a a WP page and having some difficulties with what appears to be the margin on the HTML element.
it displays as expected in IE8, FF, Chrome, Mobile Safari and Opera.
this is the page in question:
http://www.mmmf.net/2012/
i am using basically the same CSS as a site also done with WP which is:
http://www.mmmf.net/2011/
the only difference is a newer version of WP.
i placed a purple border on HTML for reference. i believe it's a 28px difference.
any suggestions on this would be appreciated.
thanks.
I always add a yui css reset to avoid x-browser spacing issues. Do some research on it, spend the time to re-do your css with the css reset in place (place it above all other css).
http://developer.yahoo.com/yui/reset/
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
Could someone please work out what's happening here, and how I could fix it? I'm testing this page in IE6, IE7, FF and Chrome, and it works in everything but IE6. In that, there is a small gap between the edge of the chickens picture and the div it's in.
I hate IE6.
This may be the "three pixel jog" bug that shows in IE6 but not later versions of IE.
See http://www.positioniseverything.net/explorer/threepxtest.html for example.
Using a CSS Reset can help!
Lots of inconsistencies between browsers can be circumvented by using a CSS reset
I use the Meyer Reset method.
However, another option is the Yahoo YUI method.