I have Firefox and Chrome lined up side by side. I have an h1 element with no vertical padding or no vertical margin on a text item that uses a Web Font. I am getting a one pixel difference. If I look at the Computed info in firefox and also in chrome, both are computed at 56px, but visually there is some padding on both of which firefox is 1 pixel extra. Any ideas on how to fix this? Unable to upload a photo.
You would have to provide us with some image or something so we can better assist you.
But try using Normalize.css
http://necolas.github.io/normalize.css/
Well, if you really want to get into it, there's a host of direct FF only CSS calls like you use to target IE https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
There's one for margin and padding that may work.
<style>
* {margin: 0;padding: 0}
body,html {height: 100%;width: 100%}
</style>
add this to your style and all should go well
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
My website that I'm currently working on have a problem in Firefox 7. A margin pushes the gradient in #wrapper up from the bottom and ruins the flow. I've reset the margin to 0 on body and html already and can't seem to find anything to explain this. Firebug tells me nothing of value on this case.
My code is here and you can look at the website yourself here
Just set the body height to 100%. This might help.
And also add background-attachment:fixed; to avoid the background scrolling just in case your page scrolling.
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.
I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I want it in all browsers (Chrome, Firefox, Safari) except for Internet Explorer 7 where the layout of the bottom row of images or image is totally messed up - either too high or too much to the right. I have no idea why this is happening, I am a beginner and have tried all I can think of, if anyone can help that would be much appreciated.
The site is here: http://www.mediadarling.co.uk/clients/lenistudios/
Thanks in advance!
There’s a couple of bits in your CSS that I don’t quite understand:
#movers-row {
...
margin: -120px 0 0 120px;
Why the negative top margin? This seems to be what’s pulling the images up too far in IE 7. I don’t really understand why it’s not in other browsers; something to do with the floats involved I guess.
#footer {
...
margin-top: -130px;
Is this related to the other negative top margin?
Anyhoo, I think you can fix your issue in IE 7 by:
Removing those two negative top margins
Adding margin-top: 10px; to #imagerow just in IE 7 (and possibly IE 6) (the padding top doesn’t work with the floats for some mysterious IE reason)
See here for example code: http://www.pauldwaite.co.uk/test-pages/5220698/
You’ve also got a couple of validation errors in your HTML. I don’t think they’re causing your issue, but I fixed them first, because when you’re trying to track down an IE bug you really don’t want validation errors in there. Here’s the validation of the page.
After: <div id="rotxt">Roll over images to see larger versions</div>
Place: <p class="clear"><br /></p>
The .clear contains the CSS: clear: both;
you can use conditional statements for IE, here's an example:
<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->
This is placed at the <head> and assumes that you have an extra css file with the IE corrections.
P.S. you need to add your IE specific CSS rules into the IE CSS file, that way it will work in IE and most browsers...
In my example, I used the "if IE 7", means if it is IE version 7, but you could use combinations and other versions.
EDIT: surround the Dear guest, text, image and the div #rotxt with another div and make sure it actually surrounds it with a simple rule:
.surround {height: auto; overflow: hidden;}
this is cross-browser, no need for the conditional CSS.
EDIT 2:
Ok, the problem here is in several places...
You're floating the image to the right, ok
I suggest surrounding the title + text + caption with a div with a float left.
Then surround both the image's div and the new div with an aditional div. This one with a height: auto and overflow: hidden.
Then remove the float of the images main div, and remove the top margin;
Finally, it would be best to add the orange rectangle as an element that comes after the images block (this way it's guaranteed that the social div comes in the right place).
So, my suggestion is something like this (sorry for not real tags):
[new surrounding div]
[main image div]
image
[/main image div]
[surrounding div]
title
text
caption
[/surrounding div]
[/new surrounding div]
[images div]
images
[/images div]
[sepatator div] (optional)
[/sepatator div]
[social div]
[/social div]
I'm trying to put an x-repeat "grid" of images by using background-image in CSS, then using the id in a DIV tag. My intention is to put a sort of "panel", then always extends to the very top of the page, and loops with repeat-x. It works just fine without a DOCTYPE, but when I put the clean in the code, it pushes the image in the tag downwards, as if there's a margin on the top of the page of about 15 px or so. I tried top-margin, z-index, with no success.
Excuse me if I'm asking a silly question, but I'm sort of new.
Thanks,
-Jacob
It's a bit unclear from your description exactly which method you use for putting your panel at the top of your page, but it seems to me that your panel div is placed at the very top of the body element in yoor HTML code like this:
<body>
<div id="yourid">
[...]
</div>
and if that is the case, you're probably suffering from the default settings for margin and/or padding for the body and/or html elements in your browser (and how they might differ between browser modes - ie. with or without the doctype - in some browsers).
The default settings for these vary between browsers - and a common way to work around that problem is to reset them - for example like this:
html,body {margin:0; padding:0}
If this doesn't help you, please supply some more details (ie. code or a link to the affected page)
A doctype is required of all modern web pages. This sounds like you are fighting the box model when you don't have one. Without a doctype, you are in quirks mode, and all hell breaks loose.
If a browser is operating in standards-mode (which you want, and which is triggered by having a good doctype), then the <body> element has some margin or padding on it. Use body { margin:0; padding:0; } to clear it out and have your elements fill the entire screen.