How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.
It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?
Update
It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.
I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.
This is usually solved with a CSS reset but not all of them are complete. On some browsers, the overall body has to have its border set to 0 (i.e. Opera and sometimes IE) to be truly the same. Try the following:
body,html{margin:0;border:0;padding:0;}
Since you don't say which element or give a link I can't really go too far into this. Which elements are you having trouble with?
Its not worth the extra CSS interactions and extra code to add a complete set of "normalizing" padding or margin elements.
Its best to style for what you need by explicitly stating the padding and margin for the elements you are using on your pages.
Paddings are usually 0 everywhere. It are the margins which are the most disbalanced among browsers. Just define your own margins on HTML block elements. A CSS reset is like a sledgehammer. You'd need to redefine more than only margins. But it may be helpful for beginners since they often can't at first glance distinguish between default inline and block elements in HTML. A CSS reset would force them to redefine the one and other "the right way".
Related questions:
Are margin and padding the most disbalanced among browsers?
That said, if you keep seeing inconsistencies among browsers, then it may happen that you're using a doctype which forces the browser into quirksmode. In MSIE the box model bug would then come alive. You'd like to use a strict doctype: <!DOCTYPE html>.
See also:
Activating browser modes with doctype
Related
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
I tried to ignore it initally, but its gotten up to a point where its fairly annoying. I have quite a few forms in my webiste and im applying a css padding of 3px for the submit buttons. They all look fine on Firefox, but none of these styling are applying to my safari browser. Any ideas on how to apply padding for the submit button in safari? Thanks
In general, using a "CSS reset" will do wonders for the consistency of your web style no matter which browsers you're interested in. I have used the Yahoo YUI CSS reset in the past, but there are many others which will also do more or less the same thing. Your paragraphs, font sizes, paddings, margins, and much much more will work much more consistently with a CSS reset.
So what is it? It's a stylesheet that sets most or all of the styles in your document to nil - it makes the document completely vanilla, but more importantly, consistently vanilla. Then, all the styles you add afterwards are clean and consistent. Try it, it's a huge time and effort saver for getting things consistent across browsers.
I came across an 'issue' some time ago that I never did get to the bottom of. Hopefully somebody can shine a light on it. What causes certain browsers (Chrome, Opera and Safari) to render a page differently when I change the DOCTYPE from strict to transitional. I know the general cause of this is quirks mode being triggered, but both the XHTML and CSS for both files validate according to the w3c validator.
I can only assume that these browsers use different internal style sheets for the two DOCTYPEs, but have no real idea why they would do so. I was just hoping somebody could confirm why this happens.
The difference that can be seen is the space between the bottom of the 'header image' and the border of the menu bar. In the aforementioned browsers there is no gap between the two when using a transitional DOCTYPE, but there is when using strict (in IE and FF the gap is present on both). I eventually worked out that adding display:block to the img tag stops the gap appearing in all cases (which was my objective).
transitional example,
strict example
It would appear that by default in 'strict' mode an image is displayed as an inline element. Inline elements are given a space at the bottom to account for descender characters such as g or q. Since an image will not have any descender characters this was considered strange behaviour which led to the introduction of 'almost strict' mode. In 'almost strict' mode all img tags are rendered as display: block rather than inline. Further details can be found here.
The final piece of the puzzle is that all modern browsers render pages with a strict DOCTYPE in 'strict' mode and pages with a transitional DOCTYPE in 'almost strict' mode. More details can be found here.
Many thanks to both Moses and Riley, some of the information they provided helped me find the answer.
I don't truly understand this quirk myself. I do think it has to do with white space. In quirks mode, white space is more forgiving. However, in standards, white space can cause issues.
For instance, in your example, you have a nice beautified source that is easily readable. Removing the white space and line breaks between containers and elements will allow you to remove the gap in some browsers (FF I believe). To fix it in IE, you will need to add line-height:0; to the containing element of the image (in this case the containing anchor or link tag).
You should also note, if you care about IE6 at all, that having each of your <li>'s on their own line will add extra lines between each list item when rendered.
There are only a few differences between Strict and Transitional DOCTYPES, none of which really explain this. (note, I only have FF, IE installed so I can't see the error itself).
As far as what caused this to happen, it could be a case of browser's having different stylesheets for the different rendering modes. However, I think it really just comes down to the fact that the browser takes different approaches to how it renders the page for each mode Strict/Trans/Quirks/Frames. While the only documented difference between Strict and Trans is how to handle inline images inside tables, browsers don't have to adhere to W3C specs and can do whatever they really want, and this tends to cause bugs like the one you apparently just found.
I have been struggling to find out why IE7 is taking more space in padding while other browsers not.
If someone knows how to do that than please do share.
The browsers naturally default to different padding/margin settings. Adding on top of this, browsers treat width differently as well.
You may want to consider resetting element styling so that it's reasonably consistent across browsers. See http://meyerweb.com/eric/tools/css/reset/ for an example.
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.