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 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Unhappy IE is creating margins

    Ok so I have a container that contains another div thats 230px and floating left and a picture floating right thats 480px. The div would be 240px to fill the 720px div but because Ie is creating a weird margin (3px from right and 3px from below) i had to make it smaller. Anyway, I've included a supporting picture to help me explain.

    http://img339.imageshack.us/img339/3...orerfixqt1.png

    The top picture is perfect apart from the width of the left div. The right div is perfectly positioned. However in internet explorer, for some reason there is like a margin or padding (no idea what it is). Here are the css styles for the divs:

    Code:
      div#navigation  {
          width:720px;
          height:150px;
          clear:both;
          display:table;
          margin-left:auto;
          margin-right:auto;
          margin-top:none;
          margin-bottom:40px;
          background-color:black;
          background-image:none;
      }
    
      div#navigation-list  {
          width:230px;
          height:150px;
          float:left;
          display:table-cell;
          padding:0px;
          background-color:white;
          background-image:none;
      }
    
      div#navigation  img#navigation-image  {
          width:480px;
          height:150px;
          float:right;
          display:table-cell;
          padding:0px;
          background-color:#111111; 
          border:none;
      }

    I don't quite know what's causing it to create these margins, can someone please help? If you need more info, just let me know. Thanks in advance.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #2
    New Coder
    Join Date
    Nov 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    * {
    margin: 0px;
    padding: 0px;
    }

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    for me, first you must correct your css syntax, cause there are errors

    like this...

    Code:
    padding:0px;
    and even this is wrong..
    Try this:

    * {
    margin: 0px;
    padding: 0px;
    }
    then if that doesn't work, i suggest to count the sum of the widths you are styling.. as i see it, the rounder corner thing is a fixed with image, right? there's a black space there, simply because, when you applied margins and paddings you should always take into consideration, what width you have declared..

    but i see that you used auto in your margins.. maybe its just the typo i placed up there..

    oh my bad, the rounder corner thing was a floated image... not a fixed width image..

    good luck...
    Last edited by jhaycutexp; 11-28-2008 at 05:36 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Hi GSimpson, could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    There is no point in talking about the cross browser issues before fixing the errors in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0

    First and foremost, you must have a valid DOCTYPE at the top!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok then, I'll go sort all of that out then come back and bump up the thread if there is still internet explorer issues. Which I really believe will still be there.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Which I really believe will still be there.
    May be, but we will be able to find out a reliable solution then.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok, so I realise now that IE7.0 is a more standard-reliable browser than IE6.0 and by setting a doctype and charset, I was able to fix the problem for 7.0. The only browser still giving me issues is IE6.0, is there a commonly heard of bug with 6.0 that will fix it?

    I have googled it, but did not find any results to suit this situation.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    html>body  div#navigation  a  {
           width:230px;
    	      height:24px;
    	     float:left;
    	      padding-left:0px;
          padding-right:10px;
          background-color:#333333;
          background-image:none;
          border-top:none;
          border-bottom:solid 1px #666666;
          color:#888888;
          font-size:10px;
          font-family:"verdana",sans-serif;
          text-decoration:none;
          text-align:right;
          line-height:25px;
      }
    div#navigation  a  {
          width:240px;
          height:24px;
          float:left;
          padding-left:0px;
          padding-right:10px;
          background-color:#333333;
          background-image:none;
          border-top:none;
          border-bottom:solid 1px #666666;
          color:#888888;
          font-size:10px;
          font-family:"verdana",sans-serif;
          text-decoration:none;
          text-align:right;
          line-height:25px;
      }
    Your way of applying CSS in conditional comment for IE is not good. What's the use of repeating the same styles in another stylesheet? It makes very hard to know which styles are active and there by makes it hard to debug.

    I don't see any use for your ie-fixes.css. So have a try by removing your conditional comment and then changing your default.css like
    Code:
    div#navigation  {
          width:720px;
          height:150px;
          clear:both;
         /* display:table;*/
          margin-left:auto;
          margin-right:auto;
          margin-top:none;
          margin-bottom:40px;
          background-color:black;
          background-image:none;
      }
    div#navigation-list  {
         /* width:240px;*/
          height:150px;
          /*float:left;
    		display:table-cell;*/
    		margin-right:490px;
          padding:0px;
          background-color:white;
          background-image:none;
      }
    div#navigation  a  { /* changed html>body  div#navigation  a , I'd recommend you to remove all selectors like html>body to make it compatible for IE too*/
           /*width:230px;
    	      height:24px;
    	     float:left;*/
    	  display:block;
          padding-left:0px;
          padding-right:10px;
          background-color:#333333;
          background-image:none;
          border-top:none;
          border-bottom:solid 1px #666666;
          color:#888888;
          font-size:10px;
          font-family:"verdana",sans-serif;
          text-decoration:none;
          text-align:right;
          line-height:25px;
      }
    Good luck!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    The point of IE-Fixes.css is to fix padding issues with IE. Because IE interprets it different from other browsers, by not adding the padding on, it just puts it on the original width/height. So that stylesheet is required. I need IE to be looking at it's own style and thats why I have html>body in the other one. To stop IE from going over what I set for it in the fixes stylesheet but still getting all the other elements styled in default.css that do not have a "html>body" prefix.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Umm.. you may need to add
    Code:
    *{
    margin:0;
    padding:0;
    }
    into your CSS.
    To stop IE from going over what I set for it in the fixes stylesheet but still getting all the other elements styled in default.css that do not have a "html>body" prefix.
    I know the use of that selector, but I don't find that much use in your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    If I don't have the selector in use, then IE will use that stylesheets instead of the IE-Fixes one. Therefore not implying the padding on the selected elements. And they are required, not to be in a separate stylesheet, but that helps me keep the coding clean.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Believe me... (take a backup and)Just remove the link to that CSS for a while and all the html>body from the selectors. Also add the style in my above post and re-upload them. Let's try to find a better solution.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    GSimpson (12-02-2008)

  • #15
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hey mate, I did what you said, and for some reason internet explorer now renders padding the exact same way as Firefox etc. What caused that?

    Also the bug seems to have gone away apart from a small bottom margin on #navigation-image, which I'm sure I can fix with zoom etc.

    Thank you so much.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.


  •  
    Page 1 of 2 12 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
    •