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;
Related
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
Alright,
I feel dumb asking this but I am having issues with a stylized anchor tag and displaying both a repeating background image and text in IE7/8. My code works fine in Firefox, IE9, Chrome, and Safari but in IE7/8 the text will not show up.
My PHP is outputting something like this:
<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>
My CSS for this element looks like this:
.anchorButton {
background-image: url("./images/button-gradient.png");
height: 52px;
background-repeat: repeat-x;
background-color: transparent;
background-position: 0 0;
float: left;
line-height: 52px;
font-size: 1.4em;
color: #fff;
border: 3px solid #a8a8a8;
margin-top: 10px;
padding: 0 15px;
z-index: 900;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
text-shadow: -1px -1px #707070 !important;
display: block;
}
To see what I am talking about you can visit: dtelepathy.swampedpublishing.com. If you look at the site in Firefox and IE7/8 you will see that the Orange 'buttons' that I made out of anchor tags do not show the text in IE.
I am willing to give whatever a shot as I am REALLY unsure what is going on here.
I don't have IE7/8 to test, but this sounds suspiciously like a variation on the IE peek-a-boo bug. Maybe some of the changes suggested around the interwebs will help.
I've just written a guide for you. Make sure that you follow these steps, and -perhaps- edit your question to be more specific. Currently, we can only guess and find the problem by trial&error.
Steps to debug your CSS code (yes = next step, no = see below):
Ensure that the problem is caused by CSS
Disable JavaScript. Does the problem persist?
What's the source
Temporary disable all specific selectors, eg: <a class="foo bar"> > <a x-class="foo bar">. Did the problem disappear?[2]
Which selector?
Add all selectors, one by one. When a newly added selector is causing problems, disable all selectors, and use the same selector to make sure that the problem is caused by this selector only.
Which property?
Disable all lines, and add enable a few lines (block) of the CSS code. When the problem shows up after re-adding a block, remove the just-added block, and add the properties back, one by one.
Cause found
Use Google, Stack overflow or the Mozilla Developer network to find documentation about the property. Perhaps, you've used the property in a wrong way.
[2] The problem is caused by a tag selector, or an inherited style.
I can see the text in the orange buttons just fine in IE8 on Win7.
Your hover for the border color doesn't work on them though in IE8, but that is because of the VML used for the rounded corner effect. I have experimented a lot with VML and it causes tons of problems for element layouts.
I would check to see if removing the border-radius-5 class fixes the problem. That way you can see if that is causing the text problem you are seeing.
Usually <legend> text is pretty short so I had no idea this was a problem until I ran into it yesterday. I was trying and failing to set a 50% width on a <fieldset>, but it wouldn't work due to long legend text. Either the fieldset won't be smaller than the legend, or the legend's width exceeds that of the fieldset.
This doesn't seem to be an issue in IE8, Chrome, Safari, Opera, and maybe others. It is an issue in Firefox, IE6, and IE7.
Goal: Get text to wrap in a <legend> cross-browser
Without setting any fixed widths
Hopefully without extra markup
Without javascript
Any way we can if the above are impossible
Without giving up and using a different tag
I've seen this post: Getting LEGEND tags to wrap text properly
...But there is only a single answer that uses a <div> with a fixed width inside the legend tag, I can't actually get it to work (see fiddle), and OP closed with the comment "in the end we gave up". Googling this subject turns up a whole lot of "not much" as well.
I put up a jsfiddle demo with some CSS I've tried. As I said, I've never run into this before so I'm baffled that this is so difficult, and I can't seem to get anything to work. Is it really just impossible?
Adding white-space: normal; to the legend works fine except in IE7 and IE6. Please see this jsfiddle demo
After playing around a bit with the CSS, I got it work on IE7, IE8, IE9, FF3-4, and Chrome11 by adding a <span> inside the <legend> with the below CSS:
legend {
white-space: normal;
width: 100%;
*margin-left: -7px;
}
legend span {
display:block;
width: 100%;
}
Please have a look at this jsfiddle
It's been a while since the question was posted, but now IE10 is here for some time and still sux while beeing so 'modern'. additionally one has no ability to use conditional comment. Here's what does the trick:
legend {
white-space: normal;
display: table; /* IE10 */
}
Add white-space:normal to your legend to force the text to wrap.
legend{
color:green;
white-space:normal;
}
For more read this article: http://beckism.com/2008/12/display_block_legend/
Try this simpler approach:
legend{
color:green;
white-space: normal;
}
That should sort your legend out. Your next problem becomes the background color of your fieldset, but that's easily solved by wrapping the whole thing in a div and styling that.
In case somebody needs a fix that works for Microsoft Internet Explorer 11 and Edge while not interfering with Chrome/Firefox/Safari:
legend {
display: table;
max-width: 100%;
}
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;
}
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.