OK... I think I'm encountering the infamous double-margin bug, but I'm not positive. Here's what it looks like in Firefox (which is how I want it to look - highlighted box is H2 according to Web Developer plugin): and now in IE (the highlighted box is IE Developer Tools highlighting H2): I saw on some other forums that the way to solve this was to put display: inline; in my floated div, but I tried that and it did nothing. Any suggestions? Here's the DOM: DIV post DIV calendarH2DIV ... Here's the relevant CSS: .post{ margin: 10px 0 0; padding: 15px; background: url(images/bg_post.gif) no-repeat left top; } .calendar { float: left; display: inline; clear: left; background: url(images/calendar.jpg) no-repeat left top; width: 50px; height: 55px; } .calendar .month { display: block; clear: left; text-align: center; font-size: 14px; color: white; font-weight: bold; padding-top: 2px; margin-bottom: 0; } .calendar .date { display: block; clear: left; font-size: 30px; color: #393939; text-align: center; font-weight: bold; margin-top: -5px; padding-top: 0px; } .post h2{ border-bottom: 1px solid #ebe1d3; padding: 0 0 7px 55px; font-size: 18pt; font-weight: normal; color: #c97d05; } .post h2 a{ text-decoration: none; padding-left: 0px; color: #c97d05; } Code (markup): and the relevant HTML: <div class="post" id="post-<?php the_ID(); ?>"> <div class="calendar"> <span class="month"><?php the_time('M') ?></span> <span class="date"><?php the_time('j') ?></span></div> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> HTML: Much appreciated if you have any solutions/suggestions!!
Start your css with * { margin:0; padding:0; border:0; } Code (markup): And always clear:both after floating an element.
My CSS does have both margin and padding set as zero (I only copied the relevant portion of my CSS) Um... I don't want the floated element to be cleared on both sides; I only want it cleared to the left. The goal is to have H2 displayed in IE the same as it does is in the Firefox screenshot - that is the intended look. Add clear:both moves H2 below the calendar div and I don't want that. Thanks though. Anyone else?
Actually you should only zero out the margins and padding. Zeroing out the borders will neuter most form control elements on some browsers.
Nice point on the borders. Any thought as to how to solve this margin issue? Here's a link to the site if you want to see it in action: www dot theoneillfamily dot org (sorry, not able to post the actual link yet)
Just type the link normally. I don't care if it's a live link or plain text, as long as it's formatted like a link.
I'm sorry - "type the link normally"? I don't have a link there. Could you explain what you mean by this?
like this: www.example.com It doesn't have to be a live link. But if you can just type it normally, I can copy/paste it and then go from there. (I have so much to do I usually don't have the time to try and piece links back together again.)
Oh.. I know what you're talking about now. Unfortunately, DigitalPoint won't let me since I haven't been a member at least one week (I'm at 6 days now), which is why I typed the link like that. Just tried a bunch of other variations, and it caught them all. Sorry.
Well, if I'm reading this right, methinks you are using a few too many properties and tags - though opening and closing the php like that is instantly made of /FAIL/. (much less accessing functions for stuff that should likely be in a variable)... Let's see... first we'll clean up the html, axe the title attribute that doesn't do ANYTHING since it's the same as the content of the anchor... <?php echo ' <div class="post" id="post-',the_ID(),'"> <div class="calendar"> <div>',the_time('M'),'</div>',the_time('j'),'</span> </div> <h2><a href="',the_permalink(),'" rel="bookmark">',the_title(),'</a></h2> </div> '; ?> Code (markup): You'll notice I axed the fancy classes inside 'calendar' - they aren't needed. Which lets me develop the CSS for it. I believe THIS will do what you want: * { margin:0; padding:0; } .post{ overflow:hidden; /* wrap floats */ zoom:1; /* haslayout - wrap floats in IE */ margin:10px 0 0; padding:15px; background:#CCC url(images/bg_post.gif) no-repeat left top; } .calendar { float: left; display: inline; width: 50px; height: 55px; text-align:center; font:bold 30px/35px serif; color: #393939; background:url(calendar.png) no-repeat left top; } .calendar div{ font:bold 14px/18px serif; color: white; } .post h2{ border-bottom: 1px solid #ebe1d3; margin: 0 0 7px 55px; font:normal 18pt/22pt serif; color: #c97d05; } .post h2 a{ text-decoration: none; color: #c97d05; } Code (markup): The use of line-height instead of padding/margins evens it out and simplifies. I think that does what you are looking to do. A good deal of your problem is wrapping of floats by .post (which I corrected)... though the top margin can also cause wierd behaviors (which haslayout fixes in IE too!)
First of all, I had to laugh when I saw your signature. Guess this is falling within that 90%, this being a WordPress theme and all. I tried your edits, but unfortunately, there are some issues. Here are the new screenshots: IE Firefox Things to note: It's putting subsequent posts to the left instead of below. 'the_content' is not placed with the background. div calendar background is not displayed. On the plus side, you did resolve the IE alignment issue for the H2. Here is how it's intended to look (a bigger screenshot than earlier): I've included the entire php code for your reference (with your updates included): <div class="maincolumn"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php echo ' <div class="post" id="post-',the_ID(),'"> <div class="calendar"> <div>',the_time('M'),'</div>',the_time('j'),'</span> </div> <h2><a href="',the_permalink(),'" rel="bookmark">',the_title(),'</a></h2> </div> '; ?> <div class="entry"> <?php the_content('Read more »'); ?> <p class="postinfo"> <?php _e('Posted by:'); ?> <?php the_author(' ') ?> | <?php _e('Tagged as:'); ?> <?php the_tags(' ') ?> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> </p> <!-- <?php trackback_rdf(); ?> --> </div> </div> <?php endwhile; ?> <?php include (TEMPLATEPATH . '/browse.php'); ?> <?php else : ?> <div class="post"> <h2><?php _e('Not Found'); ?></h2> <div class="entry"> <p class="notfound"><?php _e('Sorry, but you are looking for something that isn't here.'); ?></p> </div> </div> <?php endif; ?> </div> PHP: And more of the CSS: body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{ margin: 0; padding: 0; } body{ font-family: Georgia, Arial, Tahoma, Verdana; font-size: 12pt/1.5em; text-align: center; vertical-align: top; background: #fff url(images/bg_body.gif) repeat-x; color: #000; } h1, h2, h3, h4, h5, h6{ font-family: Georgia, sans-serif; font-size: 14px; font-weight: bold; } a{ text-decoration: underline; color: #878773; } a:hover{ text-decoration: none; } a img{ border: 0; } abbr, acronym{ border: 0; } address, dl, p{ padding: 15px 0 0; } #pagewrapper{ float: left; width: 748px; padding: 23px 0px; background: url(images/bg_page.gif) no-repeat left top; } #page{ padding: 0 23px; } .maincolumn{ float: left; width: 500px; } .post{ overflow:hidden; /* wrap floats */ zoom:1; /* haslayout - wrap floats in IE */ margin:10px 0 0; padding:15px; background:#CCC url(images/bg_post.gif) no-repeat left top; } .calendar { float: left; display: inline; width: 50px; height: 55px; text-align:center; font:bold 30px/35px serif; color: #393939; background:url(calendar.png) no-repeat left top; } .calendar div{ font:bold 14px/18px serif; color: white; } .post h2{ border-bottom: 1px solid #ebe1d3; margin: 0 0 7px 55px; font:normal 18pt/22pt serif; color: #c97d05; } .post h2 a{ text-decoration: none; color: #c97d05; } .post h2 a:hover{ text-decoration: underline; } .entry{ line-height: 24px; padding-top: 5px; } .entry p{ padding-top: 10px; clear: both; } .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{ border: 0; padding: 10px 0 0; } .entry h1{ font-size: 24px; font-weight: normal; } .entry h2{ font-size: 18px; color: #000; } .entry h3{ color: #c97d05; } .entry h4{} .entry h5{ font-weight: normal; } .entry h6{ font-size: 11px; font-weight: normal; } .entry img{ border: 1px solid #e5d8c6; padding: 4px; background-color: #faf5ef; } .entry img.wp-smiley{ padding: 0; border: 0; background-color: transparent; } .entry img.alignleft{ float: left; margin: 5px 10px 0 0; } .entry img.alignright{ float: right; margin: 5px 0 0 10px; } .entry p.postinfo{ margin: 15px 0 0; padding: 10px 15px 0; border-top: 1px solid #e5d8c6; font-size: 11px; color: #b1a799; } .entry p.notfound{ padding: 15px 0 100px; } #sidebar{ float: left; margin: 10px 0 0 10px; width: 192px; background: url(images/bg_sidebar.gif) no-repeat left top; } #container, #header, #menu, #pagewrapper, #page, #banner, .maincol, .post, .entry, .browse, #sidebar, #comments-template{ text-align: left; vertical-align:top; } Code (markup): Thank you for your efforts though!! I do feel a little closer, but I'm still very much in the learning process on PHP/CSS/HTML, so please bear with me.
Well first, you do realize I changed the image url in the css right? You need to put that back to yours (I used my own version of it locally) The real 'problem' though is you didn't integrate my code into it properly - that last </div> needs to be removed from my code - I figured you'd know that. <div class="maincolumn"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php echo ' <div class="post" id="post-',the_ID(),'"> <div class="calendar"> <div>',the_time('M'),'</div>',the_time('j'),'</span> </div> <h2><a href="',the_permalink(),'" rel="bookmark">',the_title(),'</a></h2> '; ?> <div class="entry"> <?php the_content('Read more »'); ?> <p class="postinfo"> <?php _e('Posted by:'); ?> <?php the_author(' ') ?> | <?php _e('Tagged as:'); ?> <?php the_tags(' ') ?> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> </p> <!-- <?php trackback_rdf(); ?> --> </div> </div> <?php endwhile; ?> <?php include (TEMPLATEPATH . '/browse.php'); ?> <?php else : ?> <div class="post"> <h2><?php _e('Not Found'); ?></h2> <div class="entry"> <p class="notfound"><?php _e('Sorry, but you are looking for something that isn't here.'); ?></p> </div> </div> <?php endif; ?> </div> Code (markup): I hadn't realized you were working in turdpress, though I should have realized it - only those nimrods could come up with php that bloated, buggy and just asking to break. 99% of the code you see written for wordpress, including the original codebase reeks of someone who failed programming 101 so bad they should have had their coding rights revoked. I would probably give the whole thing a sensible rewrite using something that resembles CODE, and doesn't hop in and out of parsing mode dragging it to a crawl - though again with the goof assed way wordpress themes are written I cannot be 100% certain this would even work. <?php echo ' <div class="maincolumn">'; if (have_posts()) { while (have_posts()) { the_post(); echo ' <div class="post" id="post-',the_ID(),'"> <div class="calendar"> <div>',the_time('M'),'</div>',the_time('j'),'</span> </div> <h2><a href="',the_permalink(),'" rel="bookmark">',the_title(),'</a></h2> <div class="entry"> ',the_content('Read more »'),' <div class="postinfo"> ',_e('Posted by:'),the_author(' '),' | ',_e('Tagged as:'),the_tags(' '),' | ',comments_popup_link('No Comments »','1 Comment »','% Comments »'),' </div> ',trackback_rdf(),' </div> <!-- .post --></div>'; } include (TEMPLATEPATH . '/browse.php'); ?> } else { echo ' <div class="post"> <h2>',_e('Not Found'),'</h2> <div class="entry"> <p class="notfound">,'_e('Sorry, but you are looking for something that isn't here.'),'</p> </div> </div>'; } echo ' </div>'; ?> Code (markup): Again, leave it to them to do stuff as function calls with all the excess overhead that entails for things that should be simple variable references - leave it to them to hop in and out of parsing mode increasing execution time and making the code even MORE complex than need be, etc, etc. I keep thinking I should do a rewrite of the entire wordpress codebase - unfortunately one look shows me the same thing I say about a lot of people's html and CSS - it would be faster to throw it out and start over from scratch. It's the phpBB of CMS systems - and NO that was not a compliment.
Um... of course I noticed it ...(facepalm)... what kind of inept coder you take me for ...(nervous laughter)... Assumptions, assumptions. You should always go with the thought that whoever you're talking to is inept (see above comment as proof) Man, I'm going to have to take your word on that one. When it comes to coding, I live in a glass house, and you know what they say we shouldn't do. Having dealt with phpBB in the past, I can actually relate to that one. Though my experiences with Wordpress have been far more favorable so far (only been a couple weeks though now). Anyway, I took your code, did some troubleshooting (there were a couple syntax errors), and lo and behold it worked flawlessly. I very much appreciate taking a look at this one. Now I'm off to compare my original CSS with your updated one. Haven't used overflow:hidden or zoom:1 before, so I'm interested in learning more about that. All in all, would you say that my original issue was resultant of that double margin bug, or just ultimately crappy coding? Again, I really appreciate your help - here's the final version: <?php get_header(); ?> <?php echo ' <div class="maincolumn">'; if (have_posts()) { while (have_posts()) { the_post(); echo ' <div class="post" id="post-',the_ID(),'"> <div class="calendar"> <div>',the_time('M'),'</div>',the_time('j'),'</span> </div> <h2><a href="',the_permalink(),'" rel="bookmark">',the_title(),'</a></h2> <div class="entry"> ',the_content('Read more »'),' <div class="postinfo"> ',_e('Posted by: '),get_the_author(' '),' | ',_e('Tagged as:'),the_tags(' '),' | ',comments_popup_link('No Comments »','1 Comment »','% Comments »'),' </div> <!-- ',trackback_rdf(),' --> </div> <!-- .post --></div>'; } include (TEMPLATEPATH . '/browse.php'); } else { echo ' <div class="post"> <h2>',_e('Not Found'),'</h2> <div class="entry"> <p class="notfound">',_e('Sorry, but you are looking for something that is not here.'),'</p> </div> </div>'; } echo ' </div>'; ?> <?php get_footer(); ?> Code (markup):