Learn VBA & Macros in 1 Week!

CSS - Css Problem: Random Horizontal Scroll Bar

Full Excel VBA Course - Beginner to Expert

Css Problem: Random Horizontal Scroll Bar	View Content

Hi,
I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site.

If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome.

Thanks in advance.

Full Excel VBA Course - Beginner to Expert

Horizontal Scroll But Nothing There To Scroll?

Similar Tutorials

View Content

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

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

Ie Showing Horizontal Scroll Bar!!!

Similar Tutorials

View Content

I'm modifying the following style now; http://www.phpbb.com/styles/forum/index.php?style=218. I like this style for variety of reasons, but there is one problem. IE keeps showing horizontal scroll bar no matter what width the window has. How can I fix this problem?

Unlimited Horizontal Scroll??

Similar Tutorials

View Content

I have a collection of floating divs contained inside a container div. The floating divs are generated dynamically so they could number from one to whatever. The problem I'm having is that when there are too many floating divs, the container elements width is exceeded and the remaing floating divs display below the rest.

How can i make the container div expand infinitely depending on it's content? I tried using the overflow properties but didn't have any luck plus such a solution looks ugly in my app.

Thanks for any help you can give me.

Horizontal Scroll Bar Popping Up For No Reason

Similar Tutorials

View Content

For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out.

Here is the site

university square condos (dot) com

Any idea where I could be going wrong?

Ie7 Forces Div Width To 100%, Creates Horizontal Scroll

Similar Tutorials

View Content

Css Width:100% Ends Where Horizontal Scroll Starts

Similar Tutorials

View Content

Gday CSS PPL,

Im still yet to test on other browers, but im using IE 6.0

while the explorer is full screen the width of my div is 100%

But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins,

div.banner {
background-image: url(../images/banner_repeat.gif);
width:100%;
height:163px;
text-align:center;
}

and yeah, the background image 'banner_repeat' stops repeating at that point.

any help would be great,

Thx in advance,

James

Left Margin Pushes Everything Causing Horizontal Scroll

Similar Tutorials

View Content

Hello,

I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll.

I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail.

I am stuck. Any ideas on how to negate the pussing of a margin?

Scroll Bar Problem

Similar Tutorials

View Content

hi, i am trying to paint the scrollbar with the following
BODY {
scrollbar-face-color: #4E5455;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #999999;
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #993300;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
margin:0;
padding:0;
color:#333333;
font: 12px arial, verdana, helvetica, sans-serif;
}

but it doesn't do anything. it's still the default ie scroll bar. does anyone know why?

Ie7 Only Problem With Scroll Bars

Similar Tutorials

View Content

I'm working on a page that uses a sort of "pseudo-frame" effect, where the bulk of the page is in one div, and there is a second div which is a sort of "control panel" that never scrolls.

Basically, I'm implementing this by "turning off" scrollbars for the browser, and applying "overflow-auto" to a div that takes up the whole page (basically).

Long story short, I'm having a problem ONLY in IE7, in that when the page needs a vertical scroll bar, it does NOT resize the content horizontally to accomodate it, and thus adds an unneeded horizontal scroll bar to the page. This ONLY happens in IE7.

What follows is the minimal code needed to reproduce the problem (it does not include the "control panel" pseudo-frame I mentioned.)

I notice that when I change the width of the "wideDiv" to auto instead of 100%, this does not happen. Unfortunately, I think I need to use 100% on the real site (which is far more complex than this).

Does anyone have a workaround? I've already wasted at least 8 hours on this... Can I send the bill to Microsoft?

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en" style="overflow:hidden; height:100%;">

	<body style="margin:0; padding:0; height:100%;" >
		<div id="MainContentDiv" style="height:100%; width:100%; overflow:auto; overflow-x:visible; ">
        
        <div id="wideDiv" style="width:100%; margin:0; padding:0; background-color:#ddd;">A Wide Div</div>
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
     	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />
    	Stuff to Make the Page Taller...<br />   	    	


    	</div> <!-- MainContentDiv -->
    	
    </body>
</html>

Thanks!
Jeff

Horizontal Menu Problem!

Similar Tutorials

View Content

Hi people.

In need of some help with this horizontal navigation.

IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise.

Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers...

Live example: please click here for live example

Code
Code:

/* Start Menu */

#topmenu {
	height: 32px;
	margin-bottom:20px;
	background: #FFFFFF url(menu_bg.png) repeat-x top;
	width: 100%;
	overflow: hidden;
	float: left;
}

#topmenu li {
	border-left: 1px solid #dedbd1;
	float: left;
	line-height: 32px;
}

#topmenu li a {
	color: #333333;
	display: block;
	margin: 0 1px 0 0;
	padding: 0 15px;
}

#topmenu li a:hover, #topmenu li.active a {
	color: #425775;
	text-decoration: none;
}

#nav, #nav ul {
	padding: 0;
	float:left;
	list-style: none;
}

#nav {
	padding: 0;
}

#nav a {
	display: block;
}

#nav li {
	float: left;
	line-height:32px;	
}

#nav li a:hover {
	background: none;
	background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}

#nav li ul {
	position: absolute;
	width: 100%;
	left: -999em;
	padding-top:1px;
	overflow: hidden;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	z-index:1000;
}

#nav li ul li {
	border-bottom:1px solid #dedbd1;	
	border-left:1px solid #dedbd1;	
	border-right:1px solid #dedbd1;			
	line-height:32px;	
	width: 100%;
	overflow: hidden;
}

#nav li:hover, #nav li.hover {
	position: static;
}

#nav li ul ul {
	margin: -29px 0 0 100%;
	overflow: hidden;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul {
	left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
	left: auto;
	overflow: hidden;
}

/* Finish Menu */

Any help would be great. Thanks very much in advance!

terra

Horizontal Menu Css Problem

Similar Tutorials

View Content

Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com
Im a little new to css so dont be to hard on me

Horizontal Ul Separator Problem

Similar Tutorials

View Content

Hi there!

I recently decided to start designing in Web 2.0 to the best of my ability... including appearance, organization, and all of that good stuff. However, I am running into a rather annoying problem.

At the top of my website, I have a horizontally-aligned list for navigation. Unfortunately, as my code is... organized... Firefox (Not IE8-- gasp!) is treating my line breaks as an extra  . As a result, the little separators aren't aligned correctly.

HTML Code:
Original - HTML Code <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div>

  

<div id="bannerNav">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS Code:
Original - CSS Code #bannerNav { background: #000 url('images/topNav.gif') repeat-x; border-bottom: 1px solid #FFF; font-size: 18px; color: #EEE; line-height: 40px; height: 40px; width: 100%; } #bannerNav ul { list-style: none; display: inline; } #bannerNav li { background: transparent url('images/topNavLinkSeparator.gif') no-repeat right; display: inline; } #bannerNav li a { padding: 5px 20px 5px 20px; }

  

  


 #bannerNav


     {


     background: #000 url('images/topNav.gif') repeat-x;


     border-bottom: 1px solid #FFF;


     font-size: 18px;


     color: #EEE;


  


     line-height: 40px;


     height: 40px;


     width: 100%;


     }


 #bannerNav ul


     {


     list-style: none;


     display: inline;


     }


 #bannerNav li


     {


     background: transparent url('images/topNavLinkSeparator.gif') no-repeat right;


     display: inline;


     }


 #bannerNav li a


     {


     padding: 5px 20px 5px 20px;


     }

Does my problem make any sense? Because an extra space is being added, all of my links are being shifted to the right one space's width, so separators aren't centered anymore.

Any help would be greatly appreciated! Thanks!

Horizontal Subnav Problem

Similar Tutorials

View Content

Hi Everyone!

Here is a quick problem for any CSS gurus out there!

I have created a horizontal navigation bar which has a horizontal drop down subnav on roll over of the top nav links The top nav don't link to a page but only act to display the subnav - dont worry I have posted the code below!

I am having real trouble with one aspect - when you navigate to a page on the subnav (e.g. the "webcam" page) I want the subnav links for that section (eg "watch") to be displayed rather than only appearing when you roll over one of top navs links.

Has anyone got any ideas of if this is possible with the way that I have structured the nav currently?

Any help would be much appreciated!

Thanks in advance!

Here is the code

Code:

<style type="text/css">

* { margin: 0; padding: 0; }

html {height:100%;} 

body{ 
	background-color: #42530D;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	height:100%;
	}

p {
	padding:5px;
	list-style: inside disc;
	font-size: 1em;
	}

#wrap{
	width: 784px;
	margin: 0 auto;
	border: 0; 
	margin-bottom: 10px;
	}
	
#top_text{
	color:#FFFFFF;
	padding: 6px 78px 5px 0;
	font-size: 11px;
	text-align: right;
	}
	

/* Here is the code for the nav! */

#container {
	position: relative;
	font-size: 1.2em;
    background-color:#5F5C47;
	position: relative;
	height:52px;
	}
#navbar {
	background-color: #C1C1B0;
	position: absolute;
	float: left;
	padding: 0;
	width:100%;
	text-transform:capitalize;
	}
#navbar li {
	list-style: none;
	float: left; 
	text-transform:capitalize;
	}
#navbar li a {
	display: block;
	text-decoration: none; 
	color: #333333;
	padding:5px 10px 5px 10px;
	font-weight: normal;
	text-transform:capitalize;
	}		
#navbar li a:hover {
	color: #FFFFFF; 
	background-color:#5F5C47;
	}
#navbar li ul {
	display: none; 
	 }
#navbar li:hover ul, #navbar li.hover ul {
	color: #FFFFFF; 
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0; 
	}
#navbar li:hover li, #navbar li.hover li {
	float: left; 
	}
#navbar li:hover li a, #navbar li.hover li a {
	color: #FFFFFF; 
	 }
#navbar li li a:hover {
	color: #333333; 
	background-color: #C1C1B0;}
</style>


<script>
//Here is the javascript for the nav!

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="wrap">
<div id="top_text"></div>
<div id="bodywrap">	
<div id="navwrap">
<div id="container">
<ul id="navbar">
			<li><a href="#">HOME</a>			</li>
			<li><a href="#">WATCH</a>
				<ul>
					<li><a href="webcam/index.htm">WEBCAM</a></li>
					<li><a href="index.htm">GALLERY</a></li>
				</ul>			
			</li>
			<li><a href="#">EXPLORE</a>
				<ul>
					<li><a href="projects/index.htm">PROJECTS</a></li>
                    <li><a href="tours/index.htm">VIRTUAL TOURS</a></li>
					<li><a href="games/index.htm">GAMES</a></li>
				</ul>			
			</li>
			<li><a href="#">LISTEN</a>
				<ul>
					<li><a href="podcasts/index.htm">PODCASTS</a></li>
				</ul>			
			</li>
			<li><a href="#">LEARN</a>
				<ul>
					<li><a href="blog/index.htm">BLOG</a></li>
					<li><a href="about">ABOUT</a></li>
					<li><a href="projects/index.htm">PROJECTS</a></li>
				</ul>			
			</li>
			<li><a href="#">PARTICIPATE</a>
				<ul>
					<li><a href="get-involved.htm">GET INVOLVED</a></li>
					<li><a href="user-gallery.htm">USER GALLERY</a></li>
					<li><a href="forum/index.htm">FORUM</a></li>
                    <li><a href="../send-a-postcard/index.htm">SEND A POSTCARD</a></li>
				</ul>			
			</li>
			<li><a href="#">SUPPORT</a>
				<ul>
					<li><a href="support/index.htm">DONATE</a></li>
					<li><a href="other-ways-of-helping.htm">OTHER WAYS OF HELPING</a></li>
				</ul>			
			</li>
        </ul>
        
</div>
</div>
</div>
</div>		
</body>
</html>

Horizontal Centering Problem - Ff

Similar Tutorials

View Content

Hi,

I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE.

If someone could help me that would be great.

Here my page: jacenta.com/TESTING/

Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table; 
height:100%; 
#position:relative; 
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="inner2">
        <div id="container">
          <div id="box">
           Text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Horizontal Menu, Problem W/ie6

Similar Tutorials

View Content

here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks

Having A Big Problem In Firefox/win With A Horizontal Nav Bar

Similar Tutorials

View Content

See the last post for the solution.

Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP.

The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart.

In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can.

Without further ado, here's the CSS for the menu:

Code:

#main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}

#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}

#nav a { color: #111; }

#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}

#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }

#nav li span { font-size: 9px; line-height: 11px; }

#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}

#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}

#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}

#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }

And here's an anonymized version of the markup:

Code:

<div id="main_menu">
	
<ul id="nav">

<li>Menu 1<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 2<ul>
	<li><a href="#">Choice 1</a></li>
	<li class="flyout">Submenu 2a<ul class="end">
		<li><a href="#">Subchoice 1</a></li>
		<li><a href="#">Subchoice 2</a></li>
		<li><a href="#">Subchoice 3</a></li>
	</ul>
	</li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 3<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
	<li><a href="#">Choice 3</a></li>
</ul>
</li>

<li>Menu 4<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li>

</ul>
							
</div>

When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated.

Problem With Horizontal List Menu

Similar Tutorials

View Content

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.

I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.

Css Horizontal Menu Closing Problem

Similar Tutorials

View Content

I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements.

Here is the html:
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" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>

<body>
<div id="pageContainer">
	<div id="header">
        <div id="headerLeft">
       	  <img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
        </div>
        <div id="headerRight">
   	    	<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
        </div>
    </div>
    <div id="menu">
        <ul id="navbar">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Sub 1</a></li>
                    <li><a href="#">Menu 1 - Sub 2</a></li>
                </ul>
            </li>
        
            <li><a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Menu 2 - Sub 1</a></li>
                    <li><a href="#">Menu 2 - Sub 2</a></li>
                </ul>
            </li>
       
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Menu 3 - Sub 1</a></li>
                    <li><a href="#">Menu 3 - Sub 2</a></li>
                </ul>
            </li>
	  	</ul>
    </div>
    <div id="body">
    	<div id="menuShade">
        	
      	</div>
        
    </div>
    <div id="footer" align="center">
   		<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a>&nbsp; 905-827-7882 
    </div>
</div>
</body>
</html>

Here is the menu.css:
Code:

/* CSS Document */

#navbar {
    margin: 0px;
    padding: 0px;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    color: #fff;
    text-decoration: none; }

#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #fff;}
#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li {
    float: none; }
#navbar li:hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }
#navbar li li a:hover {
    background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }

and here is the css.css:
Code:

/* CSS Document */
html{
	height:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

body{
	margin:0px;
	padding:0px;
	height:100%;
}

#pageContainer{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

#header{
	background-image:url(../images/header_background.jpg);
	background-repeat:repeat-x;
	height:55px;
	margin:0px;
	padding:0px;
	padding-right:25px;
}

#headerLeft{
	float:left;
	margin:0px;
	padding:0px;
}

#headerRight{
	float:right;
	margin:0px;
	padding:0px;
}

#menu{
	background-image:url(../images/menu_background.jpg);
	background-repeat:repeat-x;
	height:20px;
	margin:0px;
	padding:0px;
	vertical-align:top;
	overflow:hidden;
	z-index:250;
}

#menuShade{
	background-image:url(../images/menu_shading.png);
	background-repeat:repeat-x;
	position:relative;
	top:0px;
	left:0px;
	height:9px;
	margin:0px;
	padding:0px;
}

#body{
	overflow:auto;
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
	position:absolute;
	top:75px;
	z-index:100;
}

#footer{
	background-image:url(../images/footer_background.jpg);
	background-repeat:repeat-x;
	background-color:#003;
	position:relative;
	bottom:93px;
	left:0px;
	height:18px;
	margin:0px;
	padding:0px;
	font-size:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#BFC0AD;
	padding-top:2px;
}

Any help would be greatly appreciated.

Thanks,
LiquidBuRn

Centred Horizontal List Problem

Similar Tutorials

View Content

Hi,

I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list.

I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this.

At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code:

div#header ul li {

	width: 20%;
	padding: 0px;
}

If the elements become four then I would set the width equals to 25% and so on.

I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list.

My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width.

Is this possible? Or I have to always set the width of the li element?

I am sorry if I am not clear enough. Thanks for any suggestions.

Regards,
Sim085