This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.
Related
I added the logo for my site in the html before like this:
and that looks great. But now i want different css-files to load different logos.
.companylogo {
background-image: url("/Images/Logo.png");
width: 166px;
height: 14px;
border: none;
}
but when i do this i get a little border around the images.
How do i get that little boarder to disappear?
THis might not be the best jsfiddle https://jsfiddle.net/bewsbews/z9kf21fp/ but as you can see the two first images have a little border around them and they were both made with css and the big burgerking logo is made in the html and that doesn't have a border around it.
A live demo would be better, i think somewhere in your css is the problem, the code above seems okay.
put this in the top of css file
img, a {border:0, outline: none;}
Ok so it is pretty unnecessary to use an img tag when i don't use the src propertie of the image tag. So i changed it to a div and that solved the problem. Obviously there is no need to have a background-image of an img-tag.
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
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'm helping a friend with this site:
http://smashingdivas.info/
No matter what style I apply to the gray background of the content div, I can't make it transparent (in any browser), so that the background image of the page shows through.
I've tried all of the following:
background-color: transparent;
background: transparent;
background-color: none;
background: none;
and nothing seems to work.
Thanks for your help!
If it's the div with class 'container' it's because you have a rule in your HTML that is overwriting your CSS:
.container,
.sliderGallery { background-color: #111111; }
If you want to apply transparency just on the background there are 2 options:
1) you can set the "alpha" channel on RGB ie.
background:rgba(255,255,255,0.5)
but this won't work on IE
2) create a simple transparent png image and set it this way
background:url(transparentIMG.png) repeat;
Have you tried applying the opacity property ?
like for eg.
opacity:0.5;
Works for me, at least. I guess you're overriding the background properties via CSS due to some later rule again.
Just remove following rule:
.container, .sliderGallery {
background-color: #111111;
}
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;
}