Is there any problem If i use position:absolue property in HTML 5 ?
position:absolute;left:somepx;top:somepx;
Will it work on all browsers or does the syntax go upside down ? Im using the
<!doctype HTML>
and developing the html using images and with some text, Just placing them in a good looking way using the position:absolute.And im developing using my internet explorer probably its version 7 I think so.But im worried will it work on other browsers like mozilla and google chrome with no error.Will it remain the same way on all browsers? becuase the stackoveflow or google any webpage looks in the same way in all browsers.I just wanted to know what standards they follow that makes them look same on every browser.
Please just let me know is there any harm or pitfall using the position:absolute.Thank you in advance
It seems you make some mistakes when you build your websites.
using absolute positioning where you shouldn't. It is not appropriate to use position: absolute to make a complex layout. Consider looking for some tutorials to learn how to build a layout using especially float, clear, margin and padding CSS properties. Use absolute positioning only where it is explicitly required.
using non standards-compliant browser during website development. IE7 is quite old browser with buggy support for web technologies. This may cause that your website will display fine only in IE7 and messy in every other browser. What you have to do is to develop website in standards-compliant browser (no matter what browser, just make sure you use the latest version available) and then check the website in older browsers (and possibly fix bugs that appear). Don't forget to check the website in all browsers used by your visitors. Compatibility tables like those at QuirksMode are often useful.
Back to original question, browsers don't distinguish between versions of HTML (there is just standards and quirks mode, but you don't need to care about them because you're using doctype that triggers standards mode in all browsers); so there's nothing more to be aware of. Absolute positioning should (and in most cases, will) work well in IE8+ and all widely used versions of Firefox, Chrome, Safari and Opera. Once again, you're supposed to test your website in all widely used browsers; you'll discover possible browser bugs and incompatibilites then.
Another interesting thing to look at is this:
http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
It may very well be available soon and will probably be a lot better for what you want. For now, do not JUST use Position:absolute, as people have said, it is a really bad way of positioning things and should only be used under very specific circumstances.
Well it has nothing to do with HTML5, it is basic positioning.
And it is not a straightforward process to get your site to display the same in all browsers, you should take a look at resetting style sheets or just test your site in a lot of browsers.
Especially older browsers have a way of changing your design.
absolute positioning is part of css3. html5 is just a combination of javascript+html+css
with unique features. so.it should work with all the browsers. but how all the browser will display, you need to chek it in chrome,mozila,safari,opera...etc in recent versions.
browser compatibility may be issue some time.so,don't worry ,it's better to chek and fix the variations.
Related
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I've had to work on a fairly complex design ( http://scoding.com/eyal/ ) because of its layout and shape, finally done it, all happy - until I checked on IE, it's seriously messed up, but why is that? Why is the container not centered? I have looked on google for some answers, and didn't find anything that could help, ANY HELP would be appreciated!
IE is rendering the page in 'quirks mode' (if you press F12 in IE you'll see the 'document mode' defaults to quirks).
Set a doctype like:
<!doctype html>
And all will be well!
For bonus points, run it through the W3C Validator and fix the errors it flags!
This is one of the reasons that every web designer hates IE.. ;-)
Unfortunately, there is no magic answer for you. You have to get the right tools and test every browser you want to support and fix the CSS for every broswer.
Not all browsers interpret CSS in the same way. But IE is the one most people will have problems with.
Hints:
Try using a CSS framework. Blueprint or CSS960 are among the most popular IMO. With a framework, you have a better chance of having the same result in every browser.
For IE, you can download the developer toolbar. It's like Firefox's Firebug but for IE. It is essential to debug CSS problems in IE.
Take note that if you want to support IE6,7,8 you will have to test them all :-( Because you will probably have different results in each version.
If you use JavaScript, I highly recommend jQuery. Never write "native" JavaScript code since it is interpreted differently in each browser. jQuery takes care of that and ensures that your code will be cross-browser compatible.
Good luck
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.
I am trying to make my own website and it was coming along quite nicely. It looked beautiful in Firefox when opened and worked wonderfully. But then I run it in any other browser and it does not work. How can I fix this? Interner Explorer especially hates it =[
You just got to see it to know what I'm talking about so here is the link:
http://opentech.durhamcollege.ca/~intn2201/brittains/chatter/
Please give solutions that don't involve JavaScript.
Rendering differences between Firefox and Internet Explorer are really the daily trade of everyone who designs web pages.
You should start identifying which elements exactly cause the problem(s) and then formulate a question regarding exactly that. (or do a Google search, all those incompatibilities and how to fix them are documented somewhere on the net in some form.)
Also, I'd recommend you download a Tool like IETester and check out which versions of IE the site fails in. It looks pretty OK in IE8, but the inline frame looks bad in 7.
Then, really make sure your page is valid. (It probably shouldn't be XHTML, but have a HTML doctype.) This is not to conform with some rules, but because validation catches an awful lot of errors like unclosed tags that screw up the rendering. This isn't the case in your case right now, but still I'd recommend doing it.
On the long run, these tools are going to be very helpful:
Firebug in Firefox (Right-click any element on your page and choose "Inspect element..." it gives you heaps of useful information
The Web Developer Toolbar in IE8 (press F12 to open it) that is similar to, if not as powerful, as Firebug.
OK, I had a look at the page in IE6.
Some tips.
Try to avoid tables for layout. I admit that putting the fancy border around the "welcome" area, is much easier using a table than any other way, but the other tables are completely unnecessary, and the cause of your much of your problems, because browsers, particularly IE6 and IE7 like to do their own thing when deciding how to lay them out.
As bobince says, table-layout:fixed on the signupTable1 will help a lot
Also, for IE6, giving the td containing "welcome" a height of 100% helps.
The margin widths of the items in the cells in the signupTable1 are percentages of the cell width in FF, but percentages of the screen width in IE6. You should add some IE6 targeted css to compensate for this.
Finally, as far as I can see, your markup is immaculate polyglot HTML/XHTML and serving it as text/html and using an XHTML doctype should not cause any problems.
Your page declares an XHTML doctype, yet it is not valid XHTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fopentech.durhamcollege.ca%2F~intn2201%2Fbrittains%2Fchatter%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Furthermore, it's returned with a content-type header "text/html", which is wrong for something that's supposed to be XHTML. Unfortunately, the correct content type will not work either.
So there are two things you have to do:
Don't use XHTML
Make your HTML validate
Then you can start thinking about actual browser incompatibilities.
It looks the same in Firefox 3.6.2 as in Internet Explorer 8. However the old browsers are the evil ones:
search the web for Internet Explorer + margin, because thats where Internet Explorer fails.
Simple trick: do not use margin.
position:absolute;
top: 80%
left: 100px;
And then... google for specific stuff :)
Ok I fixed 2 errors finally figured them out
changed
#loginForm {
float: right;
}
#loginTable {
margin: 20%;
margin-top: 14%;
}
to
#loginForm {
float: right;
margin-right: 5%;
margin-top: 2.5%;
}
#loginTable {
}
and added
<!--[if lte IE 7]>
<style type = "text/css">
#loginForm{margin-top:-157px}
</style>
<![endif]-->
not a solution I like but one I will have to deal with.
Ok still leaves the issue of I hear there is a 100% height problem and my horizontal borders wont stay the correct width.
First, make both your HTML and CSS to validate:
HTML validator: http://validator.w3.org/
CSS validator: http://jigsaw.w3.org/css-validator/
Then, if your valid code still fails in particular browser, find the problematic HTML element using the browser's debugging / inspection tools:
Safari / Chrome: built-in Inspector
Firefox: separate plugin, among the best is Firebug
IE8: built-in Developer Tools
IE6/7: must be downloaded and installed from Microsoft
Opera: built-in Developer Tools
As long as you use valid CSS 2.1, differences between modern browsers should be minimal or almost non-existent. Yes, modern browsers do very good job in implementing standards, especially if you avoid bleeding-edge not-yet-fully-standardized techniques (CSS3, HTML5). (We are forgiving and count IE8 as "modern" here despite its CSS 2.1-only support, PNG issues, slow JS speed, etc.)
Oh, one thing not related to validness: always remember that many UI elements (fonts, buttons, etc.) are not rendered in exactly equal sizes in different browsers / platforms. Also screen sizes may vary largely due to popularity of mobile browsing. That's why you should prefer elastic / fluid layouts and not rely on pixel-perfect rendering.
Most IE 6/7 bugs are the same old common ones repeating and there are plenty of resources about fixing them. Create separated stylesheet(s) for IE(s) and include them by using conditional comments.
As a final comment, as long as open standards / technologies are used, personally I couldn't care less supporting a decade old browser, except in form of graceful degration, unless I'm paid generously for that. Browsers are free to upgrade, there are no reasons not to do that. No excuses. World is not static, show must go on, you won't see HD with your old tube telly, etc.
I also think it's our responsibility as web developers to force the big masses to adopt new (open) technologies, because they save huge amount of our time, makes possible to create better end-user experience, etc., the list of benefits is endless. Again comparison to other industry: consumer electronics companies keep pushing out new things, although most people would happily use 20 years old tech unless forced to upgrade their (naturally conservative) mindsets.
The messed-up borders around the ‘welcome’ box and the wonky centering is because you're using ‘auto layout’ tables for page layout. This leaves you at the mercy of the auto table layout algorithm, which is complicated, unreliable, and a bit broken in IE.
For places where you must use tables for anything more complicated than simple data, set table-layout: fixed on the <table> and add explicit width styles on either the first row of <td>s, or on <col/> elements just inside the table. Columns you leave without a width style will share the remaining spare width between them. Set an explicit height on the rows containing fixed size images to stop them sharing the table height.
However, for the main page layout here you would be much better off using CSS positioning or floats rather than tables. You can use nested divs (each with a separate background image) to achieve the image border effect without resorting to tables.
If I were you, I would not bust my guts trying to make the site work for ancient browsers like IE 6.
Indeed, one could argue that you would be doing the world a favor if you made your site refuse to work with IE6. Anything that can help to push IE6 into the grave is a good thing.
If Google can say that IE6 is no longer supported ... so can you.
Now if you were building this site as a money-making exercise, and demographic included a significant percentage of IE6 users, maybe the pain of supporting ancient non-standards-compliant browsers would be worth it. But otherwise, I'd say it is not.