Forum Moderators: not2easy
However, I attempted it when I made a new blog recently.
I used a template layout on the site, and customised it myself; added a sidebar, etc etc.
Viewing it on Internet Explorer, it looks rather neat and organized - exactly the way I want it to look.
However I recently installed Firefox, and it looks rather messy - 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 random (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">
<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://example.com/tagged/category' style='font-size:1.4em;'>category </a></li><br>
<li><a href='http://example.com/tagged/general' style='font-size:1.4em;'>general </a></li><br>
<li><a href='http://example.com/tagged/hello' style='font-size:1.4em;'>hello </a></li><br>
<li><a href='http://example.com/tagged/life' style='font-size:1.4em;'>life </a></li><br>
<li><a href='http://example.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://example.com/">Example</a> powered</li>
<li><a href="http://example.com/">Example</a> designed</li>
</ul>
</div>
<div id="contain">
<div id="content">
<h1><a href="/">{Title}</a></h1>
<h2><a href="http://example.com/">
<img src="http://example.com/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>[edited by: DrDoc at 2:42 am (utc) on Aug. 18, 2008]
[edit reason] Examplified, removed specifics and special characters. See posting guidelines. [/edit]
Anyways - your problem is simply that IE detects that column to the right of your content when it centers the content. Firefox, on the other hand, see's that it is a floating object and so doesn't take it into consideration when centering the content area. As such, in FireFox it is perfectly centered and the sidebar area is just floated over it.
If I have time I might try to work on this and fix it for you - but I don't have internet at my house right now. I won't till Tuesday. I'm using Subways WIFI right now :D.
To make it work you might try making the content area float right as well. Then you won't have to worry about it overlapping like that. However, it might not center correctly if you do that... It would take quite a bit of tweeking.
Well, I'll see if I can fix it, but try to work it out yourself too!
Ryan
Another user advised me to run my coding through Tidy (http://infohound.net/tidy/) and validate my markup and CSS here (http://validator.w3.org/), although I'm not totally sure how this would help my situation, just makes it a little prettier.
Thank you for your explanation of how it is detected in IE and Firefox, at least now I understand what's going on with this intricate coding!
I'm trying to work it out now with the details you've given, although it's 12am, so I reckon I'll just get to sleep and work on it in the morning.
Thank you so, so much though for your help. I didn't think another user would take the time to help me figure out the problem.
There don't seem to be to many active members on this site - but the ones that are are very helpful!
Validating your code is nice but it's really unnecessary. It's something you worry about either before you start coding or after you get it working. It's a tedious process depending upon what your doing and what dtd your trying to adhere to. I wouldn't worry about it too much if I were you - it will just become a hassle at this point.
Most of us work the other way around, it's a lot easier:
- design in any browser but IE (forget IE exists even)
- once you get it working in Firefox, Opera, Safari
- pop out IE6: fix what it needs for its lack of being even remotely standards compliant in a conditional comment
- do the same for IE7
This will get you there faster, with less interference, and far more maintainable into the future (IE8 should/might be more standards compliant, so you cannot risk it seeing the code for the old versions of IE)
Finally could you give us (sanitized) code as the browser would get it ?
