Learn VBA & Macros in 1 Week!

CSS - List Positioning In Ie

Full Excel VBA Course - Beginner to Expert

List Positioning In Ie	View Content

Hey all,

can't seem to figure out what the deal is with this menu...looks fine in FF, but I can't seem to get the menu to line up with the background image in IE6.

Here's what i've got;
Code:

<div id="header_bg">
<ul id="header_top">
	<li><a href="index.php"><img src="images/menu_top.gif" alt="Windsor Harley Owners Group header image"></a></li>
</ul>
<ul id="menu_top">
	<li id="leftspc"></li>
	<li id="links"><a href="links.php"></a></li>
	<li id="contact"><a href="contact.php"></a></li>
	<li id="news"><a href="newsletter.php"></a></li>
	<li id="home"><a href="index.php"></a></li>
	<li id="about"><a href="about.php"></a></li>
	<li id="events"><a href="events.php"></a></li>
	<li id="join"><a href="join.php"></a></li>
	<li id="pix"><a href="pix.php"></a></li>
	<li id="rightspc"></li>
</ul>
<ul id="header_bottom">
	<li><img src="images/menu_bottomleft.gif" alt="Bottom Left spacer image"></li>
	<li id="admin"><a href="admin_login.php"></a></li>
	<li id="members"><a href="members.php"></a></li>
	<li><img src="images/menu_bottomright.gif" alt="Bottom right spacer image"></li>
</ul>
</div>
<div class="clear"></div>

and the CSS;
Code:

#header_bg {
width:100%;
position:relative;
background:black url(images/header_bg.gif) repeat-x bottom;
height:166px;
}

/*
* html #header_bg {
height:156px;
}
*/
#header_top {
width:800px;
height:59px;
margin:auto;
list-style:none;
background-color:black;
}

/*#header_top li#logo {
width:800px;
height:59px;
margin:auto;
}*/

#menu_top {
position:relative;
margin:auto;
list-style:none;
height:71px;
width:800px;
background-color:transparent;
margin-top:-5px;
}

* html #menu_top {
padding-left:18px;
margin-top:-8px;
}

#menu_top li {
height:71px;
float:left;
}

#menu_top a {
text-decoration:none;
display:block;
height:71px;
}

#menu_top li#leftspc {
width:100px;
background:black url(images/menu_leftspc.gif) no-repeat;
}

#menu_top li#rightspc {
width:100px;
background:black url(images/menu_rtspc.gif) no-repeat;
}


/* LINK BUTTONS */
#menu_top li#links a { background-image:url(images/linksbut_off.jpg); }
#menu_top li#links a:hover { background:transparent; }
#menu_top li#links { background-image:url(images/linksbut_roll.jpg); width:75px; }

/* CONTACT BUTTONS */
#menu_top li#contact a { background-image:url(images/contactbut_off.jpg); }
#menu_top li#contact a:hover { background:transparent; }
#menu_top li#contact { background-image:url(images/contactbut_roll.jpg); width:75px; }

/* NEWS BUTTONS */
#menu_top li#news a { background-image:url(images/newsbut_off.jpg); }
#menu_top li#news a:hover { background:transparent; }
#menu_top li#news { background-image:url(images/newsbut_roll.jpg); width:75px; }

/* HOME BUTTONS */
#menu_top li#home a { background-image:url(images/homebut_off.jpg); }
#menu_top li#home a:hover { background:transparent; }
#menu_top li#home { background-image:url(images/homebut_roll.jpg); width:75px; }

/* ABOUT BUTTONS */
#menu_top li#about a { background-image:url(images/aboutbut_off.jpg); }
#menu_top li#about a:hover { background:transparent; }
#menu_top li#about { background-image:url(images/aboutbut_roll.jpg); width:75px; }

/* EVENTS BUTTONS */
#menu_top li#events a { background-image:url(images/eventsbut_off.jpg); }
#menu_top li#events a:hover { background:transparent; }
#menu_top li#events { background-image:url(images/eventsbut_roll.jpg); width:75px; }

/* JOIN BUTTONS */
#menu_top li#join a { background-image:url(images/joinbut_off.jpg); }
#menu_top li#join a:hover { background:transparent; }
#menu_top li#join { background-image:url(images/joinbut_roll.jpg); width:75px; }

/* PIX BUTTONS */
#menu_top li#pix a { background-image:url(images/pixbut_off.jpg); }
#menu_top li#pix a:hover { background:transparent; }
#menu_top li#pix { background-image:url(images/pixbut_roll.jpg); width:75px; }

#header_bottom {
width:600px;
height:35px;
margin:auto;
margin-top:-5px;
background-color:transparent;
}

* html #header_bottom {
padding-left:18px;
margin-top:-4px;
}

#header_bottom li {
float:left;
height:35px;
list-style:none;
}

#header_bottom a {
text-decoration:none;
display:block;
height:35px;
}

/* admin BUTTONS */
#header_bottom li#admin a{
background-image:url(images/admin_button_off.gif);
}
#header_bottom li#admin a:hover {
background:transparent;
}
#header_bottom li#admin {
background-image:url(images/admin_button_roll.gif);
width:150px;
}

/* members BUTTONS */
#header_bottom li#members a{
background-image:url(images/members_button_off.gif);
}
#header_bottom li#members a:hover {
background:transparent;
}
#header_bottom li#members {
background-image:url(images/members_button_roll.gif);
width:150px;
}

Full Excel VBA Course - Beginner to Expert

Css List Positioning Problem In Ie6/7

Similar Tutorials

View Content

Hi guys,

I have a small list positioning problem in IE 6/7 which I was hoping someone might be able to advise me on!

List Positioning is fine in Firefox, but for some reason is adding about 50px on the left margin in IE...

I know my page isn't quite valid because of the sIFR bits I have on it, but I'm working on this too!

The page in question is here

Here's my list css code;

#services_home_container {
width: 265px;
height: 274px;
padding: 0px 0px 0px 0px;
float: left;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 130%;
}

#services_home ul {
list-style-type: none;
width: 235px;
padding: 0px 0px 0px 0px;
}

#services_home li {
margin: 10px 0px 0px 0px;
}

#services_home li a {
color: #4f2f9c;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

* html #services_home li a { /* make hover effect work in IE */
width: 235px;
}

#services_home li a:hover {
background: #bcfbc6;
}

#services_home a em {
color: #666666;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
width: 235px;
padding: 5px 0px 5px 0px;
}

#services_home a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

#services_home img {
float: left;
padding:2px 0px 2px 0px;
margin: 0px 5px 0px 2px;
border: none;
}

If anyone has a moment to take a look and help me, it would be very much appreciated!

Best regards

Jon

List Positioning Problem

Similar Tutorials

View Content

Hi,

I'm using a list for a navigation bar where I have all the links with background images to give a rollover effect with images. However I want all the links to be inline and not on separate lines. Here is the problem page: http://www.mckr.ie/test.html (the blue navigation bar)

Here is the HTML code on the page:

Code:

<div id="topnavdiv">    
<ul>      
<li><a href="/" id="buttonhome"><b>Home</b></a></li>
<li><a href="../about.html" id="buttonabout"><b>About Us</b></a></li>      
<li><a href="../location.html" id="buttonlocation"><b>Location</b></a></li>      
<li><a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></li>      
<li><a href="../news.html" id="buttonnews"><b>News</b></a></li>      
<li><a href="../people.html" id="buttonpeople"><b>People</b></a></li>      
<li><a href="../recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li>    
</ul>  
</div>

Here is my CSS code for the nav bar and the first 2 links:

Code:

#topnavdiv {  	position:absolute;  	left:0px;  	top:120px;  	width:100%;  	z-index:3;  	background-color: #3366CC;  	border-top-width: 1px;  	border-right-width: 0px;  	border-bottom-width: 1px;  	border-left-width: 0px;  	border-top-color: #f8c015;  	border-bottom-color: #f8c015;  	border-right-color: #f8c015;  	border-left-color: #f8c015;  	border-top-style: solid;  	border-right-style: solid;  	border-bottom-style: solid;  	border-left-style: solid;  }  

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

#topnavdiv li {  	margin: 0px;  	padding: 0px;  	list-style-type: none;  	display: inline;  }  

#topnavdiv b {  	display: none;  }  

a#buttonhome {  	background-color: #3366CC;  	background-image: url(images/nav.home.gif);  	height: 24px;  	width: 65px;  	display: block;  	background-repeat: no-repeat;  	cursor: hand;  }  

a#buttonhome:hover {  	background-color: #3366CC;  	background-image: url(images/nav.home.on.gif);  	height: 24px;  	width: 65px;  	display: block;  	background-repeat: no-repeat;  	cursor: hand;  }  

a#buttonabout {    	background-color: #3366CC;  	background-image: url(images/nav.about.gif);  	height: 24px;  	width: 85px;  	display: block;  	background-repeat: no-repeat;  	cursor: hand;  }  

a#buttonabout:hover {      	background-color: #3366CC;  	background-image: url(images/nav.about.on.gif);  	height: 24px;  	width: 85px;  	display: block;  	background-repeat: no-repeat;  	cursor: hand;  }

Please can someone help me get them inline? Thanks in advance

Unordered List Positioning/css Problems

Similar Tutorials

View Content

Positioning A List In My Center Column

Similar Tutorials

View Content

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Positioning Of Image Bullets In List

Similar Tutorials

View Content

Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out?

Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!)

Code snippet is posted below. Cheers.

from stylesheet:
.bulletList li

{
margin-bottom: 1.5em;

padding-left: 0.75em;
list-style-image:url(../images/hsdmini.jpg);
color: #547A98;

}

from page:

<table width="100%" >
<tr>
<td align="left">
<ul class="bulletList"><strong>
<li>Credit cards accepted</li>
<li>Cheques accepted</li>
<li>Delivery to europe</li>
<li>40,000 products in store!</li>
</strong>
</ul>
</td>
</tr>
</table>

Ie Positioning And List Font Size Help

Similar Tutorials

View Content

Hello,

I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a

1.) IE won't resize the font size that I need to display my navigation bar correctly

2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template

Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html

Here is the HTML

HTML
Code:

<html>

<head>
	<title>Title</title>

<html xmlns="http://www.w3.org/1999/xhtml">

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="styletest.css" rel="stylesheet" type="text/css">
</head>

<body>



<div id="wrapper">
<div id="container">

<div id="top"></div>
<div id="bod">
	<div id="wrapHeader">
		<div class="headerLeft"></div>
		<div class="headerRight"><p>Call Now 888-467-6650</p></div>
	</div>
	
<div id="navWrap">
	<ul id="navigation">

	<li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link </a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Link</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>

	<li><a href="#"><span>Information & Insurance Resource Center</span></a>
	<ul>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	<li><a href="#">Sub-Link</a></li>
	</ul>
	</li>


	<li><a href="#"><span>Link</span></a></li>

	</ul>
	</div>
	
	<div id="contentMain">
	<h2>Welcome to Independent Agents Online!</h2> 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p>

	</div>

	
	<div id="wrapColumn">
		<div id="columnLeft">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. 
			<center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center>
			
		</div>
		<div id="columnMid">
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. 
		</div>
		<div id="columnRight">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. 
			
		</div>
	</div>

</div>
<div id="bottom"></div>
<div id="footer">Site Map LegalAbout Us</p></div>
</div>
</div> 


</body>
</html>

Here is the CSS http://www.kyjocro.com/IAO/styletest.css

Code:


body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:18px;	color:#FF0000;	padding: 4px;	padding-left: 0px; text-align:center;}
img { border:none;}

/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}


/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px;	height:128px;	background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px;	float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px;	float:left;	background:url(images/headerRight.jpg) no-repeat;	height:128px;}
.headerRight p{	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	font-size:24px;	color:#FF0000;	padding:60px 0 0 100px;}


/*Navigation Bar Code*/
#navWrap {margin: 0 auto;	width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak  p {line-height: 3px;}

  
/*Main Body*/
#contentMain {margin: 0px auto;	width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}


/*COLUMN WRAPPER AND DIVS */

#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}

#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}

#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}

#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}


/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}

I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples.

Much thanks in advance

Positioning List-style-image?

Similar Tutorials

View Content

Is it possible to adjust the alignment of list-style-image's?

In IE, the image ends up being too high, but it's centered properly in Firefox.

Example:
URL

Positioning Background Image In Bulletted List

Similar Tutorials

View Content

Hi

I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example

http://dmumford.bizhat.com/test/list.htm

I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense.

Could someone please help me!

Thank you!

Menus - Definition List Or Unordered List And Span?

Similar Tutorials

View Content

Seems like most people use unordered lists for menus.
Code:

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

Others use definition lists. They claim it is less buggy with IE.
Code:

<dl>
<dt>menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
</dl>

Any thoughts on whether unordered lists or definition lists are best?

Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag?
Code:

<ul>
<li><span>menu1</span></li>
<li><span>menu2</span></li>
<li><span>menu3</span></li>
</ul>

Thanks

Space Between List-style-image And List Item Changes

Similar Tutorials

View Content

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:


#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Unordered List List-style-type:none

Similar Tutorials

View Content

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

Nested List Is Not Pushing Parent List Downwards

Similar Tutorials

View Content

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,
Code:

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>

</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>

<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,
Code:

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}

/* All Levels */
#nav li { text-align:left; }


#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}

/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }

#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}


#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}

/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }

/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }

/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }


#nav li ul { display:none; }
#nav li:hover ul{display: block; }


#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

Code:

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}

ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.

<ol> Gap Between List Numbers And List Items

Similar Tutorials

View Content

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>

.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}

.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

Changing The Color Of Previously Selected List Item To Original When Other List Item

Similar Tutorials

View Content

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here

Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

Row Positioning

Similar Tutorials

View Content

Hello,

I am creating a table with several rows that represent records from a database. Each record creates two rows. The first row is basic data. The second row contains detailed data, however, it is initially hidden. When someone hovers over a row, I need to display the detailed information immediately over the basic data.

Basically, when the mouse is over a row, I need to position the row directly below it over the current row. I know this sounds odd, but I have a cool idea. I'm trying to do this with CSS and JavaScript, but I can't seem to figure out:

1. How to position the even numbered rows on top of the odd numbered rows when needed WITHOUT readjusting the entire table.

Can you please provide some help? Thank you so much,
Crystal

Help With Positioning

Similar Tutorials

View Content

Hi,

I have the following code:

PHP Code:
<div id="siteDimention">

    <div id="topLeft"></div>

    <div id="topRight"></div>

    <div id="latestProjects"></div>

    <br><br>

    <div id="additionalBusiness"></div>

</div>

body {
    margin: 0px;
    padding: 0px;
}

#siteDimention {
  width: 758px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
}

#topLeft    {
    width: 479px;
    height: 305px;
    float: left;
    background-image: url(../images/main_topLeft.jpg)
}

#topRight    {
    width: 279px;
    height: 305px;
    float: right;
    background-image: url(../images/main_topRight.jpg)
}

#latestProjects    {
    width: 758px;
    height: 185px;
    background-image: url(../images/main_latestProjects.jpg)
}

#additionalBusiness    {
    width: 758px;
    height: 165px;
    background-image: url(../images/main_additionalBusiness.jpg)
}

Which if you look he http://www.talktonight.com/test/

.. works fine in IE, but not in Firefox. What am I doing wrong?

Ie6 & Positioning

Similar Tutorials

View Content

I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went.

learnware .com . au/css/index .htm

The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle.

I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at.

I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far!

(Sorry if I've disobeyed any forum rules)

Need Help Positioning Relatively

Similar Tutorials

View Content

Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox...
what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY)
page is he
http://www.gr-p.com/test2.html
what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to

Help With Positioning

Similar Tutorials

View Content

http://www.drowninginmytears.org/invalid/

it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks

my css is:

http://www.drowninginmytears.org/invalid/css.css