Learn VBA & Macros in 1 Week!

CSS - Div Horizontal Cutting Issue

Full Excel VBA Course - Beginner to Expert

Div Horizontal Cutting Issue	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)

Full Excel VBA Course - Beginner to Expert

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!

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!

Ie Issue With Horizontal Line

Similar Tutorials

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

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.

Content Cutting Off

Similar Tutorials

View Content

I feel like I've been posting a lot of questions lately and I attempted to search for an answer on this one as it should be something simple. However, the search wasn't cooperating with me. Anyway, here is the latest problem:

http://www.sprechereast.com/documents.html

In Firefox, the brown left navigation bar cuts off when the content on the right is shorter than the nav bar. Seems to display correctly in IE6, but I realize that FF is technically correct and there is something wrong in my CSS.

Funny thing is, I'm certain this worked in the past as I've had this site up problem free for awhile. I'm thinking this might have happened with the latest FF update. Is this possible?

Once again, thanks in advance for the help and any links to good reading material on the subject.

Ie Cutting Off Foot Of Title

Similar Tutorials

View Content

Hello Everybody,

I am trying to figure out why IE is cutting off the foot of my title. It works just fine in firefox. I tried setting a height and it showed the bottom but cutoff the top. If anyone has any suggestions as to why IE is cutting off the bottom I would be very thankful.

Website with Title cut off at bottom

Chrome Cutting Off Background Of Buttons

Similar Tutorials

View Content

Hey there so im brand new here but ive been really frustrated with this problem im having today, it seems that google chrome is cutting of the background hovering image I am using for my navigation, here is a live link of the error. It seems to work fine for me in firefox. I am at a complete loss, any help would be greatly appreciated! I added a bright green background so that it is easier to see the error, it seems there is this mystery space below the text that should be padded 6pixels to show the view of the background hover image and its just not working .

Thanks,

Eric

hxxp://69.65.41.169/~ehowardd/navigationerror/test.html

Ment to add here is the CSS Code:

Code:

#navigation {
	width:500px;
	float:right;
	padding: 40px 0 10px 0;
	background: #0f0;

}
 
#home
{
	padding-top:6px;
	padding-bottom:6px;
  	display: inline;
	text-decoration:none;
  	font-family: Arial;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
}

#home:hover
{ 
  background: url("images/button.png") no-repeat 0 0;
}

#home span
{
	margin-left:26px;
	margin-right:26px;
}

#aboutus
{
	padding-top:6px;
	padding-bottom:6px;
  	display: inline;
	text-decoration:none;
  	font-family: Arial;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
}

#aboutus:hover
{ 
  background: url("images/button.png") no-repeat 0 0;
}

#aboutus span
{
	margin-left:17px;
	margin-right:17px;
}

#services
{
	padding-top:6px;
	padding-bottom:6px;
  	display: inline;
	text-decoration:none;
  	font-family: Arial;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
}

#services:hover
{ 
  background: url("images/button.png") no-repeat 0 0;
}

#services span
{
	margin-left:17px;
	margin-right:17px;
}

#portfolio
{
	padding-top:6px;
	padding-bottom:6px;
  	display: inline;
	text-decoration:none;
  	font-family: Arial;
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
}

#portfolio:hover
{ 
  background: url("images/button.png") no-repeat 0 0;
}

#portfolio span
{
	margin-left:19px;
	margin-right:19px;
}

Horizontal Nav Bar

Similar Tutorials

View Content

Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background.
here is the vertical menu.

http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html

replace (dot)s with period

I want to make the buttons next to each other, but with about 10px space in between them.

Thanks.

Firefox Issue!!! What Is The Typical Css Problem For This Issue?

Similar Tutorials

View Content

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?

w w w. jaywayproductions . c o m/portfolio/work_history.html

It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Horizontal Menu

Similar Tutorials

View Content

I've tried the tutorials on CSS menus but can't seem to get it to work right for my project.

I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help?

The code is below:

Code:

  <tr>
          
    <td width="766">
       <div id="navcontainer">        
          <ul>
          <li><a href="">Home</a></li>
          <li><a href=""> Project Status</a></li>
          <li><a href=""> Tasks</a></li>
          <li><a href="">General Information</a></li>
          <li><a href="">Completed Tasks</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>

CSS

Code:


   body,html {
   margin: 0;

}

#navcontainer ul {
	list-style-type: none;
	text-align: center;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;


}

#navcontainer ul li {
	display: inline;


}

#navcontainer ul li a {
	text-decoration: none;
	padding: 0.2em 1em;
	color: #fff;
	background-image: url(images/back.gif);
	height: 24px;
	line-height: 23px;

}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #960033;
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: center;
	background-image: url(images/backover.gif);


}

---

How To Get Rid Of This Horizontal Scrollbar?

Similar Tutorials

View Content

In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar?

This is the HTML:
Code:

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">


<style type="text/css"><!--

.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}

#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/

#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}

#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }

#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }

H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}

-->
</style>
</head>

<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">

<tr height="435">

<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">

<div id="contentRight"><br>

<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 

<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>

</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

Css Horizontal Menu

Similar Tutorials

View Content

Css Horizontal Menu Help

Similar Tutorials

View Content

Hi,

I have the following menu that is currently laid out with a table:

http://www.ianarmstrong.com/menutest/

I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image.

I need a way to handle the 5 different images, and have a mouseover effect as well.

Could someone offer some direction on this problem?

Horizontal List

Similar Tutorials

View Content

I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do.

I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha.

My HTML looks like this:

Code:

<li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub pos1">
			<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
				<div class="border b1"></div>
					<div class="base div1">
					<h4>August 2005</h4>
					<p>August 29</p>
                          <p>New school division office will be in Weyburn</p>
                         <ul>   
				<li><a href="#url">Section 1</a></li>
				<li><a href="#url">Section 2</a></li>
				<li><a href="#url">Section 3</a></li>
			</ul>
					</div>
					</div>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>

and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this:

Code:

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}

Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point.

Horizontal Positioning

Similar Tutorials

View Content

I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making?

Thanks,
Geoff

Horizontal Scroll Bar

Similar Tutorials

View Content

Thanks for taking the time to read my question.

I FF v.2 and IE v.7

In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"].

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>	
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
	<div class="LeftNavMainIn">
		<div class="LeftNavContentTitle">
			Select category below to view available inventory
		</div>
		<div class="LeftNavContentHolder">
			<div class="LeftNavContent">
				<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
				<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
			</div>
			<div class="LeftNavContent">
				<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
			</div>							  
		</div>
	</div>
</div>

<div class="ItemListMain">
	<div class="ItemListTitle" id="ListOfItemTitles"></div>
	<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
		<div class="ItemListContent" id="ListOfStuff"></div>
	<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
	<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
	<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
	<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
	<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg); 
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;

}

.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px; 
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top left;
}

.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;	
width: 100%;  
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top right;
}
 
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
} 
 
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}

.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}					  
   
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}

.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left; 
width: 180px;
}

.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}

.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;

}

.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}					  

.CoverPictures {
width: 150px;
height: 150px;
}

.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}	 

.ItemDetailsArtist {
float: left;
width: 100%;

}

.ItemDetailsTitle {
float: left;
width: 100%;

}			

.ItemDetailsType {
float: left;
width: 100%;

}

.ItemDetailsCost {
float: left;
width: 100%;

}

.ItemDetailsWidescreen {
float: left;
width: 100%;

}			

.ItemDetailsActors {
float: left;
width: 100%;

}

.ItemDetailsRating {
float: left;
width: 100%;

}


img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}	

.roundtop { 
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}

.roundbottom {
background: url('BottomRight.png') no-repeat top right; 
/*background-color: #0033CC;*/
} 

.Nav {
display: block;
width: 100%;
}
 
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}

a.Nav:link {
    color: #000000;
	text-decoration: none;
}
a.Nav:visited {
    color: #000000;
	text-decoration: none;
}
a.Nav:hover {
    color: #000000;
	text-decoration: underline;
	background-color: #0066FF;
}
a.Nav:active {
    color: #000000;
	text-decoration: none;
}
 
 
a.ListStuff:link {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:visited {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:hover {
    color: #ffffff;
	text-decoration: underline;
	background-color:#0066FF;
}
a.ListStuff:active {
    color: #ffffff;
	text-decoration: none;
}

JS:
Code:

var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
	TheCDTitles=''
	TheDVDTitles=''
	document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
	if (FrameName=='CD') {
		for (x in itemsArray)
		{
			TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
	}
	if (FrameName=='DVD') {
		for (x in itemsArrayDVD)
		{	
			TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
	}
}	   

//*******************CD******************************

var itemsArray=new Array();
var x
function createArray()
{
	x=0
	var data=getCDContents();
	var items=data.split('\n'); //splits the data in retreived from getContents() by line
	var stats;
	for (var i=0; i<items.length; i++)
	{
	x++
		stats=items[i].split(','); //This is the line that determines what separates values in a line
		itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrame=document.getElementById('CDIFrame');
	var INdata="";
	if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
	if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
	INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdata);
} 


function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}

//*******************DVD******************************

var itemsArrayDVD=new Array();
function createArrayDVD()
{
	var dataDVD=getCDContentsDVD();
	var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
	var statsDVD;
	for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
	{
		statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
		itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrameDVD=document.getElementById('DVDIFrame');
	var INdataDVD="";
	if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
	if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
	INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdataDVD);
} 


function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null	
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;	
}
}

text doc for the CD iFrame Save this as CD.txt in the local folder
Quote:
3 Doors Down,Away From The Sun,Rock,$5.00
3 Doors Down,The Better Life,Rock,$5.00
Adema,Insomniac's Dream,Rock,$5.00
Aerosmith,Get A Grip,Rock,$5.00
AFI,Sing The Sorrow,Rock,$5.00
Alice In Chains,self titled,Rock,$5.00
Alice In Chains,Dirt,Rock,$5.00
Alien Ant Farm,ANThology,Rock,$5.00

Thanks so much.

Brad

Help With Horizontal List

Similar Tutorials

View Content

Hi ppl
I'm trying to figure out how to do the following list, with CSS

Is there any way that the boxes can accomodate themselves based on the width of their container's space?

I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so...

Thanks

Css And Horizontal Div Hack :)

Similar Tutorials

View Content

Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows

<div id="White">White area</div>
<div id="Black">Black area</div>

when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css.

how do i do it ? hope i made myself clear on this

Div Ul Horizontal Menu

Similar Tutorials

View Content