only 1 div item broken in IE8, but fine in Chrome, Firefox, and Safari, rest of site is fine
Posted: 06 July 2010 11:15 AM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2010-07-06

Hello,

I have a frustrating problem with the CSS code on my blog: http://beavmetal.blogspot.com.  It shows up fine in Chrome, Firefox, and Safari.  However, in IE8, the link header between the logo and the content is skewed right about 400px.  I have messed with it for about 6 hours and cannot figure out how to fix the misalignment in IE8.  I haven’t had a chance to check in in IE7 yet.

I hope one of you can help.  Keep in mind this is css as posted into the blogspot “edit html” box. 

My code is to long to post in here.  I have put the code in a public google doc: https://docs.google.com/document/edit?id=1CvDXIUMJOiRZIddGtXTHjnERuPhxJgbBL9o8lS7CkX4&hl=en&authkey=CO2dipQG

Specifically, the

#banner 

tag is where there is trouble.

Any help would be greatly appreciated.

Thanks,
Mike

Actually I guess I can paste some of the code here:

/*+++++++++++++++++++++++++ header +++++++++++++++++++++++++++++*/
#header{
    
floatleft;
    
width928px;height:125px;
    
background-image:url(http://2.bp.blogspot.com/_a4_aB1D3SsE/S3Osd_7Nh3I/AAAAAAAAAH0/2QNz7acadMM/S1600-R/beavmetalsblogkeysncode0.jpg);
    
margin:0;
    
padding:0;
}

#logo {
    
float:left;
    
width:380px;
    
margin:20px 0 0 20px;
    
color:$titlecolor;
    
font:$blogtitlefont;
}

#logo h1 {
    
display:block;
    
color:$titlecolor;
    
font:$blogtitlefont;
    
padding:0px;
}


#logo h1 a {
    
displayblock;
    
color:$titlecolor;
    
font:$blogtitlefont;
}

.description {
    font
:$descriptionfont;
    
color:#FFFFFF;
}
#banner {

<body>


  var 
_gaq _gaq || [];
  
_gaq.push([&#39;_setAccount&#39;, &#39;UA-664959-5&#39;]);
  
_gaq.push([&#39;_trackPageview&#39;]);

  
(function() {
    
var ga document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    
ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(ga);
  
})();


  <
div id='wrapper'>
    <
div id='header'>

<
b:section id='headerwrapper' locked='true' maxwidgets='1' showaddelement='no'>
<
b:widget id='Header1' locked='true' title='Beavmetal&apos;s Blog (Header)' type='Header'/>
</
b:section>


<
div id='banner'>
<
b:section id='tabs' showaddelement='no'>
<
b:widget id='LinkList2' locked='true' title='Top Tabs' type='LinkList'/>
</
b:section>
</
div>

</
div>
        
<!--
header-->
float:left;
white-space:nowrap;
margin13px 0 0 0;
padding-left:310px;

There is alot more code than that, which is why I setup the google docs link above.

Profile
 
 
Posted: 07 July 2010 03:39 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  3
Joined  2010-07-04

Validating your site through W3C you have 719 errors in your code and 43 errors in your CSS. The other browsers are sort of forgiving most of these errors, IE is a fussy witch and always gives coders headaches . Fix these errors and your problem may go away.

Profile
 
 
Posted: 07 July 2010 04:23 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2010-07-06

You make a valid point.  I will have to work on those errors.  Though, the CSS validation errors I see are mostly associated with stuff blogger injects or forces me to have in the code.

The problem also exists in IE7.  I just want to get the one #banner line aligned correctly.

Further suggestions are welcome.

Profile