I am writing a very simple HTML code which is listed below. Written in notepad and opening in IE-8 and Firefox (OS: Window Vista).
<html>
<body>
<table border="1"><tr><td>test</td></tr></table>
</body>
</html>
There is nothing special in the above code, It is creating some space from top left corner.
Which can be easily removed by using the following code
<body style="margin:0; padding:0">
Now i have find out the default margin and padding, which is 4 for Firefox and different for IE-8.
<body style="margin:4; padding:4">
I have some question on this scenario.
Why this value is 4?
From where this value is coming, is it saved somewhere?
Can we modify (configurable) this default value?
How these values are different for browsers?
Thanks.
First of all, it's probably 4px and not 4. Second, that's just the way the browser vendor decided should be the default.
It is saved in the default browser stylesheets.
You can, but you shouldn't. It differs with each browser. Google it! How do I change default stylesheet on <insert browser here>?
There probably are slight differences, you should be able to tell... by looking at the default stylesheets :)
That difference is one of the main reasons we as designers use a CSS reset, to normalize all of the CSS awkwardness that follows different browser implementations.
Browsers have built-in "sane defaults" for the CSS of most HTML elements - this just prevents your page looking completely unreadable if you have pure HTML without CSS, but they are of course intended to be overridden by your own CSS.
The default browser styles are typically referred to as a "User Agent Style Sheet" - the following site is a good reference of the various peculiar UA sheets IE has had over the years and also provides ones for other browsers at the bottom:
http://www.iecss.com/
One method a lot of people use to "normalise" the defaults so you have the same starting point in all browsers is a "CSS Reset" - this is just a snippet of CSS that you place before your own CSS that sets all of the UA styles to the same thing. This is a well known one:
http://necolas.github.com/normalize.css/
Try this
body{
line-height: 0
}
Add this on top of your stylesheet
*{margin:0px;padding:0px;}
This eliminated all differences in padding and margin across browsers.
Related
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
UPDATE [4th May, 2015] : It seems the latest versions of Chrome (42.*) have fixed it.
It looks like an embarrassingly simple problem, but I don't know the solution to it. One of the smallest samples which reproduces this is the following HTML code:
<html><body><input type="button" value="button1"/><input type="text"><input type="button" value="button2"/></body></html>
Please note that there is no newline or a whitespace character used anywhere in the above (except to separate the attributes)
In Firefox, it looks like this:
But like this in Chrome:
Notice the extra whitespace Chrome decides to add by itself. I've tried everything I could, but haven't been able to remove this as I need no space between these elements (or may be a minimalistic value just like FF has).
Any help on how can we do that?
Thanks ...
One option would be to reset the styles in your CSS.
You can add this to your default style sheet.
* {
padding: 0;
margin: 0;
}
If you need a little more information on resets there is a good run down here : http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
Try resetting your CSS, http://www.cssreset.com/.
Some DOM elements have browser specific layout values if you don't reset them.
I've noticed adding a new line in the source often adds whitespace to select tags. This is VERY bothersome if you like readable source. Sure, you don't need a new line in the source, but it shouldn't be this way. It's a bug in Chrome.
I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.
For some reason, I'm having a problem with these two pages on my website that should have some elements look the same, but for some reason, they look a little bit different.
I have some included asp files which are linked to the same CSS files, so that is why I believe they should be the same. The spacing looks off on the about.asp page though. The index.asp page looks great, however.
Here are the two pages:
http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp
Any ideas as to why these are kind of screwy?
There is extra spacing on the about page, because the spacing gets removed by a style in SlideShow.css on the index page:
* {
margin:0;
padding:0;
}
The above looks like a simplistic implementation of a reset.css style.
Looking at those pages with Chrome's devtools (or Firebug in Firefox) will show that the SlideShow.css in index.asp has a * style in it (that is, every element) to set padding to 0, which makes the padding and margin of your body (and everything else) zero.
This is very bad practice on the part of whoever made SlideShow.css, and is what is mostly screwing up your layout. An css include that is intended to be used modularly (as with a drop-in slideshow) should never use a * style block, because that affects every element in the page. It should have all of its style blocks prefixed with some class to limit its effects to the slideshow module.
Looking at your SlideShow.css, it looks like you may have pasted in some CSS from elsewhere, which is where it may have been introduced. You also shouldn't include <style> tags in external CSS files.
If you remove the SlideShow.css include, your pages should look much more similar. From there, you can edit SlideShow.css to remove the * style and add the include back in, making sure it doesn't screw everything up again, but still lets your slideshow do its thing, or just find a different slideshow module.
I've noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I'm doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.
The site is
http://w3box.com/mat
This looks fine in FF3.0 as far as I can tell. Haven't seen it in FF2 yet, or IE6.
Why does this happen? Is it because I've got floated DIVs with specified margins?
Are there some things I should avoid or should have done differently?
Edit: So it looks like my tags was the source of the screwup.
I'd placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.
Also, some stuff happened when I used XHTML Strict instead :)
Thanx everyone! I'll try to fix this on my own :)
I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.
Marging are not bad, but IE has some troubles with the margins of float elements. While there are many recipes for fixing, I believe that in your case you may use absolute positioning instead of float+margins (you don't really need "float" behavior when the image is wrapped by text)
There is nothing wrong with using margins.
Old versions of IE have one bug and that alone isn't nearly enough of a reason to avoid using one of the core layout features of CSS. Specifically, this bug occurs in IE when you float an object and give it a margin in the same direction, e.g.:
.whatever {
float: right;
margin-right: 5px;
}
You can deal with this a number of ways, depending on your layout. One way would be to add another div around your box and use padding on that to replicate the same space a margin would.
I'd suggest using some form of CSS Framework (Blueprint CSS, 960 Grid, etc) as they have a number of margin, padding and other common HTML element resets. You should find cross browser development is easier using a framework.
Different browsers have different ways to handle box model. Most of the time the sites which are displayed well in FF, Chrome or IE8 can have problems in IE6 and 7.
To workaround this problem you can try to set all the default margin and padding to 0 (and adjust them as needed on specific elements):
*{ margin:0px; padding: 0px; } //Simplest rule...
To see more on CSS reset you can look at: http://meyerweb.com/eric/tools/css/reset/
And then apply different styles for IE7 and 6 with conditional comments.
As mentioned on other answers it's to do with IE's interpretation of the box model.
Whenever anything is floated IE tends to double the margins specified. This can be fixed with an extra stylesheet for IE using conditional comments.
See also: http://www.positioniseverything.net/explorer/doubled-margin.html