We have a news roller here http://www.businesseventsydney.com.au/home-page-test.cfm in the right nav column. It works great in FF and Chrome, but in IE, news stories are running into each other.
Can someone shed any light on what may be going wrong with it?
This seemed to work correctly in IE8, what version are you using?
Anyway, I was able to reproduce putting it into Compatibility Mode or IE7 mode.
Identifying the problem, it seems the container div which has overflow: hidden correctly set, is set to a very large height. This is the div I am referring to:
<div class="latest-news-content" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 399px; ">
I set the height to 130px and it seemed to solve the issue. The more interesting question is why does this not happen in all browsers, I've yet to investigate.
Sometimes there is a difference between IE versions and other browsers when it comes to pixel spacing. A work around for this would be to have an IE specific style for the ul and li elements. I would recommend that you wrap your current in line css (regardless):
<ul style="top: -465px; height: 1380px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; list-style-type: none; position: relative; z-index: 1; ...
<li style="width: 199px; height: 115px; overflow: hidden; float: none; ...
into separate classe(s) , and switch them out in IE 9 browsers for the amended versions. You probably only need to tweak the top value for the ul element, and the height of the li element
add position:relative to div.latest-news-container
Related
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.
Here is the HTML, with the unnecessary parts stripped out:
<div class="container">
<div class="page-content">
<div id="corner"></div>
... page contents here
</div>
</div>
And here is the CSS:
.container {
margin: 0;
min-height: 100%;
padding: 0;
}
.page-content::after {
content: "";
display: block;
height: 1px;
}
.page-content {
background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 190px 100px 150px;
max-width: 64em;
padding: 10px 120px 145px;
z-index: 2;
}
.page-content {
margin: auto;
max-width: 64em;
padding: 0 1em 1em;
}
#corner {
background-color: #ffffff;
background-image: url("corner.png");
display: block;
height: 200px;
left: 120px;
position: absolute;
top: 20px;
width: 200px;
z-index: -1;
}
As you can see in this screenshot the #corner element is not positioned correctly.
I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.
try adding position:relative to the containing elements of div#corner, .container and/or .page-content
position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.
so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.
It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.
Side note: Not sure if this is what you're trying to do, but min-height:100% does not make content's size to 100% the height of the screen.
Replace that with this:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Anyway, you've set #corner to
position: absolute;
top: 20px;
left: 120px;
And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.
Just in case this helps someone else:
I had a similar issue. It looked like ie11 was ignoring the 'right' property:
right: -320px;
but it turned out to be because I had set the 'left' property to:
left: initial;
Turns out the 'initial' keyword is unsupported by ie11:
left: initial doesn't work in internet explorer
My dropdown menu works fine normally - http://imgur.com/Ljodw0J
But is covered by widgets on mobile - http://imgur.com/1AyGiaS
And is even covered by the chart on mobile - http://imgur.com/dpoOmai
Shouldn't they render the same?? AND what could be the source of the problem? and how can I fix this issue?
Details
Some styling details:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
}
NOTES
There is no z-index on the overlapping elements.
The entire content of the page has a snap-content class which sets the z-index: 2;. This is to let me use the snap.js plugin.
Yes, they should, but it's not uncommon that they don't. This is why cross-platform HTML, JS and CSS is such a PITA, and why, if you're good at it you print money.
I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.
The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.
Has anyone else come accross this? I'm kind of stuck on this...
UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...
<div class="list-name">
<ul>
<li class="truncated">
<a href="">
Hover me to see all the magic thext I'm hidding
</a>
</li>
</ul>
</div>
It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.
That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:
http://jsfiddle.net/Nt5bN/13/
CSS:
.list-name ul {
margin: 50px;
padding: 0;
list-style: none;
}
.list-name li {
display: block;
float: left;
width: 60px;
height: 29px;
overflow: hidden;
background: #eee;
}
.list-name a {
width: 300px;
display: block;
float: left;
}
.list-name li.truncated:hover {
overflow: visible;
}
.list-name li.truncated:hover a {
margin-top: -3px;
margin-left: -8px;
background: #fff;
z-index: 9999;
padding: 2px 0 2px 7px;
border-radius: 3px;
border: 1px solid #ddd;
}
Yesterday i check that one highlights products slide that i have in the home of one webpage is not property vertical aligned only on firefox, it works fine on IE and Chrome.
I was searching info and i find a lot of many years ago bugs on FF. I try a few solutions i find but no one works.
<div id="feature-wrap-container">
<div id="feature_wrap">
<div id="scrollable">
//a list of element floating left
</div>
</div>
</div>
#feature-wrap-container{
background-color: #ffffff;
width: 100%;
height: 260px;
}
#feature_wrap {
width: 960px;
height: 260px;
overflow:hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#scrollable {
height:100%;
}
On chrome and IE the div is center on the window and in firefox the feature_wrap align to right and make the window bigger than the 100%.
The slide is based on: http://wordpress.org/extend/plugins/featured-posts-slideshow/, but obviously modified.
Thanks in advance.
See I have created a fiddle of yours here, and it looks good for me in firefox. I have reduced the width of the #feature_wrap and checked in firefox, and it is working. What is the issue are you facing?
Get the full image here.
Instead of using overflow: hidden it's better to use overflow-x: hidden, overflow-y: hidden as below:
#feature_wrap {
width: 960px;
height: 260px;
overflow-x :hidden;
overflow-y: hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
My default page works fine in ie but Firefox it has problems with the a:link.
At my page http://www.printer-ink-toner.co.uk and half way down is a link to my status on ebay.
For Firefox this link does not work and for ie it does. I can reproduce this behavior on my development PC also.
The link is contained in a float div block called "centercol50pct" which has CSS of
.centercol50pct {
position: relative;
float: left;
width: 380px;
margin:0px 5px 0px 0px;
}
If the float:left; is removed it works fine. changing any other parameter does not have an effect on the problem.
In addition the search drop downs do not work in Firefox either. I assume it is related but thought I would try and solve the more simple 'a link' problem first
Thanks
Nigel
The centrecolLowerblock div was covering up the above content, therefore making the link unreachable.
Change
#centrecolLowerblock {
position: relative;
top: 20px;
}
to
#centrecolLowerblock {
clear: both;
position: relative;
top: 20px;
}
Also your dropdowns are not working due to the same problem (an element is overlapping them). Try changing.
h3.h3_Largeblue {
color: blue;
font-size: 20px;
}
to
h3.h3_Largeblue {
clear: both;
color: blue;
font-size: 20px;
}
That should sort the problem's :)