#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    List ignoring float property in IE 10


    All right so basically, I have this very simple bit of code

    <div>

    <img src="the img" style="float: left; height: 195px; width: 50px; border-style:solid; border-width:3px; border-color:#36424B; margin:0px 20px 0px 0px;/>

    </div>

    <br><br>

    <div>
    <ul style="list-style-type:square">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    </ul>
    </div>

    agh since i'm a brand new user, i can't attach the images that go along with this probably.

    Anyways. So basically on chrome everything works properly, the image is on the leftmost part of the center content and the list bullets follow on the right.

    But in explorer, the bullets appear to the left on the image, while the text appears to the right of it.

    Any ideas how to fix this?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, Piicklepaws.

    First of all set the left margin of the list to 0 and give it some left padding. Then you may need to also give the list "overflow:hidden" to make its left edge not be overlapped by the image.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    An annotated screenshot can be helpful in answering questions. However, there is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0
    I've added all of that to my list, but it didn't fix it.

    <ul style="list-style-type:square; margin: 0px; padding-left: 20px; overflow: hidden;">

    Here's what it should look like:
    i6.photobucket.com/albums/y202/Xx1mortalxX/listhelp2_zps563deff0.png

    here's what it is looking like:

    i6.photobucket.com/albums/y202/Xx1mortalxX/listhelp1_zpsa7e08859.png


    (Sorry I know photobucket is incredibly slow but I'm at work right now and don't have time to create an imgur or imageshack account)
    Last edited by Kravvitz; August 30th, 2013 at 05:19 PM. Reason: removed unnecessary spaces from URLs
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    That's very odd. It works fine for me.

    Do you have an example page you could show us?

    (Sorry I know photobucket is incredibly slow but I'm at work right now and don't have time to create an imgur or imageshack account)
    No worries. Which site you use to host the images doesn't matter.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo