hr/h2 display using CSS

BobbyDouglas · #1 15-Oct-2004, 22:07

It's been busy for me lately, but I am back for a bit and with a small problem. It seems to be a render issue with Mozilla/IE even though the code validates.

I am trying to achieve the same result, that the code below shows in Mozilla, in IE.

In Mozilla, the h2 and hr look basically on the same line, however in IE, there is a nasty gap.

HTML:

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>
<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
	<div id="middle">
	
		<h2>Services Overview:</h2>
		<hr class="titleline" />
	
	</div>
</body>
</html>

style.css CSS:

CSS Code:

* {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
}

h2 {
	font-size: 0.7em;
	background: #660000;
	color: #ffffff;
	padding: 2px 0;
	width: 150px;
	text-align: center;
}

hr.titleline {
	background-color: #660000;
	color: #660000;
	width: 95%;
	text-align: left;
}

div#middle {
	margin: 0 200px 10px 190px;
}

JasonMichael · #2 15-Oct-2004, 23:20

There is a known CSS problem in IE that is documented around the web, concerning extra vertical spacing issues. I found a solution that I've posted here that works for both IE and Firefox, concerning the your wish to draw a line.

Try getting rid of "hr.titleline" in your CSS, and use the following instead:

CSS Code:

div.hr {
  height: 1px;
  background: #660000 no-repeat scroll center;
}
div.hr hr {
  display: none;
}

In your HTML, do this:

HTML Code:


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

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

</head>

<body>
  <div id="middle" >
  
    <h2>Services Overview:</h2>
   <div class="hr"><hr ></div>
  
  </div>
</body>
</html>

BobbyDouglas · #3 15-Oct-2004, 23:41

Oh, great idea. I remember reading about this awhile ago on WebmasterWorld.

Worked perfect!

BobbyDouglas · #4 15-Oct-2004, 23:54

How would I modify the h2 tag that I use to have the background for it be only the width of the text (100% in relationship to the text) but allow me to add a 5px padding left/right.

JdS · #5 16-Oct-2004, 00:04

One way is possibly to surround the text with a span tag that you will then style for the background and paddings?

BobbyDouglas · #6 16-Oct-2004, 00:09

I was looking particularly for a way to do it with h2.

If it comes down to it, I will just use a span.

JdS · #7 16-Oct-2004, 00:23

What about adding a (h2) style width of 5% (or some other random minimum value) and see what happens? I am hoping the text would simply expand the h2 tag to fit.

I am sorry, I am just guessing at this since I never had to do something like this myself.

BobbyDouglas · #8 16-Oct-2004, 00:32

I tried that and it made it go onto two lines. It looked like a rectangle with one word on each line.

JdS · #9 16-Oct-2004, 00:37

Ok, the last resort is to add the display:inline; value in the style attribute of the h2 tag - that will definitely work, but there are things to consider when you do that...

BobbyDouglas · #10 16-Oct-2004, 00:44

That seems to work fine. What type of problems do you think I would run into?

I don't see the downside to using it, but I am not that great with CSS yet

[edit]In IE, iteems to move the h2 box one pixel above where it should be, thus creating the HR line one pixel below... making it look a bit odd.[/edit]

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image display problem	Griff	Web Design Forum	1	23-Aug-2004 18:47
Problems with changing display resolution	vsseym	Computer Software Forum - Windows	2	27-Jul-2004 11:01
uisng php to display php	dopee	MySQL / PHP Forum	6	14-May-2004 19:40
algorithm for display complex graph	ctai010	C++ Forum	0	20-Mar-2004 06:24