Why tooltip (on hover) is coming on wrong place in Firefox and IE, Chrome is fine
Example http://dabblet.com/gist/3450459
CSS
.hiq-checkin img { float: left;display: block;margin-right: -2px;}
.visited-profile {float: left;}
.visited-profile a {color: #333 !important;text-decoration:none;position: relative;}
.green-badge {position: relative;z-index: 601;background: url('http://png-3.findicons.com/files//icons/1689/splashy/16/check.png') no-repeat;width: 10px;height: 15px;display: inline-block;float: none;}
.idea-ttip-wrapper {position: absolute;width: 156px;z-index: 602;margin-top: -8px;display: none;margin-left: -53px;}
.ttip-arrow {background: url('http://www.splitbrain.org/_static/ico/semlabs/ico/arrow_up.png');height: 7px;width: 11px;position: absolute;left: 23px;top: -5px;}
.idea-ttip-content {background: #ffffcc;border: 2px solid #cccc99;display: inline-block;text-decoration: none;color: #666;padding: 6px;font-size: 10px;}
.visited-profile a:hover .idea-ttip-wrapper, .visited-profile a:focus .idea-ttip-wrapper { display: block;}
HTML
<div class="hiq-checkin row-id">
<div class="visited-profile without-photo">
<a href="#">
<span class="green-badge"></span> XXXXX,
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<a href="#">
ZZZZZ,
</a>
<a href="#">
<span class="green-badge"></span> ACSCS
<div class="idea-ttip-wrapper">
<div class="ttip-arrow"></div>
<div class="idea-ttip-content">
xxxxx xxxxx<br>
lorem for ipsum xxx
</div>
</div>
</a>
<span style="line-height: 2.5;"> edfsfsfsdn sdfdsf fsdsdfdfs </span>
</div>
</div>
Add
.idea-ttip-wrapper {
//your existant css rules
left:0;
margin-left:0;
top:10px; //tweak this to whatever you need
}
And
visited-profile a {
color: #333 !important;
text-decoration: none;
position: relative;
display: inline-block;
}
http://dabblet.com/gist/3451092
Related
https://imgur.com/eAgppZ4
https://imgur.com/GdUnQax
the part inside the red square is making problems.
The css classes used here look like this:
.overflowHidden{
overflow: hidden;
}
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
.floatAuto{
float: auto;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.alignCenter {
margin-left:auto;
margin-right:auto;
}
.alignJustify{
text-align: justify;
}
.summaryListStyle{
/*padding-left: 25%;*/
list-style-position: outside;
}
the markup looks like this
<h6 class = "alignLeft">Preisberechnung:</h6>
<ul class = "alignJustify">
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.basemodel.name }}:</span>
<span class="floatRight">{{ car.basemodel.price }} €</span>
</li>
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.edition.name }}:</span>
<span class="floatRight">{{ car.edition.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.edition.extras">
<span class="floatAuto alignLeft">{{ extra.name }} (gehört zur Edition):</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.extras">
<span class="floatAuto alignLeft">{{ extra.name }}:</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
</ul>
<div *ngIf="discount != 0.00">
Die Preise für Sonderausstattungen sind um {{ discount }}% reduziert.
</div>
<div class="summaryTotalPriceStyle exposedVerticallyTop">
Gesamtpreis: {{ price }} €
</div>
I tried multiple mixtures of the above shown css classes on the HTML elements, some worked better, some worse, but there was none which did the job perfectly. At some zoomlevel, the thing always crashed. I think this problem is connected to the use of the float property, but unfortunately I didnt find any other way to make the SPAN elements inside the LI elements move to the right. text-align property didn't have any effect, it didnt move the respective any further to the right.
See my snippet code and let me know
.panel{
width: 270px;
background:grey;
padding:15px;
}
ul{
padding-left:50px;
}
ul li{
margin-bottom:5px;
list-style-position: outside;
}
ul li .content{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
ul li > .content span:first-of-type{
max-width:80%;
}
ul li > .content span:last-of-type{
white-space:nowrap;
}
<div class="panel">
<ul>
<li>
<div class="content">
<span>Text 132456:</span>
<span> 26 €</span>
</div>
</li>
<li>
<div class="content">
<span>Lorem ipsum 123465:</span>
<span>25 000 €</span>
</div>
</li>
<li>
<div class="content">
<span>Lorem ipsum lorem ipsum lorem lorem:</span>
<span> 659 €</span>
</div>
</li>
</ul>
</div>
I have a page that I want to have the following format:
I am having problems getting the lower page navigation positioned properly. It needs to always be below the data columns. It currently wraps below the left column. It is supposed to have a border around it, but the border is appearing near the top of the page. Lastly the footer appears at the top of the page and not the bottom. I've been playing with this for over a day and can't figure out where I made my mistakes.
A stripped down version of the code is here:
.h2b {
/*page title*/
font-size: 17.5pt;
color: #469;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.a {
color: #469;
text-decoration: none;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
/*width: auto;*/
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 96%;
/*width: 98%;*/
/*border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;*/
left: 20px;
}
#major_revision {
/*position: relative;
left: 20px;*/
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
width: auto;
clear: both;
overflow: auto;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon modified 10-16-2015*/
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
border-bottom: thin black solid;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>PAGE</title>
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<header id="masthead" onclick="" style="background-color:#0047ff">
<p style="background-color:#0047ff;height:30px; width:104px">
<!--See helper file for paths to image files-->
</p>
</header>
<!-- End Masthead -->
<nav id="navigationcommon" onclick="">
<ul>
<!--See helper file for paths to image files-->
<li>Home
</li>
<li>About
</li>
<li>Contacts
</li>
<li>
Improve
</li>
<li>Tailor
</li>
</ul>
<a href="#" style="float:right;font:small-caption;border-style:none;
color:white; vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px">Advanced Search</a>
<!--See helper file for paths to image files-->
<input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;" value="Search" onclick="search()">
<input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
border-style:none; height: 26px; float:right; padding-right:5px; " value="Enter Keyword">
</nav>
<!-- Begin Page Content -->
<section id="page_content" style="top: 60px;" onclick="">
<div id="major_revision" style="position:fixed;top: 65px;float:left;width:100%;padding: 0 1% 1% 2%;">
<p><span id="area" style="font-weight:bold">Some Data</span>
<br>
<span style="font-size:x-small">Major Revision: <revision>1.0</revision><!-- Format is Major Revision: #.# -->
Date: <date>7/1/2015</date></span>
</p>
<!-- Format is Release Date: mm/dd/yyyy -->
</div>
<!-- Below is for the navigation buttons on the top of the screen. It goes ABOVE the LEFT COLUMN <div> -->
<div style="position:fixed;top: 120px;width:96%;margin:0 0 0 2%;border:thin black solid">
<!---->
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the top of the screen -->
<div style="position:fixed;top: 165px;float:left;width:98%;padding: 10px 0% 0% 2%;">
<span class="h1b">Page Title
</span>
</div>
<!-- Begin Left Column -->
<div style="position:fixed;top: 205px;width:95%">
<div style="position:relative;float:left;width:70%;padding: 0% 0% 1% 2%;">
<span class="h2b">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</p>
<span class="h2b">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxx</span>
<br>
<br>xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx.
<br>
<br>xxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx</p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div style="position:relative;float:right;width:10%;margin:0 2% 0 0">
<span class="h2b">xxxxxxx </span>
<p>xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
<br>
<span style="margin:1%;">- xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxx xxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxx</span>
<br>
<span style="margin:1%;">- xxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxxx xxxxxxx</span>
<br>
<br>
</p>
<!-- End Right Column -->
</div>
<!-- Below is for the navigation buttons on the bottom of the screen. It goes BELOW the RIGHT COLUMN </div> -->
<div style="position:relative;width:100%;margin:0 0 0 2%;border:thin red solid">
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous1" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text1" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next1" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text1" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the bottom of the screen -->
</div>
</section>
<!-- Begin Footer -->
<div id="footer">
<p>Copyright © All Rights Reserved.</p>
</div>
<!-- End Footer -->
</div>
<!-- End Container -->
</body>
</html>
Looks like your building a complicated app, generally I use absolute layouts for the type of complexity that your layout represents:
http://codepen.io/anon/pen/BomePJ
<div class="l-masthead">Masthead</div>
<div class="l-navigation">Navigation</div>
<div class="l-revision">Revision</div>
<div class="l-pagenav-top">Page Navigation Top</div>
<div class="l-data">
<div class="l-data-con">
<div class="l-data1">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
</div>
<div class="l-data2">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p> </div>
</div>
</div>
<div class="l-pagenav-bot">Page Navigation Bottom</div>
<div class="l-footer">Footer</div>
.l-masthead { width:100%; height:20px; top:0; left:0; position:absolute; background:orange; }
.l-navigation { width:100%; height:20px; top:20px; left:0; position:absolute; background:green; }
.l-revision { width:100%; height:20px; top:40px; left:0; position:absolute; background:lime; }
.l-pagenav-top { width:100%; height:20px; top:60px; left:0; position:absolute; background:yellow; }
.l-data { width:100%; position:absolute; top:80px; bottom:40px; left:0; }
.l-data-con { width:100%; height:100%; position:relative; }
.l-data1 { padding:20px; overflow-y:auto; position:absolute; top:0; right:50%; bottom:0; left:0; background:LightBlue; }
.l-data2 { padding:20px; overflow-y:auto;position:absolute; top:0; right:0; bottom:0; left:50%; background:LightCyan; }
.l-pagenav-bot { width:100%; height:20px; position:absolute; bottom:20px; left:0; background:yellow; }
.l-footer { width:100%; height:20px; position:absolute; bottom:0; left:0; background:orange; }
This will be responsive down to a tablet form factor after that, with the type of complexity I think you are going to build in the app, it won't make sense. You will have to go back to UX to make complex apps like this work from phone.
Also, get your CSS out of inline and into an external CSS file.
http://plnkr.co/edit/10Xx2dkqPBeK24cEFVtC?p=preview
<li class="language-list">
li doesn't seem to want to adopt my css class:
.language-list, li.language-list {
height:50px;
background: silver;
}
Check the Plunkr for a full example.
It works just fine: JSFiddle Example. You're just not linking to your CSS file yet. In Plunkr, html files are full files, so you need to include a <link rel="" href="" type=""> line.
Here's an updated working Plunkr
ol {
list-style-type: none;
padding: 0em;
}
.language-list, li.language-list {
height:50px;
background: silver;
}
<button type="button" data-ng-bind="data.language.next" data-ng-click="profilePage()" class="btn btn-lg btn-success center-block">
</button>
<ol class="scroll">
<li style="height:50px; background: silver;">
<div style="height:100%; width:10%; float:left; background: red;">
<img src="http://www.wwf.hu/images/zaszlo_en1.png">
</div>
<div data-ng-bind="lang.languageInLanguage" style="height:100%; width:10%; float:left; background: pink;">
english
</div>
</li>
<li class="language-list">
<div style="height:100%; width:10%; float:left; background: red;">
<img src="http://www.wwf.hu/images/zaszlo_en1.png">
</div>
<div data-ng-bind="lang.languageInLanguage" style="height:100%; width:10%; float:left; background: pink;">
english
</div>
</li>
</ol>
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
Fiddle Here
My question is, why is the headline text not showing under the thumbnails in IE (8 and earlier). Works fine in all other browsers.
HTML:
<div id="thumbsGrid">
<div class= "thumbs">
<a href="http://youtu.be/A30XhK8Vtmg">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png"id="1.thumb"/>
</a>
<h4>Ben</h4>
</div>
<div class= "thumbs">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png" id="2.thumb"/>
<h4> The Resonator</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/re.html">
<img src="images/thumbs/door2/friendsThumbs.png"id="3.thumb"/>
</a>
<h4>RE-Covery</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/divedeeper2.html">
<img src="images/thumbs/door2/divedeeper2Thumb.png"id="5.thumb"/>
</a>
<h4> Dive Deeper </h4>
</div>
<!--thumbsGrid close-->
</div>
CSS:
.thumbs {
float:left;
width:100px;
height:100px;
margin-right:12px;
margin-bottom:0;
border:0;
padding:0;
}
#thumbsGrid {
float:left;
width:500px;
min-height:216px;
margin-left:110px;
border:0;
padding-right:40px;
background: black;
}
.thumbs h4 a {
color: #FFF;
}
And here it is live: www.jillmedinger.com/NCPIE/door2.html
It has to do with the filter on the .thumbs. The easiest resolution is to set position: relative to the h4 as this fiddle shows.