justify Options

[pandemonium]

i made a new layout and i've tryed to justify the columns in the table, where the text is and it won't work in IE only Safari

here's the link to the layout:
Route 66

Who I'd like to meet code:

CODE

<div class="layout">


<center>
<table id="header" width="822" height="405" border="0" cellpadding="0" cellspacing="0" >

<tr>
<td width="822" height="211" align="left" valign="top"><img src="images/header2.png" width="820" height="405" alt="Route 66" /></td>
</tr>
</table>

<table id="navigation" width="820" height="42" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="255" height="42" valign="bottom" background="images/left.png"><center><img src="images/facebook_32x32.png" height="25" width="25" alt="Facebook" /> <img src="images/twitter_32x32.png" height="25" width="25" alt="Twitter" /> <img src="images/wordpress_32x32.png" height="25" width="25" alt="Wordpress Blog" /> <img src="images/youtube_32x32.png" height="25" width="25" alt="YouTube" /></center></td>
<td width="101"><a href="http://www.myspace.com" class="home"></a></td>
<td width="101"><a href="http://www.myspace.com" class="add"></a></td>
<td width="101"><a href="http://www.myspace.com" class="message"></a></td>
<td width="101"><a href="http://www.myspace.com" class="pictures"></a></td>
<td width="101"><a href="http://www.myspace.com" class="comment"></a></td>
<td width="60"><img src="images/right.png" width="60" height="42" /></td>
</tr>
</table>

<table id="body" background="images/bottom.png" "width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50"> </td>
<td width="200" align="justify" valign="top"> <br />
<b>bold</b> <i>italics</i> <u>underline</u> <s>strikethrough</s> <a href="#">Link</a> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin ullamcorper libero, vel consequat nisi ultrices sed. Phasellus cursus nulla eleifend risus sollicitudin laoreet. Vestibulum sed urna neque. Nullam mollis semper nisi vitae dictum. Quisque eu nibh in augue interdum tristique nec a ipsum. Quisque eget eros tortor. Vestibulum leo dui, dictum et rhoncus sit amet, laoreet id est. Proin tristique lacinia tincidunt. Donec a dolor et libero feugiat pulvinar. In sit amet nunc nisl. Etiam tempus consectetur metus, et fringilla ante venenatis quis.<br />
Proin pretium, enim nec consectetur tincidunt, enim lectus hendrerit urna, eu porta orci velit in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque convallis tempus scelerisque. Praesent a nulla non sem hendrerit viverra at nec est. Donec in est sagittis diam luctus luctus. Phasellus eu mi nulla, at commodo tellus. Donec vestibulum ligula a nulla sagittis non varius ligula bibendum. Phasellus at dolor nulla, et facilisis nisi. Etiam sed orci nunc. Duis ut nisl metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>

<td width="20"> </td>

<td width="500" align="justify" valign="top"> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque mi eget urna ullamcorper luctus. Donec id nunc nibh. Curabitur ac ullamcorper velit. Ut et sem a metus dictum euismod non et massa. Duis tellus erat, porta vitae laoreet sed, commodo non ipsum. Aliquam eleifend lacus vel nisl lacinia lacinia. Proin commodo nibh vel felis ultricies lacinia. Proin facilisis laoreet sapien. Vestibulum ac mi quam. Donec faucibus ultricies odio, vel posuere enim vulputate fringilla. Ut ac dolor et est fringilla convallis. Nam vehicula euismod tellus vitae iaculis. Cras et arcu ultricies arcu fringilla dictum eu vitae ligula. In in lorem ac ipsum pharetra varius. Vestibulum vehicula erat eget odio tincidunt pretium vehicula nec ante. Donec nisi tortor, suscipit quis posuere nec, dignissim sit amet dolor. Etiam neque urna, pellentesque a tempus et, porta a enim.<br />
Phasellus tempor nibh id lacus vehicula sit amet vestibulum est adipiscing. Praesent mattis erat ut massa vulputate ut sollicitudin purus tempus. Ut consectetur orci sit amet velit malesuada sit amet feugiat mi cursus. Curabitur feugiat, nulla eget semper rutrum, sapien mi malesuada orci, faucibus dictum eros justo id justo. Ut quis ante a purus pellentesque ultricies ut sit amet massa. In fringilla, nisi ut semper mollis, quam arcu varius augue, a congue purus turpis non risus. Suspendisse potenti. Phasellus et neque lacus. Proin tincidunt augue et lacus faucibus lobortis. Fusce nec vestibulum tortor. Fusce massa velit, suscipit sit amet fringilla vitae, lacinia vel nunc. Sed id sapien id massa tincidunt imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus accumsan neque sed ligula euismod sed malesuada nisl fermentum. Donec sem velit, suscipit vel lacinia eu, egestas ac sapien. Nam non felis vel magna faucibus mollis. Aenean gravida, erat sed facilisis iaculis, libero nisl commodo eros, a tempus felis lacus vitae ante. Proin neque arcu, ornare eget ultrices nec, ornare eu odio. Sed eleifend aliquam commodo. Proin est dolor, elementum id sagittis ut, posuere sed sapien. <br>
Etiam rutrum velit nec velit volutpat sollicitudin. Maecenas vitae pellentesque est. Vestibulum in tellus id eros luctus dignissim id in lorem. Nunc elementum erat varius lorem porttitor tincidunt. Donec convallis enim nec risus molestie euismod. Aliquam augue risus, condimentum at sodales non, mollis pulvinar sapien. Sed in dui lectus. Ut et augue non elit lacinia ultricies. Fusce malesuada tincidunt tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel tincidunt nulla. Pellentesque ac elit urna. Nullam nulla lorem, interdum nec vehicula eu, porttitor non metus. Maecenas ac rutrum lacus. Maecenas laoreet volutpat purus quis tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi placerat urna nec justo interdum tincidunt. Donec auctor, sapien nec scelerisque facilisis, purus mi dignissim leo, vel vehicula ligula urna in justo.
</td>
<td width="50"> </td>
</tr>
</table>


<table id="footer" width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="images/bottom.png"><center>
<br />© 2009 All Rights Reserved <br />Layout created by Mario at <a href="http://hermes.createblog.com/layouts">CreateBlog.com</a><br />  
</center></td>
</tr>
</table>
</center>


</div>

[Mickey]

Look for this in your stylesheet:

CODE

table, tr, td { background-color: transparent; border:none; border-width:0;}

Add the text-align property and set it to justify. See if that does it.

[pandemonium]

nope, it didn't work

[Mikeplyts]

Look for this:

CODE

<td width="200" align="justify" valign="top"> <br />
<b>bold</b> <i>italics</i> <u>underline</u> <s>strikethrough</s> <a href="#">Link</a> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin ullamcorper libero, vel consequat nisi ultrices sed. Phasellus cursus nulla eleifend risus sollicitudin laoreet. Vestibulum sed urna neque. Nullam mollis semper nisi vitae dictum. Quisque eu nibh in augue interdum tristique nec a ipsum. Quisque eget eros tortor. Vestibulum leo dui, dictum et rhoncus sit amet, laoreet id est. Proin tristique lacinia tincidunt. Donec a dolor et libero feugiat pulvinar. In sit amet nunc nisl. Etiam tempus consectetur metus, et fringilla ante venenatis quis.<br />
Proin pretium, enim nec consectetur tincidunt, enim lectus hendrerit urna, eu porta orci velit in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque convallis tempus scelerisque. Praesent a nulla non sem hendrerit viverra at nec est. Donec in est sagittis diam luctus luctus. Phasellus eu mi nulla, at commodo tellus. Donec vestibulum ligula a nulla sagittis non varius ligula bibendum. Phasellus at dolor nulla, et facilisis nisi. Etiam sed orci nunc. Duis ut nisl metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>

<td width="20"> </td>

<td width="500" align="justify" valign="top"> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque mi eget urna ullamcorper luctus. Donec id nunc nibh. Curabitur ac ullamcorper velit. Ut et sem a metus dictum euismod non et massa. Duis tellus erat, porta vitae laoreet sed, commodo non ipsum. Aliquam eleifend lacus vel nisl lacinia lacinia. Proin commodo nibh vel felis ultricies lacinia. Proin facilisis laoreet sapien. Vestibulum ac mi quam. Donec faucibus ultricies odio, vel posuere enim vulputate fringilla. Ut ac dolor et est fringilla convallis. Nam vehicula euismod tellus vitae iaculis. Cras et arcu ultricies arcu fringilla dictum eu vitae ligula. In in lorem ac ipsum pharetra varius. Vestibulum vehicula erat eget odio tincidunt pretium vehicula nec ante. Donec nisi tortor, suscipit quis posuere nec, dignissim sit amet dolor. Etiam neque urna, pellentesque a tempus et, porta a enim.<br />
Phasellus tempor nibh id lacus vehicula sit amet vestibulum est adipiscing. Praesent mattis erat ut massa vulputate ut sollicitudin purus tempus. Ut consectetur orci sit amet velit malesuada sit amet feugiat mi cursus. Curabitur feugiat, nulla eget semper rutrum, sapien mi malesuada orci, faucibus dictum eros justo id justo. Ut quis ante a purus pellentesque ultricies ut sit amet massa. In fringilla, nisi ut semper mollis, quam arcu varius augue, a congue purus turpis non risus. Suspendisse potenti. Phasellus et neque lacus. Proin tincidunt augue et lacus faucibus lobortis. Fusce nec vestibulum tortor. Fusce massa velit, suscipit sit amet fringilla vitae, lacinia vel nunc. Sed id sapien id massa tincidunt imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus accumsan neque sed ligula euismod sed malesuada nisl fermentum. Donec sem velit, suscipit vel lacinia eu, egestas ac sapien. Nam non felis vel magna faucibus mollis. Aenean gravida, erat sed facilisis iaculis, libero nisl commodo eros, a tempus felis lacus vitae ante. Proin neque arcu, ornare eget ultrices nec, ornare eu odio. Sed eleifend aliquam commodo. Proin est dolor, elementum id sagittis ut, posuere sed sapien. <br>
Etiam rutrum velit nec velit volutpat sollicitudin. Maecenas vitae pellentesque est. Vestibulum in tellus id eros luctus dignissim id in lorem. Nunc elementum erat varius lorem porttitor tincidunt. Donec convallis enim nec risus molestie euismod. Aliquam augue risus, condimentum at sodales non, mollis pulvinar sapien. Sed in dui lectus. Ut et augue non elit lacinia ultricies. Fusce malesuada tincidunt tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel tincidunt nulla. Pellentesque ac elit urna. Nullam nulla lorem, interdum nec vehicula eu, porttitor non metus. Maecenas ac rutrum lacus. Maecenas laoreet volutpat purus quis tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi placerat urna nec justo interdum tincidunt. Donec auctor, sapien nec scelerisque facilisis, purus mi dignissim leo, vel vehicula ligula urna in justo.
</td>

and try replacing it with this:

CODE

<td width="200" style="text-align:justify;" valign="top"> <br />
<b>bold</b> <i>italics</i> <u>underline</u> <s>strikethrough</s> <a href="#">Link</a> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin ullamcorper libero, vel consequat nisi ultrices sed. Phasellus cursus nulla eleifend risus sollicitudin laoreet. Vestibulum sed urna neque. Nullam mollis semper nisi vitae dictum. Quisque eu nibh in augue interdum tristique nec a ipsum. Quisque eget eros tortor. Vestibulum leo dui, dictum et rhoncus sit amet, laoreet id est. Proin tristique lacinia tincidunt. Donec a dolor et libero feugiat pulvinar. In sit amet nunc nisl. Etiam tempus consectetur metus, et fringilla ante venenatis quis.<br />
Proin pretium, enim nec consectetur tincidunt, enim lectus hendrerit urna, eu porta orci velit in ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque convallis tempus scelerisque. Praesent a nulla non sem hendrerit viverra at nec est. Donec in est sagittis diam luctus luctus. Phasellus eu mi nulla, at commodo tellus. Donec vestibulum ligula a nulla sagittis non varius ligula bibendum. Phasellus at dolor nulla, et facilisis nisi. Etiam sed orci nunc. Duis ut nisl metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>

<td width="20"> </td>

<td width="500" style="text-align:justify;" valign="top"> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque mi eget urna ullamcorper luctus. Donec id nunc nibh. Curabitur ac ullamcorper velit. Ut et sem a metus dictum euismod non et massa. Duis tellus erat, porta vitae laoreet sed, commodo non ipsum. Aliquam eleifend lacus vel nisl lacinia lacinia. Proin commodo nibh vel felis ultricies lacinia. Proin facilisis laoreet sapien. Vestibulum ac mi quam. Donec faucibus ultricies odio, vel posuere enim vulputate fringilla. Ut ac dolor et est fringilla convallis. Nam vehicula euismod tellus vitae iaculis. Cras et arcu ultricies arcu fringilla dictum eu vitae ligula. In in lorem ac ipsum pharetra varius. Vestibulum vehicula erat eget odio tincidunt pretium vehicula nec ante. Donec nisi tortor, suscipit quis posuere nec, dignissim sit amet dolor. Etiam neque urna, pellentesque a tempus et, porta a enim.<br />
Phasellus tempor nibh id lacus vehicula sit amet vestibulum est adipiscing. Praesent mattis erat ut massa vulputate ut sollicitudin purus tempus. Ut consectetur orci sit amet velit malesuada sit amet feugiat mi cursus. Curabitur feugiat, nulla eget semper rutrum, sapien mi malesuada orci, faucibus dictum eros justo id justo. Ut quis ante a purus pellentesque ultricies ut sit amet massa. In fringilla, nisi ut semper mollis, quam arcu varius augue, a congue purus turpis non risus. Suspendisse potenti. Phasellus et neque lacus. Proin tincidunt augue et lacus faucibus lobortis. Fusce nec vestibulum tortor. Fusce massa velit, suscipit sit amet fringilla vitae, lacinia vel nunc. Sed id sapien id massa tincidunt imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus accumsan neque sed ligula euismod sed malesuada nisl fermentum. Donec sem velit, suscipit vel lacinia eu, egestas ac sapien. Nam non felis vel magna faucibus mollis. Aenean gravida, erat sed facilisis iaculis, libero nisl commodo eros, a tempus felis lacus vitae ante. Proin neque arcu, ornare eget ultrices nec, ornare eu odio. Sed eleifend aliquam commodo. Proin est dolor, elementum id sagittis ut, posuere sed sapien. <br>
Etiam rutrum velit nec velit volutpat sollicitudin. Maecenas vitae pellentesque est. Vestibulum in tellus id eros luctus dignissim id in lorem. Nunc elementum erat varius lorem porttitor tincidunt. Donec convallis enim nec risus molestie euismod. Aliquam augue risus, condimentum at sodales non, mollis pulvinar sapien. Sed in dui lectus. Ut et augue non elit lacinia ultricies. Fusce malesuada tincidunt tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel tincidunt nulla. Pellentesque ac elit urna. Nullam nulla lorem, interdum nec vehicula eu, porttitor non metus. Maecenas ac rutrum lacus. Maecenas laoreet volutpat purus quis tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi placerat urna nec justo interdum tincidunt. Donec auctor, sapien nec scelerisque facilisis, purus mi dignissim leo, vel vehicula ligula urna in justo.
</td>

and if that doesn't work, you could also try looking for this:

CODE

<table id="body" background="images/bottom.png" "width="820" border="0" cellspacing="0" cellpadding="0">

and replace it with this:

CODE

<table id="body" background="images/bottom.png" "width="820" border="0" style="text-align:justify;" cellspacing="0" cellpadding="0">

[pandemonium]

nope, it didn't work

[pandemonium]

nope, but let me see if i can access a testing account i've made


MySpace Preview
sh*t just what i need.. , how do i make the div above the menu? also there appears to be a white box in the bottom right corner? any idea what it is?

Reason for edit: Please use the Edit button instead of double-posting. - Mike

[Mikeplyts]

It says it's set to Private.... >_>

[pandemonium]

changed, set to public!

mike;
i know not to double post, just thought there would be no response

[Mikeplyts]

I usually use this code to hide everything including the myspace navigation.

CODE

<style>
.profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileNetworking, .userProfileSchool, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, table div { display:none!important;
}div table div, table table div {
display:block!important; padding:0;
}table, tr, td {
background:none; border:none;
}.clearfix, .clearfix div {
background-image:none!important;
overflow:hidden;
}.clearfix {
position:relative;
top:-30px;
width:728px;
}.clearfix .clearfix {
bottom:-30px;
margin:-45px 0 0;
position:relative;
top:auto;
width:auto;
}.clearfix .clearfix div {
margin:45px 0 0;
}.clearfix .clearfix div div {
margin:auto;
}.profile, .profile div, .profile input, .clearfix select,.clearfix option, .clearfix ul {
display:none!important;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}.friendSpace {display:none;}.friendsComments {display:none;}.contactTable {display: none;}.extendedNetwork {display:none;}.latestBlogEntry {display:none;}.userProfileURL {display:none;}.userProfileDetail {display:none;}
</style>

[pandemonium]

well the white box in the bottom right corner is fixed, it was just the table's background reapeating, somehow the table got big, i think it was just colliding with another code or something..

yes i did try the code on the post you made before, but didnt work.

and what i mean by 'make the div above the menu?' is that the z-index doesn't appear to work.. i want the div to be above the navigation, show that the navigation wont show - Edit: that's fixed now

the justified text is the only thing now!

[pandemonium]

yeah.. i don't usually put the

CODE

.blurbs {display: none;}

because it hides the about me and the who id like to meet section thus hiding the layout (go to the preview)

and about you post yeah.. i forgot the 'text-align: justify;' part of the body, i usally don't just replace because i read the codes, and see what changed and learn more, so i forgot bout that.. but still i won't work..

if you have no idea how to do it.. just tell me!

[pandemonium]

s*it i missed alot, srry bout that lol
but it still wont work

just for fun.. look at the ad
found the irony since you and the other mike are the ones helping

click to enlarge

[pandemonium]

nope :/

[Mikeplyts]

What about adding p tags around your text?

Like this:

CODE

<p style="text-align:justify;">
TEXT TEXT TEXT
</p>

[Mikeplyts]

ok, this is getting a little confusing now. Mario, can you please clarify your problem? At least one of those codes should have worked.

A little thing though, justify just means it won't center the text or anything, you'd have to do that manually.

You should also post ALL of your codes too. Maybe it could be a little easier too if we can get a screenshot of the layout in IE and another in Safari so we can see what you mean.

[Mikeplyts]

^Probably.


Maybe we should wait till Elia gets in here. I don't know what else to use. :(

[synapse]

Browsers such as IE do not support align="justify" for a table cell element (directly for a td or th element or indirectly via a tr element). This applies to IE 7, too. Naturally you can circumvent this problem by using the attribute for p or div elements inside a cell.

You could assign a class to the element (writing e.g. <p class="special"> in HTML) and using a selector based on that (writing e.g. p.special {text-align:justify;} in the CSS).

[fixtatik]

As far as IE goes, this is completely unsolvable, unless you can petition either Microsoft or Myspace.

The culprit is word-wrap: break-word;, a CSS3 property which splits words to conform to the width of its container (i.e., if "gimmeallyermoney" was longer than a div of 100 pixels, break-word would chop "gimmeallyermoney" into pieces to fit).

Unfortunately, Microsoft decided it would be cool that break-word would also break justification (it still works for center-, left-, and right-aligned text).

Anyway...to fix it, either get Microsoft to fix their moronic browser to comply with web standards, or get Myspace to take word-wrap: break-word; out of their tables. Until one of those happens, you're out of luck.