Site Design: Margins appear to be randomly changing. Help?

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Site Design: Margins appear to be randomly changing. Help?

Postby Eightfish » December 16th, 2018, 3:51 am

So I'd like some help on something that I can't seem to figure out the cause of.

I'm using a modified version of the In Silence theme, and 95% of the time, on my computer it looks like this:

Image

But sometimes there's a gap between the comic title and the comic page. I can't get it to show up consistently on my computer, but it will happen most of the time on my phone and on other computers:
Image

Here's the code for the Overall Layout, too, if it helps. I'm sorry it's kind of a mess, I don't really know anything about coding.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>{SITE_NAME} | {PAGE_TITLE}</title>
<script language="JavaScript" type="text/javascript">

var dir = "http://www.smackjeeves.com/templates/in_silence/images/";
var pic_unselected = "vote-unselected.gif";
var pic_selected = "vote-selected.gif";

// "Buffers" the image to the browser
document.write('<img style="display: none" src="' + dir + pic_unselected + '" />');
document.write('<img style="display: none" src="' + dir + pic_selected + '" />');

var default_rating = 0;

function build_vote()
{
   document.write('rate this page: ');
   for (n = 1; n<= 5; n++)
   {
      if (n <= default_rating)
      {
         default_pic = pic_selected;
      } else {
         default_pic = pic_unselected;
      }

      document.write('<a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '" border=0></a> ');
   }
   document.write('</ul>');
}

function rateover(star_num)
{

   for (n = 1; n <= 5; n++)
   {
      if (n <= star_num)
      {
         da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
      } else {
         da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
      }

      eval(da_code);
   }
}

function vote(rating)
{
   var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
   new_window.focus();
}

</script>

<style type="text/css">

body {
margin: 10px;
background: #ffcc00;
font-size: 62.5%;
font-family: courier new;
color: #000000;
text-align: center;
}

img {
border: 0px;
}

a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-family: courier new;
}

a:hover {
color: #ffcc00;
}

h1, h2, h3, h4, h5 {
font-family: courier new;
line-height: 1em !important;
font-weight: normal;
margin: 0px;
padding: 0px;
}


}

#header h1 a {
color: #ffffff;
}

#header h1 a:hover {
color: #ffffff;
}

#navigation {
margin: 10px;
}

#nav {
padding: 0px;
margin: 0px;
list-style-type: none;
}

#nav li {
display: inline;
}

#nav li a {
padding: 10px;
margin: 0px;
font: courier new;
font-size: 200%;
color: #000000;
}

#nav li a:hover {
color: #ffffff;
}

.wrap {
margin: auto;
width: 700px;
}

#contentwrap {
margin: auto;
width: 500px;
text-align: center;
}

.comicnav {
margin: 0px;
padding: 0px;
list-style-type: none;
}

.comicnav li {
display: inline;
margin: 10px;
text-align: center;
font: 2em century gothic, ms sans serif, geneva, lucida sans unicode, lucida grande, sans-serif;
}

.comicnav li a {
color: #ffffff;
}

.comicnav li a:hover {
color: #000000;
}

.comment, #rating, .post {
margin-top: 10px;
background: #ffffff;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
font: 1.2em lucida grande, lucida sans unicode, verdana, sans-serif;
}

.comment {
min-height: 100px;
height:auto !important;
height: 100px;
}

#comicnavigation, #rating, .post {
padding: 10px;
}

.commentheader {
background: #1B1B1B;
padding: 5px 5px 2px 5px;
color: #3d3d3d;
text-align: right;
}

.avatar {
float: left;
margin: 10px 10px 5px 10px;
padding: 1px;
border: 1px solid #a1a1a1;
}

.avatar:hover {
border: 3px solid #ffcc00;
}

h4 {
font-size: 0.9em;
color: #ffffff;
text-align: left;
}

h2, h3 {
font-size: 2em;
text-align: justify;
text-transform: uppercase;
}

h2 {
color: #ffffff;
}


h2 a {
color: #ffffff;
}

.commentcontent {
padding: 2px 20px 5px 20px;
text-align: left;
min-height: 100px;
height:auto !important;
height: 100px;
}

h3 {
color: #1B1B1B;
}

.editdelete {
font-size: 1.3em;
}

#title, .title {
padding: 10px;
text-indent: 15%;
}

.commentheadings {
padding: 15px;
margin: 10px auto;
width: 500px;
}

h5 {
color: #000000;
font-size: 2.4em;
text-transform: uppercase;
}

.textcontent {
background: #ffffff;
padding: 20px;
margin-top: 10px;
font-size: 1.3em;
text-align: left;
}

table {
font: 1em lucida sans unicode, verdana, sans-serif;
}

#months {
padding: 0px;
margin: 20px 0px 0px 0px;
list-style-type: none;
}

.textcontent h3 {
text-align: center !important;
}

</style>


</head>
<br> <br>
<font size="7"> <b> &nbspPuppeteer</b> </font>
<br>
Updates Sunday
<body>
<br><br>
</div>

{MENU}

<div class="wrap">
   {CONTENT}
</div>
<br><br><br><br><br>
</body>

This a modified version of the In Silence theme by <a href="http://www.smackjeeves.com/profile.php?id=24367" title="whistleonwild">whistleonwild</a>
<br>
</html>



Does anyone have any idea what could be causing this? Your help would be much appreciated.
Image
User avatar
Eightfish
 
Posts: 27
Joined: November 12th, 2018, 5:09 am

Re: Site Design: Margins appear to be randomly changing. Hel

Postby eishiya » December 16th, 2018, 8:16 am

Did this problem happen in the base template, or did it only start happening after you made your changes? If you don't know, could you please save your custom template, load into the original, and check? (You can load into your saved template after.) That should narrow down where/what the problem is, whether it's with your custom code or not.
The problem is probably in Comic Page rather than Overall Layout, since it's happening between the comic page image and the title. The Overall Layout is still useful for your CSS, though :]

It's possible it's not even in that, but in {comic_page.FORMATTED}, perhaps it does some extra mobile styling that doesn't play well with your site. If it gets narrowed down to that (hopefully not!), the solution would be to replace it with a manually-made comic_page rather than using the pre-formatted version. This should be a last resort as it would mean losing some handy features that the pre-formatted version gives you.

Unfortunately, mobile browsers don't make it easy to see what's going on in them >: I can't use any of the tools I usually use on mobile.


Edit: Please link to large images instead of embedding them. Embedding images larger than 1200x1200 is against the rules.
Image
User avatar
eishiya
 
Posts: 9691
Joined: December 5th, 2009, 11:17 am

Re: Site Design: Margins appear to be randomly changing. Hel

Postby Admin » December 17th, 2018, 10:15 am

That looks to be an ad that isn't loading. Not your fault.
User avatar
Admin
Site Admin
 
Posts: 1462
Joined: August 17th, 2005, 11:10 pm

Re: Site Design: Margins appear to be randomly changing. Hel

Postby Eightfish » December 18th, 2018, 6:42 am

@eishiya
Thanks for taking the time to suggest reasons.
I tried looking into them, but unfortunately I couldn't get it to stop happening.
I loaded the original template, and the same thing still happens, so it's not my custom code.
And it's not mobile either- I tried the site on a library computer, and the same thing.
Finally I don't see anything in the Comic Page template that could be causing this, but then again I have only a very limited knowledge of html.
Code: Select all
<div id="title"><h2>{COMIC_TITLE}</h2>
<h4>posted {COMIC_POST_DATE}</h4>
</div>

<!-- BEGIN comic_image -->

{comic_image.FORMATTED}

<!-- END comic_image -->

<div id="wrap">
<div id="contentwrap">

   <div id="comicnavigation">
      <ul class="comicnav">
      <li><a href="{NAV_FIRST}" title="first page">&lt;&lt; first</a></li>
      <li><a href="{NAV_PREV}" title="previous page">&lt; previous</a></li>   
      <li><a href="{NAV_NEXT}" title="next page">next &gt;</a></li>
      <li><a href="{NAV_LAST}" title="latest page">last &gt;&gt;</a></li>
      </ul>
   </div>
   
   {JUMPBOX_FORMATTED} <br><br><br>
   
   <div id="rating">
   <script language="JavaScript" type="text/javascript">build_vote();</script>
   <br />average rating: <em>{AVERAGE_RATING}</em>
   </div>
   
   <div class="post">
   <a href="/postcomment.php?cid={COMIC_ID}" onclick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;" title="post a comment">post a comment</a>
   </div>
   
   <style type="text/css">
   
      .comment_wrapper.reply {
         margin-left: 10px;
      }
   
   </style>

   <!-- BEGIN switch_author_comments -->
   <div class="commentheadings"><h5>author comments</h5></div>
   <!-- END switch_author_comments -->

   <!-- BEGIN loop_author_comments -->
   <div class="comment_wrapper {loop_author_comments.REPLY_CLASS}">
   
      <div class="comment">
   
         <!-- BEGIN switch_poster_no_avatar -->
         <!-- END switch_poster_no_avatar -->
      
         <!-- BEGIN switch_poster_avatar -->
         <a href="{loop_author_comments.POSTER_PROFILE_URL}" title="{loop_author_comments.NAME}"><img class="avatar" src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_author_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_author_comments.NAME}'s profile" /></a>
         <!-- END switch_poster_avatar -->
      
         <div class="commentheader">
            <h4>{loop_author_comments.DATE_POSTED}</h4>
            <h2><a href="{loop_author_comments.POSTER_PROFILE_URL}" title="{loop_author_comments.NAME}">{loop_author_comments.NAME}</a></h2>
         </div>
         
         <div class="commentcontent">
      
            <h3>{loop_author_comments.POST_TITLE}</h3>
      
            <a href="{loop_author_comments.REPLY_LINK}" onclick="var new_window = window.open('{loop_author_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">reply</span></a>
            <!-- BEGIN switch_user_can_edit -->
            | <a href="{loop_author_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_author_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">edit comment</span></a>
            <!-- END switch_user_can_edit -->
            <!-- BEGIN switch_user_can_delete -->
            | <a href="{loop_author_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_author_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">delete comment</span></a>
            <!-- END switch_user_can_delete -->
      
            <p>{loop_author_comments.MESSAGE}</p>
         
         </div>
         
         <br>
      
      </div>
   
      {loop_author_comments.COMMENT_REPLIES}
      
   </div>
   <!-- END loop_author_comments -->
   
   <!-- BEGIN switch_user_comments -->
   <div class="commentheadings"><h5>user comments</h5></div>
   <!-- END switch_user_comments -->
   
   <!-- BEGIN loop_user_comments -->
   <div class="comment_wrapper {loop_user_comments.REPLY_CLASS}">
   
      <div class="comment">
   
         <!-- BEGIN switch_poster_no_avatar -->
         <!-- END switch_poster_no_avatar -->
      
         <!-- BEGIN switch_poster_avatar -->
         <a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}"><img class="avatar" src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_user_comments.NAME}'s profile" /></a>
         <!-- END switch_poster_avatar -->
      
         <div class="commentheader">
            <h4>{loop_user_comments.DATE_POSTED}</h4>
            <h2><a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}">{loop_user_comments.NAME}</a></h2>
         </div>
         
         <div class="commentcontent">
      
            <h3>{loop_user_comments.POST_TITLE}</h3>
            
            <a href="{loop_user_comments.REPLY_LINK}" onclick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">reply</span></a>
            
            <!-- BEGIN switch_user_can_edit -->
            | <a href="{loop_user_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">edit comment</span></a>
            <!-- END switch_user_can_edit -->
            
            <!-- BEGIN switch_user_can_delete -->
            | <a href="{loop_user_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">delete comment</span></a>
            <!-- END switch_user_can_delete -->
      
            <p>{loop_user_comments.MESSAGE}</p>
         
         </div>
         
         <br>
      
      </div>
         
      {loop_user_comments.COMMENT_REPLIES}
         
   </div>
   <!-- END loop_user_comments -->
   
   <div class="post">
   <a href="/postcomment.php?cid={COMIC_ID}" onclick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;" title="post a comment">post a comment</a>
   </div>
</div>


@Admin
That was my first thought, but I originally ruled it out because I don't use adblock on this website. What you're saying though is that it could be a problem with SmackJeeves ads in general? How does SmackJeeves choose where to display ads? If it is an ad maybe I could change the containers to at least choose where the gap shows up.
Image
User avatar
Eightfish
 
Posts: 27
Joined: November 12th, 2018, 5:09 am

Re: Site Design: Margins appear to be randomly changing. Hel

Postby eishiya » December 18th, 2018, 10:36 am

Eightfish wrote:@Admin
That was my first thought, but I originally ruled it out because I don't use adblock on this website. What you're saying though is that it could be a problem with SmackJeeves ads in general? How does SmackJeeves choose where to display ads? If it is an ad maybe I could change the containers to at least choose where the gap shows up.

By "failing to load", he meant SJ-side (or network-side, some networks block some ads from loading), not because of an adblocker. Have you tried logging in on the library computer and mobile? If the problem goes away when you log in (or appears on your main machine when you log in), then it's an ad failling to load - ads aren't displayed for logged-in users.
Image
User avatar
eishiya
 
Posts: 9691
Joined: December 5th, 2009, 11:17 am

Re: Site Design: Margins appear to be randomly changing. Hel

Postby Eightfish » December 21st, 2018, 10:25 pm

Yup, the logging in fixes it. Guess it was an ad after all. Thanks!
Image
User avatar
Eightfish
 
Posts: 27
Joined: November 12th, 2018, 5:09 am


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 3 guests