IE floats bug (maybe peekaboo) but can't understang how to solve

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • alexzeta
    New Member
    • Feb 2008
    • 3
    #1

    IE floats bug (maybe peekaboo) but can't understang how to solve

    Hello to all forum members,

    I can't solve this strange behaviour of IE6 (win); I need to make one row of 90x40px buttons with one of them divided horizontally in two mini-buttons of 90x20px.

    This is the screenshots as it should be (safari/mac):


    And this is IE6/win:


    i've prepared a simple html and css test to illustrate it:
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" media="all" />
</head>
<body>
	<ul id="masthead">
		<li><a class="but1" href="#"></a></li>
			<ul id="masthead2">
				<li><a class="but2a" href="#"></a></li>
				<li><a class="but2b" href="#"></a></li>
			</ul>
			<li><a class="but3" href="#"></a></li>
	</ul>
</body>
</html>
    CSS (I've omitted all the css-reset rules that came before):
    Code:
    ul#masthead {
	width: 270px;	

}

#masthead li {
	float: left;

}

#masthead li a.but1 {
	width: 90px;
	height: 40px;
	display: block;
	background-color: yellow;
}

ul#masthead2 {
	width: 90px;
	float: left;
}

#masthead2 li a.but2a {
	width: 90px;
	height: 20px;
	display: block;
	background-color: blue;
}

#masthead2 li a.but2b {
	width: 90px;
	height: 20px;
	display: block;
	background-color: red;
}

#masthead li a.but3 {
	width: 90px;
	height: 40px;
	display: block;
	background-color: green;
}
    I've searched a lot and examined the peekaboo bus as described in positionisevery thing.net. But there should be something that i can't get.

    Can you help me?

    Thanks in advance

    Alex - Italy
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Try adding this:

      [CODE=css]li {
      display:inline;
      }[/CODE]

      Thanks,
      {\_/}
      (' . ')
      (")[DEATH](")
      (")(")

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          IE likes to insert margin where there is none. Your items add up to 270px which is the width of hte container so IE will screw up whatever it can and that's it. See if you can adjust the width a few px to fix it.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Well, forget that. It's not the problem. I'll have to look again later.

              btw, Not everyone knows what "css reset" is so you need to include that for them.

                Comment

                • alexzeta
                  New Member
                  • Feb 2008
                  • 3
                  #5
                  I've tried adding:

                  Code:
                  li	{
	display: inline;
}
                  and also to expand the container masthead width to 500px, but it doesn't work..

                  Originally posted by drhowarddrfine
                  btw, Not everyone knows what "css reset" is so you need to include that for them.
                  And this is the remaining css resetting rules:
                  Code:
                  /* @group Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* @end */
                  I also start thinking that it is not the peekaboo bug..

                    Comment

                    • alexzeta
                      New Member
                      • Feb 2008
                      • 3
                      #6
                      Originally posted by alexzeta
                      I also start thinking that it is not the peekaboo bug..
                      It's not related to css.. The cause seems to be the charset definition; i'm making some tests..

                        Comment

                        Previous template Next
                        Working...