Help with CSS

[jbrock31]

Hello everyone. I am trying to learn css. I download a free web template and have began to modify it a little bit.

I feel like I am learning a lot, but I am trying to figure out why I have two vertical lines between two of my div's and i can't figure out how to get rid of them. I tried using the Visual Studio designer, I have looked for references in the html source, but It has to be coming from the CSS I would think.

I have attached a screen shot with the two vertical lines i want gone. Below is my css. Any idea how to get rid of these two lines? Thanks!

body {
	font-family: tahoma, helvetica, arial, sans-serif;
	text-align: center;
	color: #6f6f6f;
}
  
html, body, #wrapper, h1, #nav, #nav ul, #nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body, th, td {
	font-size: 10px;
}

img { border: 0; }

#wrapper {
	margin: 16px auto;
	text-align: left;
	position: relative;
}

h1, h2, h3 {
	font-size: 12px;
}

h1 {
	margin: 0;
	padding: 0;
}

h2 {
	margin: 0 0 5px 0;
	padding: 0;
}

h3 {
	padding: 4px 0 0 0;
}

p {
	margin: 1em 0;
	padding: 0;
}

.block {
	display: block;
}

.clear {
	clear: both;
	height: 1px;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1px;
	line-height: 1px;
}

* html .clear {
	margin-top: -5px;
	margin-bottom: -4px;
}

.left {
	float: left;
	margin: 1px 12px 0px 0px;
}

.softright {
	text-align: right;
}

/* ***** */

body {
	background: #373839;
	padding-bottom: 12px;
}

#wrapper {
	width: 658px;
}

h1 {
	margin-bottom: 2px;
}

a {
	color: #f5f5f5;
}

a:hover {
	text-decoration: none;
}

/* navigation */

#nav {
	position: absolute;
	top: 15px;
	right: 0;
	width: 31em;
}

#nav li {
	width: 7em;
	float: left;
	margin: 0 0.3em;
	padding: 0;
}

#nav a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 4px 0;
	display: block;
	text-align: center;
}

#nav a:hover {
	text-decoration: underline;
}

#nav li.a   { background: url(images/menu_a_bg.gif) no-repeat; }
#nav li.a a { background: url(images/menu_a_r.gif)  top right no-repeat; }
#nav li.b   { background: url(images/menu_b_bg.gif) no-repeat; }
#nav li.b a { background: url(images/menu_b_r.gif)  top right no-repeat; }
#nav li.c   { background: url(images/menu_c_bg.gif) no-repeat; }
#nav li.c a { background: url(images/menu_c_r.gif)  top right no-repeat; }
#nav li.d   { background: url(images/menu_d_bg.gif) no-repeat; }
#nav li.d a { background: url(images/menu_d_r.gif)  top right no-repeat; }

/* body */

#body { width: 100%; }

#body {
    background-position: #0000FF url(images/body_bg.gif);
    background: #0000FF url(images/body_bg.gif);
}
#body div { background: url(images/body_tl.gif) top left no-repeat; }
#body div div { background: url(images/body_tr.gif) top right no-repeat; }
#body div div div { background: url(images/body_bl.gif) bottom left no-repeat; }
#body div div div div { background: url(images/body_br.gif) bottom right no-repeat; }
#body .inner div { background: none; }

#body .inner {
	color: white;
	padding: 18px 20px;
}

#body h2 {
	margin-top: 3px;
	text-indent: -3px;
}

* html #body h2 {
	margin-top: 21px;
	marg\in-top: 3px;
}

#body p {
	margin: 1em 0;
}

#body #dividerx {
	clear: both;
	margin: 0 1em;
	padding: 12px 0;
}

/* darkboxes */

* html #boxes, * html #boxes .inner { width: 100%; }
* html #body #boxes #left .inner  { width: 100%; w\idth: 90%; }
* html #body #boxes #right .inner { width: 100%; w\idth: 95%; }

#body #boxes { background: url(images/box_bg.gif) repeat-y; }
#body #boxes div { background: url(images/box_t.gif) top left no-repeat; }
#body #boxes div div { background: url(images/box_b.gif) bottom left no-repeat; }
#body #boxes .inner div { background: none; }

#body #boxes .inner {
	color: white;
	padding: 0;
}

#left {
	float: left;
	width: 200px;
}

#right {
	float: right;
	width: 404px;
}

#body #boxes #left .inner,
#body #boxes #right .inner {
	padding: 10px 11px 0px 11px;
}

#boxes ul {
	margin: 0;
	padding: 0;
}

* html #boxes ul {
	margin-left: -0.7em;
	marg\in-left: 0.0em;
}

#boxes li {
	margin: 0.4em 1.8em 0.2em 0.1em;
	padding: 0;
	list-style: none;
}

a {
	font-weight: bold;
}

#left .lowright {
	float: right;
	margin: 0 0 0 1em;
	display: inline;
}

* html #left .lowright {
	margin-bottom: -5px;
}

/* footer */

#footer {
	margin-top: 3px;
	text-align: center;
}

#footer, #footer a {
	font-weight: normal;
	font-size: 9px;
	color: #989994;
}

#footer a:hover {
	color: #fff;
	text-decoration: underline;
}
hr {
  border: 0;
  width: 100%;
  color: black;
  background-color: black;
}

can't say without seeing the html, how about changing border:0 to border:none. Doubt if it'll do anything though.

Firefox has a developer's tools plugin by Chris Pendrick - really good for identifying bits of css. If you use chrome, have a look at the shortcut menu Inspect element.

[jbrock31]

can't say without seeing the html, how about changing border:0 to border:none. Doubt if it'll do anything though.

Firefox has a developer's tools plugin by Chris Pendrick - really good for identifying bits of css. If you use chrome, have a look at the shortcut menu Inspect element.

Sorry about that. Here is the HTML for the problem area. Thanks.

<div id="dividerx"><hr /></div>
              
              <div id="boxes">
                  <div><div class="inner">
                      <div id="left"><div class="inner">
                          <h2><img src="images/title_join_my_club.gif" width="86" height="20" alt="join my club" /></h2>
                          <p>This is a demo text. It will be repl aced by the original.</p>
                          <img src="images/black_man.gif" width="79" height="102" alt="black man" class="lowright" />
                          <p>This is a demo text. It will be replaced by the original. This is a demo text. </p>
                          <p class="readmore"><a href="http://www.freewebsitetemplates.com">...Join Now</a></p>
                      </div></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- end left -->
                      <div id="right"><div class="inner">
                          <h2><img src="images/title_enter.gif" width="139" height="20" alt="enter my dreamland" /></h2>
                          <ul class="left">
                              <li><a href="http://www.freewebsitetemplates.com">My music</a></li>
                              <li><a href="http://www.freewebsitetemplates.com">My movies</a></li>
                              <li><a href="http://www.freewebsitetemplates.com">My sports</a></li>
                              <li><a href="http://www.freewebsitetemplates.com">My paintings</a></li>
                          </ul>
                          <p>This is a demo text. It will be replaced by the original. This is a demo text. It 
                              will be replaced by the original. This is a demo text. It will be replaced by 
                              the original. This is a demo text. It will be replaced by the original. This is 
                              a demo text. It will be replaced by the original. This is a demo text.</p>
                          <p>This is a demo text. It will be replaced by the original. This is a demo text. It 
                              will be replaced by the original. This is a demo text. It will be replaced by 
                              the original. This is a demo text. It will be replaced by the original. This is 
                              a demo text. It will be replaced by the original. This is a demo text.</p>
                      </div></div><!-- end right -->
                      <div class="clear"></div>
                  </div></div>
              </div><!-- end boxes -->
          </div>

[almostbob]

I took your css and pulled all the declarations into order,, first to last within element name,
There are multiple declarations of the same element scattered throughout the file, many of them contradict each other.
Its no wonder the effect is not quite as you expect, as each later declaration changes something of the previous ones
If you collect the effect you do want for each declared element, your css may be much smaller, and appear as you expect onscreen

you can remove any part of a declaration begin in HTML or *, its redundant everything is the child of html that is the child of global * html p or html p or * p is just p

The right hand side line seems to be the original background colour showing - not a line therefore.

Hope you don't mind me saying that the html looks a little overcooked. There seem to be a lot of presentational elements (divs in particular). As AB states, your CSS contains duplication and things in the wrong order.

I placed your css and html into a page, but it doesn't display much like yours as I don't have the images. Also, where are the wrapper divs? Could you please post the html of the entire page? Are there any inline or head styles? Need full info.

[jbrock31]

The right hand side line seems to be the original background colour showing - not a line therefore.

Hope you don't mind me saying that the html looks a little overcooked. There seem to be a lot of presentational elements (divs in particular). As AB states, your CSS contains duplication and things in the wrong order.

I placed your css and html into a page, but it doesn't display much like yours as I don't have the images. Also, where are the wrapper divs? Could you please post the html of the entire page? Are there any inline or head styles? Need full info.

Thanks everyone. I actually was just getting on here to post that i got it figured out.

First thing i did was clean up the css as AB suggested. I then found an image that was being used that was repeating vertically, causing my lines.

I thank everyone for their tips. As i said, i just downloaded a template to use to learn. I have definitely learned a lot by changing a lot of the original css and also by posting on here of course. Thanks again!