Help - Search - Members - Calendar
Full Version: Help with this layout
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
imperfectionistx
I haven't been here in FOREVER :P Hope I'm posting this in the right place; since no one really checks the blogger support center. Anyone remember me? Heh pinch.gif

Anyways, I'm made this layout for someone's blog and it works fine in IE and Safari however a bunch of code is showing up at the top of the layout in FF. How would I fix that? I really don't know the specifications about coding for FF/blogger/xhtml... can anyone fix it for me? Or tell me what to do? Sorry I didn't take a screenshot, FF is not working for me... Idk why :/

Here's the code:

CODE
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#aa5557">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#ffffff">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#ffffff">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#d58e8f">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#000000">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 98% Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 114% Georgia, Times, serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
background-image: url('http://i28.tinypic.com/24eo0nm.jpg');
background-position:center;
background-attachment:fixed;
background-repeat:repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
.quickedit {display:none;}

div {
scrollbar-arrow-color: black;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
base-color: #ffffff;
}
</style>

text
{
font-family: arial;
color: #000000;
font-size: 9pt;
text-align:justify;
}

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

#header-wrapper {
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


hr { height: 0; border-style: dashed; border-width: 1px 0 0 0; border-color:
#999999; }

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 460px;
padding-left:76px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background-image: url(http://i32.tinypic.com/5zh4e0.gif);
background-position:bottom-left;
background-repeat:no-repeat;
}

#column-wrapper {
width: 400px;
background-image: url();
background-position:top-center;
background-repeat:no-repeat;
border: 1px solid #000000;
background-color:#ffffff;
padding:10px;
margin-right:2px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-right{
width:190px;
float:right;
word-wrap:break-word;
overflow:hidden;
border: 1px solid #000000!important;
background-color:#ffffff!important;
padding: 3px!important;
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word;
overflow:hidden;
border: 1px solid #000000!important;
background-color:#ffffff!important;
padding: 3px!important;
}



/* Headings
----------------------------------------------- */

#sidebar-right h2 {
width:190px;
background-image: url(http://i26.tinypic.com/2vx382e.gif);
background-position:center;
background-repeat:repeat;
display:block;
font-family:script;
border-bottom: 0px solid #000000;
font-size: 36px;
line-height:38px;
color:#000000;
background-color:#E0ADB0;
text-transform:none;
font-weight:normal;
text-align:center;
margin-top:10px;
padding-top:4px;
border-top: 1px solid hotpink!important;
border-bottom: 1px solid hotpink!important;

}

#sidebar-left h2 {
width:200px;
background-image: url(http://i26.tinypic.com/2vx382e.gif);
background-position:center;
background-repeat:repeat;
display:block;
font-family:script;
border-bottom: 0px solid #000000;
font-size: 36px;
line-height:38px;
color:#000000;
background-color:#E0ADB0;
text-transform:none;
font-weight:normal;
text-align:center;
margin-top:10px;
padding-top:4px;
border-top: 1px solid hotpink!important;
border-bottom: 1px solid hotpink!important;

}



/* Posts
-----------------------------------------------
*/
h2.date-header {
background-image: url(http://i25.tinypic.com/mvi8nt.gif);
background-position:center;
background-repeat:no-repeat;
FONT-WEIGHT: normal;
FONT-SIZE: 36px;
TEXT-TRANSFORM: none;
width:445px; display:block;
align:center;
COLOR: #000000;
LINE-HEIGHT: 82px;
FONT-FAMILY: script;
border-bottom: 0px solid #E0B5B5; georgia;
LETTER-SPACING: 0px;
margin-top: 0px;
padding-left:3px;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

}

.post h3 a {
color:#000000!important;
background-image: url();
background-position:left;
background-repeat:no-repeat;
font-family:georgia;
font-size: 20px;
line-height:24px;
padding-left:3px;
background-color:;
display:block;
border-bottom:0px dotted #fd78eb;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
}
.post-body {
margin:0 0 .75em;
width:440px;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {

}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:0px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:0px dotted $bordercolor;
}

.main .Blog {
border-bottom-width: 0;
}


/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='l a y o u t . t e s t e r (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='column_wrapper'>
<b:section class='sidebar' id='sidebar-left'>
<b:widget id='HTML1' locked='false' title='About me' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Feed2' locked='false' title='tini ♥ charms' type='Feed'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
<b:section class='sidebar' id='sidebar-right' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Pricing' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Payment' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>


Mike
Look for this chunk of code near the top:

CODE
div {
scrollbar-arrow-color: black;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
base-color: #ffffff;
}
</style>

Try removing the closing style tag at the bottom.
imperfectionistx
Lol, worked :P Thanks, you can close this now~

manny-the-dino
Topic Closed and Moved
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.