I tried to style a ui button with a label in the upper left corner and a centered text in the middle. I used position absolute for the label. It worked fine in Chrome and Firefox but not in IE. The IE button element seems to have an inner size according to its content. So I placed another element with the hight of the button and the width of 1px inside (like a strut) and it worked ...
So I wondered why you are using the button element as base for the jquery-ui-button. I found you are killing all the default button behaviour with tricky CSS and than put the ui theme on top of it.
So what is the reason for prefering those special elements instead of simple elements that have no extra behaviour like div or span ?
I'm a total newbie to jQuery UI but let me venture an answer... perhaps others can chime in.
The "special" elements like button, ul, li, etc are being used because they represent the content. This is particularly big now with HTML 5 where they introduce a lot of new elements. For example, there is a "menu" element that is intended to be used for menus.
From my perspective, HTML was sort of schizophrenic. It said that it wanted to present the content and not how things were displayed (the styling). But then they had things like <bold>. But with time, the styling tags have been deprecated and pulled out and all the styling have been moved to CSS.
Plus, even if they used nothing but div's and span's, they would still need a CSS reset and layer their own styling on after that. And they would still have to fight against browser differences. So I don't think it really complicates things much.
I agree with you that a html like <header><button><img></header> is more readable than <div><div><span><span> but some elements have a special behaviour which is sometimes impossible to anull. For example the <option> element. There are many jquery plugins for stylish option elements, but none of them uses the html option element as base because you cannot append your own style on it. One plugin I have seen uses the html option element but only to replace it with div div div ...
There are still some unresolved problems for me as I mentioned above the href hint in IE9 from the anchor element. I am currently developing an information kiosk for an airport and my boss asked me to suppress this url tooltip. I only can do this by don't using the jquery ui tab and build my own.
I believe you... but what you are saying is not suppose to be true (especially about the <option> element). I have similar problems trying to match Chrome and Firefox. They don't agree about what is "top" of a line of text and they draw the text differently.
There are tons of CSS things now and the CSS reset pages I'm using do not bother with many of them.
The "tool tip" is a term used for two things so I don't know what you mean. If you mean the little pop up that says "Have a nice day" (or whatever), that is suppose to be either title or something else (which I can't recall but it seems like it was not browser agnostic). If you mean how the mouse changes from caret to pointer, that should be the css cursor attribute. Oh... I think now I know what you mean. On Firefox, it is displayed in the lower left of the page -- the destination of where the link will take you. I have no idea how to suppress that.
For browser specific stuff, I'd try asking in a browser specific forum (e.g. http://forums.mozillazine.org/ for Firefox). I get spotty results from stackoverflow.com There are other forums similar to Stack Overflow.
I'm still hoping someone else will chime in to our discussion with golden words of wisdom.
Sorry, you are right, but there is a poor css support for select/option in browsers, For example ie allows background image only on the select element not on the option element, and chrome supports no background images on both. Further only text content is allowed in the option element, you cannot add an image or checkbox. ...
So the option element is restricted whereas the span or div is not.
I found many jquery plugins that are based on div/span. See
Using select > option as an example here is not very good. We all know that select elements cannot be effectively styled across browsers. There is no way around that other than replacing the select entirely.
button elements and li elements however can be effectively styled across browsers without side effects.
The majority of the widgets are written in such a way that you could take your current valid html and simply apply jquery ui to it. Obviously there are some exceptions such as accordion and tabs, but I would consider those special cases.
What exactly are you trying to hide when you hover over a tab? the navigation notification tooltip you are getting at the bottom left?
Yes the notification tooltip at the bottom left. In many discussions I read, that this is a browser feature which will warn the user if he is leaving the page. But for my purpose, all tab content is within the same page and it is a kiosk touch system, so this notification is annoying.
As I mentioned above, have you ever tried to position something in a button absolute ? In IE the absolute positioning is according to the inner content wheareas in good browsers the outer size will be the reference. This would not happen for divs in all browsers.
Another example is the famous, fast grid plugin called SlickGrid. It bases entirely on divs and spans, because of the flexibility and speed. If you use the table element like other plugins, you are constrained to the table layout. You can of course disable/enable table style via CSS but it is bad implemented in some browsers...
The point i was making is that anchor tags for the tabs is the correct tag to use in this case. They aren't buttons, the are links to a location on the page. In your case the only way to prevent the display at the bottom is to write your own tabs. Your case is what I would consider an edge case.
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic