<p> tag won’t work, but <h1> does??? Any suggestions

  • Resolved amobaroti

    (@amobaroti)


    15 years ago

    Here is the index code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blog By Bess</title>

<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

</head>

<body>

	<div class="container">

		<div class="column span-25">Header
			<div class="column last" id="nav">   <!-- begin column -->
				<div class="column span6-x clear home last">  <!-- begin span6-x -->
				<div class="span4 panel"> <!-- begin span4 -->
					<div class="content">
						<ul class="nav horiz left">
							<li class="first">
								<a href="https://www.blogbybess.com/category/style/" title="View all posts filed under Style"><span>Style</span></a></li>
							<li>
								<a href="https://www.blogbybess.com/category/people/" title="View all posts filed under People"><span>People</span></a></li>
							<li>
								<a href="https://www.blogbybess.com/category/entertainment/" title="View all posts filed under Entertainment"><span>Entertainment</span></a></li>
							<li>
								<a href="https://www.blogbybess.com/category/gear/" title="View all posts filed under Gear"><span>Gear</span></a></li>
							<li>
								<a class="last" href="https://www.blogbybess.com/category/life/" title="View all posts filed under Life at "><span>Life</span></a></li>
						</ul>
					</div>
				</div> <!-- end span4 -->
			</div>
		</div>
<div class="column span-15">

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

					<span>need to check</span>
					<h1><?php the_title(); ?></h1>
					<?php the_content(); ?>
					<?php endwhile; ?>

					<?php endif; ?>
<div class="span-5"><p>1st nested column</p></div>
<div class="span-5">2nd nested column</div>
<div class="span-5 last">3rd nested column</div>
</div>
<div class="column span-5 last">Navigation<?php include (TEMPLATEPATH . '/l_sidebar.php'); ?></div>
<div class="column span-5 last">Navigation<?php include (TEMPLATEPATH . '/r_sidebar.php'); ?></div>
<div class="column span-25">Footer</div>
</div><!--end of container-->

  </body>

    here is the style.css

    /* CSS Document */

/*
Theme Name: Tutorial
Theme URI: https://blogbybess.co.uk
Description: This is my theme for a tutorial.
Version: 1.0
Author: Bess Obarotimi
Author URI: https://blogbybess.co.uk/

*/

/* A container should group all your columns. */
.container {
  width: 990px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid {
  background: url(images/grid2.png);
}

/* Body margin for a sensile default look. */

*
*	{ margin: 0; padding: 0; } 

body { font-family:  "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; background: #121212; color:#a2a2a2;}
body { font-size:100%; line-height:1.125em; }
<!--[if !IE]>-->
body { font-size:16px; }
<!--<[endif]-->

p			{ font-size: 0.688em; line-height: 17px; color:#a2a2a2; }
p a:link	{ color:#ccc; }

em { color: #00e5ff; }

strong { color: #ff0066; }

ul		{ list-style-type: none; }
ol		{ margin-left: 24px; }
ol li	{ text-indent: -2px; }

a:active 	{ color: #999; }
a:hover,
a:hover *	{ color: #999 !important; }
a:link 		{ color: #fafafa; text-decoration:none; }
a:visited 	{ color: #fafafa; text-decoration:none; }
a img 		{ border: none; }

textarea	{ padding: 2px; }

.searchform { margin-top: 50px; }
fieldset.search {
	border: none;
	width: 219px;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #ccc;
	font-size: 0.688em;
	width: 219px;
	height: 23px;
	padding: 4px 0 4px 6px;
	margin-right: 20px;
	background: url(file:///C|/Users/Bess&Fem/AppData/Local/Microsoft/Windows/Temporary Internet Files/Content.IE5/ZIN0XZUE/images/search_box.gif) no-repeat;
}
.search input.box:focus {
	outline: none;
}

blockquote { font-size: 1em; padding-left: 15px; margin-left: 15px; border-left: 1px dotted #333; }

h1 			{ font-size: 0.688em; font-weight: 700; color: #fff; }
h1.large	{ font-size: 0.688em; font-weight: 700;}
h1.small	{ font-size: 0.688em; font-weight: 700; line-height: 16px; }
h1.inside	{ font-size: 0.938em; color: #00e5ff; font-weight: 100; }
h2			{ font-size: 1.125em; }
h3 			{ font-size: 1.125em; font-weight: 700; color: #fff; }
h4 			{ font-size: 0.813em; font-weight: 100; }
h5 			{ font-size: 0.75em; }
h6 			{ font-size: 0.938em; color: #00e5ff; margin: 5px 0 18px 5px; font-weight: 100;}

.last 	{ margin-right: 0 !important; }
.column { float: left; display:inline; }

.column .rss_container {  font-size:12px; }

.left 			{ float: left; }
.right 			{ float: right; }

#nav .panel			{ float: left; margin:0 0 3px 0; height: 36px; }
#nav .panel * 		{  text-decoration: none; font-weight: 700; color: #eaeaea;}
#nav .panel ul		{ padding: 0; }
#nav .panel li 			{ display: block; float: left; padding: 7px 0px  7px 0px; position: relative; }
#nav .panel li.selected 	{ border-top: 1px dotted #ff0066; padding: 9px 0px  2px 0px; position: relative; top: -4px; left: 0; }
#nav .panel li:hover 	{ border-top: 1px dotted #ff0066; padding: 9px 0px  2px 0px; position: relative; top: -3px; left: 0; }
#nav .panel li a 		{ font-size:  	0.688em; border-top: 1px transparent;	color: #fff; background: transparent}
#nav .panel li a.last, #nav .panel li.last a { border-top: 1px transparent; background: none;  }
#nav .panel li a span, #nav .panel li span a { padding:6px 13px 6px; }

#logo			{ height:95px; width:147px; }
#logo h2 a		{ display:block; height:44px; padding: 0px 271px; text-indent: -5000px; background:) no-repeat; margin-top: 30px; height:44px; background-position:0px 0px; }
#logo h2 a:hover	{ background-position:0px -44px; height:44px; }

#nav .home				{ border-top: 1px dotted #333; margin-top: 3px; padding-top: 2px; }
#nav .inner				{ border-top: 1px dotted #333; border-bottom: 1px dotted #333; margin: 3px 0 10px; padding: 2px 0 3px; }

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24, div.span-25 {float:left;margin-right: 10px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 30px;}
.span-2  { width: 70px;}
.span-3  { width: 110px;}
.span-4  { width: 150px;}
.span-5  { width: 190px;}
.span-6  { width: 230px;}
.span-7  { width: 270px;}
.span-8  { width: 310px;}
.span-9  { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 710px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24 { width: 950px;}
.span-25, div.span-25 { width: 990px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}
.append-24 { padding-right: 960px;}

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}
.prepend-24 { padding-left: 960px;}

/* Border on right hand side of a column. */
div.border {
  padding-right:4px;
  margin-right:5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:28px;
  margin-right:25px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}
.pull-25 { margin-left: -1000px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24, .pull-25 {float:left;position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}
.push-25 { margin: 0 -1000px 1.5em 1000px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24, .push-25 {float:right;position:relative;}

/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #000000;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: .1em;
  margin: 0 0 1.45em;
  border: none;
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [https://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

ul.horiz li,
dl.horiz dt,
dl.horiz dd  		{ display:inline; }

    For one reason or another <p> tag around the posts does not change the font. I tested with <h1> tag around posts and this worked. My nav bar and post title have the right font.

    Do you have any idea what I may be doing wrong?

    Your help is much appreciated

    I am using Blueprint css for this grid layout

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter amobaroti

    (@amobaroti)

    ps. this is only up on my local server, so no point checking URL

    Terri Ann

    (@terriann)

    Have you used firebug to try and debug this problem yet? Install it on Firefox then use the arrow in a box icon (after you click on the bug) to highlight the paragraph in question and you’ll see what styles are being applied to it.

    It will also identify what is cascading over it and overriding any of the p {} styles.

    Thread Starter amobaroti

    (@amobaroti)

    thanks Terriann. I did try the firebug, it looked like everything was ok.

    I had put <h1> tags and they change the font style fine. Not realy sure I know what I am looking for in firebug though

    Thread Starter amobaroti

    (@amobaroti)

    sorted, your reply got me thinking and I changed where the <p> tag was in my style sheet to just above the <h1> tag and voila, it worked.

    Cheers

    Nights and nights of head banging and that was all I needed to do (tut, tut) off to be presented with the next problem

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘<p> tag won’t work, but <h1> does??? Any suggestions’ is closed to new replies.