SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double margin-unable to rectify with "inline" of the floated element

    Hi all, I hav an issue with float element while using IE8/earlier. I use Display:inline in CSS but still hav double margin issue while foating the element. I put the codes, pls help me to remove the extra spaces/unwanted spaces.

    HTML CODE:
    <div id="header">
    <div id="logophoto"><a href="#"><img src="images/logo.gif" border="0" width="86" height="28" alt="ManipalEdu"></div>
    <div id="h_menu">
    <ul>
    <li><a href="#">Preference</a> | </li>
    <li><a href="#">Contact</a> | </li>
    <li><a href="#">Help </a> </li>
    </ul>
    </div><!--end of h_menu-->
    </div>

    CSS CODE:

    #header{
    margin:0px;
    padding:0px;
    height:40px;
    width: 100%;
    background-color:#fff;
    }

    #logophoto{
    float:left;
    margin-left:30px;
    margin-top:1px
    }
    #h_menu{
    float:right;
    margin: 20px 3px 0 0;
    padding:0;
    border: solid red 1px;
    }
    #h_menu ul{
    list-style-type:none;
    margin:0;
    padding:3px;
    }
    #h_menu li{
    display:inline;
    }
    #header #h_menu li a {
    list-style-type:none;
    text-align:center;
    font-weight: bold;
    color:#333;
    font-size:11px;
    }

    I hav put border red in h_menu to see the problem, u can find a small box on right side of h_menu box. I dont knw how it come that bug, pls help me to rectify this bug???? if possible, pls also tell me the reason why??

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    1) Learn to type correctly. I just needed to say that lol
    2) The double float margin bug only happens in IE6.
    3) You are falling to that bug (just by looking at the CSS) on these elements
    Code:
    #logophoto{
    float:left;
    margin-left:30px;
    margin-top:1px
    }
    #h_menu{ 
    float:right;
    margin: 20px 3px 0 0;
    padding:0;
    border: solid red 1px;
    }
    Add display:inline; to both.

    4) Can you put a link online for us to test?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You will also want to put widths on those floats. While it's no longer required by the CSS specs to put widths on floats, IE (esp IE6) can still have issues with widthless floats. These widths can be in &#37; if you want.

    *edit also, we cannot see if you have a full and proper doctype. Without a complete doctype, IE (even IE8) will go into Quirks Mode, and assume your page was built in the heady days of grunge bands and the Internet bubble. Enough people don't have doctypes that we cannot assume there is one. If you don't have one, this could also be a source of strange display in all IEs for you.

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jackum View Post
    Hi all, I hav an issue with float element while using IE8/earlier. I use Display:inline in CSS but still hav double margin issue while foating the element. I put the codes, pls help me to remove the extra spaces/unwanted spaces.

    HTML CODE:
    <div id="header">
    <div id="logophoto"><a href="#"><img src="images/logo.gif" border="0" width="86" height="28" alt="ManipalEdu"></div>
    <div id="h_menu">
    <ul>
    <li><a href="#">Preference</a> | </li>
    <li><a href="#">Contact</a> | </li>
    <li><a href="#">Help </a> </li>
    </ul>
    </div><!--end of h_menu-->
    </div>

    CSS CODE:

    #header{
    margin:0px;
    padding:0px;
    height:40px;
    width: 100%;
    background-color:#fff;
    }

    #logophoto{
    float:left;
    margin-left:30px;
    margin-top:1px
    }
    #h_menu{
    float:right;
    margin: 20px 3px 0 0;
    padding:0;
    border: solid red 1px;
    }
    #h_menu ul{
    list-style-type:none;
    margin:0;
    padding:3px;
    }
    #h_menu li{
    display:inline;
    }
    #header #h_menu li a {
    list-style-type:none;
    text-align:center;
    font-weight: bold;
    color:#333;
    font-size:11px;
    }

    I hav put border red in h_menu to see the problem, u can find a small box on right side of h_menu box. I dont knw how it come that bug, pls help me to rectify this bug???? if possible, pls also tell me the reason why??
    Sorry, I am new, so i am not able to detect the bug, may be not a double margin bug. I have put the complete code here,

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Assigments</title>

    <style>
    body{
    margin:0px;
    padding:0px;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#F2F2F2;
    color:#333;
    }
    #wrapper{
    width:1002px;
    margin:0px auto;
    padding:0px;
    border: solid black 1px;
    text-align:left;
    }
    #header{
    margin:0px;
    padding:0px;
    height:40px;
    width: 100%;
    background-color:#fff;
    }
    #logophoto{
    float:left;
    margin-left:30px;
    margin-top:1px
    }
    #h_menu{
    float:right;
    margin: 20px 3px 0 0;
    padding:0;
    width:180px;
    height:20px;
    border: solid red 1px;
    }
    #h_menu ul{
    list-style-type:none;
    margin:0;
    padding:3px;
    }
    #h_menu li{
    display:inline;
    }
    #header #h_menu li a {
    list-style-type:none;
    text-align:center;
    font-weight: bold;
    color:#333;
    font-size:11px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <div id="logophoto"><a href="#"><img src="images/logo.gif" border="0" width="86" height="28" alt="Edu"></div>
    <div id="h_menu">
    <ul>
    <li><a href="#">Preference</a> | </li>
    <li><a href="#">Contact</a> | </li>
    <li><a href="#">Help </a> </li>
    </ul>
    </div><!--end of h_menu-->
    </div><!--end of header-->
    </div><!--end of wrapper-->
    <body>
    </body>
    </html>

    The problem is, while i was trying to float a div right which is meant for a horizontal top menu, a space is there b/w right edge of wrapper and that div, I hav run this in IE 8, I hav put the width for that div & u can clear see what is the problem is. But in Mozilla, it is fine, no problem is there. Any help !!!!

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sory guys, I hav rectified this problem, I hav missing a closing </a> tag..very sorry for that

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Great, though. This is good: whenever you run into a bug, first run your code through the validator to catch silly things like typos and unclosed tags...

    Even I forget to do this before bug-hunting, but if a typo is the cause, it will always save you hair. I've lost a lot of hair, but you can still keep yours if you start on this path early : )


Bookmarks

Posting Permissions

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