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 about 10 years ago by danwellman
  • thanks your method works, just created a new CSS file for IE 7 Jonathan about 10 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 about 10 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 about 10 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 about 10 years ago