• Hi,

    I’m currently trying to understand how wordPress themes work, last night I was converting one of my designs into a theme and I noticed some margin/padding differences in my theme vs my CSS/HTML design. When I view my theme it has a few spaces between an image and a div the layout looks good except these spaces (which are nested inside the main content, so it’s not breaking my layout). The reason I was surprised is because I’m using the same CSS file, I just copied and pasted it.

    Does wordPress renders the pages in a certain way that it could affect the layout?

    Why does this look different than my original design?

    I know it’s hard to predict what’s wrong without looking at the code but I’m not asking for help as to how to fix it (at least not at the moment) I just want to know if this is something I should be aware of in wordPress or if you guy have seen something like this before where your design doesn’t look the same after converting it into a theme.

    Thanks a lot.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Are you utilizing a reset.css file? If so, you may not be referencing that correctly, and that may be the issue…

    Thread Starter fs_tigre

    (@fs_tigre)

    Well this is what I’m using as my reset…

    body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {
    			margin: 0;
    			padding: 0;
    			border: 0;
    			outline: none;
    }

    Thanks a lot!

    Hmm. That should be ok. Do you have a link I could look at? I can just Firebug the issue and let you know what’s going on! Post a link to the WP site and a link to the static site, and explain the differences, and I can help you out!

    [signature removed]

    Thread Starter fs_tigre

    (@fs_tigre)

    Wow! Thank you for the offer but I’m working locally.

    I found the problem, what I have is this… a div “page-wrap” holding all of my content and inside this I have a little box on the side-bar (typical side boxes like the ones used in this page) with an image as the header and a div with the content for the little box the thing is that I’m applying a line-height: of 1.4 to my page-wrap and it’s affecting the spacing between my image (header) and my div (content), I basically have a gap of 1.4 between the image and the div that make the little box.

    CSS:
    #page-wrap{line-height:1.4}
    HTML:

    <div id="page-wrap">
    ...
    <div class="side-box">
        <img src="images/image-name.jpg"/><!--image used for the heading-->
        <div class="box-content">
             <!-- little box content -->
        </div>
        </div>
    ...
    </div>

    I know its hard to predict something without looking at the code but what I don’t know understand is why is the line-height affecting only the WordPress theme and not the static page, in the static page I change the line-height and it doesn’t affect my images at all and in my theme if I increase this to 1.9 or something more than 1.4 it actually breaks my layout, and all I did is copied the css from my static page to my theme, in fact I did this a few time thinking that I some how minified my themes css but no, both files are identical.

    Do you think I’m not positioning my code in the right template and this is causing confusion for WP?

    Oh, the only difference in my HTML code between my static and my wordpress theme is the I’m using “<?php bloginfo(‘template_url’); ?>” for each image used in my theme, I don’t remember where I learn this from but I used this to make WP recognize my images used in my HTML, perhaps I’m doing this wrong.
    My HTML for all images look something like this…
    <img src="<?php bloginfo('template_url'); ?>/images/image-name.jpg" />

    Could this be the problem? If yes, is there an other way to make WP recognize images used in the HTML file?

    Thanks a lot!

    Thread Starter fs_tigre

    (@fs_tigre)

    Found the problem.

    I noticed that I was using different DOCTYPE between files.
    XHTML 1.0 Strict in my wordPress theme and XHTML 1.0 Transitional in my static page, I changed the DOCTYPE and it did the trick.

    Thanks a lot.

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

The topic ‘Why does wordPress renders my CSS/HTML different’ is closed to new replies.