Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

paragraph tags are indenting themselves.

Status
Not open for further replies.
UncleMortis

UncleMortis

Programmer
Jan 28, 2003
120
AU
I'm creating a web page that at the moment doesn't have any CSS, and consists of a fair few paragraphs with a picture and a small amount of text in each paragraph. Every now and again, when I check the resulting page, the paragraphs are indenting themselves further across the page instead of staying flush to the left.

My code is correct, as I've gone through it with my own eyes, a html validator and the w3.org validator and everthing is coming as as being fine. What would cause this sort of thing to happen? Oh yeah, I found that by putting a "br" between the offending paragraphs, it puts everything back to normal.

Below is one part of my code where each resulting paragraph is indenting further than the last.

Code: 
<p> 
  <a href="sistersobsq.html">
  <img src="images/sistersobsq_sm.jpg" align=left hspace=5  vspace=5 alt="Sisters of Battle Squad"></a>
  <b>Sisters of Battle Squad </b><br>
  This box contains 10 sisters of battle.<br>
  <b>Price:</b> $55.00
</p>
   <p> <a href="eldreavjetb.html"><img src="images/eldreavjetb_sm.jpg" align=left hspace=5 		vspace=5 alt="Eldar reaver jet bike"></a>
       <b>Dark Eldar reaver jet bike </b><br>
	This box contains 1 Dark eldar reaver jetbike.<br>
       <b>Price:</b> $18.00
   </p>
   <p> <a href="necrdestlord.html"><img src="images/necrdestlord_sm.jpg" align=left hspace=5 	vspace=5 alt="Necron Destroyer Lord "></a>
       <b>Necron Destroyer Lord</b><br>
	This box contains 1 Necron Destroyer Lord.<br>
       <b>Price:</b> $35.00
   </p>

From what I can see there's no reason why these paragraphs would move from the left side of the page. any help would be appreciated.

Paul
 
Sort by date Sort by votes
I was unable to replicate the problem. In IE6, Mozilla 1.6 and Opera 7.2, all browsers that I use, the supplied code rendered as expected without any indents. Is that all code you are using? Which browser is experiencing troubles? Your problem could be images, that are floated to the left (align="left") in your images, which could push the following paragraph further to the right. Is paragraph indented so that it avoids the image?
 
Upvote 0 Downvote
I'm using ie6. That part of the code was coming up with each paragraph indented further to the right than the last. perhaps I tell the the paragraph what to do in css? it shouldn't create that problem if the img is aligned left as when looking it up, the exact example was given in one of my books. I've never come across it doing this before.
 
Upvote 0 Downvote
Sorry guys it's not actually up at the moment. I put a doctype on the page to validate it on w3.org and it passed the code but had a fit because I didn't have a uni code in there.Other than that the code was fine.
 
Upvote 0 Downvote
Could it be that sometimes the images descend below the descriptive text, causing the next images to be displaced to the right and so on?

Try something like this:
Code: 
<div class="products">
<p> 
  <a href="sistersobsq.html"><img src="images/sistersobsq_sm.jpg" alt="Sisters of Battle Squad"></a>
  <b>Sisters of Battle Squad </b><br>
  This box contains 10 sisters of battle.<br>
  <b>Price:</b> $55.00
</p>
<p>
  <a href="eldreavjetb.html"><img src="images/eldreavjetb_sm.jpg" alt="Eldar reaver jet bike"></a>
  <b>Dark Eldar reaver jet bike</b><br>
  This box contains 1 Dark eldar reaver jetbike.<br>
  <b>Price:</b> $18.00
</p>
<p>
  <a href="necrdestlord.html"><img src="images/necrdestlord_sm.jpg" alt="Necron Destroyer Lord "></a>
  <b>Necron Destroyer Lord</b><br>
  This box contains 1 Necron Destroyer Lord.<br>
  <b>Price:</b> $35.00
</p>
</div>
Then add some CSS to your <head> (or external style sheet):
Code: 
   .products p {
      clear: left
   }

   .products p a img {
      float: left;
      margin: 5px;
   }
Alternatively, you can use the tweak described at to stop the floating image sticking outside of its enclosing <p>:
Code: 
   .products p:after {
       content: "."; 
       display: block; 
       height: 0; 
       clear: both; 
       visibility: hidden;
   }

   /* Hides from IE-mac \*/
   * html .products p {height: 1%;}
   /* End hide from IE-mac */

   .products p a img {
      float: left;
      margin: 5px;
   }

-- Chris Hunt
 
Upvote 0 Downvote
So in the end it's just potentially a css thing to position things correctly? I'm still scratching my head as I haven't come across it before. I'll let you know how the css addition went.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
695
3esolar
3
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
100
ChrisHirst
ChrisHirst
1DMF
  • Locked
  • Question
floating paragraph tag makes inline ? 1
Replies
4
Views
90
1DMF
1DMF
bigbird3156
  • Locked
  • Question
CSS Link behavious and name tags
Replies
3
Views
116
ChrisHunt
ChrisHunt
Geates
  • Locked
  • Question
input values are truncated
Replies
2
Views
59
Geates
Geates

Part and Inventory Search

Sponsor

Back
Top