I have an anchor tag with some simple CSS:
div {
background-color: gray; /* for debugging */
}
div a {
display: block;
padding: 6px 4px 6px 7px;
background-color: red; /* for debugging */
}
In Firefox, the anchor (in red) is clickable even outside of the text because of it being display: block with some padding. In IE7, when I hover over the red area that is not text, the anchor is no longer a link there.
Try adding zoom: 1 to the element. This gives the element hasLayout, which is not only the source of 60% of all IE bugs (according to a survey I made up to make this point), but also tends to plague block-level anchors.
Somehow a combination of zoom: 1; position: relative; seemed to have worked for me. So buggy!
zoom: 1 worked for me without position: relative, however display: block was set on my a elements.
Use zoom: 1 !important; worked for me.
I have 2 nav bars on my pages at http://gvtdev.davebezaire.com. Setting zoom:1; display:block; caused one menu (along the left) to behave properly. The other (across the top) will not work right even when I add position:relative; width:100%. For now, I've set set up a:hover {text-decoration:underline;} and that will have to be good enough unless someone has suggestions for me.
As a fairly new web page developer, it really is disheartening to learn how much of my effort gets expended on fixes for IE!
Related
http://jsfiddle.net/vByVD/9/
This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.
I found out this is because they dont support table, table-cell.
I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.
I want it to appear as the other new browsers, so its one line horisontal.
How can i make this work?
There are two ways to accomplish this. The first:
#header-nav{
overflow: hidden;
zoom: 1; /* IE6 and below work around */
}
#header-nav li{
float: left;
margin: 0;
padding: 0;
}
#header-nav li a{
display: block; /* if you want height and width */
}
The second:
#header-nav li{
margin: 0;
padding: 0;
display: inline;
}
Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.
In Internet Explorer versions 8 to 10preview, when an inline-block div gets a property of "direction: rtl;", it's background will overflow 1px beyond the border on the right.
Here's a Jsfiddle demo: http://jsfiddle.net/8KgvB/6/
(Creating this demo was a headache by itself because IE doesn't like Jsfiddle [or vice versa] but that's a different story altogether)
IE7, obviously lacking inline-block functionality, doesn't have this issue, even with the zoom:1 hack.
Is this a bug? or did I simply miss something? Maybe someone has a workaround.
Thanks!
Stupid IE... facepalm
here's a "fix" for this glaring bug in IE. you just use a wrapper with the rtl attribute.
Edit
I was informed that just posting a link is not a good idea on SO so here's the code too :P
div.outer {
border:1px solid black;
line-height:60px;
width: 100px;
text-align: center;
display:inline-block;
background-color: red;
}
div.inner {
direction:rtl;
}
I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.
Is there a bug I am not aware of here?
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.
Note: positioning them may change the layout significantly and you may have to rework your styles.
Negative margin hide the div…
Here is trick
use zoom:1, position: relative
Problem:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
Solution:
so your css class will become
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
http://trickyclicks.com
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
give position as relative. inline style is advisable. It may give some problem if you use external css.
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }
I'm trying to eliminate the extra bottom margin that both FF and Chrome seem to give to Textareas. Surprisingly IE seems to do it correctly. I would like to avoid using conditional includes but CSS3 tweaks are OK.
Sample Code
.red-box {
background-color: red;
overflow: hidden;
}
textarea {
border: solid 1px #ddd;
margin: 0px; /* Has no effect */
}
<div class="red-box">
<textarea>No Margin Please!</textarea>
</div>
By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.
If you want to leave it inline, simply try
vertical-align: top
Set display: block for your textarea.
Just bit by this in 2022 Chrome!
<textarea> has a default of vertical-align: baseline, which visually manifests as excess bottom margin.
Interestingly, none of the most popular reset/normalize stylesheets change this property. In my personal reset, I have added:
vertical-align: bottom
Just disable resize as follow
textarea{resize: none;}
I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width.
I've found an article about the problem here: CSS: Jumping columns
I've also found an example of the same problem here: Jumping columns example
Drag the window size to see the jumping in IE7 or earlier.
Anyone knows if it's possible to get around this? (without Javascript)
I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of float/width):
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
.container {
width: 75%;
}
.box1 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
}
.box2 {
overflow: hidden;
}
This works in most cases.
Failing that, I add a negative margin of several pixels to the last element instead.
.box2 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
margin-right: -3px;
}
If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.
In a situation like this, I would tend to get round the problem using an IE-only stylesheet that fudges the values until they work. In this case, just set the widths to 33%, it won't be perfect but then that's just the nature of the web.
I think that a simple answer might be to not round at all, just create a final "spacer" element with a 1% width that shares the look of the 1/3rd elements. Even IE should be able to deal with a 33 + 33 + 33 + 1 rounding.
I had the same problem. ie7 did not render 33.33% correctly. It would work with 33% but then it was a hairline off. I used the advice from the second block of code in the first response above, plus a little ie hack. It worked for me, I hope it helps.
.all-boxes {
width: 33.33%;
float: left;
display: inline;
*margin-right: -1px; /* Add the asterisk */
}
The margin value might need to change based on your implementation, but 1px worked for me.