Learn VBA & Macros in 1 Week!

CSS - Ie Issue With Horizontal Line

Full Excel VBA Course - Beginner to Expert

Ie Issue With Horizontal Line	View Content

Hi there,

I'm wondering if someone here can help me out with a little problem I'm having.

I've set up a test page here to show you what I'm trying to do. Basically, the horizontal line needs to be closer to the 'center surface winders ect.' links.

Since IE and Gecko based browsers (Firefox, Mozilla ect.) read horizontal lines differently, I've set 3 different line classes in the basic CSS code. Everything works out fine in the Gecko based browsers, but IE still doesn't allow me to change the margin properties for the bottom of the line. I've tried editing pretty much every property but can't find out what is controlling this in IE.

Any help would be greatly appreciated.

Thanks

Full Excel VBA Course - Beginner to Expert

Horizontal Line Across Page?

Similar Tutorials

View Content

I cannot edit the style sheets or the PHP, but I can override certain elements in the CMS.

I need to place a horizontal line or rule under this element. The syntax below just puts it under the text. I want the line across the entire page. Can someone help me out?

.cat-links {
border-bottom: 1px solid cyan;
}

Horizontal Line Problems Between Browsers

Similar Tutorials

View Content

I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page:

http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html

If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE.

As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box.

Here's my <hr> definition in the css:
hr
{ border: 0;
color: #D5D5D5;
background-color: #D5D5D5;
height: 1px;
text-align: left;
padding: 0px;
margin: 0px;
}

Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks!

Horizontal Nav Bar Ie Issue

Similar Tutorials

View Content

Hello all, I've just recently began adventuring into the world of CSS and am in need of some help. I've created a horizontal nav menu that works perfectly fine in FF, Opera, etc. but refuses to listen in IE. The drop-down menu is positioned over to the right in IE, while in every other browser the menu is positioned (correctly) centered. I'd post a url but I'm just working offline on my computer so I don't have one to provide :\. I appreciate any advice you guys got for me.

HTML (probably only the commented nav bar section is relevant)

Code:

<!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=utf-8" />
  <title> Rutgers Libertarians | Home </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css" title="BasicStyle" media="screen">
	@import "test.css";
  </style>
 </head>

	<body>
		
		<div id="screen">
			
			<div id="header">
				<img src="header.jpg" width="1000" height="145" alt="banner" />
			</div>
			
		<!--Navbar-->
		<ul id="navbar">
			<li><a href="test.html">Home</a>
			</li>
			<li><a href="">Meetings</a>
				<ul>
					<li><a href="#meetings">Regular Meetings</a></li>
					<li><a href="#events">Events</a></li>
					<li><a href="#photo">Photos</a></li>
				</ul>
			</li>
			<li><a href="">Invisible Hand</a>
				<ul>
					<li><a href="#hand">Overview</a></li>
					<li><a href="#articles">Articles</a></li>
				</ul>
			</li>
			<li><a href="">About Us</a>
				<ul>
					<li><a href="#liber">Libertarianism</a></li>
					<li><a href="#board">Executive Board</a></li>
					<li><a href="#contact">Contact Us</a></li>
				</ul>
			</li>
			<li><a href="">Links</a>
				<ul>
					<li><a href="#main">NJ Party</a></li>
					<li><a href="#mutt">National Party</a></li>
				</ul>
			</li>
		</ul>

		<!--Sidebar-->
			<div id="leftbar">
				<h3>News</h3>
					<ul id="leftlinks">
						<li><a href="#news1">News 1</a></li>
						<li><a href="#news2">News 2</a></li>
						<li><a href="#news3">News 3</a></li>
					</ul>
				
				<h3>Site Map</h3>
					<ul id="rightlinks">
						<li><a href="test.html">Home</a></li>
						<li><a href="test.html">Meetings</a></li>
						<li><a href="test.html">Invisible Hand</a></li>
						<li><a href="test.html">About Us</a></li>
						<li><a href="test.html">Links</a></li>
					</ul>
				
			</div>

		<!--Main Content-->
			<div id="main">
				<div id="title">
					<h1>Rutgers Libertarians</h1>
					<p>The Rutgers Libertarians are an organization dedicated to bringing the philosophy of liberty to Rutgers University. We welcome any who believe in any form of Libertarianism or just want to know what Libertarianism is.</p>
				</div>

				<div id="news">
				<div class="news">
					<h2><a name="news1">Libertarian Party Takes White House</a></h2>
					<img src="white.jpg" width="100" height="100" alt="white" />
					<p>In an unprecedented turn of events the Libertarian Party stormed the gates of the white house Tuesday, placing Ron Paul as the head of government. Paul has promised an immediate withdrawal from Iraq, the dissolution of the Federal Reserve, and the holding accountable of failing banks.</p>
						<div class="comments">
						<a href="">comments</a>
						</div>
				</div>
			
				<div class="news">
					<h2><a name="news2">Pot of Brownies Event</a></h2>
					<img src="brownie.jpg" width="100" height="100" alt="brownie" />
					<p>The Rutgers Libertarians held their annual Pot of Brownies event on Wednesday. There was a record 10,000 students in attendance and over 12,000 brownies were consumed - pot free. The message of decriminalizing drugs really seems to be catching on.</p>
						<div class="comments">
						<a href="">comments</a>
						</div>
				</div>

				<div class="news">
					<h2><a name="news3">Invisible Hand Remains Invisible</a></h2>
					<img src="invisible.jpg" width="100" height="100" alt="invisible" />
					<p>The Rutgers Libertarian publication, <i>The Invisible Hand</i> has been delayed once again. Though the club president has reported recieving articles, no one seems to know why the newspaper never seems to come out.</p>
						<div class="comments">
						<a href="">comments</a>
						</div>
				</div>
				</div>

			</div> <!--Main end-->

		</div> <!--Screen end-->
	
	</body>
</html>

CSS

Code:

/* CSS Formatting */

body {
		text-align: center;
		background: #153464;
}

#main {
		background: url(bg.gif);
		border: 1px black solid;
		padding: 10px;
}

img {
		border: 1px solid black;
}

h1 {
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;;
		font-size: 22px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 4px;
		color: #ACACAC;
		margin-bottom: 25px;
		border-bottom: 1px solid #ACACAC;
}

h2 {
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 16px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 4px;
		text-align: left;
		color: #ACACAC;
		border-bottom: dotted 1px #ACACAC;
		margin-bottom: 0px;
}

h3 {
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 16px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 2px;
		text-align: left;
		color: white;
		border-bottom: solid 1px white;
		margin: 10px 0 0 3px;
}

p {
		font-family: "Rockwell", "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 12px;
		font-weight: 400;
		color: white;
}

#title {
		margin: 10px;
		border: black solid 1px;
		background: #30538D;
		padding: 10px;
}

#news {
		margin: 10px;
		border: black solid 1px;
		background: #30538D;
		padding: 10px;
}

#screen {
		/* top, right, bottom, left */
		width: 1000px;
		margin: 20px auto 0 auto;
}

#main {
		width: 810px;
		margin: 0 auto 70px auto;
		float: right;
}

.news {
		height: 150px;
}

.news p {
		text-align: justify;
}

.news img {
		float: left;
		margin: 13px 15px 0 0;
		border: 1px solid black;
}

#links a {
		color: #EF8861;
		border: 0;
		padding: 10px 10px 0 0;
}

#links a:visited {
		color: #EF8861;
}

#links a:hover {
		color: #F8C473;
}

#leftbar {
		display: block;
		width: 150px;
		border: 1px solid black;
		float: left;
		text-align: left;
		background: url(bg3.jpg);
}

#leftbar p {
		padding-left: 10px;
}

#leftbar a, #leftbar ul {  
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 12px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 4px;
		display: block;
		width: 150px;
		text-decoration: none;
		color: black;
		list-style: none;
		text-align: center;
}

#leftbar ul {
		position: relative;
		left: -41px; /* ** Copy this for other problem areas ** */
}

#leftbar a:link, #leftbar a:visited {
		background: white;
		border: 1px solid black;
		margin-bottom: 10px;
		padding: 3px 0 3px 0px;
}

#leftbar a:focus, #leftbar a:hover, #leftbar a:active {
		background: #30538D;
		border: 1px solid black;
		margin-bottom: 10px;
		padding: 3px 0 3px 0;
}

.comments {
		text-align: right;
}

.comments a:link, .comments a:visited {
		position: relative;
		top: 50px;
		color: white;
		padding: 3px 0 3px 0px;
		text-decoration: none;
}

.comments a:focus, .comments a:hover, #leftbar a:active {
		margin-bottom: 10px;
		padding: 3px 0 3px 0;
		text-decoration: underline;
}

/* Nav Bar */

#navbar, #navbar ul {  /* Remove default list formatting; Inline replicates problem in IE */
		padding: 0;
		margin: 0;
		list-style: none;
}

#navbar li {  /* Make navbar appear horizontally */
		float: left;
		width: 175px;
		padding: 10px 0 10px 25px;
		color: white;
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 10px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 4px;
}

#navbar li ul {  /* Hide second level when not hovered */
		width: 175px;
		position: absolute;
		left: -999em;
}

#navbar li:hover ul{
		left: auto;
		background:url(bg3.jpg);
		border: 1px solid black;
		padding: 5px 0 5px 4px;
		margin-top: 5px;
		margin-left: -5px;  /* -90 for IE */
		}

#navbar a { 
		width: 175px;
		display: block;
		text-decoration: none;
		color: white;
		font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
		font-size: 10px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 4px;
}

#navbar li ul li {	/* Make list items smaller */
		text-align: left;
}
					
#navbar li:hover ul li {
		border: none;
		padding: 4px;
}
						
#navbar a:hover { 	
		text-decoration: underline;
}

#leftbar {
		clear: both;
}

Thanks for your help!

Div Horizontal Cutting Issue

Similar Tutorials

View Content

I am experiencing a strange bug where if the content of another div goes past the right edge of the screen, my header div does not reach, even though it is at width: 100%

Here is the code:

index.php
Code:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="main.css" type="text/css" media=screen />
		<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
		<title>
			Home - Nortrat Consulting
		</title>
	</head>
	<body>
		<div class='header'>
			Nortrat Consulting<br/>
			<div class="slogan">Building On The Northern Strategy</div>
		</div>
		<div class="sidebar">
			<div class="sidehead">Sections</div>
			<a class="side" href="#heading1">TEST HEADING<a/><br/>
			<a class="side" href="#heading2">TEST HEADING<a/><br/>
		</div>
		<div class="menu">
		<ul class="menu red">
		  <li class="current"><a href="" target="_self">Home</a></li>
		  <li><a href="" target="_self">Northern Strategy</a></li>
		  <li><a href="" target="_self">Building on the Northern Strategy</a></li>
		  <li><a href="" target="_self">How NORSTRAT Can Help</a></li>
		  <li><a href="" target="_self">About Lee Carson</a></li>
		  <li><a href="" target="_self">Northern Strategy news blog</a></li>
		</ul>
		</div>
		<div class="menughost"></div>
		
		<div class="container">
			<a name="heading1"><div class="heading">Test Heading</div></a>
			BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB 
			<div class="imagecaption">
				<img src="Picture1.jpg" alt="picture1" width="250"/><br/>
				Almost half our land and two thirds of our coastal water lies in the North.
			</div>
		</div>
		<div class='footer'>
			FOOTER TEXT
		</div>
		
	</body>
</html>

main.css
Code:

.header
{
	height: 100px;
	background: #CC0000;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 26px;
	font-weight: bold; 
}

.container
{
	margin-left: 155px;
	margin-top: 105px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: bold; 
}

a.side:link 
{
	text-decoration: none;
	color:#777777;
}

a.side:visited 
{
	text-decoration: none;
	color:#555555;
}

a.side:hover 
{
	text-decoration: none;
	color: #66CCFF;
}

a.side:active 
{
	text-decoration: none;
	color:#777777;
}

.heading
{
	font-size: 14px;
	color: #3399CC;
	text-decoration: underline;
}

.imagecaption
{
	font-size: 10px;
	color: #777777;
	text-align: center;
	width: 250px;
}

.slogan
{
	font-size: 13px;
	font-style: italic;
}

.sidehead
{
	color: #000000;
	text-decoration: underline;
}

.sidebar
{
	padding-top: 5px;
	border-right: solid 1px red;
	width: 150px;
	text-align: right;
	padding-right: 5px;
	position: absolute;
	left: 0px;
	top: 100px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: bold; 
}

.footer
{
	text-align: right;
	font-size: 11px;
	border-top: solid 1px red;
	margin-top: 25px;
	height: 100px;
	width: 100%;
}

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

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

menu_style.css
Code:

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
	border-right:none;
margin:0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}

.menu
{
	width: 900px;
	position: absolute;
	left: 0px;
	top: 33px;
	z-index:1;
	border-right:none;
}

.menughost
{
	background:url(images/bg.png) repeat-x top left;
	width: 100%;
	height: 33px;
	position: absolute;
	left: 0px;
	top: 66px;
	z-index:0.5;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}

/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}

And a screenshot of the issue:

(the red area is my header)

Horizontal Dropdown Nav - Ie6 Issue

Similar Tutorials

View Content

Hi--

I'm building a horizontal nav that needs to work in (ugh) IE6. Of course it works fine in every browser but IE6. I was hoping someone could give me some help.

Here is a link to a test version of the nav: (removed)

I used ugly colors for testing purposes. Basically (and you'll have to see this for yourself in IE6 I suppose) the display:block code is not working properly.

When you mouse over the top level tabs, the background should stay red. In IE6 if your cursor touches the text (which I've outlined in white for ease of viewing), the red turns off. It works fine if the cursor doesn't touch the text.

The nav is built using an unordered list with CSS.

I can't for the life of me figure out what's up. I've tried all sorts of IE6 hacks.

If you're industrious here is a zip file with all the source files (CSS & HTML)

(removed)

Thanks for any tips!

Horizontal Drop Down Mouse Out Issue

Similar Tutorials

View Content

Hi there,
I have not done any html/CSS in a LONG time and have just got back into it.
I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item.

An example is here (oops, I can't post a URL)
Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(images/carpet.gif);
	width:100%;
	margin: 0px;
}

#wrapper {
	position: relative;
	margin: auto;
	width:840px;
	top: 20px;
	height: 920px;
}


#index3-03_ {
	position:absolute;
	left:5px;
	top:45px;
	width:840px;
	height:263px;
	background-image: url(images/thinslice.png);
	background-repeat: no-repeat;
	z-index: 2;
	background-position: -66px -142px;
}

#navbar {
	position: absolute;
	top: 31px;
	right: 0px;
	margin: 0;
	padding: 0;
	width: 780px;
	left: 38px;
	height: 37px;
}
#navbar li {
	list-style: none;
	float: left;
	padding-left: 20px;
	font-size: 14px;
}
#navbar li a {
   
   display: block;
	text-decoration: none;
	list-style-type: none;
	list-style: unordered;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #363795;
	text-align: center;
   }
#navbar li a:hover {
	color: #B00D46;
}

#navbar li ul {
   display: none;  }

#navbar li:hover ul, #navbar li.hover ul {
	position:absolute;
	display: block;
	left:-42px;
	top:-1px;
	width:840px;
	margin: 0;
	background-repeat: no-repeat;
	float: left;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	z-index: 5;
	clear: none;
	background-image: url(images/fatslice.png);
	background-position: -62px -281px;
	height: 500px;
}

#navbar li:hover li, #navbar li.hover li {
	float: left;
	padding-left: 25px;
	padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
	color: #363795;
	position: relative;
	left: 125px;
	top: 25px;
}
#navbar li li a:hover {
	color: #B00D46;
	text-align: left;
	position: relative;
	left: 125px;
	top: 25px;
}


#foobar1 {
	position: absolute;
	left: 62px;
	top: 1px;
	clear: both;
}

#foobar2 {
	position: absolute;
	left: 149px;
	top: 1px;
	clear: both;
}
#foobar3 {
	position: absolute;
	left: 32px;
	top: 1px;
	clear: both;
}

-->
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


</head>

<body>


    <div id="index3-03_">
      <ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
        <li><a href="usage.html" target="_self">THIS IS BROKEN</a>
          <ul>
            <span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
            <span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
            <span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
            <li><a href="parents.html" target="_self">PARENTS</a></li>
            
          </ul>
        </li>
        <li> <a href="faq.html" target="_self">FAQ's</a></li>
      </ul>
    </div>
</body>
</html>

any help would be much appreciated

How Do I Fix This Css-firefox Issue Involving Horizontal Menu?

Similar Tutorials

View Content

How do I fix this CSS-Firefox Issue?

I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox.

CSS:
#nav {width:400px; list-style:none; overflow:hidden;}

#nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/}

#nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);}

#home {}
#home:hover {background-position:0 -100px;}
#products
#products
#history
#history
#contact
#contact

#nav a:link {color:blue;}

#nav a:hover {color:green;}

a {outline:none;}

HTML:
<td width="80%" id="nav"><center><ul id="nav">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="product">Products</a></li>
<li><a href="#" id="history">History</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul></center>
</td>

[This menu is organized by a large table, hence the 80% width which helps organize the elements of the page]

PLEASE Help me. I can't seem to get it working.

EDIT: Solved.

Border Line Only On Bottom And Nav Positioning Issue

Similar Tutorials

View Content

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

Similar Tutorials

View Content

How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images.

Horizontal Navbar

Similar Tutorials

View Content

www. cooperworkskilns.com

The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it.

This isn't working in IE. Lol, its created a rather interesting stairstep effect.

Is there a way to make it span evenly across the page without adjusting the width of each <li>?

Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line.

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

#navbar li { margin: 0 0 0 0; }

#navbar a
{
float:left;
display: block;
text-align:center;
color: #000;
background-color: #FFF;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

#navbar a:hover
{
background-color: #003366;
color: #FFF;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}