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

**jackum** · Mar 16, 2010 13:22

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>
</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??

**RyanReese** · Mar 16, 2010 13:53

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?

**Stomme poes** · Mar 16, 2010 14:41

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 % 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.

**jackum** · Mar 17, 2010 14:07

Originally Posted by jackum

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>
</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>
</div>
</div>
<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 !!!!

**jackum** · Mar 17, 2010 14:10

Sory guys, I hav rectified this problem, I hav missing a closing </a> tag..very sorry for that

**Stomme poes** · Mar 18, 2010 02:48

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 : )

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions