I have made a carousel of items using the Malsup Cycle plugin. It all works great except when zooming in IE7. The borders on the list items seem to fly off while the text remains fixed or hidden by other elements.
The HTML contains some extra containers to make vertical alignment in IE7 work the way we need it. Otherwise the HTML fairly standard. Fiddle below
<li>
<div class="outerContainer" style="width:55px;"> <!-- example of a specific width applied -->
<div class="innerContainer">
<div class="element">
Incoming Arrival</div>
</div>
</div>
</li>
http://jsfiddle.net/QypfY/
I know JS Fiddle doesnt work in IE7 but perhaps someone has an idea of whats going wrong. I tried changing the absolute positioning to relative but i still get the same issue.
Any help much appreciated.
Related
I'm working on a website which is working perfectly on every browser except firefox. In firefox extra space is added at the end and an extra vertical scrolling is there. My website is hosted here. Can anyone please tell me whats going wrong.
The I frame could be causing it. If you add
Style="position:fixed;"
in a div serving as the back ground like this
<html><head><title>your title</title></head><body>
<div Style="position:fixed;" name="entire web page">
<p><h1>HI and welcome to my world</p>
<div>some content...</div>
</div>
You might also add it to any "big" items like large pictures
it will also help if to make sure all of your appending** height percentage add up to no more than 100% trying to display 140% of a screen means it needs a scroll bar. a have had this trouble me for days before. **Any object that is stacked on top of another.
I created a testcase here http://testcases.site44.com/ in IE-7 dropdowns are not coming over banner image. in firefox and chrome it's fine.
Please help to find the issue.
IE has a different approach in understanding z-index.
Besides the very irritating approach of HTML in the mentioned link, you should do the following:
if you have 2 divs, and in the first one there is something that should go over content in the second one, than you need to set z-index on both of them, and a higher value for the one that has the content that goes over the other.
example:
<div id="wrapper">
<ul id="flyout">
//
</ul>
</div>
<div id="content">
//
</div>
CSS:
#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}
IE now understands that the content in the first div should go over the content in the second div.
Try to put yours element id="footer" with a higher z-index than id="main"
Remove
z-index:1 from div id="banner" do this changes for ie-7 only
in-fact only z-index:1is affecting for ie-7
I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try:
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!
i just went to test a website in firefox 4 (beta 10) and the horizontal menu is showing up vertically.
In chrome, the menu is horizontal like this:
but in firefox 4 it shows up like this:
I am using the superfish horizontal menu. The examples on the website seems fine in firefox 4.
how would i begin to investigate if this is a bug in firefox 4 or is there something wrong with my horizontal menu code??
I don't think your problem is with superfish or the underlying suckerfish. A quick look indicates that <div id="title"> is floated to the left but the floats aren't cleared between that and <table id="menuHeader">. The #menuHeader table and hence the <ul> are positioned right beside #title in Firefox so the table doesn't get enough width for the floats to layout horizontally.
As a quick hack you can stuff a <br/> right before #menuHeader:
<br /><table id="menuHeader">
and you should see the Firefox problem go away. However, you should explicitly clear your floats somewhere sensible after #title and before #menuHeader. Clearing between #header and #flashwrapper seems appropriate:
<div id="header">
<!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
<!--...-->
</div>
You might be able to use an overflow:hidden clear fix for this too but I tend to prefer explicit clearing even if it does pollute my HTML with styling information.
And as far as how to debug this sort of thing goes, the DOM inspector in WebKit browsers (such as Chrome and Safari) is freakin' awesome. Firebug's DOM inspector is also pretty good. In a case like this, you'll want to use them both concurrently. DOM inspectors, guess work, experience, and lots of swearing are my tools for figuring out things like this.
I have kind of a weird problem ..
Something that isn't working on ff & safari but IS working on IE on itself is already pretty weird but I can't seem to figure out this problem..
On my site http://www.turnkring-excelsior.be there are links to social media in the top right corner (youtube, facebook and flickr), on IE they are linked, on ff & safari they aren't ..
Now, I narrowed the problem down .. It seems to be related to the width of my wrapper div, in my css file I declare the width of this div to 1000px. If I enlarge this to say 1200px, the links DO work on FF & safari..
If I enlarge it just a bit, like say 1050, the flickr link works only (the one at the far right)
Does anyone have any suggestions ?
This is a combination Positive Margins errors, where you have attempted to line up your divs the way you want them. Essentially you've managed to place one div over another, hence blocking the links.
#social currently has a positive top-margin of 23px, whereas #image has a number of margins defined on nearly all sides presumably to force it over to the right, below the social links? Due to the margins of #image overlapping with the content of #social the browser thins that #image is another layer.
You will need to work out a better way of positioning these, perhaps two container divs acting as columns floated.
Pseudo (not tested):
<div id="container">
<div id="top-bar">
<div id="menu" />
<div id="social" />
</div>
<div id="left">
content n stuff
</div>
<div id="right">
<div id="image" />
</div>
</div>