Tumblr code issue for DoinWork theme Utralite: this should be HTML basics but it's giving me some complicated problems with tricky <div> between posts?

The <div class=“post”> above it has a bottom margin of 100 pixels, which is pushing it way down. I think you probably would want to transfer most or all of that bottom margin to the DIV the comments are supposed to go in.

hmmm. thanks for your answer. the thing is the comments are in the div they are supposed to go in—per Disqus’s instructions. here is that post bottom div code. can you let me know where I might add additional bottom margin there? happy to try taking it out of the <div class=“post”> just want to know where to put it.

<div class=“post-bottom”>

<img src=“http://static.tumblr.com/xequfu2/sXBkzd2nw/post_bottom.png”/>
</div> {/block:IfShowPostDividers}

</div>
{PostNotes}

<div style=“font-size: 10px; text-align: left;”><a class=“dsq-comment-count” href=”{Permalink}#disqus_thread”>Comments</a></div>
{/block:Posts}
<script type=“text/javascript”>var disqus_url = ”{Permalink}”; var disqus_title =”{block:PostTitle}{PostTitle}{/block:PostTitle}”;</script>{block:Permalink}<div id=“disqus_thread”></div>
<script type=“text/javascript”>
/**
* var disqus_identifier;
*/
(function() {
var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’; dsq.async = true;
dsq.src = ‘http://hinternetz.disqus.com/embed.js’;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href=“http://disqus.com/?ref_noscript=hinternetz”>comments powered by Disqus.</a></noscript>
<a href=“http://disqus.com” class=“dsq-brlink”>blog comments powered by <span class=“logo-disqus”>Disqus</span></a>
{/block:Permalink}<script type=“text/javascript”>
//<![CDATA[
(function() {
var links = document.getElementsByTagName(‘a’);
var query = ’?’;
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf(’#disqus_thread’) >= 0) {
query += ‘url’ + i + ’=’ + encodeURIComponent(links[i].href) + ’&’;
}
}
document.write(’<script charset=“utf-8” type=“text/javascript” src=“http://disqus.com/forums/hinternetz/get_num_replies.js’ + query + ’”></’ + ‘script>’);
})();
//]]>
</script>
<div id=“footer”>
<br />

<br />
{block:PreviousPage}
<a href=”{PreviousPage}”>« Previous</a>   
{/block:PreviousPage}

{block:NextPage}
<a href=”{NextPage}” font-size=“36px”>Next »</a>
{/block:NextPage}

<div id=“credit”>
<a href=“http://ultralite.tumblr.com”>Ultralite</a> Powered by <a href=“http://www.tumblr.com/”
target=“_blank”>Tumblr</a>
Designed by:<a href=“http://doinwork.tumblr.com/”
target=“_blank”>Doinwork</a>
</div>
</div>
</div>
</body>
</html>

Looks a bit better now that <div class=“post”> has its bottom margin trimmed to 20px. I think I’d make it more like 12px, then do this with the DIV your comment is in.

<div style=“font-size: 10px; text-align: left; margin-bottom: 20px;”>

hey. that’s not working for whatever reason. thanks though

@a0k Humm, little wonder. I just saved the page as Web Page Complete to my machine. Here is the markup of the DIV in question.

<div style=”” 10px;=”” text-align:=”” left;=”” margin-bottom:=””
25px;”=””>

It needs instead to be:
<div style=“font-size:10px; text-align:left; margin-bottom:25px;”>
I am assuming the floating 10px was for a font size. Yes? If not, modify accordingly.

Give that a try. Careful about writing code in desktop word processor that uses curly quotes and custom formatting, because it can turn simple ASCII characters into stuff like ” which doesn’t compute in HTML. :-)

@ETpro thanks for your careful checking. i made this change and i think i see a small difference. there is still some overlap and i’m not really pleased with the spacing but it’s certainly an improvement.

Well, that is some improvement, but you are still getting gibberish into your code. Here is the source code now.

<div margin-bottom:25px;”=”” text-align:left;=”” style=””>

You are just lucky that some browsers are guessing what that line of mush was actually meant to be.

hey but i think the code you view is not what i’m inputting directly. i can screenshot the customized HTML and it looks PRISTINE. wtf is getting mashed up. i’m so exasperated. :(

DISCOVERY!!!!!! ***** the quote marks in my code were diagonal. i think maybe i cut and pasted your clean code which corrupted it when activated. i tried retyping and it looks a lot (albeit not entirely) better. can you do your cool check thing to see what it looks like. thanks so much, dude. :)

Sure. What I see now is:
<div style=“font-size: 10px; text-align: left; margin-bottom: 25px;”>
<a href=“http://hinternetz.com/post/545253979/who-was-your-first-crush#disqus_thread” class=“dsq-comment-count”>0 Comments and 0 Reactions</a></div>

Looks pretty good. How do you want to change the layout.

BTW, the cool check thing is a plugin for Firefox called Firebug. I highly recommend it if you have to sort through CSS and HTML/XHTML issues. Lets you right click any element, select Inspect Element, and see the a spit window below the actual element with the HTML source code in the left pane and the CSS controlling the selected HTML tag in the right pane. Hovering your mouse over any HTML tag in the source code highlights tha actual element in the top page-view window, and highlights padding and margin around it in a different, lighter color. VERY cool.

hey again. the spaces between the post and its tags and the link to comment is so smushed looking and gross. seems like ONLY on text posts? I wish I could fix it but again this seems confusing. Can you take a peak? Thanks.

It sure seems Tmublr is messing with the HTML code you input. Being unfamiliar with Tumblr, I am at a loss to say why. Is there a Tumblr forum? If so, a post there miught turn up someone who knows the program’s guts.