margin-top behavior differs between browsers - html

We have a richfaces table (rich-table style class) and we would like to have some space on top of the table. We tried using margin-top on the above style class with values in px and in %age. But the resultant behavior was different in both the browsers. FF produces more space compared to Chrome. How do we get around this issue and be browser agnostic?

You may want to consider using a reset stylesheet.
A reset stylesheet will reduce browser inconsistencies like default line heights, margins and font sizes of headings.
You may also want to check the following articles for further reading on the topic:
CSS Tip #1: Resetting Your Styles with CSS Reset
Mayerweb: Reset Reasoning
Stack Overflow: Is it ok to use a css reset stylesheet?
Stack Overflow: Best css reset

Related

h1 text display differently on different browsers

hello am having different h1 sizes on different browsers, how can i fix this please
h1 text on chrome h1 text on chrome
h1 text on firefox
h1 text on firefox
You will need to use CSS to set the font-size so all browsers will use that value instead of their own defaults.
h1 {
font-size: 2rem;
}
There may be other properties that you need to reset to get consistent, cross-browser results.
Many sites will employ a third party reset CSS like normalize.css or write their own defaults.
h1 tag is just pure html, so it is just semantic. HTML, as semantic, doesn't apply any styling. Browsers will always try to render "h" tags in a way that you can understand which ones are the most relevant, comparing it to the others. H1 will be bigger than h2 in every browser, but that doesn't mean they will appear exactly with the same sizes.
You need to apply your CSS to achieve the behaviour you want. Just keep in mind that html is only semantic, not styles :) usually we can insert a normalize or reset CSS code to our stylesheets, so that it resets browsers called user agent stylesheets. try to use a font-size property with the correct value on it. Good work!

What is the default margin value of <p> tag? [duplicate]

This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 9 years ago.
I noticed that the <p> tag has a default margin value and it seems it's somehow related to its content's font-size value.
Is there any reference that I can check out the detailed rules for this?
http://jsfiddle.net/z45R9/ Please take a look at my code here.
Thanks,
Different Browsers are build upon different render engines.
Chrome and Safari are using the WebKit-render engine whereas Firefox uses Gecko.
The different engines are different not just because the software is different but also because they have different settings. Thats why most webpages look slightly different in differnt browsers.
The Answer:
In Chrome (webkit) the margin-top (above the element) and margin-bottom (below the element) of the <p> tag is 1em.
In Firefox (Gecko) all margins are 0 except the margin-bottom wich is 1em again.
The way to get rid of this problem is to make a CSS-reset.
The easyest to use would be the one by Meyerweb.
The default value of margin depends on the browser. For example, the CSS 2.1 especification define this default stylesheet for HTML 4. But some browsers can use this, and others not. Its not a rule, just a reference.
There are many different browsers, and they all can have their own unique way to do things. For that reason, most designers put a css reset in their css stylesheet.
http://meyerweb.com/eric/tools/css/reset/
By putting that reset in your file, it will enable you to better control how your website looks on all browsers. Instead of worrying about what each browsers default is for each thing.

CSS reset interferes with a third party HTML/CSS component

I use Eric Meyer’s CSS reset and jqGrid (jQuery Grid plugin).
The reset interferes with the CSS styling of the grid, and the grid looks unacceptable.
What is the common way to solve this sort of problem (a CSS reset affects a third party component on your page)?
First of all you should include Eric Meyer’s CSS reset at the first CSS style which you use. It's designed to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings. So it should changes browser defaults, but not any explicit settings of CSS which you use.
The only style which I find a little suspected in the "Eric Meyer’s CSS reset" is the setting
table { border-collapse: collapse; }
It's the only CSS style which seems have some correlation with jqGrid CSS. So I suggest that you include additional CSS
.ui-jqgrid table {
border-collapse: separate;
}
which changes border-collapse inside of jqGrid. The demo uses the style and the results looks the same like in the grid without "Eric Meyer’s CSS reset".
What is your reason for using the reset? I would never use one. If it's affecting your third-party stuff, and you can't give a reason for using one, get rid of it. You're probably setting values for your elements anyway and, thus, overriding the reset on top of that.

prevent meyer reset css to mess with dynamic content

I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.

HTML CSS - fieldset containers do not line up

I am trying to move away from tables but it's proving too difficult.
This is the webpage "http://outsidemma.com/index.php"
I don't understand why the two green boxes don't align properly on Chrome and older versions of Opera.
This works perfectly well with firefox 3.5 and IE8.
I would like to know the reason behind this strange behaviour.
Fieldset is treated very differently in each browser.
You should be using either
dividers <div>content</div>
A list <ul><li>content<li></ul>
to seperate these.
In both cases you should set the style float:left;
Instead of display:inline-block, try float:left
As others have mentioned this is because some browsers treat a fieldset with different display defaults.
It may interest you to use a CSS foundation like YUI Reset to remove all the inconsistencies of how different browsers treat elements:
http://developer.yahoo.com/yui/reset/
One nice thing about the YUI foundation is that you can use YUI Reset, Fonts, and Grids separately if you only want a piece. You can also use YUI Base to add default styling that is consistent across all browsers.