According to microsoft, IE8 and IE9 support the :after selector. I use this selector to force elements to have the proper height, if all the elements inside are floated. This allows backgrounds to show up properly, without having to specify a set height.
My after code typically looks like this:
.after:after{
content: '.';
height:0;
line-height: 0;
display:block;
clear:both;
visibility:hidden;
}
So now to the bug. When I added a few :after to my page at https://spartanstats.com/reach-stats-gamertag and I hover over each of the li elements in the middle of the page, IE9 grows the page by one line each time.
EDIT:
Upon further investigation the :hover property on each of the dynamically generated li elements is seemingly the root cause of the problem. Removing the hover code for the li's fixes the problem. Of course this isn't the fix I was hoping for. I'll keep investigating.
Currently I'm lost in finding the solution to this issue. But I know my users will potentially hate the site when it starts growing out of control!
Came across this issue myself. It may be related to this issue
Apply min-height: 0% to the containing element.
Have you tried using
content: '';
instead of
content: '.';
Having a character in your after element and setting it to use
display: block;
visibility: hidden;
will still cause the element to take up space on the page unlike when you use:
display: none;
My guess is that even though you're setting the height of the :after element to 0, the . in the element is causing Internet Explorer to render an unwanted height.
Related
I'm trying to put an (hover) image on top of its parent div. I use an older version of www.cssplay.co.uk/menu/magnify.html, though a bit modified to my needs.
I found a way to achieve what I want earlier in a previous site => http://www.keurslagergeertenkristel.be/. In the center you'll see a picture containing a black/white photograph at left and some pink/bordeaux tints and some text. If you hover with cursor, the picture will enlarge so you can see it properly (I know there might be an issues with small screen resolutions, but thats not the problem right now)
I'm trying to do the same thing again in a new site I'm building, but I can't get it to work :s The image always stays in its parent div.
You can check out here => http://www.vermeulenklasseslager.be/NEW/.
The CSS for the images for both websites is identical, so it must be something with the parent div I guess, but I can't see it.
I tried a lot of variations, using display:block, position:relative (for parent div), overflow:hidden and auto, adding extra divs or spans, adding z-index...
UPDATE: I JUST DISCOVERED THE PROBLEM ONLY HAPPENS IN IE11. (wich makes I understand even less why, because the first website works in all browsers)
I think the solution to that is:
position : fixed
in ie 10/11 it crops the large image because of a border-radius property on the content div. The solution is to remove overflow:hidden and clear this container with standard clearfix:
#content:before,
#content:after {
content: "";
display: table;
}
#content:after {
clear: both;
}
#content {
zoom: 1;
}
I'm trying to fiddle my problem on http://jsfiddle.net and have got strangest behaviour there. Can you please explain where these (http://jsfiddle.net/C6V3S/) vertical margins come from? Does appear on jsfiddle.net (at least in Chrome and FF), do not appear when copy/pasting to local standalone file ...
works OK afer changing to simple block
Sample for standalone test file:
.btn {
padding: 0px;
border: 1px solid red;
display: inline-block;
}
.txt {
display: inline-block;
width: 12px;
height: 12px;
border: none;
padding: 0;
margin: 0;
background: #77FF77;
}
</style>
<div class="btn"><div class="txt"></div></div>
When you make the .txt element inline-block, it is taken into the text flow of the parent .btn element. At that point, the line-height of .btn kicks in, which is larger than the height of the .txt element.
So, add .btn {line-height: 10px;} (for example) and your problem is fixed. I saw you already tried to influence the line-height of the inner .txt element, so you were pretty close with your attempts. Adjusting the font-size would work as well, since the default line-height is formula-based on the font-size. Anyway, the key is to do that on the parent element, not the child element.
You don't have this problem when you make the inner element a block, because then there's no text-like content, so there's no line-height applied at all.
inline-block is brilliant and convenient for so many cases. But they come with one annoying pitfall: unnecessary whitespace. As you're nesting an inline-block within an inline-block, that results in a white-space disaster. You can read all about whitespace and inline-blocks on David Walsh's blog.
There are many ways to handle this, but my favorite (and most widely supported) solution is setting this to the parent inline-block element:
.btn {
font-size: 0;
}
Here is an example of before/after:
http://jsfiddle.net/C6V3S/1/
This is not caused by whitespace (you don't have any inside the divs in your HTML), nor by putting inline-block inside of another inline-block. This is caused because of the line-height of the outer div. As you can see from the below fiddle, the current line-height of the red-border div has a line-height that is being set by the browser (and it varies from browser to browser), and as long as there is something inside of the div that takes up space as an inline or inline-block item, the height will be affected by the line-height.
There are many ways around this, and they all pretty much do the same thing:
1) Take the inside element out of flow, and then reinsert it back in. This will make the outer div think that there is nothing inside of it, and try to become as small as possible, and then fill up space exactly around the element when it inserted back in. The easiest way to do this is by floating it.
2) Make the outer element take up no space. This will make the inside element define the height and width of its parent. If you do font-size: 0, as mentioned before, this will make the outer element think that the inline inside element takes up no space, and therefore not take up any space itself, and wrap itself tightly around the inner element. This can be done by setting line-height: 0 as well (which is a perfect fix for the problem, as the problem is line-height).
There are other ways to make the parent element not have its line-height, but that should get you started.
http://jsfiddle.net/C6V3S/4/
It's "just how it works," but it can be worked around. The easiest way to fix it would be to set negative margins on .btn. It should work for any modern browser (IE8 and above, if I recall). Floating the elements should achieve what you want, too. As a wholly different solution if your problem with it is merely aesthetic, you can just wrap the elements in a parent, set that parent's background-color to what you want, and not worry about its child elements' backgrounds. They'll be transparent to whatever is beneath them, and you'll get rid of those visual breaks.
If you want to stick with negative margins on with display: inline-block, but need that pesky first element not to jump leftward out of its parent, you could target it explicitly:
.btn {
margin-left: -4px;
}
.btn:first-of-type {
margin-left: 0px;
}
Edit: After reading another answer, I'm not sure if I understood the question -- do you mean the margin atop the elements (which would be horizontal) or the margin to the sides (vertical)?
I am new to css and started working on a few simple projects. I ran into a really weird issue styling buttons, though. The following code will not result in a link:
But for some reason, this will:
My question is basically, how in the world to you set the size of a link without having to use float? And why would float work?
Thanks!
It is because an 'a' element is usually displayed inline. You can over-ride it by using display:block;
More on 'display' here: http://www.w3schools.com/cssref/pr_class_display.asp
Regarding float:left;
When floating left, the browser automatically over-rides the display to be a block.
Since "a" is inline element, you must display it as an inline-block
a { display: inline-block; }
to keep it inline but be able to change it's dimensions, padding, margin and basically everything else that you could do with an "div".
There is a IE7 and lower issue with inline-block so you may want to use css "hack":
a {
display: inline-block;
*display: inline; //* stands for IE7 and will not affect Chrome, Firefox and other browsers including IE8+
*zoom: 1;
}
I am working on a project and I am using woocommerce dynamic gallery pro plugin to preview product images in product page. but the issue is that the preview image is showing half in IE.
please can you guys check the following link in IE and help me to fix.
http://www.joannelouise.com/shop/sexy-ladies-red-embellished-dress/
I find a fix, but I am not understanding how i apply this.
I notice if i remove the position from the following class, it may fix the error. but when i am giving position some value like absolute, relative, fixed, static or even inherit. it isn't giving any response until i off the position.
so guys kindly help me to fix this.
following are my changes. which are effecting 50%.
.ad-gallery .ad-image-wrapper .ad-image {
overflow: visible !important;
position: inherit !important;
}
but position thing is not working
You should really avoid so many inline styles. It makes for messy code and more work.
For some reason you're setting .ad-image to {top: 179px;}. Try this (after removing the inline top statement):
.ad-gallery .ad-image-wrapper .ad-image {
top: 0;
}
Strangely, I see {top: .5px} in Firefox. I'm not sure what's going on.
I'm not on a widows box right now, but it could be a case of not clearing a float or a parent item isn't containing children who are floated.
Try using:
overflow:auto on the parent container of whatever images are not showing fully. Can also try using overflow:hidden to achieve the same but avoid scrolling bars in some instances.
Try to avoid ever using !important on production sites if possible.
OP, What version of IE are you using?
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Via http://www.w3schools.com/cssref/pr_class_position.asp
IE 7/8 Work-around:
.ad-gallery .ad-image-wrapper .ad-image {
overflow: visible !important;
position: <whatever-the-parent-is> !important;
}
Since IE 7/8 doesn't understand to inherit the position from the element's parent, you can create a CSS rule that specifies what position you'd like the element to use.
I have a paging control on my site that has it's container element set to margin:auto so that the pager control are centered within the element. It works great on all browsers except for IE7. In fact, I just realized my site has several issues with IE7 and I'm trying to work through them all. However, I've been stuck on this one for some time.
Take a look at this page.
(I know there are other IE7 issues on this page, focusing on the pager controls first). If you use IE9, you can hit F12 and set the "Browser Mode" to IE7 in the menu bar. Compare it to the same page in any other browser/version.
Can anyone tell me specifically why this is happening based on the CSS/HTML I'm using? I've been trying things for what seems like hours and I'm not really getting anywhere with it.
The problem is that you're relying on display: table to shrink-wrap the ul to the width of the lis inside it. Unfortunately, display: table is not supported in IE7.
Switching to display: inline-block is one way to fix this.
On previous_next_container_forum ul.list_paging, remove display: table and add:
display: inline-block;
*display: inline;
zoom: 1;
The ul is now exactly as wide as the lis inside it, without the use of display: table.
To actually make it centered, you need to add text-align: center to a parent element, such as .previous_next_container_forum.