I have this html
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"2.nav.styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
<style>
#tabs {
}
#tabs ul {
display: inline;
margin-left: 0px;
}
#tabs li {
font-size: small;
display: inline;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
padding: 5px;
border-top: 1px solid #2586d7;
border-bottom: 0px;
border-right: 1px solid #2586d7;
border-left: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li class="here">Upcoming Events</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div id="news">
<div class="story">
<p>News</p>
</div>
</div>
</body>
</html>
In IE i'm getting an annoying white bar dividing the tabs (that should be side by side) but a border across the top, and in NN i get no borders to the bottom of the link tabs. Can anyone help!?
Thanks<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"2.nav.styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
<style>
#tabs {
}
#tabs ul {
display: inline;
list-style-type : none;
margin-left: 0px;
}
#tabs li {
font-size: small;
float:left;
padding:0;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
margin-top:-5px;
padding: 5px;
border: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
display:block;
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
#news {
clear:both;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li class="here">Upcoming Events</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div id="news">
<div class="story">
<p>News</p>
</div>
</div>
</body>
</html>okay, that's grand - thanks for that. Any idea how I can make the bottom of the tabs line up with the top of the news box?
#tabs {
}
#tabs ul {
display: inline;
list-style-type : none;
margin-left: 0px;
}
#tabs li {
font-size: small;
float:left;
padding:0;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
margin-top:-5px;
padding: 5px;
border: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
display:block;
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
.clearer{
margin: 0px;
clear: both;
}
#news{
margin-top: 0px;
border: 1px solid #2586d7;
margin-right: 10px;
padding: 5px;
}
and the html
<div id="tabs">
<ul>
<li class="here">News</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Upcoming Events</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div class="clearer"> </div>
<div id="news">
<div class="story">
<h2>Title</h2>
<p>Text</p>
</div>Dump <div class="clearer">, this can be done in #menu
Change #menu to:
#news{
clear: both;
margin-top: -1px;
border: 1px solid #2586d7;
margin-right: 10px;
padding: 5px;
}ah rats... I still don't get it!
I've uploaded my page to <!-- m --><a class="postlink" href="http://bedgeburyschool.co.uk/new_bedge">http://bedgeburyschool.co.uk/new_bedge</a><!-- m --> - I've done as you suggested, but now my news items drop below my navigation on the right. Can you suggest a fix??!!
Thanks again in advance...
PS the problem is twofold, actually! in FF, the title of the nes story runs on straight after the news, calendar etc tabs, whereas it should be on the next line to look neat. And in IE, the tabs appear after the navigation on the left, which means there's a great big gap. Fantastic...
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"2.nav.styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
<style>
#tabs {
}
#tabs ul {
display: inline;
margin-left: 0px;
}
#tabs li {
font-size: small;
display: inline;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
padding: 5px;
border-top: 1px solid #2586d7;
border-bottom: 0px;
border-right: 1px solid #2586d7;
border-left: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li class="here">Upcoming Events</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div id="news">
<div class="story">
<p>News</p>
</div>
</div>
</body>
</html>
In IE i'm getting an annoying white bar dividing the tabs (that should be side by side) but a border across the top, and in NN i get no borders to the bottom of the link tabs. Can anyone help!?
Thanks<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"2.nav.styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
<style>
#tabs {
}
#tabs ul {
display: inline;
list-style-type : none;
margin-left: 0px;
}
#tabs li {
font-size: small;
float:left;
padding:0;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
margin-top:-5px;
padding: 5px;
border: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
display:block;
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
#news {
clear:both;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li class="here">Upcoming Events</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div id="news">
<div class="story">
<p>News</p>
</div>
</div>
</body>
</html>okay, that's grand - thanks for that. Any idea how I can make the bottom of the tabs line up with the top of the news box?
#tabs {
}
#tabs ul {
display: inline;
list-style-type : none;
margin-left: 0px;
}
#tabs li {
font-size: small;
float:left;
padding:0;
margin: 0px;
background-color: #FFF;
border-top: 1px solid #90bade;
border-bottom: 1px solid #2586d7;
border-right: 1px solid #90bade;
border-left: 1px solid #90bade;
}
#tabs li.here {
margin-top:-5px;
padding: 5px;
border: 1px solid #2586d7;
background-color: #1958b7 ;
color: #FFF;
font-weight: bold;
}
#tabs li a {
display:block;
padding: 0px 5px 5px 5px;
background-color: #FFF;
color: #90bade;
text-decoration: none;
}
#tabs li a:hover {
padding: 0px 5px 5px 5px;
background-color: #90bade;
color: #fff;
}
html>body #tabs li a {
width: auto;
}
.clearer{
margin: 0px;
clear: both;
}
#news{
margin-top: 0px;
border: 1px solid #2586d7;
margin-right: 10px;
padding: 5px;
}
and the html
<div id="tabs">
<ul>
<li class="here">News</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Upcoming Events</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
</ul>
</div>
<div class="clearer"> </div>
<div id="news">
<div class="story">
<h2>Title</h2>
<p>Text</p>
</div>Dump <div class="clearer">, this can be done in #menu
Change #menu to:
#news{
clear: both;
margin-top: -1px;
border: 1px solid #2586d7;
margin-right: 10px;
padding: 5px;
}ah rats... I still don't get it!
I've uploaded my page to <!-- m --><a class="postlink" href="http://bedgeburyschool.co.uk/new_bedge">http://bedgeburyschool.co.uk/new_bedge</a><!-- m --> - I've done as you suggested, but now my news items drop below my navigation on the right. Can you suggest a fix??!!
Thanks again in advance...
PS the problem is twofold, actually! in FF, the title of the nes story runs on straight after the news, calendar etc tabs, whereas it should be on the next line to look neat. And in IE, the tabs appear after the navigation on the left, which means there's a great big gap. Fantastic...