If i I'm not using any transparent png, not using :hover on other thank a:link,
Is it possible to make cross browser layout without having any IE conditional CSS .and keep main css valid?
I want to keep only one css file for whole needs. screen, print, handheld.
What things we should consider?
Sure. The main thing I do to work on this is to test the CSS files incrementally in multiple browsers as I build the site. It's much harder to make a site look correct in multiple browsers once it is completely built out for a single browser.
Element widths are the biggest problem since different browsers calculate the widths differently.
Yes, just use one column.
For more complicated designs, I guess it depends on the design and the exact browser requirements.
Related
So I learned about CSS grids today, and I had a question that I could not find an answer for. In my site I am creating, I used HTML tables as I did not yet know about css grids. Now that I have learned about them, I can see that grids are more useful and flexible in layout and style.
With the HTML tables, I can make it look perfect in a browser such as Google Chrome, but then I test it in FireFox and it slightly moves the divs around that I made.
If I used a grid system for a layout, and put all the content into that instead of using HTML tables, and then use the fr in css, would it keep the layout the same across web browsers? It would seem that way to me, since no matter what size of browser window or type of browser you are using, the fr keeps the grid to using 100% of the page size.
I apologize if what I am asking doesn't make too much sense. I tried to word it as best I could.
Yes. It will look the same if the browser supports grid layout.
https://caniuse.com/#search=css%20grid
When I add bootsrtap the thing which is made using native css doesn't show on the right place for some unknown reason to me.
Here is what happens with bootstrap and without. The second shall happen on the first too.
Just a note this thing shall be a population pyramid, sorted by womans(red) and males(blue) by age.
Edit: jsfiddle.net/64mjs03f/
I think the problem might be due to Normalization.
Libraries like bootstrap now come with a Normalized CSS. What that does is, reset the styles of the HTML elements that might render differently across browsers.
All browsers have their own CSS for rendering elements. Normalization helps developers create a web app, that looks same across all browsers.
My colleague and I are having a tough time deciding on a best practices approach for ie6, ie7 support for a site we're building. The site is for an older crowd, so not supporting these browsers is out of the question.
At the same time, we're trying to start incorporating modern coding practices into our work so we can get practice and fully understand capabilities. A specific area I want to touch on with you guys is handling fall backs for CSS3 backgrounds.
We have 2 choices here, if we're to use CSS3 backgrounds and not add extraneous wrapping tags for backgrounds:
Use :after, :before etc. pseudo elements for adding multiple backgrounds to elements. (this is the choice we've made for now)
Use CSS3 multiple background specifications
This produces more elegant markup and is certainly a step in the right direction. But what about browsers that don't support these features?
Modernizr.js tells us to check for specific support and then write fallbacks:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
However, we're not given much guidance on the actual fallbacks for specific features. So, in the case of something like CSS3 backgrounds, what would be an effective fallback strategy?
Would we (for example) use jQuery to wrap those extra tags we need (ie btn-container, nav-container, etc.) around nav items, buttons and containers in order to have extra elements to add style attributes to?
About the CSS3 multiple backgounds and/or background gradients I think there is an approach better than those you proposed: CSS3 Pie.
This way you will be able to use all those nice effects also in IE6, 7 and 8 (including also border-radious) without any JavaScript intervention.
1. Fail gracefully. Certain complex elements can be hidden with CSS and revealed upon page-load with JavaScript depending on the browser as one example.
2. Conditional style-sheets or JavaScript fixes. Spend a lot of time fixing each problem in each browser and write a style-sheet just for it. Also, you could try various JavaScripts that claim to bring older browsers into compliance. I've tried this JavaScript but it seemed to conflict with jQuery. CSS Pie is another option to bring rounded corners to older browsers.
3. Ignore older browsers. Do nothing special for older browsers. People on IE6/7 already see the world differently than everyone else. Alternatively, do nothing special for older browsers but actively avoid overly complex functions & features. Optionally, you can add a nifty "upgrade notification" message with little effort.
Would we (for example) use jQuery to wrap those extra tags we need (ie btn-container, nav-container, etc.) around nav items, buttons and containers in order to have extra elements to add style attributes to?
That is certainly one valid fallback approach. Depending on the design and the elements in question, though, you might find that simply supplying the primary background is enough to yield a decent-looking and perfectly functional, though not visually identical, component.
"Supporting" older browsers shouldn't always mean "taking great pains/writing tons of extra code to insure a near visual match." It is difficult but not impossible to ramp up a QA team so that they understand the concept of Progressive Enhancement as it can be applied to aspects of pure visual presentation.
I found this very interesting:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.
Have you ever done something like this?
I'm a missing a common trend against IE hacks?
Does this practice have any drawbacks?
That example is outdated.
Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!
The example you linked actually relies on that broken box model. He has an updated version that doesn't:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?
The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.
If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.
If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.
To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.
i've created some pages using css, but on viewing the page through different browsers it appeared as irregular arrangement of contents..
You're going to have to be more specific than this.
Which browsers display the page 'correctly' and which don't? Some older browsers have... dubious CSS support, and some of the things that work well in IE8/FF3.5 won't work in IE6/FF1.
Which CSS properties are you using & having trouble with? I take it you're talking about position or float or similar since you refer to an "irregular arrangement of contents", but that doesn't narrow it down all that much.
Are some browsers displaying the page as if there's no CSS being applied at all? It's possible you've got your stylesheet link a little wrong, and some browsers are 'fixing' it for you and some are just not loading the sheet at all.
Unfortunately, you potentially have more than one problem. Browser interoperability isn't going to be as easy as doing a setting. You have to compare some of the browser compatibilities and change your code to get it to look perfect in all browsers (if indeed such a nirvana is achievable for all page designs).
One thing you could try is a CSS reset such as MeyerWeb. This will remove some of the defaults that the browsers do not share - therefore potentially giving you similar looking pages from which, you can adapt to look as you want them too again.
There are other methods, including comparing all the differences. But unfortunately, my point is that this isn't likely to be a quick fix without knowing more about the specific issues your having.