CSS Display (HR/H2)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

BobbyDouglas -> CSS Display (HR/H2) (10/15/2004 21:05:37)

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:

<!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:

* {
	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;
}

BobbyDouglas -> RE: CSS Display (HR/H2) (10/16/2004 0:47:10)
This seems to fix the issue with IE. div.hr { height: 1px; background: #660000 no-repeat scroll center; } div.hr hr { display: none; } Another question though... 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.

d a v e -> RE: CSS Display (HR/H2) (10/16/2004 3:42:39)
i think you would need to use a span on the h2 with 5px padding in the style to get it only the width of the text, otherwise it will be block level i.e. the full width of its parent container - the containing div or page width or whatever.

BobbyDouglas -> RE: CSS Display (HR/H2) (10/16/2004 16:15:05)

Span was the only thing I could use. Also adding display: inline; to it worked, but caused major problems in IE.

How would I achieve the effect in this attched image?

Here is the code for it:

<!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>CSS Problem</title>
	<!-- Stylesheets -->
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div id="middle" >
  
		<span class="backgroundtitle">Something Services:</span>
		<hr class="titleline" />
		  
		<!-- 
		<h2>Services Overview:</h2>
	    <div class="hr"><hr ></div>-->
  
  </div>
</body>
</html>

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

span.backgroundtitle {
	font-size: 0.7em;
	font-weight: bold;
	background: #660000;
	color: #ffffff;
	padding: 2px 0;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

hr.titleline {
	background-color: #660000;
	color: #660000;
	border-color: #660000;
}

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

The effect in IE is what I want to achieve in Mozilla. You will notice a big difference in the space between the span and the hr.

d a v e -> RE: CSS Display (HR/H2) (10/16/2004 16:57:16)
that looks like one of those things that should be easy to do with css but is so tricky - the sticking part - for me- is making the background of the h2 only span the text but behave like a block level element. been playing with the spanned h2 in a div with a border on the div but can't get the padding in h2... good luck;)

BobbyDouglas -> RE: CSS Display (HR/H2) (10/16/2004 17:36:03)
Thanks Dave, I just don't see how it can be done, hopefully someone with a little more knowledge about CSS can explain what is wrong and how to fix it.

BobbyDouglas -> RE: CSS Display (HR/H2) (10/16/2004 23:11:47)

Ok, after many MANY long hours on this, I finally have a fix for this...

div.bottomborder {
  border-bottom: 2px solid #660000;
  padding-bottom: 5px;
}

div.bottomborder h2 {
  background: #660000;
  color: #ffffff;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  width: 5%;
  display:inline;
  text-align: left;
}

<div class="bottomborder"><h2>Services Overview:</h2></div>

d a v e -> RE: CSS Display (HR/H2) (10/17/2004 3:42:25)
have you done the page yet? would be nice to see that baby in action, as it were.

c1sissy -> RE: CSS Display (HR/H2) (10/17/2004 12:55:57)
bobby, just a quick reply, Your heading automatically adds space in IE. Create a style for the heading h2 { margin 0px;padding: 0px;} to remove paddings and margins, and then in your div code, you have it going ok, it should correct any gaps.

BobbyDouglas -> RE: CSS Display (HR/H2) (10/17/2004 13:59:13)
I added height: 1%; to the div and it corrected the problem. [:)]

Page: [1]

0.0625