CSS Display (HR/H2)

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Display (HR/H2)

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS Display (HR/H2)

Page: [1]

BobbyDouglas

Posts: 5456
Joined: 5/15/2003
From: Arizona
Status: offline

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

_____________________________

Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge


BobbyDouglas Posts: 5456 Joined: 5/15/2003 From: Arizona Status: offline	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. < Message edited by BobbyDouglas -- 10/16/2004 0:57:42 > _____________________________ Arizona Web Design - Mr Bobs Web Design in Arizona The Arizona Web Hosting Challenge (in reply to BobbyDouglas)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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. _____________________________ David Prescott Gekko web design (in reply to BobbyDouglas)

BobbyDouglas

Posts: 5456
Joined: 5/15/2003
From: Arizona
Status: offline

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.

Attachment (1)

_____________________________

Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge

(in reply to d a v e)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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;) _____________________________ David Prescott Gekko web design (in reply to BobbyDouglas)


BobbyDouglas Posts: 5456 Joined: 5/15/2003 From: Arizona Status: offline	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. _____________________________ Arizona Web Design - Mr Bobs Web Design in Arizona The Arizona Web Hosting Challenge (in reply to d a v e)

BobbyDouglas

Posts: 5456
Joined: 5/15/2003
From: Arizona
Status: offline

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>

_____________________________

Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge

(in reply to BobbyDouglas)


d a v e Posts: 4086 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	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. _____________________________ David Prescott Gekko web design (in reply to BobbyDouglas)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to d a v e)


BobbyDouglas Posts: 5456 Joined: 5/15/2003 From: Arizona Status: offline	RE: CSS Display (HR/H2) - 10/17/2004 13:59:13 I added height: 1%; to the div and it corrected the problem. _____________________________ Arizona Web Design - Mr Bobs Web Design in Arizona The Arizona Web Hosting Challenge (in reply to c1sissy)