CODEWITHSUNDEEP
javascriptcssinternet-explorerinternet-explorer-7
Devin Dixon
Devin Dixon

Reputation: 12443

IE7 Floating Radio Button Problem

I am having problem in IE7 for regristration form I made for this site, and it only messes up on the bottom and only occurs in IE7. The page with the problem is this one:

https://www.iptlock.com/createaccount.php

The radio buttons on the bottom of this page appear in reverse order. I have them set up in CSS like this but this is not how they are displayed. Any ideas why?

    #packagechoice{
        width:20px;
        position:relative;
        margin-left:190px;
        margin-top:15px;
        float:left;
    }

    #packagechoice2{
        width:20px;
        position:relative;
        margin-left:190px;
        margin-top:15px;
        float:left;
    }
    #packagechoice3{
        width:20px;
        position:relative;
        margin-top:15px;
        float:left;
}

Upvotes: 0

Views: 680

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

When using float:left the leftmost item needs to appear first in your HTML. Your HTML is in reverse order.

EDIT:

The problem with your HTML is that the radio buttons and the packages are separate line-items. They appear distant in the HTML. Your code also suffers from DIV-itis. It lacks semantic structure which is why things aren't cooperating the way you expect.

Consider this:

<style>
.packages ul, .packages li {
    list-style:none;
    padding:0;
    margin:0;
}

.packages li {
   float:left;
}

.clear {
    clear:both;
}
</style>

<div class='packages'>
    <ul>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
        <li>
             --- your package ---
             --- your radio button ---
        <li>
   </ul>
   <div class="clear"></div>
</div>

Things that go together are LISTS. There is already a list tag in HTML: UL or OL, using it properly is important and is an excellent way to eliminate DIV-itis. Lists make semantic sense and are friendlier for search bots and screen readers.

There is an excellent article on taming lists.

Understanding how to use lists effectively is the difference between someone who is a hack and someone who is a pro. GO LEARN THIS.

Upvotes: 5

Related Questions