New Blog: Visual Discrepancies Between Firefox & MSIE

Discussion in 'Web Design and Development' started by insidertrading, Feb 19, 2009.

  1. insidertrading macrumors newbie

    Joined:
    Feb 19, 2009
    #1
    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:

    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Just a quick tip for you. When posting code there are buttons to style the code in a more manageable manner so people have to deal with really long posts. For your code use the HTML button, which has the # on it. You can edit your initial post to change this. You may need to go to advanced mode for that button to be present.

    I don't have easy access to IE either at the moment so can't check much at the moment.

    Edit: Doh, I meant the button with <>. Oh well, the code button helps too.
     
  3. insidertrading thread starter macrumors newbie

    Joined:
    Feb 19, 2009
  4. insidertrading thread starter macrumors newbie

    Joined:
    Feb 19, 2009
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    The elements you mentioned look almost identical in my MSIE 7 and FF 3 on Windows, the only other major thing I noticed was the Google custom search (near the top right) is on the IE browser and missing from FF, and I suspect it's causing the horizontal scroll bars in both browsers due to its positioning. An old trick is to apply borders temporarily to everything so you can see how elements line up. Good to see you try XHTML strict but validation of your site fails, and I mean -- badly. Over 1046 errors, 211 warnings, many due to analytics but also many parsing errors. I strongly, strongly suggest you use transitional for the time being!

    Beyond that, the horizontal lines between pics and even those dotted lines look the same so even though you explained where to look, either you fixed it or I'm not finding it.

    -jim
     

Share This Page