/    Sign up×
Community /Pin to ProfileBookmark

Interferring CSS problem (example included)

Copy linkTweet thisAlerts:
Jul 18.2007

Hi,
I have a problem that makes no sense to me. I’m trying to dress up some links to look like tabs. I change the look of the link based on their class name “active, inactive”. I also group tabs into div elements, and group those div elements into another div element. That way I can apply the same style to every tab, and control the position of tab groups separately.

Everything works in Firefox, but IE 6 handles this strangely.

Here’s the source from an example of what I’d like to do.

[code=html]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>
<head>
<title>CSS tab test</title>
<style type=”text/css”>

#tabNavigation A {
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
padding-top:3px;
padding-bottom:2px;
padding-left:12px;
padding-right:12px;
}
#tabNavigation A.active{
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #EEE;
background:#EEE;
color:#666;
}
#tabNavigation A.inactive{
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background:#CCC;
}
#tabNavigation A:hover{
color:blue;
cursor:default;
}
#tabdiv{
position:absolute;
top:92px;
left:10px;
z-index:1;
}

</style>
</head>
<body>
<div id=”tabNavigation”>
<div id=”tabdiv”>
<a href=”#” class=”active” onclick=”javascript:return false;”>Tab1</a>
<a href=”#” class=”inactive” onclick=”javascript:return false;”>Tab2</a>
<a href=”#” class=”inactive” onclick=”javascript:return false;”>Tab3</a>
<a href=”#” class=”inactive” onclick=”javascript:return false;”>Tab4</a>
</div>
</div>
</body>
</html>
[/code]

If you try to load this html in IE6 you will probably see that the tabs only take on some of the values set by CSS. in tabNavigation A it takes the padding-left and right settings, but ignores the top and bottom settings. It does the same thing for border. Can anyone help me out? Tell me how the tabs appear in their IE6? Maybe I should try another approach to making the tabs?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 18.2007 — Instead of re-inventing the wheel (although that is what proposed XML does... you can 'create yor own tags'), instead of using a class for "active" and "inactive":

....#tabNavigation [B]A.active[/B]{

border-top:1px solid #000;

border-left:1px solid #000;

border-right:1px solid #000;

border-bottom:1px solid #EEE;

background:#EEE;

color:#666;

}

#tabNavigation [B]A.inactive[/B]{....[/QUOTE]

Why not use what already exists and work? [I]Pseudo-classes[/I].

#tabNavigation [B]a:link {"inactive"}[/B]

#tabNavigation a:visited {}

#tabNavigation a:hover {}

#tabNavigation [B]a:active {"active"}[/B]

and in the order show above: "lvha". Think "love-hate"
Copy linkTweet thisAlerts:
@potterd64authorJul 18.2007 — Using that method doesn't appear to create the same behavior. If I click a tab and it becomes "active" clicking elsewhere on the page will make it lose that status. By using a class name I can keep the tab in an active state while clicking elsewhere on the site.
Copy linkTweet thisAlerts:
@CentauriJul 18.2007 — The problem has to do with IE's treatment of containers, and not allowing content to show outside the container.

The normal way to do a tab menu like this is to mark it up as an unordered list of links, and style the <a> tags as blocks and float them to stack them side by side. Adapting your code gives :
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS tab test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#tabNavigation {
margin: 92px 0 0 10px;
}
#tabNavigation ul {
overflow: hidden;
}
#tabNavigation a {
color:#444;
text-decoration:none;
font-weight:bold;
background:#CCC;
border: 1px solid #000;
padding: 3px 12px 2px;
display: block;
float: left;
}
#tabNavigation a.active{
background:#EEE;
color:#666;
border-bottom-color: #EEE;
}
#tabNavigation a:hover{
color:blue; cursor:default;
}
#tabNavigation li {
list-style: none;
float: left;
display: inline;
margin-right: 3px;
}
</style>
</head>

<body>
<div id="tabNavigation">
<ul>
<li><a href="#" class="active" onClick="javascript:return False;">Tab1</a></li>
<li><a href="#" onClick="javascript:return false;">Tab2</a></li>

<li><a href="#" onClick="javascript:return false;">Tab3</a></li>

<li><a href="#" onClick="javascript:return false;">Tab4</a></li>

</ul>
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@potterd64authorJul 19.2007 — Thanks a bunch, it works perfectly. My tabs finally look like tabs instead of floating boxes in IE ?
×

Success!

Help @potterd64 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...