Forums

blueturtle

Hi. I'm having an issue with an unordered list (vertical navigation). The problem is that I have a left-border rule going down the side of the navigation and the text doesn't like up with the rule at the top. I'd attached a screen shot, but the problem is on I.E. 7 which I don't have on this computer. You can see what it's doing here http://www.brierscpa.info. It's in the right-hand sidebar. All of the text drops down leaving a huge gap above it. Here is my css:

@charset \"UTF-8\";
h1 {
	font-size: 20px;
	color: #0B1E52;
	margin-bottom: -8px;
	font-weight: normal;
	letter-spacing: 1.5px;
}
.h1body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 25px;
	color: #000000;
	font-weight: normal;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 17px;
	color: #0B1E52;
	margin-bottom: -8px;
	font-weight: normal;
	letter-spacing: 1.5px;
}
.h2body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	font-weight: normal;
	color: #666666;
}
#topnav  ul {
	width: 560px;
	display: inline;
}
#topnav  li {
	list-style-type: none;
	height: 27px;
	text-decoration: none;
	font-size: 14.5px;
	text-align: center;
	font-weight: normal;
	display: inline;
	letter-spacing: 1.5px;
	float: left;
	background-image: url(images/topNav1.jpg);
	border-left: 2px solid #0B1E52;
	background-repeat: repeat-x;
}
#topnav  li  a {
	text-decoration: none;
	color: #0B1E52;
	display: block;
	float: left;
	width: 114px;
	padding: 6px 10px 7px 10px;
}
#topnav  li  a:visited {
}
#topnav  li  a:hover {
	color: #0B1E52;
}
#topnav li:hover {
	background-image: url(images/topNav2.jpg);
	background-repeat: repeat-x;
}
#sidebar1 ul {
	width: 198px;
	display: inline;
}
#sidebar1 li {
	display: block;
	font-size: 13px;
	height: 35px;
	width: 198px;
	list-style-type: none;
}
#sidebar1 li  a {
	display: block;
	text-decoration: none;
	padding-top: 0px;
}
#sidebar1 li a:link {
	color: #0B1E52;
}
#sidebar1 li a:visited {
	color: #666666;
}
#sidebar1 li a:hover {
	color: #666666;
}
.copyright {
	text-align: center;
	font-size: 11px;
	color: #999999;
}
body {
	background-color: #ffffff;
}
.addresstext {
	color: #003153;
	font-size: 13px;
}
.profphotobody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: #000000;
	font-weight: normal;
	padding: 0;
	margin: 65px 560px 0 30px;
}
.taxesphotobody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: #003153;
	font-weight: normal;
	padding: 0;
	margin: 86px 600px 0 30px;
}
.servicesphotobody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: #000000;
	font-weight: normal;
	padding: 0;
	margin: 80px 30px 0 564px;
}
.h2bodysmallital {
	font-size: 11px;
	font-style: italic;
}
#sidebarsubtext   ul {
	width: 200px;
	display: inline;
}
#sidebarsubtext   li {
	display: block;
	font-size: 15px;
	height: 32px;
	width: 200px;
	list-style-type: none;
	font-weight: normal;
	text-align: center;
}
#sidebarsubtext   li   a {
	display: block;
	text-decoration: none;
}
#sidebarsubtext  li  a:link {
	color: #0B1E52;
}
#sidebarsubtext  li  a:visited {
	color: #666666;
}
#sidebarsubtext  li  a:hover {
	color: #FCC248;
	}
a:link {
	color: #003153;
}
a:visited {
	color: #999999;
}
a:hover {
	color: #FBB829;
}
#mainContent ul {
	list-style-type: disc;
	padding-bottom: 10px;
	margin-bottom: 0px;
}
#mainContent li {
	font-size: 13px;
	color: #666666;
	height: 20px;
	padding-top: 5px;
	line-height: 17px;
}

@charset \"UTF-8\"; body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #0b1e52;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-image: url(images/bcknd.jpg);
	background-repeat: repeat-x;
} .twoColFixRtHdr #wrapper {
	width: 932px;
	background-color: #FFFFFF;
	margin-left: 14px;
	clear: both;
	padding-top: 0px;
}
.twoColFixRtHdr #container {
	width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left;
	background-image: url(images/whiteborder.jpg);
	background-repeat: repeat-x;
	max-height: 100%;
} .twoColFixRtHdr #logo {
	width: 340px;
	padding-left: 20px;
	height: 40px;
	padding-top: 35px;
}
.twoColFixRtHdr  #topnav {
	width: 560px;
	float: right;
	padding-top: 74px;
} .twoColFixRtHdr #header {
	background: transparent;
	height: 115px;
	background-image: url(images/header_bcknd.jpg);
	background-repeat: no-repeat;
	background-position: 438px -18px;
} .twoColFixRtHdr #homephoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
}
.twoColFixRtHdr  #profphoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
	background-image: url(images/professionals.gif);
	background-repeat: no-repeat;
	background-position: 14px 0;
}
.twoColFixRtHdr #servicesphoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
	background-image: url(images/services.gif);
	background-repeat: no-repeat;
	background-position: 14px 0;
}
.twoColFixRtHdr #taxesphoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
	background-image: url(images/taxes.jpg);
	background-repeat: no-repeat;
	background-position: 14px 0;
}
.twoColFixRtHdr #contactphoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
	background-image: url(images/contact.jpg);
	background-repeat: no-repeat;
	background-position: 14px 0;
}
.twoColFixRtHdr #privacyphoto {
	clear: both;
	height: 251px;
	padding-left: 14px;
	padding-top: 1px;
	background-image: url(images/flashimages_4.jpg);
	background-repeat: no-repeat;
	background-position: 14px 0;
}
.twoColFixRtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixRtHdr #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 215px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 10px 0px 15px;
	border-left-style: solid;
	border-left-color: #FCC34D;
	border-left-width: 1px;
	margin-top: 30px;
	max-height: 100%;
} .twoColFixRtHdr #sidebartext {
	width: 210px;
	height: 100%;
	padding-left: 15px;
	border-left-color: #FBB829;
	border-left-style: solid;
	border-left-width: 1px;
}
.twoColFixRtHdr #mainContent {
	margin: 0 255px 0 30px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 15px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} .twoColFixRtHdr #footer {
	background:#ffffff;
	width: 932px;
	margin-top: 0px;
	margin-left: 14px;
	clear: both;
} .twoColFixRtHdr #footer p {
	padding: 13px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: center;
	border-top-style: solid;
	border-top-width: 1px;
	margin: 0 15px 0 15px;
} .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px;
 } 
.twoColFixRtHdr #cpalogo {
	width: 200px;
	padding-top: 10px;
	text-align: center;
}
.twoColFixRtHdr  #sidebarsub {
	float: right; /* since this element is floated, a width must be given */
	width: 230px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 10px 0px 5px;
	height: 100%;
	clear: both;
	position: relative;
	margin-top: 15px;
}
.twoColFixRtHdr #sidebarsubtext {
	width: 200px;
	height: 100%;
	padding-left: 15px;
	border-left-color: #FBB829;
	border-left-style: solid;
	border-left-width: 1px;
	position: relative;
}

Any help on this is greatly appreciated. I've been noodleing around with this for days!

Kim

apostrophe

You can add this to the top of your stylesheet for now but you should really look at doing a proper css reset.

* {
 margin: 0;
 padding: 0;
}

Squintz

"apostrophe" said:
You can add this to the top of your stylesheet for now but you should really look at doing a proper css reset.
* {
 margin: 0;
 padding: 0;
}

What makes a reset proper or improper?

blueturtle

Thanks for answering my post. I tried adding the code below to the style sheet and it didn't work. Guess I'll have to look at doing a reset. I'm not familiar with this technique. Any pointers?

* {
margin: 0;
padding: 0;
}

apostrophe

What makes a reset proper or improper?

One that you have complete control over.

Any pointers?

The original and still the best http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

treehouse : what would you like to learn today?

Forums

Unordered list not lining up with div container