# Solved: CSS question regarding image positioning



## tomdkat (May 6, 2006)

Greetings! I've been beating my head against the wall trying to figure this out FOR EVER!!!! I hope someone here can set me straight. 

I've been trying to get an image to serve as a "fancy underline" of sorts and for some reason, it's not working when I have a strict DOCTYPE specified in my HTML.

Here is the HTML code:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>CSS test</title>
  <style type="text/css">
.center-content {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

#black-bar {
  width: 300px;
  height: 1px;
}


  </style>
</head>
<body>
<div class="center-content">
<h1>Header 1<br>
<img id="black-bar" alt="Black bar"
 src="images/graphics/black_bar.gif"></h1>
<p></p>
<p>Paragraph<br>
<img id="black-bar" alt="Black bar"
 src="images/graphics/black_bar.gif"></p>
</div>
</body>
</html>
```
 Attached is a screenshot of how it appears in my browser (Opera 9.20 on Linux). Notice how the black bar is NOT flush against either set of text. Why is that? When I use a transitional DOCTYPE, the bar appears flush as I want.

What am I missing?

Thanks in advance! 

Peace...


----------



## MMJ (Oct 15, 2006)

Try negative margins.

I can work on it but you will have to post the images.


----------



## jaymanson (Mar 18, 2007)

Hi tomdkat,

All you need to do is add a class which will add a background to the text containing your underline image:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>CSS test</title>
  <style type="text/css">
.center-content {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

#black-bar {
  width: 300px;
  height: 1px;
}

.underline {
  background: url("images/graphics/black_bar.gif") no-repeat bottom left;
  padding-bottom: 4px;
}

  </style>
</head>
<body>
<div class="center-content">
<h1 class="underline">Header 1</h1>
<p class="underline">Paragraph</p>
</div>
</body>
</html>
```
You may want to play around with padding to position the image, but this should give you the general idea


----------



## tomdkat (May 6, 2006)

jaymanson said:


> You may want to play around with padding to position the image, but this should give you the general idea


Thanks for the tip! That worked out well except when I add the desired length to the black bar image, the length isn't respected. I'll play with making the image longer (rather than having the browser size it) and see. What's nice about having the browser size it is the image maintains a "gradient" feel to it even though it actually isn't a gradient.

The "black bar" image is attached.

Thanks!

Peace...


----------



## tomdkat (May 6, 2006)

Simply making the bar the desired width solved my problem. Thanks again for the CSS tip!!!! 

Peace...


----------

