IE7 z-index problem - html

Hiya! I'm having problems with z-index in IE7. I have a table where the user is asked to enter address. The javascript validator box 'formStatusBoxContainer' for postalCode is appearing behind the select box and the icon 'formStatusIcon' on the next row. Any idea how to solve this? Besides moving the box. Everything looks fine in FF and IE8.
<tr class="rowBack2">
<th width="150px">Postleitzahl:</th>
<td>
<input type="text" name="postalCode" value="" >
<span style="position: relative;">
<span class="formStatusBoxContainer">
<img src="/images/formfield_default.gif" class="formStatusIcon"
id="postalCodeIcon">
<span class="formStatusBoxTooltip" style="display: none;"
id="postalCodeStatus">
<div class="formStatusBoxInner" id="postalCodeStatusInner">
Bitte geben Sie die Postleitzahl ein.
</div>
</span>
</span>
</span>
</td>
</tr>
<tr class="rowBack1">
<th width="150px">Land:</th>
<td>
<span style="position: relative;">
<select name="country" id="country">
<option value="AX">Aland Inseln</option>
<option value="DZ">Algerien</option>
<option value="AD">Andorra</option>
</select>
</span>
<span class="formStatusBoxContainer">
<img src="/images/formfield_ok.gif" class="formStatusIcon" id="countryIcon">
<span class="formStatusBoxTooltip" style="display: none;" id="countryStatus">
<div class="formStatusBoxInner" id="countryStatusInner">Land</div>
</span>
</span>
</td>
</tr>
CSS for tooltip:
.formStatusBoxContainer { position:relative; }
.formStatusIcon { position:relative; top:0px;margin-left:5px;z-index:2; }
.formStatusBoxTooltip {
position:absolute;
left:35px;
top:-5px;
width:150px;
background:#7EA822;
padding:1px;
border-right:2px solid #666666;
border-bottom:2px solid #666666;
z-index:3;
}
CSS for table rows:
Just fonts, margins and tabbing. Nothing with position or z-index that should affect.

It's a known issue in older versions of IE (I think IE7 fixed it). The select box will always be rendered on top of the other HTML elements. I believe it is because the select box is a Windows control and is not managed by the browser, or something along that line.
In any case, the most common solutions to this type of issue are:
1) Hiding the select box when the hidden/clipped control has the focus.
2) Putting an IFrame behind the control. The IFrames have the same properties as the select boxes, and also are always on top of the other HTML elements, including select tags. See http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx for an example of how to do it. That's of course an ugly hack.

To get around this in the past I have used BGiFrame with jQuery.
The reason for the problem is IE uses the windows dropdown control for the dropdown box where as all other browsers use a dropdown box coded into the rendering engine.
HTH

I believe you'll need to give the select box's parent a lower z-index (in this case the table?)
table {position:relative; z-index:1;}
I've had the problem before with dropdown menus appearing behind inputs and that solved those.

Related

Mobile Safari Z-Index Not Working

I have a plugin (intro-js) for creating an introductory tour containing a opaque overlay with spotlights on my page divs.
Using the following css rules I try to bring up the element within class introjs-showElement above all other elements.
How can it show the element in css like my desktop browsers? Currently I only see a white box in my css.
.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
z-index: 99999998 !important;
}
.introjs-showElement>* {
-webkit-transform: translateZ(1px) !important;
}
HTML Sample of Div Text and Toggle Buttons not showing up (all exist in a fixed header scrollable angular angular datatable plugin)
<td class="td-nopadding ng-enter-fast ng-leave">
<div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
<div class="text-input">
<input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
</div>
<div class="inc-dec-buttons">
<button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
<span class="glyphicon-plus"></span>
</button>
<br>
<button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
<span class="glyphicon-minus"></span>
</button>
</div>
</div>
</td>
This is a known issue with the library:
https://github.com/usablica/intro.js/issues/532
https://github.com/usablica/intro.js/issues/507
https://github.com/usablica/intro.js/issues/401
https://github.com/usablica/intro.js/issues/123
...to name a few.
The issue is the stacking context and the way that introJs makes elements appear on top:
The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).
So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.

How to only show datalist in the bottom input in HTML

I use a select in datalist. But I have an issue. When my datalist show in the top of input, I cannot scroll in my datalist. But it doesn't occur when datalist in the bottom.
Here's my code:
<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}"
ng-model="icon.name"
list="classIcon"
id="searchIcon"
ng-change="changeFn(icon.name)">
<datalist id="classIcon" class="scroll" >
<select class="selectIcon">
<option ng-repeat="icon in classService.classesAwesome "
value="{{icon}}"
ng-bind-html="icon | highlight: $parent.icon.name ">
<i class="{{icon}}"></i>
<span ng-bind-html="icon | highlight: $parent.icon.name "></span>
</option>
</select>
</datalist>
You should add this code to your CSS.
.dropdown1 {
width:290px;
overflow:scroll;
height: 20px;
}
I know this is old but I was looking for a way to do this and found a simple solution to make it always sit below the input field.
I just customised the actual html element in the CCS like this:
datalist {
position: absolute;
}
I have tested this in Chrome, Mozilla and Edge.
I did find that the issue only really appeared in chrome and it was to do with the list size and screen width dimension as to whether it appeared at the side or above or below.

HTML Error w/ Document Formatting

I'm typing up a document for a nonprofit I'm involved in, and I'm currently working on the headers at the very top of the first page.
It's supposed to be two headers on the same line, one left-aligned and the other right-aligned, and both 13px bold text. It's also supposed to be directly above the title of the document, which is centred in <h1> text style.
Everything is going swimmingly except for the fact that the headers are both left-aligned, and I cannot for the life of me figure out what I'm doing wrong. I know it's not my browser because both StackEdit and WordPress fail to recognise it. And I asked 2 friends to take a look at it, and they can't figure out what's wrong either.
I recognise I probably screwed something up since I'm still learning HTML (I also haven't learned CSS yet), but it has thus far escaped me.
This is what I have:
<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>
Is this what you are trying to do? Use float css property
<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>
Try to use div instead of span like in the following example:
<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>
Hope this may help. Best regards,
Because <span> defaults to display:inline, which means it will only grows as wide as its content's width. Try display:inline-block. Also use float to eliminate the white space between them:
span.header
{
display:inline-block;
width:50%;
font-size:13px;
font-weight:bold;
}
span.header.left
{
float:left;
text-align:left;
}
span.header.right
{
float:right;
text-align:right;
}
div.document
{
clear:both;
}
<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>
You are aligning the text of inline elements rather than aligning the elements themselves. If you inspect and look at the spans they are only as large as the text inside them. You can set the width's if you set them to display: inline-block and then the width to 50% and align the text however you want: http://plnkr.co/edit/hQKymbtYp5iBealcEkr3
<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
<b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
<b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
<h1>Document Name 1-PubDate</h1>
</div>
I'm going to change things up a bit and make it a bit more semantic (i.e. meaningful)
h1 {text-align:center; /*Center the H1 text*/
clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/
<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader">
<div class="project">Project Name</div>
<div class="org">Branch Name, Org Name</div>
</div>
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->
Learn more about how different elements display. You have block level elements, inline and (inline block) elements, and replaced elements (images and form elements).
Read more about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float
And to see a discussion of the merits of floats (and their drawbacks) and the inline-block alternative see: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, get to know some of the handy tools. Pressing f12 in Chrome and Internet Explorer give you the developemt tools for those browsers enabling you to inspect element on a web page and see what styles are affecting it and how they are affecting it as well as giving you the ability to experiment with the styles in place. Firebug for Firefox provides the same functionality.

Having issues positioning a select over a search bar

I've got the following...
<td class="lst-td" width="100%" style="">
<div style="position:relative;zoom:1">
<input autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1">
<span id="tsf-oq" style="display:none">
</span>
</div>
</td>
<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;">
<option value=9999>"a value</option>
</select>
Currently the select just displays next to the td which is a search bar rather than letting the search bar expand across the page and simply displaying within it (to the right hand side) how do I fix this?
Unsure of exactly what you are looking for but from what I can gleen you want a input with a select on top of it.
To do this set a div to position:relative and put the select and input inside it. Then set the input to width:100% and the select to position:absolute and top:0px; right:0px;
see http://jsfiddle.net/L593G/7/ for an example of this working.
From here you can use top and right to control the positioning of the select and the width of the div to control the width of the whole control.
This technique is called Relatively Absolute positioning and more information can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Hope this helps :-)
float:left on both the <div> and <select>
See my example on jsfiddle - http://jsfiddle.net/Gpy9Y/
Oh and why are you using tables? NO NO NO NO!!!
Update (#15:28 GMT):
div{float:left; width:100%;}
div input{width:100%;}
select{position:relative; top:-20px; left:4px;}
You should use #Michael Allen example. But if you must stick with your current mark-up, this will work. http://jsfiddle.net/Gpy9Y/5/

Background Image not appearing. IE6 Fail

I know this is a common problem with IE6 from my Google search but everything I have tried has failed. Here is my HTML:
<table width="750" border="0" cellspacing="5" cellpadding="5" class="largetable" >
<tr>
<td width="65px"><b>SELECT</b></td>
<td class="plus" width="300px">
<select id="op" name="">
<option selected="selected"></option>
<option>SUM</option>
<option>AVG</option>
<option>MIN</option>
<option>MAX</option>
</select>
<!-- problem here, background image not showing -->
And my CSS:
.plus a {
background-image:url("../images/plus.png");
background-repeat:no-repeat;
border:medium none;
margin-left:3px;
padding:6px 4px 6px 30px;
background-position:2% 100%;
}
The problem is that the background image does not appear. It appears on my Firefox browser but not on IE6.
I have tried using height: 1% and also position:relative and neither worked. I tried tons of other stuff but the damn thing won't appear.
IE6 won't render empty inline elements. Adding display: inline-block should fix it. You may prefer to serve that rule in a * html .plus a CSS hack to target only IE; I think it should generally be fine elsewhere though.