Prev: photo gallery css erratic
Next: instructor solution manual for Introduction to Quantum Mechanics 1st edition (1995) by David J. Griffiths
From: no on 4 Apr 2010 16:49
Hi,

I want to create a simple website with tabs that displays fine in all
commonly
used web browsers. I have read that CSS2/3 support is incomplete, so I
decided
to stick to just using CSS1, since support for that seems to be more
widespread.

I would like the tabs to be plain boxes with a black border round, with the
bottom border missing from the currently selected tab. The main page would
be white, and the background behind the tabs a mid-grey.

Unfortunately this is proving surprisingly tricky using only CSS1. I made a
what seemd to be a suitable design whilst testing in Opera, but when I
opened
it in Internet Explorer, it displayed differently with gaps.

Any tips, pointers , suggestions or code would be welcome. I've pasted my
current effort below.

Thanks,
Paul.



<html>
<head>
<style type="text/css" media="all">

body
{
margin: 0;
font: 12pt verdana, helvetica, sans-serif;
}

#header
{
font-size: 20pt;
background-color: #888;
padding: 20px;
}

#tabs
{
float: left;
}

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

#tabs li
{
background-color: #eee;
color: #404040;
float: left;
border: solid #000;
border-width: 1px 0px 1px 1px;
margin: 0;
padding: 6px;
font: 12pt;
height: 27px;
}

#tabs #right
{
border-width: 1px 1px 1px 1px;
margin: 0;
}

#tabs #selected
{
color: black;
background-color: #fff;
border-bottom-color: #fff;
font-weight:bold;
}

#padleft
{
background-color: #888;
height: 40px;
border: solid #000;
border-width: 0px 0px 1px 0px;
margin: 0px;
float: left;
font: 12pt;
width: 20px;
}

#padright
{
background-color: #888;
height: 40px;
padding: 6px;
border: solid #000;
border-width: 0px 0px 1px 0px;
margin: 0px;
padding: 0px;
float: none;
font: 12pt;
}

</style>
</head>

<body>
<div id="header">The Title</div>
<div id="padleft"></div>
<div id="tabs">
<ul>
<li>one</li>
<li id="selected">two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li id="right">seven</li>
</ul>
</div>
<div id="padright"></div>
</body>
</html>


From: C A Upsdell on 4 Apr 2010 18:04
On 2010-04-04 16:49, no(a)spam.thanks wrote:
> Hi,
>
> I want to create a simple website with tabs that displays fine in all
> commonly
> used web browsers. I have read that CSS2/3 support is incomplete, so I
> decided
> to stick to just using CSS1, since support for that seems to be more
> widespread.

You are misinformed. Target CSS 2.1.

> I would like the tabs to be plain boxes with a black border round, with the
> bottom border missing from the currently selected tab. The main page would
> be white, and the background behind the tabs a mid-grey.
>
> Unfortunately this is proving surprisingly tricky using only CSS1. I made a
> what seemd to be a suitable design whilst testing in Opera, but when I
> opened
> it in Internet Explorer, it displayed differently with gaps.

Provide a URL so that people can see the actual code.

Hints: (1) use a DOCTYPE which triggers Strict mode; (2) validate your
HTML; (3) validate your CSS; (4) don't use absolute units such as px and
pt for font sizes, use em units instead; (5) be aware that the standards
leave some things up to the user agent, so different browsers can
legitimately produce somewhat different results; (6) if you still have a
problem, specify the version of IE which displays the problem.

From: Lars Eighner on 6 Apr 2010 05:39
In our last episode,
<op.vann4li01z5qhy(a)desktop>,
the lovely and talented no(a)spam.thanks
broadcast on comp.infosystems.www.authoring.stylesheets:

> Hi,

> I want to create a simple website with tabs that displays fine in all
> commonly
> used web browsers. I have read that CSS2/3 support is incomplete, so I
> decided
> to stick to just using CSS1, since support for that seems to be more
> widespread.

> I would like the tabs to be plain boxes with a black border round, with the
> bottom border missing from the currently selected tab. The main page would
> be white, and the background behind the tabs a mid-grey.

> Unfortunately this is proving surprisingly tricky using only CSS1. I made a
> what seemd to be a suitable design whilst testing in Opera, but when I
> opened
> it in Internet Explorer, it displayed differently with gaps.

> Any tips, pointers , suggestions or code would be welcome. I've pasted my
> current effort below.

> Thanks,
> Paul.

This is a well-known, long-standing bug in IE. Maybe it is fixed in
recent versions. Fortunately the workaround is harmless to
browsers that work, while fixing broken IEs.

Make your list like this:

(Those are not quotation >s.)

<div id="tabs">
<ul
><li>one</li
><li id="selected">two</li
><li>three</li
><li>four</li
><li>five</li
><li>six</li
><li id="right">seven</li
></ul>

IE tries to render white space between LI elements. This is wrongity
wrong wrong behavior. It will do this wrong thing when there are just
line breaks between the elements, so just taking the tabs out won't
help. Of course if human readability of the markup is not a factor,
you can generate just one long string without spaces, line breaks, or tabs
between the elements.

While in some designs the little extra spaces between inline list elements
is not especially objectionable, the bug will break vertical boxes type
designs in a devastating way by putting an extra empty box between the
elements.

--
Lars Eighner <http://larseighner.com/> Warbama's Afghaninam day: 125
3009.3 hours since Warbama declared Viet Nam II.
Warbama: An LBJ for the Twenty-First century. No hope. No change.
From: Roy A. on 6 Apr 2010 06:55
On 4 apr, 22:49, n...(a)spam.thanks wrote:
> Hi,
>
> I want to create a simple website with tabs that displays fine in all  
> commonly
> used web browsers. I have read that CSS2/3 support is incomplete, so I  
> decided
> to stick to just using CSS1, since support for that seems to be more  
> widespread.
>
> I would like the tabs to be plain boxes with a black border round, with the
> bottom border missing from the currently selected tab. The main page would
> be white, and the background behind the tabs a mid-grey.
>
> Unfortunately this is proving surprisingly tricky using only CSS1. I made a
> what seemd to be a suitable design whilst testing in Opera, but when I  
> opened
> it in Internet Explorer, it displayed differently with gaps.

Where are those gaps, and in which version of Intranet Explorer do you
have gaps?
http://case.faunika.com/tabs/test-1.html
 | 
Pages: 1
Prev: photo gallery css erratic
Next: instructor solution manual for Introduction to Quantum Mechanics 1st edition (1995) by David J. Griffiths