We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
Related
weird bug here. Searched on the internet for hours but no working solutions yet :(
https://www.*****.*****/
It only happens on the page with parallax, a page without parallax is fine (biografie page).
What happens is that when you look closely, you will see that the white transparant-ish header flows OVER your scrollbar.
When taking a closer look you will see that the whole body is floating over my scrollbar.
Does anyone know a way to 100% fix this? I tried lots and lots of answers on the internet but none gave me a working solution.
Hope someone can explain to me what is happening and how to solve it.
Best regards
You can't place the menu below the scrollbar, because the scrollbar on pages with .parallax containers is not the <body>'s scrollbar, but .parallax's scrollbar.
And you can't place element A between element B and element B's scrollbar, unless element A is a descendant of element B.
However, the real problem is not placing the menu under the scrollbar. The real problem is being able to use the scrollbar (click its top arrow) through the menu, where they overlap.
Which is quite possible, using:
.menu {
pointer-events: none;
}
.menu-wrapper > * {
pointer-events: all;
}
(This makes the menu transparent to pointer events, except for children of .menu-wrapper, which do not overlap the scrollbar).
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html
I'm having a problem with a dropdown menu under IE (6 and 7).
http://www.amaconsulting.pl/promocje.html
As you can see, the dropdown hides behind the main content area in IE.
It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI
I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).
The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.
If someone could provide some advice, I'd be very grateful.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.
So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.
Updated:
So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.
I managed a z-index work around here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
IE does not use z-index correctly.
Check the z-index's in the CSS code of the website. You will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery. When I sort this one out, I will post the full solution here.
http://biochrom.fivesite.co.uk/catalogue4.asp
On the page above there is an image floated to the left. To the right of it is a list, titled "features". The list items have a background image, however, it isn't appearing. List 2 shows how the background image looks.
Does anyone know how I can make the bullets visible?
I know this is a year old post but others may want to know...
What happens if you are using a content management system and some pages have images & some don't you wouldn't want your list items to be 200px in the content?
You can add this CSS to your UL/OL element:
overflow:hidden;
I hope that helps.
Your image has a float:left property. The list items are therefore rendered "behind" the image.
margin-left:200px;
on the UL element will solve your problem.
Alternatively, you can apply a float:left on your UL-element. This will make it float right to the image, but will make the following content appear on the same line. You can prevent this by clearing the UL-element, or adding element after the UL-element with...
clear:both
...applied to it.
More information about this behaviour can be found at http://www.positioniseverything.net/easyclearing.html.
This thread is old indeed, but always relevant...
Another alternative solution:
display: inline-block;
Put this on the UL. It forces the entire ul to appear after the float. That way you can have a page with or without the image and it will always display correctly (checked on FF4, IE7 & 8, Chrome 11).
Alternatively, you could use the list-style-image property instead of background-image. I ran into this very problem the other day: the text-wrapping behaviour that floats exhibit on their 'neighbours' only applies to 'content', not background images (for example).