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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Mac pc text different. The <p> tag propblem 2

Status
Not open for further replies.
jezx

jezx

Technical User
Jul 15, 2002
18
0
0
GB
when using the <p> tag and a style sheet the text layout is fine on pc but not on mac. This only happens if the <p> tag is repeated in the body of text. It happens in a table on the wrap around
example;

<table width="750" height="700" bgcolor="#336666" BORDER="0" CELLPADDING=0 CELLSPACING=0 >
<tr><td width="250"><img class="pospic2" src="../images/lodgepics2.jpg" width="213" height="502" border="0" alt=""></td>
<td width="440" height="500" class="tabbg"><p>Angel Lodge is located in the heart of Wakefield, North Yorkshire. <p>Angel Lodge has previously been used as a training college and is fitted <p>square feet, and has accommodation for approximately 400 people. <p>The original part of the site dates back to the 1930's and subsequent extensions have been added throughout the latter part of the 20th century.<br></td>
<td width="40"></td></tr>
<tr><td colspan="3"><img class="pospic3" src="../images/lodgepics3.jpg" width="663" height="159" border="0" alt=""></td></tr>
</TABLE>

What happens is that the wraparound causes the text to skip a line like a paragraph
ie:
this goes ok but

it skips a line.
 
Sort by date Sort by votes
Use <br> instead of <p> to "force" text to wrap like you have tried.

Homework assignment... read up on the difference between <p> and <br> and do a show-and-tell tomorrow for us!

*grin*

All the best,
Jeff
 
Upvote 0 Downvote
thanks jeff
That is a possible way but does not create a space when needed.
Using styles I can break and position the next para but it doesnt explane why the <p> tag acts so strangly in a block of text
 
Upvote 0 Downvote
<p> tag "causes the text to skip a line like a paragraph".

That's because the <p> tag is used to enclose paragraphs. <p>aragraph, geddit? It's not acting strangely, it's acting as intended. If you intend to force a line break at a particular point, use a <br> like Jeff says. It's not clear from your example what else you are intending to do, care to tell us?

-- Chris Hunt
 
Upvote 0 Downvote
With a body of text I want simply to place it in a table cell, position and style it with css and have line breaks and paragraphs, like you do in text. I want this to be with css justified text. No problem.
EXAMPLE:
this text is justified though I can not
make it so here. there is a line break now
and then I want to create a spaced paragraph now

So it looks like this.!

This is straight forward and acts perfectly normally on a PC and Mac but if you repeat the paragraph <p> to create another
<p>aragraph futher down the body of text it will change the line spacing on a mac.
 
Upvote 0 Downvote
This is the code for the page
<html>
<head>
<title>Angel Group Limited</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT="Angel Group Limited is a private provider of high quality accommodation and support for vulnerable people across England.">
<META NAME="KEYWORDS" CONTENT="">
<SCRIPT LANGUAGE="javascript">
<!--
function goTo(URL)
{
newWin = window.open(URL,'photo01','HEIGHT=610,WIDTH=580,');
newWin.focus();
}//end goTo(var, var)
//-->
</SCRIPT>
<SCRIPT LANGUAGE="javascript">
<!--
pic1 = new Image(30,25)
pic1.src = "../images/butcirc.gif"
pic2 = new Image(30,25)
pic2.src = "../images/butcircon.gif"
//-->
</SCRIPT>
<STYLE>
body {margin-left:0px ;
marin-width:0px;
margin-top:0px;
margin-height:0px;
margin-right:0px ;
margin-bottom:0px ;
}
table {

border-width:0pt;
position:relative;
top:0px;
left:0px;
z-index:0}

.pospic {position:relative;
top:2px;
left:486px;}
.pospic2 {position:relative;
top:-12px;
left:49px;}
.pospic3 {position:relative;
top:-20px;
left:47px;}

.posfocus {position:relative;
top:185px;
left:-154px;}

.pos3 {position:relative;
top:100px;
left:-7px;}
.title{ position:relative;
top:198px;
left:-245px;
z-index:1;
color: white;
font-family: helvetica,gill sans, arial, sans serif;
font-size: 17px;
font-weight: bold;
letter-spacing: 3px;
}
p{ position:relative;
top:-63px;
left:20px;
z-index:1;
color: white;
font-family: helvetica,gill sans, arial, sans serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
text-align: justify;
}

em{color: #3f3546;
font-family:helvetica,gill sans, arial, sans serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
font-style: normal;
line-height: 16px;
}
a:link {color:white}
a:active {color:white}
a:visited {color:white}
a:hover { color:aqua}

a {text-decoration: none;}

.lodbg {background-image:url(../images/bgsquare.jpg);}
.tabbg {background-image:url(../images/lodgecircbg2.jpg);}
.email {position:relative;
top:165px;
left:370px;
z-index:1;
color: black;
font-family:tahoma,helvetica,gill sans, arial, sans serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
text-decoration: none;
}

</STYLE>
</head>
<body BGCOLOR="#CCCCCC">
<table border="0" width="100%" height="100%" >
<tr>
<td width="100%" height="100%" align="center" valign="middle" >
<table width="750" height="500" bgcolor="#336666" class="lodbg" BORDER="0" CELLPADDING=0 CELLSPACING=0 align="center">
<tr><td><img class="pospic" src="../images/lodgepics1.jpg" width="215" height="337" border="0" alt=""></td></tr>
</TABLE>

<table width="750" height="700" bgcolor="#336666" BORDER="0" CELLPADDING=0 CELLSPACING=0 >
<tr><td width="250"><img class="pospic2" src="../images/lodgepics2.jpg" width="213" height="502" border="0" alt=""></td>
<td width="440" height="500" class="tabbg"><p>Angel Lodge is located in the heart of Wakefield, North Yorkshire. The site is easily accessible, with train links for near by Wakefield Westgate train station providing quick and easy access to Leeds and Sheffield town centres. Accessible from the M1, Junction 40 lies just 3.5 miles to the west. The site also provides excellent pedestrian access to the town centre and local amenities.<br><p>Angel Lodge has previously been used as a training college and is fitted out with dining, sleeping and recreational areas. The property is fully equipped with special needs facilities, allowing access to all areas of the building. Angel Lodge covers an area of over 51,000. square feet, and has accommodation for approximately 400 people. The original part of the site dates back to the 1930's and subsequent extensions have been added throughout the latter part of the 20th century.<br></td>
<td width="40"></td></tr>
<tr><td colspan="3"><img class="pospic3" src="../images/lodgepics3.jpg" width="663" height="159" border="0" alt=""></td></tr>
</TABLE>

</TD>
</tr>
</TABLE>
</body>
</html>
 
Upvote 0 Downvote
I think you are missing your </p> closing paragraph tags. <br> doesn't need a closing tag, but <p> does. Try adding the closing tags and see if that helps.

Jenny May
 
Upvote 0 Downvote
Just to add to what jenmay had to say:
jenmay said:
<br> doesn't need a closing tag...
Click to expand...
In order to be XHTML compliant, all tags need to have associated closing tags. But, since [blue]<br>[/blue] is not a block level tag (it doesn't normally surround text), you can incorporate the closing tag right into the opening tag.

Therefore, instead of using [blue]<br>[/blue], you should always use [blue]<br />[/blue]. It may not matter now, but it's always best to write code that is compatible with up and coming standards so that you don't have to go back later and modify it to be compliant.

Good luck,
-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH
 
Upvote 0 Downvote
Darkshadeau,
Thanks for adding that....My biggest struggle seems to be keeping everything "compliant".
Star for you!!

Jenny May
 
Upvote 0 Downvote
This wasn't an XHTML page though

Code: 
jezx (TechnicalUser) Mar 22, 2004 
This is the code for the page
[b]<html>[/b]
<head>
<title>Angel Group Limited</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

[i]etc.[/i]

in order for it to be an XHTML compliant page it would also need a correct DOCTYPE declaration.
Like this (for an XHTML 1.0 Transitional page)...

Code: 
[b]<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL][/b]
<head>
<title>Angel Group Limited</</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

Yes, I am pedantic :)
 
Upvote 0 Downvote
Thanks for all the info.
I have managed to track down the problem if anyone ever has the same issue in the future.

Here is a reduced version of the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<STYLE>
body {margin-left:0px ;
marin-width:0px;
margin-top:0px;
margin-height:0px;
margin-right:0px ;
margin-bottom:0px ;
}
table {

border-width:0pt;
position:relative;
top:0px;
left:0px;
z-index:0}


p{position:relative;
color: white;
font-family: helvetica,gill sans, arial, sans serif;
font-size: 12px;
text-align: justify;
}



</STYLE>
</head>

<body>
<table width="750" height="700" bgcolor="#336666" BORDER="0" CELLPADDING=0 CELLSPACING=0 >
<tr><td width="250"><img class="pospic2" src="../images/lodgepics2.jpg" width="213" height="502" border="0" alt=""></td>
<td width="440" height="500" class="tabbg"><p>Angel Lodge is located in the heart of Wakefield, North Yorkshire. The site is easily accessible, with train links for near by Wakefield Westgate train station providing quick and easy access to Leeds and Sheffield town centres.</p><p>Accessible from the M1, Junction 40 lies just 3.5 miles to the west. The site also provides excellent pedestrian access to the town centre and local amenities.<br>Angel Lodge has previously been used as a training college and is fitted out with dining, sleeping and recreational areas.<br>The property is fully equipped with special needs facilities, allowing access to all areas of the building.<p>Angel Lodge covers an area of over 51,000. square feet, and has accommodation for approximately 400 people.<br>The original part of the site dates back to the 1930's and subsequent extensions have been added throughout the latter part of the 20th century.</p></td>


</TABLE>


</body>
</html>


END

If you view this on PC explorer 6 it will form correctly. If you view it on a mac (mac osX; explorer 6) it will layout wrongly, with extra blank lines in the block of text.

The ANSWER:
The paragraph tag P is controlled by the Style description at the top of the script. If you remove the - position:relative; - part of the tag then it will layout fine on mac and pc.

PS
If anyone can explane this to me I would be interested to now why.

FOAMCOW what should I use at the top of the script. I have never really concidered it. The site will be for publicity purposes. No CMS used so dont think XML is needed. What does the first code do?
 
Upvote 0 Downvote
I think you mean IE 5.2x for MacOSX. No version of IE 6 exists for the Mac (and according to Microsoft, none ever will... they have ceased new IE development on that platform and the current release remains 5.2.3).

On another note... you have not found the answer... you have found a solution that provides you with the answer that you want. Myself, Chris, Darkshadeau and Jenmay all pointed you to the solution... and that is to use <br> and <p> correctly... including closing the <p> tag at the end of paragraphs.

I'm happy you have something you are satisfied with. I wanted to point out this for other people searching in the future and reading this thread.

Cheers,
Jeff
 
Upvote 0 Downvote
The solution you pointed to makes no difference to the problem. Thats not to say it is not correct code to close the P tag.
I do not want a line break I want a paragraph with a space and I want it justified and positioned within a table cell .
If you dont understand my explanation then cut and past the code into an HTML doc and look at it on a mac and a PC. It is there to see. It is not the same.
I have a solution but it is a work around and that is to position each paragraph with CSS..
The solution I have presented before works but it does not let me position all the text where I want inside the table cell.
I think the justified text wrap in a cell on the mac is where the problem lies.

 
Upvote 0 Downvote
The DOCTYPE declaration posted in the your second block of code is OK as far as it goes.

That said I don't think the page would validate anyway.

Now...

From a very quick glance you seem to have made the page much more complex than it needs to be. For instance, you have 2 nested tables, one of which only contains 1 cell.

I think you would do yourself alot of favours by stripping the whole thing back to basics and tidying the code up.

I can't explain why Mac IE5.x renders that paragraph in the way it does. But you must remember that different browsers render in different ways. Mac IE5.x is quite old and it may have problem with your particular use of CSS.
Incidentally Safari renders the page "ok".

Your use of CSS seems to me to be a little confused and overly complex and is causing elements to "stick out of" table cells, this might well cause a problem. And there are a few errors in there for good measure eg. you should specify "sans-serif" and not "sans serif" as you have done.
Also, speccing "gill sans" after Helvetica is pointless. There are very few machines out there that won't have Helvetica but will have Gill Sans.

Like I said, take it back to basics and rethink your use of CSS and tables.

Then again, that's just my 2 pence worth.
 
Upvote 0 Downvote
Thanks Foamcow.
The extra table is not used in this case thanks for pointing it out.
I use it as a cheat to center a small page so it always stays in the exact middle of the explorer window, well thats the idea anyway. Doesn't validate but works on different platforms and browsers...so far.
I think that sticking out of the cell is the reason the mac won't render it properly , as you point out. I could use less CSS but it would mean positioning with tables and furniture so and I am trying to use less tables and cells.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
63
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
284
Mike Lewis
Mike Lewis
SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
46
SitesMasstec
SitesMasstec
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
81
jjgupta915
jjgupta915
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
41
CoolBreeze007
CoolBreeze007

Part and Inventory Search

Sponsor

Back
Top