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{
float: left;
width: 928px;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 {
display: block;
color:$titlecolor;
font:$blogtitlefont;
}
.description {
font:$descriptionfont;
color:#FFFFFF;
}
#banner {
<body>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-664959-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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'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;
margin: 13px 0 0 0;
padding-left:310px;
}
There is alot more code than that, which is why I setup the google docs link above.