I’m trying to convert my site so it uses wordpress and ran into a problem when trying to duplicate
I tried to create a wordpress page instead and heres what happened
http://www.ontheocean.us/wordpress/
What is the reason for the difference in formatting between the two.
Thanks…
Include Eric Meyers reset CSS, this should fix it, if not let me know. http://meyerweb.com/eric/tools/css/reset/
I’m sorry sega but it didn’t work.
So the home page would read the stylesheet I added this to the header.php in my themes folder
<?php
if (is_front_page()) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" />
<?php } ?>
also, why on the Availibility page do my tables seem to go beyond 600px?
http://www.ontheocean.us/wordpress/?page_id=59
Okay that problem normally fixes it for me. The two site contain different HTML markup. You have a series of <br> tags in your code
<span class="heading">El Camino</span>
<span class="heading">Las Palmas</span>
<span class="heading">Las Flores</span>
<span class="heading">Cabrillo</span>
turns to
<span class="heading">El Camino</span>
[B]<br>[/B]
<span class="heading">Las Palmas</span>
[B]<br>[/B]
<span class="heading">Las Flores</span>
[B]<br>[/B]
In the WYSISWYG editor any returns are turned into breaks, and this is why you have those break. I suggest you remove any spaces are refrain from using the editor. If you want to use the editor there is a setting which prevent <br> displaying. I think you’ve copied code directly into the editor source code. If this is the case you should disable returns.
The editor does not mind classes on images, but it does sometimes play funny to nested DIV’s. It hates blank spaces and returns.
Apart from that I noticed is your use of span’s and center. <center> is not valid, try using:
<div style="text-align:center">content</div>
This won’t break anything however, but your use of SPAN was wrong. WordPress again spans. It seam to strip out spans as it presumes there is no block elements in there. SPAN is an inline element, H1 is a block element. You have a inline as a parent to a block. I don’t think this is right, furthermore WordPress strips this out. To prevent this you need to have your parent element as a DIV, and your SPAN tag is not allowed any children in there. There are many options in editing your editor, but I don’t know these.
The markup inconsistencies continue, take a look at http://www.ontheocean.us/409.php, and http://www.ontheocean.us/wordpress/?page_id=23. Your heading are different, which cause your headings to be right. I’ve not checked your CSS, but your XHTML is all different. I suggest you have the same markup code.
Edit: The available link has different CSS code for the width. These two sites and not the same.
As for your table, it’s not the same code
This is your correct code:
<fieldset>
<legend>2011</legend>
<table cellspacing="0" cellpadding="0">
<thead>
<tr class="tableHeading">
<th class="first" scope="col"><span style="left:-9000px;position:absolute">Availibility</span></th> <!--hide from everyone except screen readers -->
<th scope="col"><h3>El Camino</h3><span>#409</span></th>
<th scope="col"><h3>Las Palmas</h3><span>#708</span></th>
<th scope="col"><h3>Cabrillo</h3><span>#310</span></th>
<th scope="col"><h3>Las Flores</h3><span>#102</span></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<th class="column1" scope="row">September</th>
<td class="column2">RENTED</td>
<td class="column3">RENTED</td>
<td class="column4">RENTED</td>
<td class="column5">$4,000</td>
</tr>
<tr>
<th class="column1" scope="row">October</th>
<td class="column2">Up to Oct. 15th</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
<tr class="odd">
<th class="column1" scope="row">November</th>
<td class="column2">$5,000</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
<tr>
<th class="column1" scope="row">December</th>
<td class="column2">$5,000</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
</tbody></table>
</fieldset>
and this is what’s on your CMS
<fieldset>
<legend>2011</legend>
<p> <!--hide from everyone except screen readers --></p><table cellspacing="0" cellpadding="0">
<thead>
<tr class="tableHeading">
<th class="first" scope="col"><span style="left:-9000px;position:absolute">Availibility</span></th>
<th scope="col">
<h3>El Camino</h3>
[B]<p><span>#409</span></p></th>[/B]
<th scope="col">
<h3>Las Palmas</h3>
[B]<p><span>#708</span></p></th>[/B]
<th scope="col">
<h3>Cabrillo</h3>
[B]<p><span>#310</span></p></th>[/B]
<th scope="col">
<h3>Las Flores</h3>
[B]<p><span>#102</span></p></th>[/B]
</tr>
</thead>
<tbody><tr class="odd">
<th class="column1" scope="row">September</th>
<td class="column2">RENTED</td>
<td class="column3">RENTED</td>
<td class="column4">RENTED</td>
<td class="column5">$4,000</td>
</tr>
<tr>
<th class="column1" scope="row">October</th>
<td class="column2">Up to Oct. 15th</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
<tr class="odd">
<th class="column1" scope="row">November</th>
<td class="column2">$5,000</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
<tr>
<th class="column1" scope="row">December</th>
<td class="column2">$5,000</td>
<td class="column3">$5,000</td>
<td class="column4">$4,000</td>
<td class="column5">$4,000</td>
</tr>
</tbody></table>
</fieldset>
As you can see it ended up creating <p> tags in your <span> tags. Once you remove those it works just fine. I hope this helps.
I’m trying to get rid those p tags but how can I even see them?
I pasted only the html when I create the page using the HTML, so is that not using the WYSIWYG editor and where is the setting so they dont input <br> also?
Thanks
Try this - http://wordpress.org/extend/plugins/tinymce-advanced/changelog/, and take a look at this, http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break.
I hope this helps. Your WP editor created those tags on it’s own without your intervention. It’s because it interprets it this way. The TinyMCE editor has a setting to prevent this.
It’s my feeling that the WYSIWYG editor is best left to the non-techies, or for simple text-only posts.
If you know mark-up and are putting it into your posts, WP will muck it up royal if you use the WYSIWYG editor. Gawd! when I first started, some of my posts needed close to a dozen revisions. It was so aggravating to post perfectly valid mark-up only to have the page FAIL that I stay clear of it all the time now.
I installed 2 plugins which seemed to help,
http://urbangiraffe.com/plugins/disable-wpautop/
But now on the Home page how do I make the two images near the bottom not appear inside a <p>?
http://www.ontheocean.us/wordpress/
Is there a way to simply avoid the editor so I can simply past in my code?
To avoid the editor completely you have to edit the template files. Using the editor will only tamper with your code, this is what the editor is for. You can have custom fields in WP which help you put code in untampered. This is my method anyhow.
Take a look at custom fields and how to put them in your template files. You can also use widgets for the homepage. I always seem to have widgets on my homepage. This involves editing the functions.php file and the theme to reference the widget area. It’s all fairly quite self explanatory. If you need more help let me know.
Sega