I designed a page and was testing in chrome. After completing it, when I checked in firefox, I noticed few inconsistencies. For example, one thing that surprised me was the popup I made. I was doing like :
$('#login-pop-up').css('top','3200px');
It showed fine in chrome, but in firefox it showed way below. I do not know what does that mean ? When I set a property of top to 3200px, why it doesn't remain the same in firefox when the testing-machine is same.
Does each browser render css differently ? top for firefox won't be same as chrome or opera?
It depends on the relative elements on your document. CSS is a stylesheet and almost all browsers target basic CSS properties same way. For eg: position:absolute with top and left margin specified (with width of the element and height also specified) should return same results on different browsers.
There are some CSS properties which are inbuilt, that the color of the font should be black, there should be a 1px border on input boxes, bla bla..
Source: ME
Related
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
I am not sure what is the problem, but my CSS is not working and I am not able to figure out what is the exact problem as I am new to CSS. I have tried the code on Chrome and Firefox and need someone to explain what is the real issue.
This is a Chrome screenshot and when I am inspecting the element then it highlights the <div> on the browser, but it is not visible.
This screenshot is from Firefox and I am using Firebug, but the interesting thing is all the content, which is not visible on the browser, has a different color (grey) than the content visible on the browser.
Can anyone explain me how to fix this?
The pale display within Firebug indicates that the element is not visible.
According to the Firebug wiki this can have different reasons:
Faintly displayed elements mean they are not visible inside the page. That is e.g. when the CSS style display: none is applied to the element or the element doesn't have any dimensions.
So it looks like the ancestor <div> with id ebBannerDiv_... is hidden (meaning it's offsetWidth and/or offsetHeight DOM property is 0) and therefore all its children are hidden, too.
It may be related to font-size and line-height being set to 0px for that <div>.
For further investigation you can check the dimensions and visibility of that element via the Layout side panel. If you see there that display is set to none or it's width or height are 0, you can then investigate further by checking the style trace for the width, height, display, font-size and line-height properties within the Computed side panel.
I have a single background for my site fixed to the top center. I have some blank s that, on mouseover, should toggle the display of an absolutely positioned with a different background that should line up against the original background.
The functionality all works fine; however, the with the background doesn't always line up. It varies depending on the size of the screen by 1px.
This is happening in Chrome, but not Dreamweaver. I haven't tested other browsers.
Any ideas?
The problem was in fact a subpixel rendering issue. I just changed the element's css from "left: 0px;" to "left: -0.5px;" and everything works fine.
Thanks to Mike Robinson for his comment and link: http://css3wizardry.com/2010/10/05/subpixel-rendering-2/
Dreamweaver's Live view is a joke, don't trust it for anything other than a rough preview, particularly single pixel differences. Test in the major browsers and use a CSS reset or normalize.css before applying your own styling if things like single pixel differences are an issue for you.
CSS Reset - Resets all styling to 0 so all browsers will start with the same baseline styles. The downside is you have to style every element you intend to use, things like lists will no longer have default styling and appear as plain text. http://meyerweb.com/eric/tools/css/reset/
Normalize.css - This is a little more user friendly than a reset, it gives all the base elements the same styling so that all the major browser defaults are covered and rendered the same. http://necolas.github.com/normalize.css/
I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay.
They tend to move down a bit.
Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work.
Check the Algiers button on this link in firefox and you'll see what I mean.
http://kareldc.com/grimonprez/index_js_animatie_clicks.html
Any help = very much appreciated!
The <body> element is still using the browser's default margin and padding values (8px), which may account for the gap you're seeing.
Another thing to note is that while your images have explicit heights, the <div>s surrounding them are actually taller than those images.
For instance, the image you reference is 37px tall. It's surrounded by the #button_8_algiers div.
In Firefox, that element is 43px high, which is 6 pixels taller than the image -- the exact number of pixel whitespace you have.
In chrome, the element is 41px high, which is 4 pixels taller than the image. Chrome is rendering it OK for some reason, though.
I'm not sure if this is a bug in Google Chrome or if this is wanted, but it really annoys me: If I got something like
<body><div style="margin-bottom: 50px;">much content</div></body>
there is no margin shown by Chrome. The div just ends at the bottom browser edge. Literally, any other browser renders this correctly.
Wrap your whole site (or just the area that has the margin you want to capture) in a
<div style="overflow:auto;"></div>
If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.
Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.
This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.
add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.
On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.
Note the first uses pixels and second ems.
The css padding and margin directives work fine in IE, but not in Chrome. Chrome just ignores them, if they are placed in a .css file. To resolve this problem, put all the padding and margin instructions in a separate file within the <STYLE> tags, and then include it with the help of <?php include ('margins.php');?>. or <!--#include virtual="margins.php"--> into all of your pages, because these directives works in Chrome perfectly if they contained on the page.