Hey I was wondering why this happens:
http://jsfiddle.net/dSVGF/
The buttons do not fill the container yet the
anchors do. What is fundamentally different
between the two tags stylistically?
<div class="table">
A
B
C
</div>
<div class="table">
<button href="#">A</button>
<button href="#">B</button>
<button href="#">C</button>
</div>
.table {
display: table;
width: 100%;
outline: 1px solid red;
}
.table > * {
display: table-cell;
outline: 1px solid lightgreen;
}
I suppose that the fundamental difference between these elements is that <button> is treated as replaced element (at least by some browsers), and is rendered with the help of non-CSS browser built-in mechanisms. There are several issues in Bugzilla about the rendering limitations of buttons caused by this (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).
IE9+ and Opera seem not to treat <button> as a replaced element, which seems more correct according to the latest HTML spec, but is still rather unclear in CSS.
Whether or not a button tag actually accepts "display: table-cell" is dependent on the browser, apparently. I ran a quick check in Chrome developer tools: In the calculated styles, the display on the buttons was set to inline-block. When I tried the same in IE10, it accepted the change and the buttons actually sized as table cells.
A button is a clickable element which allows you put anything within such as text, image etc.
An anchor tag is specific for Hyperlinks.
Source: w3schools.com
Related
The HTML page shown below has four "buttons". Two of them are real button tags, but two are actually anchors (I deliberately left the underlining in their style so you can tell them apart). The goal was to style them using a btn class in a way that they look the same and align next to each other in a "button bar". But when you load the page in a browser, you will notice two differences between the buttons and the anchors - the buttons have a vertical offset, and their content is centered vertically. However, they use the same style class, and even when I compared the computed styles with browser developer tools, I could find no difference.
So why does this happen? I already found that not setting overflow and the height and instead adjusting it via padding and font-size can be used as a workaround. So it seems to have something to do with setting the height. But why do you get such an effect when you set it? And changing the overflow property strangely reverses the offset effect. I considered it might have to do with the box-sizing property which seems to be different for anchors and buttons, and could cause the height to be interpreted differently - but since there are no paddings and margins, it should not make a difference, it would also not alter the offset, and setting the box-sizing property manually for the class did not change the effect either.
Again, I'm not primiarly looking for a fix here, much less a discussion whether it's a good idea to style buttons and anchors the same, but I'm interested in a solid explanation of this CSS phenomenon. Is it a browser quirk with styling buttons? But then why do all the browsers (Firefox, Chrome, IE) show the same effect? Or did I overlook something obvious?
<!DOCTYPE html>
<html><head>
<style>
.btn {
margin: 0;
padding: 0;
overflow: hidden;
border: none;
outline: none;
background-color: grey;
color: white;
height: 2em;
width: 10em;
font-size: 20px;
font-family: sans-serif;
display: inline-block;
text-align: center;
}
</style>
</head><body>
<button type="submit" class="btn">
Button
</button><a href="#" class="btn">
Button
</a><button type="button" class="btn">
Button
</button><a href="#" class="btn">
Button
</a>
</body></html>
Since a button that has not been styled looks different than an anchor that hasn't been styled, if you apply the same style to both, there will be a difference. I think the only solution is to just apply different classes to the buttons, and to the anchors.
Ok, I think I found the answer myself:
I noticed that after adding vertical-align: middle; and line-height: 2em; to the btn class, the links and anchors will look exactly the same. You can then also remove the overflow: hidden.
The default values for these properties are vertical-align: baseline; and line-height: normal; - when you add these properties, the differences are still visible.
So I guess the deeper reason for this puzzle is a flaw in my underlying assumption that if the computed style properties, as shown in the developer tools, are the same, then two elements should also look the same. However, obviously there are settings with values like vertical-align: baseline; and line-height: normal; which do not have unambiguous meanings, instead they can have different meanings for different kinds of tags: E.g., where the baseline is and what a "normal" line height is, is defined differently for button and anchor tags.
I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.
Picture: http://postimg.org/image/tte1lw8sj/
This is my HTML for the pictures
<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>
And this is my CSS:
.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}
Does any one know why it box looks different on Mac?
The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).
Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:
<object data='$filename' width=300><span class=alt>$alttext</span></object>
Here is a screenshot showing the problem:
Here is the CSS I am using:
#board table {
background: #eef0ff;
border-spacing: 0px;
border: 1px solid #475476;
}
#board td {
height: 20px;
width: 20px;
border: 1px solid #cfd7ee;
}
How can I makes the cells the same size in diferent browsers? Does anyone know why Opera and Firefox tighten the cells?
You will need to use a CSS reset, or set some of your own defaults for table margins, padding and other elements in your design.
A CSS reset (either yours or a third party one) will ensure all browsers have a similar starting point, regarding styles, as the different browsers do not have the same style defaults on different elements.
Additionally, as #thirtydot says in his answer, some browsers will ignore the height of a completely empty table cell, such as <td></td>. To ensure it is not ignored, you should add some content to these cells, a good choice being the non break space - , in this manner: <td> </td>.
Your cells are all empty, right? <td></td>?
One fix that will definitely work is to stick an in each cell: <td> </td>.
For some other ideas, see: CSS table, table-cell height issue in Firefox
First reset your HTML code default properties like padding, margin, height, width.etc.., then you apply your style to work
Better reset css is Eric Mayer's
I have the following code
<a href="http://google.com">
<div style="float:left;">
Test
</div>
<div style="float:left;">
testing
</div>
</a>
The link works correctly (clicking anywhere in the div navigates to the link) but in IE7 the div doesn't appear to be clickable. When hovering over the div the cursor does not change to a hand.
The hover works as excepted in IE8, Firefox, chrome
My guess is that there is the usual ugly IE hack for this :-(
a {
display: block;
background: #eee;
overflow: hidden;
cursor: pointer;
}
the link still works, even without the pointer changing, however IE7 does like it better if hasLayout is set to to true (overflow:hidden; which also contains the floats in other browsers), and then just tell it to have the right cursor.. it needs help ;)
This should work unless you've got some extra markup:
http://jsfiddle.net/Cd4PK/
However this is bad markup. You should not have block elements (divs) within inline elements (a). Try using a span?
href cannot be ...... or empty
edit:
try:
a
{
display: inline-block;
}
So, I have a DIV full of four HTML buttons that use an image instead of any text. Using CSS, I style it so that the img is the same width as its parent button. On three of the four buttons, they will always carry the cursor: pointer attribute because they will always be clickable. The fourth button, however, will occasionally be in a state in which it is disabled, so I have to toggle the CSS between cursor: pointer and cursor: default.
As my code stands, this works properly in Chrome and IE 7/8/9 (6 is not in my supported audience), however Firefox does not change cursor from default for any of them, regardless of if one of the buttons are disabled. Note that while this does work when I apply the cursor attribute to the parent BUTTON element, I'd prefer to use CSS to have the cursor change rather than use any client-side Javascript. Since this works in two of the three modern browsers I'm testing (including IE7, mind you!), I thought it should be possible in FF too.
Here's the HTML markup that I have:
<button id="btn1" class="my-button"><img src="/path/to/my-img1.gif" alt="Img1" /></button>
<button id="btn2" class="my-button"><img src="/path/to/my-img2.gif" alt="Img2" /></button>
<button id="btn3" class="my-button"><img src="/path/to/my-img3.gif" alt="Img3" /></button>
<button id="btn4" class="my-button"><img src="/path/to/my-img4.gif" alt="Img4" /></button>
And here are the CSS classes that I have designated for this markup, as well:
<style>
.my-button {
display: block;
float: left;
margin: 0px;
padding: 0px;
vertical-align: top;
border: none;
background: none;
}
.my-button img {
cursor: pointer;
}
.my-button img .disabled {
cursor: default;
}
</style>
And for anyone with any of that pesky curiosity, all of the click events and action is handled with jQuery depending on whatever business logic I need to go with it and the surrounding page.
If there's more information that I can furnish, please let me know. I feel like I came across a Firefox stumbling block here.
Edit: For reference, I'm using Firefox 4.0 with Firebug installed. Same behavior whether I have a Firebug on for that tab or not. Chrome is up-to-date, currently at version 10.0.648.204.
Edit 2: As I've denoted in the comments below, I still have not figured out a solution to this issue, but have settled on using #wdm's answer as a temporary solution - this way Firefox gets cursor: pointer set for all buttons regardless of state, and Chrome and IE will obey the CSS I put forth for the embedded img in each button tag. If I find out what's going on in my code or if someone else finds a proper solution for Firefox, I'll move the answer there. Thanks again for the suggestions!
Have you tried?
.my-button {
cursor: pointer;
}
EDIT: You could also make a separate class with "cursor:pointer" and use jQuery's .addClass() .removeClass() depending on the state. Or have jQuery directly alter the css with
.css("cursor", "pointer");
EDIT: One more idea...
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
Seems to be working for me in all major browsers.
Two possible fixes:
1 - Use <input type="image" src="/path/to/my-img1.gif"> instead of nesting <img> in <button>
2 - Use .mybutton:hover { cursor: pointer; } for the CSS.
The issue is that .disabled is a class, not a pseudo-class. It matches any <button class="disabled...
If you want to select every disabled button, you have to use the :disabled pseudo-class, which automatically selects all the buttons in the disabled state.
I believe that the correct version of your code would be as follows, though I cannot check it at this time:
.my-button :disabled img {
cursor: default;
}
The pseudo-class is defined by the w3c here: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIstates
They have a demo of it: http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html