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.
Related
I plan on using some of the new HTML5 semantic elements, but it looks like some of them aren't well supported even on newer browsers (main isn't supported in IE11 as far as I can tell) is there a way to have them be treated as a <div> if they aren't supported, as the HTML5 semantic tags I plan on using are currently basically the same as divs AFAIK (header, footer, main are the ones I currently plan on using, also canvas but there isn't a good alternative tag to do what canvas does).
Currently if I use one of the unsupported tags in IE it seems to be treated as an unstyled tag but the issue is I can't set the width or height of it in css. What can I do for it to be treated as a and apply all styles that I put in css to that element using the name of the tag as the selector as though it were a <div>.
main
{
width: 100px;
}
does not work in IE11, if it was IE7 or something I wouldn't be too worried but quite a lot of people still use more updated versions of IE and I don't want the website to display improperly to them.
You need the HTML5 shim for supporting older browsers but using just the HTML5 shim does not fix IE11 see: http://jsfiddle.net/jbowyers/n3qZp/. So you also need a CSS reset that includes the 'main' element such as normalize. Or you can just add the CSS reset directly to your project as mentioned by others
main { display: block;}
The html5shiv will allow you to style the main element in IE 11 (and less). There's an explanation of what it does (actually a breakdown of its entire history) here.
Money quote:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
NB. You should probably be using the shiv as a matter of course if you're using HTML5 and plan to support anything less than IE 9.
I think I have found a solution.
In my css file if I do:
main /*or any other unsupported tag that you want treated as a div*/
{
display:block;
other-property:other-value;
other-property:other-value;
...
}
It seems to act identical to a <div> tag. I haven't thoroughly tested or researched this solution (tested several attributes including color, width and text-decoration on IE11 and google chrome with tag named <asdasd> and it worked exactly like a <div>) so if anyone knows any problems with it please let me know.
I’m not sure what the question really is, but the title “Use <div> as backup tag for HTML5 semantic elements” is a good answer to the question “How can I use the HTML5 main, header etc. tags to that my page also works on browsers that do not support them?”
For example, instead of having just <main>...</main> in HTML and main { ... } in CSS, you would have
<div class=main>
<main>...</main>
</div>
in HTML and
.main { ... }
in CSS.
This may look redundant, and you get almost the same browser coverage by using polyfill like html5shiv and explicitly declaring main { display: block } if the polyfill doesn’t do that. But in this approach, you do all the styling in an old robust way and use the new elements only for their semantics. (In reality, the “semantics” means nothing, but maybe some day some programs will recognize main, article etc. and deal with them in some special way.)
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.
This is a fairly generic question about cross-browser compatibility.
At various points in a design I'm currenly working on the only way to achieve the layout and style that I want (without resorting to using images) is to use the display:inline-block css style option. However, this is not supported by IE8 and other older browsers and this results in my design beign broken.
So there are two parts to my question
1 - Is there a method of achieving a similar or equivalent effect for IE8?
2 - If not, how best can I make my design degrade smoothly?
For your reference, here's an example of where this is being used in my design.
<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct
It is a 20x20 pixel colour block to explain the colours in a chart.
More generally this issue arises whenever I want greater formatting & layout control over a particular bit of text etc within a body of text.
In the design I'm currently working on I'll be dropping support for the older browser types anyway since it's heavily reliant on the canvas element. However, I thought this would be a good question to ask as I've come across the problem several times before.
Thanks
Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).
Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).
Here is, to my knowledge, the best way to get a cross-browser display:inline-block:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
As given here:
IE supports inline-block, but only for elements that are natively
inline. So, if you really want to use inline-block, you’re restricted
to spans and strongs and ems...
Yes, it is not logical, because normally it doesn't matter if you use div or span... but remember - this is IE :)
So just change <div> to <span> and that's it!
use this code
*display: inline;
*vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
you can add inline-block for other browser but for IE you can add style with *. it only works in ie
I'm working on a web app... unfortunately it has to work with the worst piece of software ever written, yes ie6.
I really like the CSS display:table and display:table-cell properties, but of course it doesn't work in ie.
Has anyone found any fixes for this? I have been looking, but haven't found anything.
Conditional CSS, .htc files, javascript...anything?
I would really like to avoid making everything with floats and clears
Sorry. There isn't a fix to make IE6 support CSS display:table. The only way to acheive this layout in IE6 is to actually use <table> elements.
First question: do you really need to support IE6? If you can simply drop support for it, you'll solve yourself a whole ton of problems, including this one. Current global usage of IE6 is below 3%, and even lower in most developed countries.
If you do still need to support IE6, then your most obvious solution is simply to swallow your semantic markup pride and just use a <table> tag.
As described by #Tom, the next best solution is to write your layout using display:inline-block;.
inline-block allows you to define your elements as blocks, but still keep them in the text flow (kinda the way the <img> tag works by default). If you combine this with fixed element widths, and wapper divs around rows, you could acheive something similar to a table, although it may be hard to get it to expand dynamically with the page width.
The one big "gotcha" bug around this is that inline-block only works in IE6/7 for elements that have a default style of display:inline. In other words, it works for a <span> but not for a <div>. Not a disaster, but something to be aware of, especially since you're specifically asking about IE6 support. Other than that, the good news is that you should be able to get away with using display:inline-block without any other hacks or work-arounds.
IE does not support display:table and display:table-cell but IE7 and below do support display:inline-block. The common way to make this work is by doing the following:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
Keep in mind that CSS gives you a lot of positioning power and given some context of how you want your layout to look I might be able to give you a better solution.
Due to misunderstanding let me clarify the code above.
display:-moz-inline-stack; is declared for older versions of Firefox.
zoom:1; IE has a property called hasLayout, this is a way to trigger it.
*display:inline is known as a *property hack used to hide this line from all non-IE browsers
The zoom:1 and *display:inline effectively allow block level elements to behave like inline elements (so that inline-block will work in IE6+)
For more information please read:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
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