Hi Guys,
This is my first post here so bear with me if I'm not going about this the right way.
Anyway, I started blogging a month ago and decided to build my own template (some elements of which where compiled from a number of existing templates) on Blogger. Unfortunately, I'm not exactly html savvy so half the time I didn't know what I was doing. I was using Firefox at the time of building the template so, on Firefox everything looks as planned. Earlier today, I viewed my blog on Internet Explorer and realized that all the line widths and text box widths were completely out of wack with the images.
This problem only happens when I view the page in IE but is remedied on Firefox and Safari. I'd post pictures but at the moment I don't have access to the Internet Explorer program on this computer.
My blog's URL is... http://thisbrandedyouth.blogspot.com
My concern is mostly with the text boxes and line widths being much shorter than anticipated when viewed on Internet Explorer. Hopefully there is some way to make the the appearance of my blog consistent on all (or at least most) browsers. Here is my blog's html template:
Any help would be greatly appreciated!
Best,
Matt
This is my first post here so bear with me if I'm not going about this the right way.
Anyway, I started blogging a month ago and decided to build my own template (some elements of which where compiled from a number of existing templates) on Blogger. Unfortunately, I'm not exactly html savvy so half the time I didn't know what I was doing. I was using Firefox at the time of building the template so, on Firefox everything looks as planned. Earlier today, I viewed my blog on Internet Explorer and realized that all the line widths and text box widths were completely out of wack with the images.
This problem only happens when I view the page in IE but is remedied on Firefox and Safari. I'd post pictures but at the moment I don't have access to the Internet Explorer program on this computer.
My blog's URL is... http://thisbrandedyouth.blogspot.com
My concern is mostly with the text boxes and line widths being much shorter than anticipated when viewed on Internet Explorer. Hopefully there is some way to make the the appearance of my blog consistent on all (or at least most) browsers. Here is my blog's html template:
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 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
/*-----------------------------------------------------------------------------------------------
Global Styles
-----------------------------------------------------------------------------------------------*/
* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
/*-----------------------------------------------------------------------------------------------
Layout / Base Page Styling
-----------------------------------------------------------------------------------------------*/
body{
background: #000000;
color:#BFBFBF;
font-size:11.85px;
font-family:"Helvetica", "Helvetica", "Helvetica", Helvetica, Helvetica, sans-serif;
}
/* This class sets the width and position for all rows */
.inside{
width:80%;
min-width:65em;
max-width:76.15em;
margin:0 auto;
}
a{
color:#CCC;
}
h1{
color:#CCC;
font-size:1.5em;
font-weight:normal;
margin:1.5em 0;
}
h2, h3{
font-size:1.15em;
color:#FFF;
font-weight:normal;
}
#primary h2{
color:#CCC;
}
p, .post-body{
line-height:1.32em;
}
ul li{
list-style-type:square;
margin:0.5em 0 0.5em 2em;
}
blockquote{
margin-left:1.5em;
padding-left:1.5em;
border-left:1.5px solid #CCC;
color:#CCC;
}
pre{
width:100%;
padding:1em 0;
overflow:auto;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}
table{
width:100%;
border-spacing:2px;
margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }
table th{
background:#CCC;
color:#000;
text-align:left;
}
table td{
background:#333;
color:#FFF;
}
table caption{
text-align:left;
color:#FFF;
margin-bottom:-1em;
margin-top:1em;
}
.rule{
border-top:1px solid #CCC;
height:1px;
font-size:1px;
line-height:1px;
margin:1.5em 0;
}
/*-----------------------------------------------------------------------------------------------
Header
-----------------------------------------------------------------------------------------------*/
#header{
background:#000;
}
#header .inside{
padding:2.5em 0;
}
#header h2{
font-size:2.25em;
margin:0 0.5em 0 0;
padding:0 5em .2em 0;
border-right:1px solid #000;
float:left;
}
#header h2 a{ text-decoration:none; }
#header p{
padding:2.4em 0;
margin:0;
line-height:1em;
}
/*-----------------------------------------------------------------------------------------------
Primary Items
-----------------------------------------------------------------------------------------------*/
#primary{
background:#000;
padding:1px 0 0 0;
color:#A0A0A0;
}
#primary.onecol-stories .primary{
float:left;
width:50%;
margin:0 0 5% 0;
}
#primary.onecol-stories .secondary{
float:right;
width:40%;
margin:0 0 0 10%;
}
#primary.onecol-stories .story{
float:left;
width:48%;
margin:0 2% 15px 0;
display:inline;
}
* html #primary.onecol-stories .story{
margin-left:2%;
}
#primary.onecol-stories .first, * html #primary.onecol-stories .first{
margin:0 0 0 0;
}
.story h3{
font-size:1.15em;
margin:0 0 1.5em 0;
font-weight:normal;
color:#CCC;
}
.story h3 a{
color:#CCC;
text-decoration:none;
border-bottom:1px dotted #666;
}
.story .details{
margin:1em 0;
text-align:right;
border-top:1px solid #333;
padding:0.5em 0;
font-size:0.95em;
color:#666;
}
.story .details .read-on{
background:url([url]http://i61.photobucket.com/albums/h59/c_stavanger/hemingway/readon_black.gif[/url]) 100% 60% no-repeat;
padding-right:20px;
display:block;
}
.story .details a{
color:#666;
text-decoration:none;
}
.story .details a:hover{ color:#FFF; }
/* Single Post Styles */
#primary .primary{
float:right;
width:65%;
margin:0 0 15px 0;
}
#primary .secondary{
float:left;
width:30%;
margin-right:5%;
padding-top:0.65em;
display:inline;
}
* html #primary .secondary{ margin-right:3%; }
.secondary .featured p{
border-bottom:1px solid #333333;
border-top: 1px solid #333333;
padding:0.5em 0 0.6em 0;
line-height:1.5em;
margin:1em 0 0 0;
}
.secondary .featured dl{
margin:0 0;
border-bottom:1px solid #333333;
padding:0.5em 0 0.6em 0;
}
.secondary dt{
display:inline;
margin:0;
padding:0;
color:#AAA;
}
.secondary dd{
display:inline;
margin:0;
padding:0;
}
.secondary dd a{ color:#808080; }
.secondary dd a:hover{ color:#FFF; }
.single-post h1, .single-post h2{ margin-top:0; }
/*-----------------------------------------------------------------------------------------------
Secondary Items
-----------------------------------------------------------------------------------------------*/
#secondary{
background:#0C0C0C;
padding:1px 2em;
border-top:1px solid #1C1C1C;
}
.comment-head{
border-bottom:1px solid #1C1C1C;
padding:0.8em 2em 1.0em 2em;
}
.comment-head h2{
font-size:1.5em;
margin:0;
}
.comment-head a{
text-decoration:none;
color:#868686;
}
.comment-head .details{
font-size:0.95em;
}
ol#comments{
list-style-type:none;
margin:2em 0;
}
ol#comments li{
list-style-type:none;
margin:2em 0;
}
#comments cite{
float:left;
width:31%;
font-style:normal;
text-align:right;
}
* html #comments cite{ width:30.6%; }
#comments cite span{
display:block;
}
#comments cite .author{ font-size:1.2em; }
#comments cite .author a{
text-decoration:none;
}
#comments cite .admin-tools{
margin:5px 0;
}
#comments cite .admin-tools a{
float:right;
margin:0 5px;
padding:0px 3px 3px;
background:#666;
border:1px solid #999;
text-decoration:none;
}
#primary .secondary .admin-tools{ margin:1em 0; }
#preview{
margin:1em 0;
padding:0.5em;
border:1px solid #333;
}
#preview p{ margin:1em 0 0 0; }
#errors{ color:#FF0000; font-weight:bold; }
#comments .pingback cite .author{
display:block;
padding-top:68px;
background:url([url]http://i61.photobucket.com/albums/h59/c_stavanger/hemingway/trackback_pingback.gif[/url]) 100% 0 no-repeat;
}
#comments .content{
float:left;
width:60%;
margin-left:1.9%;
border-left:1px solid #868686;
padding: 0 0 0 2%;
}
#comments .content p{
margin:0 0 1em 0;
}
#comments .content h3{
margin:0;
font-size:1em;
}
#comment-form{
margin:5em 0 5em 35.4%;
width:36em;
}
input.textfield{
width: 15em;
margin:5px 0;
}
textarea.commentbox{
width:28em;
height:10em;
padding:0.25em;
margin:5px 0;
font-size:1.25em;
font-family:Arial, Helvetica, sans-serif;
}
label.text{
position:relative;
left:0.5em;
top:-0.5em;
}
.formactions input.submit{
float:right;
margin:-1em 0 0 0;
padding:0 0.5em;
}
.formactions .spinner{
float:right;
margin:-8px -20px 0 0;
}
/*-----------------------------------------------------------------------------------------------
Ancillary Items
-----------------------------------------------------------------------------------------------*/
#ancillary{
padding:2em 0 0 0;
}
#ancillary .widget{
float:left;
width: 30%;
margin:0 3% 0 0;
}
* html #ancillary .widget{
margin-left:3.9%;
}
#ancillary .twice-length{ width:65%; }
#ancillary .thrice-length{ width:100%; }
#ancillary .first, * html #ancillary .first{
clear:both;
margin:0;
}
#ancillary .block-separator{
clear:both;
height:2.5em;
}
#ancillary .widget h2, #ancillary .widget h3{
margin:0 0 2em 0;
}
ul.dates, ul.counts, ul.blogroll ul, ul.pages{
list-style-type:none;
margin:1.5em 0 2em 0;
border-top:1px solid #3D3D3D;
}
ul.dates li, ul.counts li, ul.blogroll ul li, ul.pages li{
list-style-type:none;
margin:0;
padding:0.5em 0;
border-bottom:1px solid #3D3D3D;
}
ul.dates .date{
color:#858585;
padding:0 1.5em 0 0;
}
ul.counts .count{
float:right;
color:#858585;
}
ul.dates a, ul.counts a, ul.blogroll a, ul.pages a{
color:#BFBFBF;
text-decoration:none;
}
ul.dates a:hover, ul.dates a:hover .date, ul.counts a:hover, ul.counts a:hover .count, ul.blogroll a:hover, ul.pages a:hover{
color:#FFF;
}
ul.blogroll{ margin-top:0; }
ul.blogroll li{
list-style-type:none;
margin:0;
}
ul.pages ul{
margin:0;
}
ul.pages ul li{
border:none;
margin-left:2em;
list-style-type:square;
}
/*-----------------------------------------------------------------------------------------------
Foooter
-----------------------------------------------------------------------------------------------*/
#footer{
clear:both;
color:#939393;
}
#footer .inside{
background:url([url]http://i61.photobucket.com/albums/h59/c_stavanger/hemingway/footer_black.gif[/url]) 50% 0 repeat-x;
margin-top:2em;
padding:1em 0;
}
#footer p{
margin:0 0 1em 0;
font-size:0.95em;
}
#footer p.copyright{ float:left; }
#footer p.attributes{ float:right; }
#footer p.attributes a{
padding:0 0 0 0;
text-decoration:none;
color:#525252;
}
#footer p.attributes a:hover{
color:#FFF;
}
/*-----------------------------------------------------------------------------------------------
Search
-----------------------------------------------------------------------------------------------*/
#search{
float:right;
width:0px;
margin:0 0 0 0;
-moz-opacity:0;
text-align:right;
}
#search:hover{
-moz-opacity:1.0;
}
#search .searchimg{
float:left;
width:14px;
height:13px;
margin: 0 0 0 2px;
background:url([url]http://i61.photobucket.com/albums/h59/c_stavanger/hemingway/search.gif[/url]) 0 0 no-repeat;
position:relative;
top:4px;
border:0px;
}
#search input{
width:175px;
font-size: 0.85em;
background:#CCC;
margin-top:2px;
}
#search input:focus{
background:#FFF;
}
#searchform{
margin:1em 0;
}
#searchform #s{
background:#222;
border:none;
border-bottom:1px solid #333;
width:30em;
color:#666666;
padding:0.25em;
}
#searchform #searchsubmit{
background:#000;
color:#666;
border:none;
font-size:0.9em;
text-transform:uppercase;
letter-spacing:0.25em;
}
/* Legacy Typo CSS */
#search-results{
width:30%;
background:#333;
padding:0 0 0 0;
float:right;
-moz-opacity:0.9;
border-top:1em solid #000;
}
#search-results h3{
font-weight:bold;
text-align:left;
margin:0;
padding:0 0 1em 0;
background:#000;
}
#search-results small{
display:block;
text-align:left;
font-size:0.9em;
padding:0.5em 1em 0.7em 1em;
border-top:1px solid #666;
border-bottom:1px solid #555;
}
#search-results small a{
color:#CCC;
}
#search-results ul li{
list-style-type:none;
padding:0 1em 0.5em 1em;
margin:0.5em 0;
}
#search-results ul li:hover{
background:#202020;
}
#search-result ul{ margin:0; }
#search-results ul li a{
text-decoration:none;
border-bottom:1px dotted #CCC;
}
#search img.archives-icon{
margin:0 7px 0 0;
top:1px;
}
]]></b:skin>
</head>
<body>
<!-- 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'>
<b:section class='inside' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='THIS BRANDED YOUTH (Header)' type='Header'/>
</b:section>
</div>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='ancillary'><div class='inside'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile2' locked='false' title='INFORMATION' type='Profile'/>
<b:widget id='BlogArchive2' locked='false' title='ARCHIVES' type='BlogArchive'/>
</b:section></div></div><!-- spacer for skins that want sidebar and main to be the same height--></body></html>Any help would be greatly appreciated!
Best,
Matt
