HTML5 chrome browser datalist scrollbar missing - html

Chrome browser does not seem to have a scrollbar for datalist. It works on firefox and IE, but not chrome. Is this a chrome issue with not keeping up with HTML5 standards? Can I manually add it with CSS?

It’s not much of answer, I know, but from what I’ve read/tried you don’t have any control over how it’s displayed.
I know it’s not really a solution, but you could try using a jQuery plugin that has pretty much the same functionality, but allows for better styling. Untested, but QuickSelect looks it’ll do the same, or you could look for a polyfill.

Related

Is marquee tag still implemented in modern browsers?

I know that <marquee> tag is deprecated, but I have to use it for a simple presentation. And it's important to me that it will work on every laptop in the room.
I know it works on modern chrome (It still works for v44)
Are there any browsers that DON'T implement marquee behaviour?
/Edit I wanted to check it on http://caniuse.com/. But there is no info about it
The <marquee> tag is still supported by IE (8-11), Edge, Chrome, Firefox, and Safari.
Note
That being said, it is non-standard, and generally considered bad practice, especially given that you can do something very similar in CSS.

How to force Chrome (or any other WebKit browser) not to use "default" tag names?

I was having issues because of Chrome automatically referencing DIV... It works that way in Safari (desktop and mobile), but not in Firefox.
See image:
See Fiddle (open in Chrome, then in Firefox):
http://jsfiddle.net/stefek99/Sqcff/
The question is - how to disable this feature? I would really like to develop in "strict" mode without any Google quirks, just to make sure my code is cross-browser compliant.
This is a known 'problem', however I have not been able to find a reliable method of disabling this. One might think that "use strict"; should probably disable it but that doesn't seem to be the case.
In any case, some more explanation on it; Do DOM tree elements with ids become global variables? As explained there it will probably be standardized in HTML5. It all started out as a non-standard IE feature, which ofcourse got mimicked in other browsers. Theres even a msdn blog post noting it as a 'problem' so it seems a bit silly the HTML5 working group is trying to standardize it now.
I would like to note to anybody to please not rely on this problem feature as it is very ambiguous and hard to debug for programmers who don't know of it.

Display:table-* and major browsers issues

I am developing the follow website:
http://di20studios.com/2012/royalpack/
All works fine in Mozilla Firefox and IE 8, but Safari, Opera and Google Chrome don't like my display:table-*CSS...
The display:table-* is at header and bottom.
What I want? Continuous background:
Can you enter the website and see this issue in action? How I can solve this?
Check this out, I believe you will find your problem is similar.
This is an unconfirmed webkit bug. My only suggestion would be to make sure you are using an HTML5 doctype:
<!DOCTYPE html>
From John Resig:
What’s nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode – even though they don’t implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
Also, I might suggest you NOT use this method (display:table-*) unless it is the ONLY solution (which is never :P). There are many known issues with this method, one being that it is not supported in IE7.
A plausible solution would be to use floating to achieve this. You will need to change the transparency over the images for the repeat-x to overlay properly. I edited the images so you can see a working example. As long as you MAKE sure to clear after the header-container, you shouldn't run into any issues using float. PS, this works in IE7+ :]
Can you enter the website and see this issue in action?
If the question is as above, then my answer is: Yes, yes I can. I am using Google Chrome 18.0.1025.162 on Linux.

Are there any equivalent of CSS max-width, border-radius, box-shadow and -...-transition in HTML?

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.

Position:absolute in HTML5

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.