I've created a top level menu with dropdowns but the drop down isn't coming to the front in IE. Chrome, FF, and Safari work great.
My code looks like this:
<li id="search"><a href="#search" class="drop" >Search</a>
<div class="drop2columns dropcontent">
<div class="col_2">
<ul>
<li id="search_basic">Test1</li>
<li id="search_advanced">Test2</li>
</ul>
</div>
</div>
</li>
The css files look like this:
#menu .drop2columns {width: 130px;}
#menu .col_2 {
display:inline;
float: left;
position: relative;
margin-left: 15px;
margin-right: 15px;
z-index: 9999;
}
#menu .col_2 {width:130px;}
What am I missing? Like I said this only happens with IE (versions 7,8, and 9)
z-index and IE was always a nightmare.
There's several workarounds about, see
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
for one of them.
z-index doesn’t work correctly in Internet Explorer: positioned elements create a new stacking context, starting with a z-index of 0. To get around this you can make the parent element positioned (e.g., position: relative), and set its z-index to a value higher than that of the child.
Related
I have a strange issue with google chrome:
With the following code:
<li class="smallAds fleft">
<a href="news">
<img class="addBorder" src=".." alt="Dialetu news!" />
</a>
</li>
The li element on firefox and other browsers is 190px width but on chrome is 190.016px. This small diference is enough to ruin the layout.
Anyone knows why this happens?
This only happens on Chrome for mac, on windows it works perfectly. Also my css rules don't have the width for the li element, since it should inherit the width of the img.
The relevant CSS here is the one associated with the image, since the above elements don't have any specific style:
#afterSlideShowSection ul li img {
border-right: 2px solid #fff;
box-sizing: border-box;
height: auto;
margin-top: 2px;
width: 190px;
}
Seems to be an issue in chrome:
https://code.google.com/p/chromium/issues/detail?id=491328
Position absolute seems to be working different in Firefox and chrome when using float: left.
Chrome:
Firefox:
.ulfloat{
text-decoration: none;
}
.ulfloat li{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>
Using:
Ubuntu 14.04.1 LTS
Google Chrome 39
Firefox v34
This is the structure I'm using to create a notification badge and because of this issue my notification looks the following way:
Chrome:
Firefox ( this is the behaviour I want ):
how can I fix it to ensure compatibility between browsers?
Which is the correct behaviour ?
You need to set left / right or top/ bottom that is the main reason we use position: absolute
absolute Do not leave space for the element. Instead, position it at a
specified position relative to its closest positioned ancestor or to
the containing block. Absolutely positioned boxes can have margins,
they do not collapse with any other margins.
Note:
You may want to add position: relative to the list element since you are using the position: absolute on his child.
Here is an alternative:(apply the float on i and span instead of li)
.ulfloat{
text-decoration: none;
}
.ulfloat i, .ulfloat span{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>
Can anyone tell me why the absolutely positioned navigation buttons in the top right corner of this page are not visible in ie7, but are working fine in all other browsers (including ie8 and 9)
Thanks!
For one you are using display:inline-block which isn't properly supported by IE7 or below (sometimes it works, others not -- depends on the element and the situation).
Use display:block and float:left instead as this is more supported (however if you see my first link you can using display:inline too).
Don't forget to include overflow:hidden in the surrounding UL element either otherwise you'll get strange results due to the float.
css:
#navlist {
list-style: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
/* your styles from before */
background-color: #F2F2F2;
border-radius: 5px 5px 5px 5px;
color: black;
height: 20px;
padding-top: 2px;
text-align: center;
width: 20px;
}
markup:
<ul id="navlist">
<li id="li1">
<a id="link1" href="#">1</a>
</li>
<li id="li2">
<a id="link2" href="#">2</a>
</li>
<li id="li3">
<a id="link3" href="#">3</a>
</li>
<li id="li4">
<a id="link4" href="#">4</a>
</li>
</ul>
useful links:
http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
http://www.quirksmode.org/css/display.html#t03
update:
Another thing you could try (if the above doesn't solve the problem) is to temporarily remove your conditional commented code for IE7 - just to make certain there isn't anything in there causing a problem:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<script type="text/javascript" src="Scripts/ie7.js"></script>
<![endif]-->
update:
Now that I've been able to actually test in IE7 the problem shows up if you enable borders - using css borders to debug is always a good idea :) The problem above is being caused by an child element pushing out the width of your parent element innerWrap. This wont affect more modern browsers, but IE7 and older always try and wrap their children no matter where they are placed or what size they are (unless you override this behaviour). Because your child element slideWrap is 3000px wide, it is causing your right positioned elements to vanish off the edge of the screen.
The following css should fix it:
#innerWrap { width: 100%; }
Use left or right properties with it in order to make them visible.
I have a <ul> which contains many lis and divs. The li's are autogenerated from inputs and labels, and the divs are floated right and serve as tooltips to explain each input.
The code is something as follows:
<ul>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
</ul>
This works fine in firefox and IE8, but in IE7, it assumes that each div is part of the previous <li>, and completely drops the </li> tags from the interpreted source code (found out from IEtester's View Source Code dev tool). Anyone know why this is happening and how to ammend it?
CSS:
.tooltip { float: right; width: 140px; font-size: 0.9em; padding: 9px 9px 9px 15px; margin-top: 15px; }
You can't have div inside the <ul> directly. They can go inside the <li> elements though. This may or may not help with the problem you're having but should be fixed to make sure it isn't the cause.
<ul>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
</ul>
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D