WordPress rendering page diffently from standard test.html

  • drchutney

    (@drchutney)


    16 years, 2 months ago

    I’ve been playing around with using my own themes to create a CMS site for a friend of mine. I’ve now encountered an interesting problem with the CSS.

    If I create a bog standard test.html page with all the divs in the right locations and simply view this test page in a browser I can see the layout I’m expecting ( a rectangle of colour with various div blocks on top ). If I now view it with all the WordPress data, it renders differently. In particular my overall ‘container’ div loses the plot completely.

    The page setup is roughly:
    html
    head
    /head

    body
    div container width at 960px dark background colour
    div header area with logo etc then closing /div
    div menu bar and closing /div

    various divs to hold specific posts, but all with closing /divs

    div sidebar area with closing /div

    div footer area closing /div

    /div for container

    /body

    /html

    My container has a background colour that I expect to see all over my page rectangle, but it gets as far as the header area and stops. Could the wp_page_menu call be upsetting things? Has anyone else encountered this situation?

    Ideas on a postcard please …

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@alchymyth)

    16 years, 2 months ago

    wordpress is not rendering anything – your browser is.
    if you have the same html structure around your php codes, the result should be the same.
    if it is not, double check your coding.

    link?

    or at least copy:
    the html of your test – from the browser;
    and the html of your wordpress from the browser;
    and the style.css (or other style sheet)
    each into a http://wordpress.pastebin.com/ and post the links to these here.

    Thread Starter drchutney

    (@drchutney)

    16 years, 2 months ago

    I’ve dumped the WordPress generated HTML into Pastebin here

    http://wordpress.pastebin.com/a8gXCLHy

    and all the CSS into here

    http://wordpress.pastebin.com/6WL6pyB5

    It’s early days on this project and all I wanted to see was the correct blocks of colour in the right places. The other divs seem quite happy, but it’s the first one holding them all together that has the problem.

    And yes, I did realise my error in terminology, I was just trying to illustrate what I was finding from my own html code compared to WordPress generated html.

    Thanks

    Michael

    (@alchymyth)

    16 years, 2 months ago

    seems to be a IE vs. firefox issue.

    firefox looks quite good: http://img205.imageshack.us/img205/4821/firefoxza.jpg

    IE7 has the background all over: http://img17.imageshack.us/img17/6521/ie7p.jpg

    do both tests have the same doctype?

    Michael

    (@alchymyth)

    16 years, 2 months ago

    forget what i just wrote: obviously you want the look of IE.

    some code that gets used to ‘stretch’ the background despite ‘floating’ divs:

    <div id="footer"> 

        Copyright blah blah

</div><!--  footer -->
<div class="cleared"></div>

    with the css:
    .cleared { clear:both; }

    http://www.webtoolkit.info/css-clearfix.html

    i still would have expected the same behaviour with the html-only-test.

    Thread Starter drchutney

    (@drchutney)

    16 years, 2 months ago

    Thanks for your thoughts on this.
    To be honest I was getting the Firefox effect from IE, Firefox and Opera. You at least managed to get that container div to cover the page in a brown wash.

    I’ll take a step back and look at some other themes and see if there are better options ( particularly cross-browser ). There are always different approaches and if necessary I can always lay a background down block by block if necessary, although it would be nice to have that one container do the job.

    I see an evening of experimentation approaching.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘WordPress rendering page diffently from standard test.html’ is closed to new replies.