Hi guys, first time here, I got a question on the layout with Margin on my website Windows 7 Hacker

The look I wanted it to be and it looks fine in Firefox 3.5.2, and Chrome, and Opera, some what okay in IE 8, but completely off in IE 7

The right look

alt text

the Look in IE 7 (with IE 8 compatibility mode )

alt text

and the Look in IE 8 a small margin difference from Firefox.

alt text

and Here is the code Sorry if its a bit massy.

 <div id="sidebar_widget" style="padding:0 0 5px 0;">

           <img src="<?php bloginfo('template_directory'); ?>/images/rss.png" style="margin-top:5px; margin-right:5px; float:left;" /><h2 class="rss"><a href="http://feeds2.feedburner.com/Windows7Hacker" style="color:#222; text-decoration:none;" target="_blank" >RSS Feed</a>  <div style="float:right; margin-right:-3px;"><a href="http://feeds.feedburner.com/Windows7Hacker"><img src="http://feeds.feedburner.com/~fc/Windows7Hacker?bg=FF9933&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></h2>  

           </div>


           <div id="sidebar_widget" style="padding:0 0 5px 0;">
           <img src="<?php bloginfo('template_directory'); ?>/images/email.png" style="margin-top:5px; margin-right:5px; float:left;" /><h2 class="rss"><a href="http://feedburner.google.com/fb/a/mailverify?uri=windows7hacker&amp;loc=en_US" target="_blank" style="color:#222; text-decoration:none;" >Email Subscription</a> </h2>     
       <div style="margin-left:40px;">
                 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onSubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=windows7hacker', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:180px" class="input" value="Sign Up here for email feed..." onfocus="if (this.value == 'Sign Up here for email feed...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Sign Up here for email feed...';}" name="email"/>
<input type="hidden" value="windows7hacker" name="uri"/>
<input type="submit" class="sbutton" value="Submit"  />
</form>
</div>
</div>


<div id="sidebar_widget" style="padding:0 0 20px 0;">

        <img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" style="margin-top:5px; margin-right:5px; float:left;" />
<h2 class="rss"><a href="http://twitter.com/windows7hacker"  style="color:#222; text-decoration:none;" target="_blank" >Twitter Updates</a> <div style="float:right;  margin-right:-3px;"> <script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=windows7hacker&style=blue"></script></div></h2>

     </div>

2 answers

danwellman 5600
1
point
This was chosen as the best answer

Ok, you need to float both the <h2 class="rss"> and the <a> element within the <h2> in order to get them to display correctly in IE7. You probably want to put these rules in a conditional comment targeting just IE7 so that it doesn't mess with the correct appearance in other browsers

Something like this in the <head> of the page should do it:

<!--[if IE 7]>
  #sidebar h2.rss, #sidebar h2.rss a { float:left; }
<![endif]-->
Answered over 7 years ago by danwellman
  • thanks your method works, just created a new CSS file for IE 7 Jonathan over 7 years ago
2
points

You should run your code through a validator - it throws up several errors, one of which is that you've used the id sidebar_widget multiple times.

That could be enough to confuse IE7.

ID's can only be used once per page, you should use classes instead.

Answered over 7 years ago by Tony Crockford
  • the thing with validator is that it doesn't really work sometimes. For example here this site, doctype.com I run a validator test got 100 errors http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdoctype.com%2F&profile=css21&usermedium=all&warning=1&lang=en see it yourself. So how do you justify that. Jonathan over 7 years ago
  • Knowing how to use the validator is why you do it, and I meant the html validator. There's no point looking for CSS bugs if your HTML is broken. see: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.windows7hacker.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 Tony Crockford over 7 years ago