I'm having a small issue with my tabs and the hover on them. I have some extra space to the right of my link inside of my tab border. How do I get rid of it? This page is being developed to work primarily in IE.
Here is the link >>>Test Page (<!-- m --><a class="postlink" href="http://www.freepgs.com/bluejavamug/test/testindex.html">http://www.freepgs.com/bluejavamug/test/testindex.html</a><!-- m -->) <<<
The stylesheet is styles2.css in the same directory.
Oh yeah, how do I keep the text from wrapping?
Thanks!Hi there cobalt,
I wasn't certain how you actually wanted it to look,
but try this, it may give you some ideas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>A test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
text-align: center;
font-family: arial, tahoma, verdana, sans-serif;
}
#container {
width: 770px;
margin:auto;
background-color: #d0e0f0;
border: solid 1px #3a4362;
}
#hdr {
border-bottom: solid 1px #3a4362;
}
#logo {
background-color: #5681af;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: solid 1px #3a4362;
}
#logo h1 {
color: #f0f8fb;
text-align: right;
padding-right: 15px;
}
#logosub {
background-color: #3a4362;
padding: 5px 0px;
}
#subhdr {
background-image: url(subpage_r2_c1.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 71px;
border-bottom: solid 1px #3a4362;
}
#subhdr p {
color: #f0f8fb;
font-weight: bold;
font-size: 18pt;
padding: 20px 0px 0px 15px;
margin:0px;
}
#menuarea {
border-bottom: solid 1px #3a4362;
height:15px;
padding:5px 0px 0px 40px;
}
#menuarea ul {
display:inline;
margin:0px;
list-style-type: none;
}
#menuarea li {
float:left;
color: #666;
font-size: 8pt;
cursor: hand;
margin: 0px 1px;
border: solid 1px #3a4362;
border-bottom-width: 0px;
}
#menuarea li a {
color: #006;
font-size:8pt;
text-decoration: none;
}
#menuarea li a:hover {
background-color: #3a4362;
color: #f0f8fb;
}
#submenuarea {
float: left;
font-size: 6pt;
height: 300px;
width:139px;
}
#blurbarea {
float:left;
background-color: #a0c4e1;
width:631px;
height: 300px;
}
#clear {
clear:both;
width:770px;
height:1px;
font-size:0px;
}
#ftr {
height: 40px;
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="hdr">
<div id="logo">
<h1>Test Page w/Menu Issues</h1>
</div>
<div id="logosub">logosub</div>
</div>
<div id="subhdr">
<p>subhdr</p>
</div>
<div id="menuarea">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Another Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Random Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Blah</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Psych!</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Roflmao Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Flub Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bu Ya!</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">ASDFJKL</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">QWERTY</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Huh</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Almost There</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Finally</a></li>
</ul>
</div>
<div id="content">
<div id="submenuarea">submenuarea</div>
<div id="blurbarea">
<h2>Welcome to this test page!</h2>
</div>
<div id="clear"></div>
</div>
<div id="ftr">ftr</div>
</div>
</body>
</html>
cootheadI implemented a couple of changes for testing and when I floated the #menuarea li left and set the #menuarea ul display to inline, I ended up getting tabs with wrapped text. But the extra space at the end went away, which is what I was after. Now, how can I keep the text from wrapping?
I added this line below the "Blah" link to demonstrate the behaviour:
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">A Long Link Name</a></li>After playing around with some creative borders, I finally determined that it was the behavior of the anchor tag that was causing my troubles. So, I just placed the borders around that instead of the li.
The complete example can be found here with a link to the style sheet: <!-- m --><a class="postlink" href="http://www.freepgs.com/bluejavamug/test/testindex.html">http://www.freepgs.com/bluejavamug/test/testindex.html</a><!-- m -->
Here is the link >>>Test Page (<!-- m --><a class="postlink" href="http://www.freepgs.com/bluejavamug/test/testindex.html">http://www.freepgs.com/bluejavamug/test/testindex.html</a><!-- m -->) <<<
The stylesheet is styles2.css in the same directory.
Oh yeah, how do I keep the text from wrapping?
Thanks!Hi there cobalt,
I wasn't certain how you actually wanted it to look,
but try this, it may give you some ideas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>A test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
text-align: center;
font-family: arial, tahoma, verdana, sans-serif;
}
#container {
width: 770px;
margin:auto;
background-color: #d0e0f0;
border: solid 1px #3a4362;
}
#hdr {
border-bottom: solid 1px #3a4362;
}
#logo {
background-color: #5681af;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: solid 1px #3a4362;
}
#logo h1 {
color: #f0f8fb;
text-align: right;
padding-right: 15px;
}
#logosub {
background-color: #3a4362;
padding: 5px 0px;
}
#subhdr {
background-image: url(subpage_r2_c1.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 71px;
border-bottom: solid 1px #3a4362;
}
#subhdr p {
color: #f0f8fb;
font-weight: bold;
font-size: 18pt;
padding: 20px 0px 0px 15px;
margin:0px;
}
#menuarea {
border-bottom: solid 1px #3a4362;
height:15px;
padding:5px 0px 0px 40px;
}
#menuarea ul {
display:inline;
margin:0px;
list-style-type: none;
}
#menuarea li {
float:left;
color: #666;
font-size: 8pt;
cursor: hand;
margin: 0px 1px;
border: solid 1px #3a4362;
border-bottom-width: 0px;
}
#menuarea li a {
color: #006;
font-size:8pt;
text-decoration: none;
}
#menuarea li a:hover {
background-color: #3a4362;
color: #f0f8fb;
}
#submenuarea {
float: left;
font-size: 6pt;
height: 300px;
width:139px;
}
#blurbarea {
float:left;
background-color: #a0c4e1;
width:631px;
height: 300px;
}
#clear {
clear:both;
width:770px;
height:1px;
font-size:0px;
}
#ftr {
height: 40px;
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="hdr">
<div id="logo">
<h1>Test Page w/Menu Issues</h1>
</div>
<div id="logosub">logosub</div>
</div>
<div id="subhdr">
<p>subhdr</p>
</div>
<div id="menuarea">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Another Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Random Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Blah</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Psych!</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Roflmao Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Flub Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bu Ya!</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">ASDFJKL</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">QWERTY</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link Huh</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Almost There</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Finally</a></li>
</ul>
</div>
<div id="content">
<div id="submenuarea">submenuarea</div>
<div id="blurbarea">
<h2>Welcome to this test page!</h2>
</div>
<div id="clear"></div>
</div>
<div id="ftr">ftr</div>
</div>
</body>
</html>
cootheadI implemented a couple of changes for testing and when I floated the #menuarea li left and set the #menuarea ul display to inline, I ended up getting tabs with wrapped text. But the extra space at the end went away, which is what I was after. Now, how can I keep the text from wrapping?
I added this line below the "Blah" link to demonstrate the behaviour:
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">A Long Link Name</a></li>After playing around with some creative borders, I finally determined that it was the behavior of the anchor tag that was causing my troubles. So, I just placed the borders around that instead of the li.
The complete example can be found here with a link to the style sheet: <!-- m --><a class="postlink" href="http://www.freepgs.com/bluejavamug/test/testindex.html">http://www.freepgs.com/bluejavamug/test/testindex.html</a><!-- m -->