Develop Reference

Why are the <div> borders bleeding through the <ul>?

I've recently gotten back into coding, and continuing off where I left, trying to create a mobile-first site for a hypothetical apartment website.
With that being said, I've noticed that bottom border of a different , with the class ".description_section", is visible through the one containing the element.
The is within the tag with the id "sidebar". Not the most aesthecally-pleasing side nav (as fonts is my weak point).
Picture
HTML:
<div class="container">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Floor Plans</li>
<li>About Us</li>
</ul>
</div><!--close #sidebar-->
<div class="row" id="big_picture">
<div class="row" id="social_media">
<div class="col-4" id="facebook">
<img src="images/fb.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="twitter">
<img src="images/twitter.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="google_plus">
<img src="images/google_plus.svg">
</div><!-- close .social_media_icon-->
</div><!--close #social_media-->
</div><!--close #big_picture-->
<div class="row description_section">
<hr>
<h2>Directions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur tristique tortor feugiat dictum. Duis placerat orci vel massa interdum dapibus eu id risus. Curabitur tempor placerat congue. Curabitur ut augue sit amet arcu volutpat rutrum ut sit amet turpis.</p>
<div class="desc_image" id="one"></div><!--close .desc_image-->
</div><!--.description_section-->
CSS:
#sidebar {
left: 0px;
width: 50%;
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
background-color: black;
color: white;
/*border: 1px solid white;*/
text-align: center;
position: absolute;
display: none;
}
#big_picture {
height: 13.4em;
background: url("../images/apt_lobby.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.description_section {
background-color: #1d2f5c;
color: white;
}
.description_section h2 {
padding-top: 0;
padding-bottom: 2%;
text-align: center;
font-style: bold;
}
.description_section p {
font-size: 0.8em;
padding: 1% 5% 5% 5%;
}
jQuery:
$("#hamburger_menu").click(function() {
$("#sidebar").toggle(1000);
});
If people would like more code snippets, including the one with id of the whose borders is bleeding through, please let me know!

My guess is that it's because of the
position: absolute
Try playing around with this and also height of the sidebar.

try to make the ul higher z-index
ul {
position: absolute;
z-index:9;
}

Only show elements if container is scrollable

This is the code:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").scroll(function() {
if ($(this).scrollLeft() > 0) {
$(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(".right").css("display", "block");
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
There should be an if function added. The logic should be:
Show the gradient(s) only if there is something to scroll horizontally. If not, then hide the gradient(s). It should work with different containers independently on the same web page, and should update if the browser size changes.
Has someone an idea how to code that?

One way would be to loop thru all the .scroll-area elements and hide .left and .right elements if the scrollbar is visible. I added couple more containers to demonstrate:
// if there is something to scroll horizontally then (but only for this container):
$(document).ready(function() {
$(".scroll-area").each(function(index) {
if ($(this)[0].scrollWidth <= $(this)[0].clientWidth) {
$(this).closest(".container").find(".left").css("display", "none");
$(this).closest(".container").find(".right").css("display", "none");
} else {
$(this).scroll(function() {
if ($(this)[0].scrollWidth > $(this)[0].clientWidth) {
if ($(this).scrollLeft() > 0) {
$(this).closest(".container").find(".left").css("display", "block");
}
if ($(this).scrollLeft() == 0) {
$(this).closest(".container").find(".left").css("display", "none");
}
var fullWidth = $(this)[0].scrollWidth - $(this)[0].offsetWidth - 1;
if ($(this).scrollLeft() >= fullWidth) {
$(this).closest(".container").find(".right").css("display", "none");
}
if ($(this).scrollLeft() < fullWidth) {
$(this).closest(".container").find(".right").css("display", "block");
}
}
});
}
});
});
// if there is nothing to scroll, don't show the gradients
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.container {
width: 550px;
height: 80px;
background-color: grey;
position: relative;
margin-bottom: 20px;
}
.scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
.left,
.right {
width: 50px;
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
}
.left {
background: linear-gradient(90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
left: 0;
display: none;
}
.right {
background: linear-gradient(-90deg, orange 0%, rgba(0, 0, 0, 0) 100%);
right: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="y" class="left"></div>
<div class="right"></div>
<div id="b" class="scroll-area">
<div class="text">This container shouldn't show any gradient because nothing to scroll.</div>
</div>
</div>
<div class="container">
<div id="x" class="left"></div>
<div class="right"></div>
<div id="a" class="scroll-area">
<div class="text">Scroll to right. Gradients are needed. This container works like expected. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>

How can I fit a div perfectly between a header and footer with React? [duplicate]

______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?

Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)

Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/

Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>

After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>

with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}

Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>

Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>

how to change making same data-link="n" for all div slides content or completely remove data-link="n" option from <div class="gallery-slide"

Here is a JS CSS slider that is working correctly but i need to make a little change to this slider.
that is in my slider i want to remove all data-link="n" option from <div class="gallery-slide" ...> </div> or Make same data-link="n" for all div slides classes
at this time my slider HTML structure is like that
<!--slide 1-->
<div class="gallery-slide" data-link="1">
<div class="slide-content">
<h2>Slide 1 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 2-->
<div class="gallery-slide" data-link="2">
<div class="slide-content">
<h2>Slide 2 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 3-->
<div class="gallery-slide" data-link="3">
<div class="slide-content">
<h2>Slide 3 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 4-->
<div class="gallery-slide" data-link="4">
<div class="slide-content">
<h2>Slide 4 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
But i want to remove all <... data-link="n"> option from my HTML Structure ,
just like many JS CSS slider have this feature :
for ex. https://codepen.io/MrsColombo/pen/jqxVBg?editors=1010 (this slider's all slides have same class but still working fine.)
Like from
<div class="gallery-slide" data-link="1">
.....
</div>
<div class="gallery-slide" data-link="2">
.....
</div>
<div class="gallery-slide" data-link="3">
.....
</div>
<div class="gallery-slide" data-link="4">
.....
</div>
To want change like this
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
is it possible ?
plz make it solve
my Complete Slider Code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.gallery {
position: relative;
width: 100%;
overflow: hidden;
padding: 2em 0;
}
.gallery-slides {
position: relative;
max-width: 1280px;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.gallery-slide {
position: absolute;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* ease-in-out */
}
.gallery-slide.is-active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
.gallery-slide.is-active~* {
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
}
.gallery-selectors {
width: 5%;
height: 100%;
position: absolute;
top: 0;
right: 2.5%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
}
.gallery-selector {
border: 1px solid #343434;
border-radius: 50%;
padding: 1.2em 1.5em;
margin-bottom: 0.5em;
text-decoration: none;
color: #343434;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.gallery-selector:hover {
background-color: #343434;
color: #e2e2e2;
}
.gallery-selector.is-active {
background-color: #343434;
color: #e2e2e2;
}
.slide-img {
-webkit-box-flex: 0;
flex: 0 0 50%;
}
.slide-img img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.slide-content {
-webkit-box-flex: 0;
flex: 0 1 50%;
padding-top: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding-right: 10%;
}
.slide-content h2 {
color: #fff;
font-size: 2.2em;
line-height: 1;
margin-top: 0;
}
.slide-content p {
color: #343434;
font-size: 1.2em;
line-height: 1.5em;
}
/* Background mapColor */
.background-teal {
background-color: #54b3a6;
}
.background-red {
background-color: #e72b1e;
}
#media only screen and (max-width: 960px) {
.gallery-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.slide-img {
padding-left: 2em;
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.slide-content {
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
}
#media only screen and (max-width: 640px) {
.gallery-selectors {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
right: 0;
bottom: 0;
}
.gallery-selector {
padding: 0.5em 0.8em;
margin-right: 0.5em;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="gallery background-teal">
<button data-btn="prev" class="slider-pagination">Pre.❮</button>
<button data-btn="next" class="slider-pagination">Next ❯</button>
<div class="gallery-slides">
<div class="gallery-slide" data-link="1">
<!--slide 1-->
<div class="slide-content">
<h2>Slide 1 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 2-->
<div class="gallery-slide" data-link="2">
<div class="slide-content">
<h2>Slide 2 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 3-->
<div class="gallery-slide" data-link="3">
<div class="slide-content">
<h2>Slide 3 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 4-->
<div class="gallery-slide" data-link="4">
<div class="slide-content">
<h2>Slide 4 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="gallery-selectors" style="display: none;">
1
2
3
4
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script>
//Javascript Module Pattern
//app.js
var total_slides = $('.gallery-slides .gallery-slide').length;
$(document).on('click', '.slider-pagination', function() {
var btn = $(this).attr('id');
var current_slide = $('.is-active').attr('data-link');
if ($(this).attr('data-btn') == 'next') {
if (current_slide < total_slides) {
var next_slide = parseInt(current_slide) + parseInt(1);
} else {
next_slide = 1;
}
} else {
if (current_slide != 1) {
var next_slide = parseInt(current_slide) - parseInt(1);
} else {
next_slide = total_slides;
}
}
console.log(next_slide);
$('a[data-link="' + next_slide + '"]').trigger('click');
});
var app = function() {
var defaults = [];
return {};
}();
$(function() {
// new app.gallery();
$('.gallery').each(function() {
$(this).data(new app.gallery(this));
});
});
//myModule
app.gallery = function($, _, app) {
var def = function(el, opts) {
this.$els = {
'el': $(el)
};
this.options = _.extend({
link: 'data-link'
}, opts);
this.controller = this.$els.el.find('[' + this.options.link + ']');
// this.$gallery = this.$els.el.find('.gallery-slides');
// this.$slide = this.$els.el.find('.gallery-slide');
this.states = {
'active': 'is-active'
};
init.call(this);
};
var init = function() {
this.bind();
};
def.prototype = {
bind: function() {
console.log('gallery loaded');
var self = this;
this.setActive(1);
this.controller.on('click', _.bind(this.slideNext, this));
},
slideNext: function(ev) {
var i = $(ev.currentTarget).attr(this.options.link);
this.setActive(i);
},
setActive: function(index) {
var self = this;
this.currentActive = index;
this.controller.removeClass(this.states.active).filter(function() {
return $(this).attr(self.options.link) == index;
}).addClass(self.states.active);
}
};
return def;
}
(jQuery, _, app);
</script>
</body>
</html>
Thanks in Advance, Love You stackoverflow community experts.

Using cssPIE for js tab content in IE8 not rendering

I've created a tab and tab content animation. When the tab is clicked, the corresponding tab content is displayed underneath and the others are hidden, easy enough and works fine. The problem I'm having is with the rendering of the border-radius in IE7 and 8. I am using cssPIE.htc for any css that may be effected by these css3 properties. This is working for static content on the page that is not being manipulated with jQuery, but for dynamic content such as the tabs, I believe the css for content needs the -pie-watch-ancestors: n attribute. After doing so, still no results. Below is my code(CSS, HTML, and jQuery) and a screen shot of the difference between chrome and IE8. Any help would be great.
UPDATE: I may be able to fix this by having the tab content left, off the page, then placing the active one back to left: 0, so that it is always displayed and never re-rendered. **IN THE MEANTIME, here is the fiddle, go nuts: tab fiddle
Chrome Screenshot
IE8 broken Screenshot
As you may notice: no border, no background, and no background image(small colored boxes).
CSS affiliated with tab content
.tabContent {
position:absolute;
display:none;
background-color:White;
background-image: url(/includes/images/home_phase2/colored_boxes_small.png);
background-repeat: no-repeat;
background-position: 98% 90%;
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
behavior: url("/includes/css/PIE.htc");
-pie-watch-ancestors: true;
}
.roundedCorners {
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url("/includes/css/PIE.htc");
}
jQuery(document.load expected)
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});

Try adding
position: relative
to
.roundCorners {}
Sounds funny, but had the same issue, may help.
EDIT:
Same may apply to:
.tabContent {}

OK, after long tries, I managed to do that. Finally I solved it with rounding the corners of tabContent_wrapper.
Here's what I did as a short summary:
removed roundedCorners from every tabContent divs, added to tabContent_wrapper
added clearfix class to all the tabContent divs, defining clearfix class in the CSS code
added PIE.htc to roundedCorners
added some padding to roundedCorners because of the CSS3PIE corners...
added position:relative; z-index:10; to roundedCorners
commented out tabContent's position:absolute;
hid tabContent_wrapper, because there's a 2px padding, which looks ugly when displaying no content in it
deleted the comment sign in front of $('.tabContent_wrapper').show();, it's needed now; put in $('.tabContent_wrapper').hide(); when we click on the active tab again (not to let the ugly empty content show up with a border)
Here is the full code (post-formatted with http://jsbeautifier.org/):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Tabs...</title>
<style>
.roundedCorners {
padding:2px;
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* New stuffs */
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
.tabHome_wrapper {
margin-bottom:-1px;
}
.tab_wrapper {
position:relative;
height:25px;
margin-left:-1px;
}
.tab_wrapper ul li {
display:inline-block;
padding-right:20px;
overflow:hidden;
width:132px;
height:25px;
}
.tab_wrapper ul > li:first-child a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 0 0 0 7px;
}
.tabLnk {
position:absolute;
background-image:url('http://i.imgur.com/PkR4W.png');
background-position: -132px 1px;
background-repeat:no-repeat;
width:132px;
height:25px;
margin-top:1px;
z-index:9999;
font-size: 15px;
text-align: center;
line-height: 25px;
color: White !important;
text-decoration: none;
}
.borderTopLeftTabContent {
border-radius: 7px 7px 7px 7px !important;
}
.tabLnk.active {
width:130px;
background-position:-1px 1px;
-webkit-border-bottom-left-radius: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
border-bottom-left-radius: 0px !important;
color: #833889 !important;
}
.tabLnk:hover, .tabLnk:focus {
text-decoration: none;
}
.tabLnk:visited {
color: White;
}
.hideContent {
left:-99999px;
}
.tabContent_wrapper {
/* new stuffs */
width:945px;
margin-top:1px;
margin-left:-1px;
border:1px solid #772981;
/*
border-top:0px;
*/
/* hide it first because of the 2 pixel roundedCorner padding */
display:none;
}
.tabContent {
/*
position:absolute;
*/
display:none;
background-color:White;
background-image: url('http://i.imgur.com/yyhGR.png');
background-repeat: no-repeat;
background-position: 98% 90%;
/* moved to tabContent_wrapper, this z-index is not needed now */
/*
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
*/
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
}
.tabContent_img {
float: left;
width:290px;
height:155px;
padding: 20px 20px 10px 15px;
}
.tabContent_description {
padding: 32px 140px 20px 0px;
width:450px;
float:right;
font-size: 14px;
color: gray;
}
.tabContent_description p:first-child {
padding-bottom: 10px;
}
.lblTabTxt {
color: white;
padding-left: 3px;
top: 5px;
position: relative;
}
.lblTabTxt:hover {
text-decoration: none;
}
/* Pete... clearfix from Drupal */
/**
* Markup free clearing.
*
* #see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var tabLnk = $('.tabLnk');
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
// hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
$('.tabContent_wrapper').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});
});
</script>
</head>
<body>
<div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
<div id="tabArea" class="tab_wrapper">
<ul>
<li> <a class="tabLnk" href="javascript: void(0)">
Administrators
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Teachers
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Technologists
</a>
</li>
</ul>
</div>
<div id="tabContentArea" class="tabContent_wrapper roundedCorners">
<div class="tabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
<p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
a ullamcorper nulla egestas.</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
<p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Some screenshots:
by default, no tabs opened:
1st tab opened:
2nd tab opened:
3rd tab opened:
Of course, you'll have to manipulate the upper border not to show the border under the active tab.
Let me know if this helped.