Desperate for tumblr html help!

emmaw · Feb 15, 2013

Hi there,
I've been struggling to make the simplest of photo blogs for some time now and i was wondering if anyone out there could help me with what i'm sure are easy problems to fix.
The main one i've been struggling with is that My photos always appear with the same dimensions and layout when i post them singly which is what i want. However if I try to post more than one at once, either above each other or side by side, tumblr seems to change them and they appear a little smaller than the singles.

I'd really appreciate any Advice as this is one on many things that I would like to change and i've been getting nowhere just by googling it.

my blog is http://www.tumblr.com/blog/emmawrightphoto
my current Html is

thanks in advance

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!--
Simplification Tumblr Theme v1.1
by Bill Israel [[url]http://cubicle17.com/][/url]
Available for free. Feel free to use and alter, but please give credit.
-->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<meta name="description" content="{MetaDescription}"/>

<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#999999"/>
<meta name="color:Footer Background" content="#999999"/>
<meta name="color:Text" content="#999999"/>
<meta name="color:Lighter Text" content="#999999"/>
<meta name="color:Darker Text" content="#999999"/>
<meta name="color:Accent" content="#999999"/>
<meta name="color:Post Separator" content="#999999"/>

<!-- Disqus Shortname -->
<meta name="text:Disqus Shortname" content=""/>

<!-- Show Notes -->
<meta name="if:Show notes" content="1">

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" name="RSS" href="{RSS}"/>

<style type="text/css" media="screen">
html{font-size:87.5%}
body{background:{color:Background};border-top:7px solid {color:Accent};color:{color:Text};font:normal 1em/1.5 "Verdana","Verdana", "Verdana",Verdana,Verdana;margin:0;padding:3em 0 0}
a,a:visited,a:active{color:{color:Accent}}
a:hover{color:{color:Text}}
h1,h2,h3,h4,h5,h6{color:{color:Darker Text};font-family:Vedana,Verdana;font-weight:normal}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:2.5em}
blockquote{border-left:2px solid {color:Lighter Text};color:{color:Lighter Text};margin:0 1em 1.1em;padding:0 1em}
/* LAYOUT */
#container{margin:0 auto;min-width:500px;width:37em}

/* HEADER */
#header h1{margin:0 0 3em;padding:0;}
#header h1 a{border:0;color:{color:Darker Text};text-decoration:none;}
#header h1 a:hover{color:{color:Accent};}
#header #navigation{float:right;list-style:none;margin:0.75em 0 3.75em;padding:0}
#header #navigation li{display:inline-block;margin:0 0.25em}
#header #navigation a{border-bottom:2px solid {color:Background};font-size:1.2em;line-height:1.8em;padding:0.25em;text-decoration:none}
#header #navigation a:hover{border-bottom-color:{color:Accent};text-decoration:none}

/* POSTS */
#posts { clear: left; }
.text,.link,.quote,.photo,.video,.audio,.chat,.photoset-post{border-bottom:1px dotted {color:Post Separator};margin-bottom:4.5em;}
.link .link-description{margin:0 0 1.1em}
.quote .words{border:0;color:{color:Text};font:normal 1.0em/1.1 "verdana","verdana","verdana",verdana,verdana;margin:0 0 1em;padding:0}
.quote .source{color:{color:Lighter Text};font-style:italic}
.photo,.video, .photoset-post{text-align:center}
.photo .caption,.video .caption,.audio .caption,.quote .source,.photoset-post .caption{clear: right;margin-bottom:1.1em;margin-top:0.75em;text-align:left}
.photo a img{border:0;}
.chat ul.convo{list-style-type:none;padding:0;}
.chat ul.convo li{line-height:2;}
.chat ul.convo li .person { font-weight: bold; }
.chat ul.convo li.even .person{color:{color:Accent};}
.audio .playcount { float: right; }

/* POST FOOTERS */
.post-footer{list-style:none;font-size:0.857em;margin:3em 0;padding:0;text-align:center;}
.post-footer li{display:inline;margin-center:1em;padding:0}

/* REBLOG */
.post-footer li.reblog{color:{color:Lighter Text};display:block;font-style:italic;margin-bottom:0.25em}
.post-footer li.date h3{coloar:{color:Lighter Text};display:inline;font-family:verdana,verdana,verdana;font-size:1em}

/* TAGS */
.post-footer li.tags ul, .post-footer li.tags ul li{display:inline; padding: 0;}
.post-footer li.tags ul li {margin-left: 0.5em;}

/* NOTES */
ol.notes { margin: 0; padding: 0; }
ol.notes li.note { margin: 0 0 0.75em 0; padding: 0 0 0.75em 0 }
ol.notes img.avatar { display: none; }

/* PAGINATION */
#pagination{margin:3em 0}
#pagination #pagecount{color:{color:Lighter Text};margin:0 1.1em}

/* FOOTER */
#footer{border-top:5px solid {color:Accent};background:{color:Footer Background};color:{color:Lighter Text};float:left;overflow:visible;padding:0 0 1.1em;width:100%}
#footer a{text-decoration:none}
#footer a:hover{color:{color:Lighter Text};}
#footer h3{border-bottom:1px solid {color:Lighter Text};color:{color:Lighter Text};font-size:1.1em;margin:2em 0 0.25em}
#footer ul{list-style:none;padding:0}
#footer ul li{line-height:2}

/* FOLLOWING LIST */
#footer #following li { line-height: 30px; display: inline; }

/* FOOTER LAYOUT */
#footer-contain{margin:0 auto;padding:0;width:50em}
#footer-left{float:left;width:15em}
#footer-middle{float:left;margin-left:2.5em;width:15em}
#footer-right{float:left;margin-left:2.5em;width:15em}

/* SEARCH */
#search input{display:inline;}
#searchresultcount{font-style:italic;margin: 3em 0;text-align: center;}
#searchresultcount .query{font-weight:bold;}

.search_query, .tag {
font-weight: bold;
}

/* CUSTOM CSS */
{CustomCSS}
</style>
</head>

<body>
<div id="container">
<div id="header">
<ul id="navigation">
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
<li><a href="#footer">{lang:About}</a></li>
<li><a href="/archive">{lang:Archive}</a></li>
<li><a href="{RSS}">{lang:RSS}</a></li>
</ul>

<h1><a href="/">{Title}</a></h1>
</div> <!-- end #header -->

<div id="posts">
{block:SearchPage}
<div id="searchresultcount">
{block:SearchResults}
<p>{lang:Your search for SearchQuery returned SearchResultCount results 2}</p>
{block:SearchResults}

{block:NoSearchResults}
<p>{lang:No search results for SearchQuery 2}</p>
{block:NoSearchResults}
</div>
{/block:SearchPage}

{block:Posts}
{block:Text}
<div class="text">
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}


{block:Quote}
<div class="quote">
<blockquote class="words">“{Quote}”</blockquote>
{block:Source}<div class="source">{Source}</div>{/block:Source}
{/block:Quote}


{block:Link}
<div class="link">
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div class="link-description">
{Description}
</div>
{/block:Description}
{/block:Link}


{block:Video}
<div class="video">
{Video-500}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}



{block:Audio}
<div class="audio">
<span class="playcount">{lang:Played PlayCount times}</span>
{AudioPlayerBlack}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Audio}


{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photoset-post">
{Photoset-500}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}


{block:Chat}
<div class="chat">
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="convo">
{block:Lines}
<li class="{Alt}">
<span class="person">{block:Label}{Label}{/block:Label}</span>
<span class="line">{Line}</span>
</li>
{/block:Lines}
</ul>
{/block:Chat}

<ul class="post-footer">
{block:RebloggedFrom}<li class="reblog">{lang:Reblogged from ReblogParentTitle 2}</li>{/block:RebloggedFrom}
{block:HasTags}<li class="tags">{lang:Tags}: <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></li>{/block:HasTags}
{block:Date}<li class="date"><h3>{Month} {DayOfMonthWithZero}, {Year}</h3>{block:IfShowNotes}{block:NoteCount}<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{NoteCountWithLabel}</h3>{/block:NoteCount}{/block:IfShowNotes}</li>
{block:Date}
{block:IfNotDisqusShortname}<li><a href="{Permalink}" class="permalink">{lang:Permalink}</a></li>{/block:IfNotDisqusShortname}
{block:IfDisqusShortname}<li><a href="{Permalink}#disqus_thread" class="permalink">{lang:Comments}</a></li>{block:IfDisqusShortname}
{/block:Date}
</ul>
</div> <!-- end single post -->
{/block:Posts}

{block:Permalink}
{block:IfShowNotes}
{block:PostNotes}
<h4>{lang:Notes}</h4>
{PostNotes}
{block:PostNotes}
{/block:IfShowNotes}

{block:IfDisqusShortname}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
{/block:IfDisqusShortname}
{/block:Permalink}
</div> <!-- end posts -->

{block:Pagination}
<div id="pagination">
{block:NextPage}<a href="{NextPage}">&larr; {lang:Older entries}</a>{/block:NextPage}
<span id="pagecount">{lang:Page CurrentPage of TotalPages}</span>
{block:PreviousPage}<a href="{PreviousPage}">{lang:Newer Entries} &rarr;</a>{/block:PreviousPage}
</div>
{/block:Pagination}

{block:PermalinkPagination}
<div id="pagination">
{block:PreviousPost}<a href="{PreviousPost}">&larr; {lang:Previous post}</a>{/block:PreviousPost}
<span id="pagecount">&nbsp;</span>
{block:NextPost}<a href="{NextPost}">{lang:Next post} &rarr;</a>{/block:NextPost}
</div>
{/block:PermalinkPagination}

</div> <!-- end container -->


<div id="footer">
<div id="footer-contain">

<div id="footer-left">
<!-- Twitter Badge -->
<!-- Uncomment and change username to use -->
<!--
<h3 id="twitter">Latest Tweet</h3>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?count=1&amp;callback=twitterCallback2"></script>
</ul>
-->



<div id="footer-right">
<h3 id="search-title">{lang:Search}</h3>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" size="17"/>
<input type="submit" value="Search"/>
</form>
</div>


</div>

</div> <!-- end footer contain -->
</div> <!-- end footer -->

{block:IfDisqusShortname}
<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/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
</html>

binford6001 · Feb 15, 2013

Just some thoughts...

Hi,

have you ever tried to use another browser? MS InternetExplorer for example has a function called "compatible view" I guess. As far as I can remember this function is enabled by default, so you have to manually switch it off in the menu (Internetoptions) if you like to.
This function applies some changes/modifications (temporary, only during "runtime") to your StyleSheets and/or - depending on how MS-IE evaluates the document source/code - the documents html code. Best way is just to DISABLE this compatibilty feature in IE!

InternetExplorer is not the only browser/interpreter that "features" such a "compatibility view", so you should check if it also applies to your browser and - if so - disable it.

Are you using your own Stylesheets to browse or are you using the defaults of your browser?

Some browsers have an option to (temp.) resize pictures for "better" viewing experience. Simply switch it off.

Anyway - you´d better disable any of those browser options which may apply such changes.

Your code seems to be allright at the first glance - I could not find any "errors" that may cause your problem. I´ll take another look into your code when I got some free minutes to spare

emmaw · Feb 15, 2013

Thanks for replying,
I use firefox , i've looked into it and it seems that firefox doesn't have a compatibility mode.
I'm also using a mac, don't know if that makes a difference.
thanks

Desperate for tumblr html help!

emmaw

New Member

binford6001

New Member

emmaw

New Member