7 replies [Last post]
girlinterrupted
girlinterrupted's picture
Offline
newbie
Last seen: 11 years 9 weeks ago
Timezone: GMT+1
Joined: 2008-08-10
Posts: 5
Points: 0

I am totally useless when it comes to CSS/HTML and the like.

However, I attempted it when I made a new blog on Tumblr (http://tumblr.com) recently.
I used a template layout on the site, and customised it myself; added a sidebar, etc etc.

Viewing it on Internet Explorer here (http://img228.imageshack.us/img228/9232/testdg2.png) it looks rather neat and organized - exactly the way I want it to look.
However I recently installed Firefox, and it looks rather messy (http://img146.imageshack.us/img146/1592/test2ab8.png) - the sidebar overlaps the main body, which was meant to be positioned so many pixels to the left.

Can someone help me so the layout looks exactly the same when viewed in Internet Explorer and Firefox?

The blog URL in the picture links are of my test blog, but it shares the same coding as in my real one.
I could give the blog email and password for the test blog if requested, otherwise the coding for this is below.

p.s. I do not know whether some of the coding I have is superfluous or wrong (I was just tweaking lots and trying things out until they looked right on IE), so if anyone does help me, can you please remove or replace the irrelevant coding so it looks like the IE version?



Any help would be appreciated greatly. Thanks so, so much.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!-- 
  Theme: Easy Reader  v1.2
  Author: Bill Israel  [[url]<a href="http://cubicle17.com/" rel="nofollow">http://cubicle17.com/</a>][/url]
  For: Tumblr  [[url]<a href="http://tumblr.com/" rel="nofollow">http://tumblr.com/</a>][/url]
  Terms: Free to use and alter, but please give credit.
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>the title.</title>
 
  <!-- DEFAULT COLORS -->
  <meta name="color:Background" content="#fff"/>
  <meta name="color:Description" content="#999"/>
  <meta name="color:Text" content="#404040"/>
  <meta name="color:Link" content="#97DA91"/>
  <meta name="color:Post Border" content="#cccccc"/>
  <meta name="color:Date Border" content="#cccccc"/>
  <meta name="color:Post Footer" content="#999999"/>
  <!-- END DEFAULT COLORS -->
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=575"/>
 
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss"/>
  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
 
  <style type="text/css">
    body {
      background: {color:Background};
      color: {color:Text};
      font: normal 1em/1.5em Georgia, serif;
      margin: 0;
      padding: 0;
      text-align: center; /* for ie5.5/win */
    }
 
    a, a:active, a:visited {
      color: {color:Link};
      font-weight: bold;
      text-decoration: none;
    }
 
    a:hover {
      text-decoration: underline;
    }
 
    blockquote, ol, p, ul {
      margin: 0 0 1.5em;
      padding: 0;
    }
 
    ol, ul {
      margin-left: 2em;
      margin-right: 2em;
    }
 
    blockquote {
      border-left: 2px solid {color:Title};
      font-style: italic;
      margin-left: 1em;
      padding: 0 2em 0 1em;
    }
 
    h1, h2, h3, h4, h5, h6 {
      color: {color:Title};
       margin: 0 0 1.5em;
      padding: 0;
    }
 
    h1 {
      font-size: 3em;
      line-height: 1;
      margin-bottom: .5em;
    }
 
    h1 a, h1 a:visited, h1 a:active {
      color: {color:Title};
    }
 
    h1 a:hover {
      color: {color:Link};
      text-decoration: none;
    }
 
    h2 {
      color: {color:Description};
      font-size: 1em;
      margin-bottom: 1.5em;
      position:relative; left:-50px
    }
 
    h3 {
      font-size: 1.4em;
    }
 
    h4 {
      font-size: 0.7em;
    }
 
 
    /* Content container */
    #content {
      margin: 1.5em auto 0;
      text-align: left;
      width: 35em;
    }
 
    #sidebar {
    float: right;
    margin: 10.4em 0.7em 0 -5em;
    width: 15em;
    }    
 
    /* SIDEBAR */
    #sidebar #description {
    margin-bottom: 3em;
    margin-top: 3em;
    }
 
    #sidebar p, #sidebar ul {
    font-size: 0.7em;
    }
 
    #sidebar ul {
    list-style: none;
    margin-bottom: 3em;
    padding: 0;
    }
 
    /* COLOPHON */
    #colophon {
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    }
 
    #colophon li {
      font-size: 1em;
    }
 
 
    /* Metadata */
    #meta {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: right;
    }
 
    #meta li {
      display: none;
    }
 
 
    #posts {
      border-top: px solid {color:Post Border};
    }
 
 
    /* Individual Posts */
    .post {
      border-top: 2px solid {color:Post Border};
      padding: 2em 0 1em;
      font-family: georgia;
      font-size: 0.7em;
    }
 
    .post .date {
      border-top: 3px solid {color:Date Border};
      border-bottom: 1px solid {color:Date Border};
      float: left;
      padding: .25em 1em;
      text-align: center;
    }
 
    .post .date .month, .post .date .day, .post .date .time {
      color: {color:Description;};
      display: block;
      font-weight: normal;
    }
 
    .post .date .month {
      letter-spacing: .05em;
      text-transform: uppercase;
    }
 
    .post .date .day {
      font-size: 1.3em;
      font-weight: bold;
    }
 
    .post .date a, .post .date a:visited, .post .date a:active {
      font-weight: normal;
    }
 
    .post .regular, .post .quote, .post .link, .post .conversation,
    .post .photo, .post .video, .post .audio {
      margin-left: 8.5em;
      padding: 0;
    }
 
    .post .photo .caption, .post .video .caption,
    .post .quote .source, .post .audio .caption {
      display: block;
      margin-bottom: 1.5em;
    }
 
    .post .quote .source {
      font-style: italic;
      text-align: right;
    }
 
    .post .conversation ul {
      list-style: none;
      margin: 0 .5em 1.5em;
      padding: 0;
    }
 
    .post .conversation ul li {
      padding: .5em 0;
    }
 
    .post .conversation ul li .person {
      font-weight: bold;
      margin-right: 1em;
    }
 
    .post .post-footer {
      color: {color:Post Footer};
      margin-left: 7em;
      text-align: right;
    }
 
    .post .post-footer .permalink, .post .post-footer .when {
      font-size: .7em;
      font-weight: normal;
      margin-left: 1em;
    }
 
    /* Previous and Next Links */
    #prev-next {
      margin-left: 7em;
      padding: 1.5em 0 3em;
      font-size: .7em;
    }
 
    #prev {
      margin-right: 1.5em;
    }
 
    #next {
      margin-left: 1.5em;
    }
 
    #footer {
      border-top: 1px solid {color:Description};
      font-size: .7em;
    }
 
    #footer a, #footer a:active, #footer a:visited {
      color: {color:Title};
    }
 
    #footer ul {
      list-style: none;
      margin: 1em 0;
      padding: 0;
      text-align: center;
    }
 
    #footer ul li {
      display: inline;
      margin: 0.5em;
    }
 
    /* Custom CSS */
    {CustomCSS}
  </style>
</head>
<body>
 
<div id="sidebar">
<p>My name is blank. About me, about me, and so it goes on.</p>
<br>
 
 
    <h4>Categories</h4>
    <ul id="nav">
      <!-- Start Tag Cloud -->
<ul class='tag-cloud'>
 
<li><a href='http://a-little-testblog.tumblr.com/tagged/category' style='font-size:1.4em;'>category </a></li><br>
 
<li><a href='http://a-little-testblog.tumblr.com/tagged/general' style='font-size:1.4em;'>general </a></li><br>
 
<li><a href='http://a-little-testblog.tumblr.com/tagged/hello' style='font-size:1.4em;'>hello </a></li><br>
 
<li><a href='http://a-little-testblog.tumblr.com/tagged/life' style='font-size:1.4em;'>life </a></li><br>
 
<li><a href='http://a-little-testblog.tumblr.com/tagged/tags' style='font-size:1.4em;'>tags </a></li>
 
</ul>
<!-- End Tag Cloud -->
 
<!-- Start Tag Cloud CSS -->
<style type='text/css'>
.tag-cloud li {display:inline;}
</style>
<!-- End Tag Cloud CSS -->
    </ul>
 
<h4>About</h4>
 
<ul id="colophon">
      <li><a href="http://tumblr.com/">Tumblr</a> powered</li>
      <li><a href="http://cubicle17.com/">Bill Israel</a> designed</li>
    </ul>
  </div>
 
 
    <div id="contain">     
      <div id="content">
        <h1><a href="/">{Title}</a></h1>
        <h2><a href="http://a-little-testblog.tumblr.com/">
<img src="http://img228.imageshack.us/img228/9033/testwx6.png" border="0"></a></h2>
 
        <ul id="meta">
          <li id="rss"><a href="{RSS}">RSS</a></li> /
          <li id="archive"><a href="/archive">Archive</a></li>
        </ul>
 
        <div id="posts" class="autopagerize_page_element">
        {block:Posts}
        <div class="post">
          {block:NewDayDate}
          <div class="date">
            <span class="month">{ShortMonth}</span>
            <span class="day">{DayOfMonth}</span>
          </div>
          {/block:NewDayDate}
 
          {block:Text}
          <div class="regular">
            {block:Title}<h3>{Title}</h3>{/block:Title}
            {Body}
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Text}
 
          {block:Quote}
          <div class="quote">
            <span class="words">{Quote}”</span>
            {block:Source}<span class="source">{Source}</span>{/block:Source}
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Quote}
 
          {block:Link}
          <div class="link">
            <h3><a href="{URL}" {Target}>{Name}</a></h3>
            <div class="link-body">
            {block:Description}{Description}{/block:Description}
            </div>
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Link}
 
          {block:Chat}
          <div class="conversation">
            {block:Title}<h3>{Title}</h3>{/block:Title}
            <ul>
              {block:Lines}
              <li>
                {block:Label}<span class="person">{Label}</span>{/block:Label}
                <span class="line">{Line}</span></li>
              {/block:Lines}
            </ul>
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Chat}
 
          {block:Photo}
          <div class="photo">
            {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
            {block:Caption}<span class="caption">{Caption}</span>{/block:Caption}
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Photo}
 
          {block:Video}
          <div class="video">
            {Video-400}
            {block:Caption}<span class="caption">{Caption}</span>{/block:Caption}
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Video}
 
          {block:Audio}
          <div class="audio">
            {AudioPlayerGrey}
            {block:Caption}<span class="caption">{Caption}</span>{/block:Caption}
          </div>
          <div class="post-footer">
            <span class="when">Posted at {12Hour}:{Minutes}{AmPm}</span>
          {/block:Audio}
            <a href="{Permalink}" class="permalink">Permalink ∞</a>
          </div>
          <br clear="all"/>
        </div> <!-- end single post -->
        {/block:Posts}
        </div>
 
 
        <div id="prev-next" class="autopagerize_insert_before">
          {block:NextPage}<a href="{NextPage}" id="prev" rel="next">← Older Posts</a>{/block:NextPage}
 
          {block:PreviousPage}<a href="{PreviousPage}" id="next">Newer Posts →</a>{/block:PreviousPage}
        </div>
 
 
</body>
</html>

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 11 years 8 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

girlinterrupted wrote:I am

girlinterrupted wrote:

I am totally useless when it comes to CSS/HTML and the like.

So validate your file(Drunk (you've got 55 markup errors) and code to compliant browsers (FF/Opera/Safari) not the IEs. IE can't get much of anything right.

Backup your file. Run it through Tidy [1]. Tidy will correct most errors. Correct remaining ones manually. Then validate the markup and CSS with the w3c validation services [2] [3].
If you still have cross-browser rendering differences, bring the valid files back to the forum.

[1]http://infohound.net/tidy/
[2]http://validator.w3.org/
[3]http://jigsaw.w3.org/css-validator/

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 39 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Hey, welcome back. I can't

Hey, welcome back.

I can't get your images to load, and I can't replicate quite what you're looking at. Do you have total access to change the file? There are quite a few validation issues, as was mentioned by David, that should probably be worked through first to make sure that it is rendering in standards mode. Then, we can troubleshoot the error. Chances are, Firefox is rendering it correctly and IE isn't, despite it looking right for you. If you have a live link to the page, that would also help to see exactly what you're seeing.

Triumph (not verified)
Anonymous's picture
Guru

downtap wrote:Hey, welcome

downtap wrote:

Hey, welcome back.

I can't get your images to load, and I can't replicate quite what you're looking at. Do you have total access to change the file? There are quite a few validation issues, as was mentioned by David, that should probably be worked through first to make sure that it is rendering in standards mode. Then, we can troubleshoot the error. Chances are, Firefox is rendering it correctly and IE isn't, despite it looking right for you. If you have a live link to the page, that would also help to see exactly what you're seeing.

This thread is 4 months old and the issue is probably resolved.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 39 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Ooops..didn't even look at

Ooops..didn't even look at the timestamp. Just saw it on the top. Sorry about that.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

lmao

Laughing out loud

Triumph (not verified)
Anonymous's picture
Guru

downtap wrote:Ooops..didn't

downtap wrote:

Ooops..didn't even look at the timestamp. Just saw it on the top. Sorry about that.

It was on top of the recent posts list because some nitz was throwing fluff posts with an attempted invisible spam link all over the forum. I removed the posts and the offender. I guess you viewed it and replied before I removed the fluff. Smile

Not a big deal, just wanted you to know that you probably weren't going to get a response.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 39 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Ouch. I can't believe how

Ouch. I can't believe how much people do that. Makes no sense to me. O well, thanks for letting me know.