tabbed display going wrong in Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Sjef Janssen - 29 Apr 2007 13:39 GMT

I try to get a tabbed display work both in IE (6 and 7) and Firefox. The
last does give a problem. What's going wrong here? I'm totally puzzled.

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w4.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Tabbed display</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
body
{
text-align:center;
font-family : "Times New Roman", Times, serif;
font-size:12pt;
}

#main
{
position:relative:
color:black;
background-color:#CCCCCC;
border:1px solid gray;
width:800px;
text-align:left;
}

#main h1
{
font-size:3.0em;
font-style:italic;
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
margin-bottom:0px;
}

#main p
{
font-size:1.0em;
font-style:italic;
padding-left:10px;
padding-top:0px;
padding-right:10px;
padding-bottom:10px;
}

#header
{
position:relative;
top:0px;
left:0px;
height:110px;
}

#footer
{
font-size:0.8em;
position:relative;
background-color:#D0D0D0;
width:100%;
text-align:center;
}

#sheet
{
float:clear;
padding-left:20px;
padding-top:20px;
color:red;
}

#tabs
{
float: left;
width: 100%;
height:100%;
background-color:white;/*#CCCCCC;*/
font-size: 100%;
border-bottom: 1px solid black;
line-height: normal;
}

#tabs ul
{
margin: 0;
padding: 0;
list-style: none;
}

#tabs li
{
float: left;
margin: 10px;
padding: 2px 12px 0px 12px;
background-color:#CCCCCC;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 0px solid black;
border-right: 1px solid black;
}

#tabs a
{
display: block;
text-decoration: none;
font-weight: bold;
}

#tabs li.current
{
position:relative;
background-color: transparant;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 2px solid #CCCCCC;
border-right: 1px solid black;
margin-bottom: 0;
}
</style>
</head>

<body>
<div id="main">
<div id="header">
<h1>Tabbed display</h1>
</div>

<div id="tabs">
<ul>
<li class='current'><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div id='sheet'>
<p>Text per sheet goes here</p>

<div id="footer">
<p>Footer text</p>
</div>
</div>
</div>
</body>
</html>

Reply to this Message

Ben C - 29 Apr 2007 17:55 GMT

> I try to get a tabbed display work both in IE (6 and 7) and Firefox. The
> last does give a problem. What's going wrong here? I'm totally puzzled.

There are a few typos in the CSS which
http://jigsaw.w3.org/css-validator will show you.

Reply to this Message

zzpat - 29 Apr 2007 18:18 GMT

> }
>
[quoted text clipped - 10 lines]
> }
>

Then change the margin (bottom) : margin: 10px 10px 0 10px. Then tinker....

Or here's one way:

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w4.org/1999/xhtml"" xml:lang="nl" lang="nl">
<head>
<title>Tabbed display</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
body
{
text-align:center;
font-family : "Times New Roman", Times, serif;
font-size:12pt;
}

#main
{
position:relative;
color:black;
background-color:#CCCCCC;
border:1px solid gray;
width:800px;
text-align:left;
margin : auto;
}

#main h1
{
font-size:3.0em;
font-style:italic;
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
margin:0px;
}

#main p
{
font-size:1.0em;
font-style:italic;
padding-left:10px;
padding-top:0px;
padding-right:10px;
padding-bottom:10px;
}

#header
{
position:relative;
top:0px;
left:0px;
height:110px;
}

#footer
{
font-size:0.8em;
position:relative;
background-color:#D0D0D0;
width:100%;
text-align:center;
}

#tabs
{
float: left;
width: 100%;

background-color:white;/*#CCCCCC;*/
font-size: 100%;
border-bottom: 1px solid black;
line-height: normal;
}

#tabs ul
{
margin: 0;
padding: 0;
list-style: none;
}

#tabs li
{
position: relative;
top : 2px;
float: left;
margin: 10px 10px 0 10px;
padding: 2px 12px 0px 12px;
background-color:#CCCCCC;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 0px solid black;
border-right: 1px solid black;
}

#tabs a
{
display: block;
text-decoration: none;
font-weight: bold;
}

#tabs li.current
{
position:relative;
top : 1px;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 2px solid #CCCCCC;
border-right: 1px solid black;
margin-bottom: 0;
}
#sheet
{
clear : both;
padding-left:20px;
padding-top:20px;
color:red;
}
</style>
</head>

<body>
<div id="main">
<div id="header">
<h1>Tabbed display</h1>
</div>

<div id="tabs">
<ul>
<li class='current'><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div id='sheet'>
<p>Text per sheet goes here</p>

<div id="footer">
<p>Footer text</p>
</div>
</div>
</div>
</body>
</html>

Reply to this Message

zzpat - 29 Apr 2007 18:21 GMT

> I try to get a tabbed display work both in IE (6 and 7) and Firefox. The
> last does give a problem. What's going wrong here? I'm totally puzzled.
>
> <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>
>

Are you sure you want to use XHTML 1.0 Strict?

It doesn't look like XHTML, but I'm assuming it's a work in progress so
I kept it mostly the way it was.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2007

tabbed display going wrong in Firefox