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;
}

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>

why is my section tag overlapping my div container? I'm trying to out the section under the homepage

I'm trying to create a new section but the tag is overlapping my home page. I tried adding divs, removing divs, and adding more sections but can't get to the solution. Is it because of my styling or because of my HTML?
/* Base Styles -------------------- */
#import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
#media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
#media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
#media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<script src="main.js"></script>
</body>
</html>

I removed the duplicate html and body tags. Then I added the additional sections, each one following the previous, inside the same body. I also noticed you closed your <a> tags before the label in your navigation, fixed that too by moving </a> after the link labels.
I think this is what you were going for? Something like this?
/* Base Styles -------------------- */
#import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
#media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
#media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
#media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<section id="about" class="about-section">
<h2 class="section-head">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<section id="contact" class="contact-section">
<h2 class="section-head">Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<script src="main.js"></script>
</body>
</html>

accordion code not working properly, how to fix it?

I am trying to make my own accordion for my portfolio page template, for my website. xtractweb.com as once any one click the accodion respective work-snippet will be shown etc ... for now i am trying with this demo but i stuck in middle.
The code i am currently using is given below:
Html code snippet:
<div class="accordion-content">
<ul>
<li class="current">
<h3>Donec at neque eget lacus lobortis molestie</h3>
<div class="content current">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
<li class="">
<h3>Phasellus felis purus, placerat vel augue vitae</h3>
<div class="content" style="display: none;">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
</ul>
</div>
and here is the jquery code:
$('.accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
while all my css showing the work good ... the problem is that once i click the h3 it shows the div content, but once i click another h3 quickly than old div shown, it destroys the whole process and results not shows as i want... any one suggest me what to do now or any easier method than that ... ?
here is the css code snippet:
.accordion-content {
li {
margin-bottom: 10px;
border: 1px solid #dedede;
background: #ececec url("../images/plus-minus.png") no-repeat;
background-position: 96% 45%;
background-width: 8px;
background-height: 10px ;
&.current {
background: #ececec url("../images/minus.png") no-repeat;
background-position: 96% 11%;
}
}
h3 {
font-size: 16px;
font-family: 'open sans', sans-serif;
text-align: left;
color: #2c2725;
padding: 10px 0 10px 20px;
&:hover {
cursor: pointer;
}
}
.content {
width: 100%;
background: #ffffff;
padding: 10px 0 10px 0;
text-align: center;
display: none;
text-align: left;
padding: 15px;
padding-bottom: 55px;
p {
font-size: 14px;
line-height: 24px;
color: #7f8281;
}
}
.current {
display: block;
}
}
Regards

the problem is not there as i fell, just look at the code snippet in jsfidle http://jsfiddle.net/gkQ3Y/1/ your results looking cool. what else you think you want ? the only change which i feel is that, you should add
.stop(true,true)
to make your accordion load properly, as you just clicks early than it loads and results looks different than you expect.
so, your new code snippet will look like shown below:
$('.accordion-wrapper .accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').stop(true,true).slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').stop(true,true).slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
i hope it will be making every thing fine right now, and your whole code is enough to do the work, while just these two lines will do the rest of the work now.
Regards

Here is the might help you.
jQuery Code
$('.accordion-content').find('h3').click(function(){
$('.content').slideUp(); // Hide all content.
$(this).next().slideDown(); // show current clicked heading detail
$(this).parent().addClass('current').siblings('li').removeClass('current'); // add current class to current clicked heading and remove from another heading.
});
Fiddle Demo

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.