Question

this search box won’t float to the right in IE8 on a wordpress site.
See a screenshot how it looks in FF and how it looks in IE8: http://www.abload.de/img/searchbox_bugl4z5.jpg

Code of the header.php (added float:right here but I guess that is not useful that way?):

<div id="topnav">
    <?php echo qtrans_generateLanguageSelectCode('image'); ?>
    <br />
    <form style="float:right;" role="search" method="get" id="searchform" name="searchform" action="#" >
        <div style="float:right;">
            <input class="text" type="text" value="Search for..." onfocus="if(this.value == 'Search for...'){this.value = '';}" name="s" id="s" />
            <input class="button-secondary" type="submit" id="searchsubmit" value="Search" />
        </div>
    </form>
</div><!-- /#topnav -->

CSS code:

#topnav{
    font:17px/17px Helvetica, Arial, sans-serif;
    padding:0;
    float:right;
    margin-top:23px;
}

I looked at some threads here but wasn’t really able to figure out the solution.

Thanks guys!

Answer 1

If your #topnav doesn’t need to be floated next to anything, you can fix it by removing all the style="float:right;" from your HTML and changing the #topnav CSS as follows:

#topnav{
    text-align: right;
    font:17px/17px Helvetica, Arial, sans-serif;
    padding:0;
    margin-top:23px;
} 

What the above does is make the #topnav container a 100% width, non-floated element that aligns everything inside to the right. You can see it in action here.

Feel free to post more code/screenshots if the above won’t work for you. If you’ve got a dev link we can look at, even better.