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;
}
Related
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
Hovering the div will trigger the mouse over effect on the child button.
Clicking on the div (outside) the button also triggers the buttons onMouseDown.
Example code:
<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
<button onMouseDown="alert('hello')";">Button</button>
</DIV>
A fiddle for testing it yourself: http://jsfiddle.net/N2c8t/15/
Been googling my tail off, any known solution to this? Other than just not using display:table obviously. :) Thanks!
note: Tagged this with IE8 and IE9 as those are the browsers I have tried so far.
It almost seems like IE is treating the button as display: table-row no matter what actual display setting is put (and thus filling the whole div). Running interference with another element solved it (if this is a viable solution for you):
<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
<span><button onMouseDown="alert('hello');">Button</button></span>
</DIV>
But perhaps better still (less intrusive), keeping your same original html and adding a psuedo-element to the div also solved it:
div:before {
content: '';
display: block;
width: 0;
}
I just noticed that in IE9 and IE8 (not in IE7) the padding around my links is not being considered part of the link (it's not clickable and my hover effects aren't being applied when it's hovered over). Only the text part of the link is working.
I tried giving the element a background color but that didn't fix it.
Has anyone seen this before?
SOLVED: Wrote a huge edit to my question and in the process figured it out myself.
I had a negative z-index on the body, which I definitely didn't know would cause this but apparently it does. Here's the jsfiddle: http://jsfiddle.net/CEbMe/ which shows the problem in IE9 and IE8
Try adding:
<style>
a { display: inline-block; padding: 0 50px; background: yellow; }
</style>
<p>This is a link with some text around it</p>
None of the suggested answers fixed it for me, and I spent a few hours finding the answer:
http://haslayout.net/css/Partial-Click-Bug-v2
background-image: url(#);
fixes it. I imagine this would probably do the job too:
background-color: transparent;
I have the following html:
<div id='social'>
<img src="twitter.png" alt="Twitter"/>
</div>
<h1>Heading</h1>
I would like the image to sit directly on top of the heading so I used:
margin-top: -25px;
This displays correctly in Chrome and Safari. In firefox however the head and image overlap. With a bit of playing around it seems that Chrome and Safari create an empty space between the divs.
How do I arrange my page/css so that it displays without a space between the image and heading?
It's the <h1> tag with built-in margins. lol~ Style the <h1> tag with margin:0px; padding:0px;
James is right - the tags have margins by default, *which also vary between browsers. You can either override them all, or use a CSS reset such as Blueprint that will clear all default browser CSS styles so you can define them from scratch yourself.
I can almost guarantee that if you'll end up having spacing issues with CSS on any bigish project, it'll be the lack of a reset :)
Also know that browsers parse tabs and newlines as whitespace - and there's little you can do about it. If you have horizontal elements on your web page that are on newlines in the source, they'll be separated by a space (sometimes this isn't what you want).
I think this will help:
#social img { display: block; }
or
#social img { vertical-align: top; }
Live demo: http://jsfiddle.net/9z6BM/1/
Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link
example
...<li>
<a href="#link">
<img ...>
</a>
</li> .....
Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. !
edit// I added a picture to better explain what I am talking about.
Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text
To remove it, simply use:
a {
outline: none;
}
Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do
* {
outline: none;
}
This will remove it from all elements.
#link img a
{
border:0;
outline:none;
}
Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.
To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:
Your HTML:
<div id="test">
<a...>
<img .../>
</a>
</div>
And use the following CSS:
#test img {
border-style: none;
}