SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    wordpress seems to style pagedifferently?

    I'm trying to convert my site so it uses wordpress and ran into a problem when trying to duplicate
    http://www.ontheocean.us/
    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...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Include Eric Meyers reset CSS, this should fix it, if not let me know. http://meyerweb.com/eric/tools/css/reset/
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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 Code:
    <?php 
    if (is_front_page())  {  ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" />
    <?php ?>
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    also, why on the Availibility page do my tables seem to go beyond 600px?
    http://www.ontheocean.us/wordpress/?page_id=59
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    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

    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

    Code:
    <span class="heading">El Camino</span>
    <br>
    <span class="heading">Las Palmas</span>
    <br>
    <span class="heading">Las Flores</span>
    <br>
    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:

    Code:
    <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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    As for your table, it's not the same code

    This is your correct code:

    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

    Code:
    <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>
    <p><span>#409</span></p></th>
    <th scope="col">
    <h3>Las Palmas</h3>
    <p><span>#708</span></p></th>
    <th scope="col">
    <h3>Cabrillo</h3>
    <p><span>#310</span></p></th>
    <th scope="col">
    <h3>Las Flores</h3>
    <p><span>#102</span></p></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>
    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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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
    "Oh, and Jenkins--apparently your mother died this morning."

  8. #8
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Try this - http://wordpress.org/extend/plugins/...ced/changelog/, and take a look at this, http://wordpress.org/support/topic/s...ing-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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,228
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I installed 2 plugins which seemed to help,
    http://wordpress.org/extend/plugins/...d/screenshots/
    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?
    "Oh, and Jenkins--apparently your mother died this morning."

  11. #11
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @lukeurtnowski ;

    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
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •