Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 36
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts

    negative margin float trick not working IE

    http://www.readmetoo.co.uk/?stylesheet=Orange

    In mozilla and opera this works a treat, but in IE i get that extra 10.5em margin on the left. I know that the negative margin float trick works in IE, because I've used it before but i cant seem to figure out why this wont work.

    Any clues guys?
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's your problem:
    Code:
    	margin: -1px -10.1em 0 0;
    	width: 10em;
    The negative margin must be less than the width of the floated element, or IE has a tantrum.
    Also, if it still bugs out when you've done that, add position:relative; to all the elements involved. That's like the secret weapon when dealing with IE

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by mindlessLemming
    Here's your problem:
    Code:
    	margin: -1px -10.1em 0 0;
    	width: 10em;
    The negative margin must be less than the width of the floated element, or IE has a tantrum.
    Also, if it still bugs out when you've done that, add position:relative; to all the elements involved. That's like the secret weapon when dealing with IE
    Or zoom: 1.0; if you cannot alter the positioning property.

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jkd
    Or zoom: 1.0; if you cannot alter the positioning property.
    I've never heard of zoom in CSS, can you explain
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ReadMe's sig.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    zoom= IE proprietry evil.
    http://msdn.microsoft.com/workshop/a...rties/zoom.asp

    Only works in IE >= 5.5
    Known to knock off bullets from <ul>s.
    http://www.webmasterworld.com/forum83/4179.htm

    jkd: Can you tell us how it makes IE behave (in what situations)?
    Or is one of those magic bullets, like position:relative;
    Last edited by mindlessLemming; 08-12-2004 at 03:58 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    This is why. A lot of IE CSS bugs happen to come about simply because an element doesn't "have layout" (whatever the heck that means). So a * { zoom: 1.0; } at the top of your stylesheet can be a helpful thing, if you're dealing with a complicated float layout.

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Woohoo!
    That just solved a crazy bug I was having on my site

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    surely it wont validate then though?

    if the width has to be bigger than the negative margin, whats the point? wont it just cause an overlap (goes to try it)


    aww damn, you guys seemed so sure it'd work - still no juice with 10em and -9.9em margin
    Last edited by ReadMe.txt; 08-14-2004 at 01:28 AM.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #9
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by ReadMe.txt
    surely it wont validate then though?
    Code:
    <!--[if IE]>
    	<style type="text/css">* { zoom: 1.0; }</style>
    <![endif]-->
    Better?

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forgive me here, but I still don't zoom fully. Why do you need to declare it as a 'layout' for this to work in IE? I understand the purpose that it is an IE bug, so to speak -- but what does it actually do? Is it just telling this browser "This is now an active layout"... it confuses me slightly
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jkd
    Code:
    <!--[if IE]>
    	<style type="text/css">* { zoom: 1.0; }</style>
    <![endif]-->
    Better?
    guess so, last time i suggested doing something like that (not creating a session for the validator since form=fakeentry wont validate in php) i got slightly flamed lol.

    Anyway i thought about it a bit and realised that -ve margin float is for rightbars, nor leftbars and i got rid of it and it now works fine in lots of browsers. Can anyone verify IE5m and Safari?
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #12
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ReadMe.txt
    surely it wont validate then though?
    if the width has to be bigger than the negative margin, whats the point? wont it just cause an overlap (goes to try it)
    aww damn, you guys seemed so sure it'd work - still no juice with 10em and -9.9em margin
    Hmmm... for the sake of argument, try a pixel width instead of em's...
    The reason I suggest this is that I know IE needs that overlap. Check out this layout, it uses that technique and includes a decent explaination.

    I take no responsibility for the above nonsense.


    Left Justified

  • #13
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Safari looks good -- IE menu looks good. IE mac does other issues, that you may know of --aside from not seeing secondary navigation:
    Attached Thumbnails Attached Thumbnails negative margin float trick not working IE-picture-1.jpg  
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah well, seems to be ignoring my background images - prolly because those elements are empty - the image replacement technique i use seems to break on that too.

    While your here would you mind checking http://readmetoo.co.uk?stylesheet=Default in saf and IE5m? be nice if there were a way to emulate an os X environment and do this myself, but alas not.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #15
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE looks the same as safari (and mozilla builds) except two things:
    1. The 'Go' styled button is wider than the whole menu bar , not this way in the others, it actually overlaps
    2. secondary menu isn't showing
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •