467,915 Members | 1,283 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>test</title>
  7. <link rel="stylesheet" type="text/css" href="test.css" media="all" />
  8. </head>
  9. <body>
  10.     <ul id="masthead">
  11.         <li><a class="but1" href="#"></a></li>
  12.             <ul id="masthead2">
  13.                 <li><a class="but2a" href="#"></a></li>
  14.                 <li><a class="but2b" href="#"></a></li>
  15.             </ul>
  16.             <li><a class="but3" href="#"></a></li>
  17.     </ul>
  18. </body>
  19. </html>
CSS (I've omitted all the css-reset rules that came before):
Expand|Select|Wrap|Line Numbers
  1. ul#masthead {
  2.     width: 270px;    
  3.  
  4. }
  5.  
  6. #masthead li {
  7.     float: left;
  8.  
  9. }
  10.  
  11. #masthead li a.but1 {
  12.     width: 90px;
  13.     height: 40px;
  14.     display: block;
  15.     background-color: yellow;
  16. }
  17.  
  18. ul#masthead2 {
  19.     width: 90px;
  20.     float: left;
  21. }
  22.  
  23. #masthead2 li a.but2a {
  24.     width: 90px;
  25.     height: 20px;
  26.     display: block;
  27.     background-color: blue;
  28. }
  29.  
  30. #masthead2 li a.but2b {
  31.     width: 90px;
  32.     height: 20px;
  33.     display: block;
  34.     background-color: red;
  35. }
  36.  
  37. #masthead li a.but3 {
  38.     width: 90px;
  39.     height: 40px;
  40.     display: block;
  41.     background-color: green;
  42. }
  43.  
  44.  
I've searched a lot and examined the peekaboo bus as described in positioniseverything.net. But there should be something that i can't get.

Can you help me?

Thanks in advance

Alex - Italy
Feb 15 '08 #1
  • viewed: 1232
Share:
5 Replies
Death Slaught
1GB
Try adding this:

Expand|Select|Wrap|Line Numbers
  1. li {
  2.   display:inline;
  3. }
Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 15 '08 #2
drhowarddrfine
Expert 4TB
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.
Feb 16 '08 #3
drhowarddrfine
Expert 4TB
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.
Feb 16 '08 #4
I've tried adding:

Expand|Select|Wrap|Line Numbers
  1. li    {
  2.     display: inline;
  3. }
and also to expand the container masthead width to 500px, but it doesn't work..

btw, Not everyone knows what "css reset" is so you need to include that for them.
And this is the remaining css resetting rules:
Expand|Select|Wrap|Line Numbers
  1. /* @group Reset */
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  3.     margin:0;
  4.     padding:0;
  5. }
  6. table {
  7.     border-collapse:collapse;
  8.     border-spacing:0;
  9. }
  10. fieldset,img { 
  11.     border:0;
  12. }
  13. address,caption,cite,code,dfn,em,strong,th,var {
  14.     font-style:normal;
  15.     font-weight:normal;
  16. }
  17. ol,ul {
  18.     list-style:none;
  19. }
  20. caption,th {
  21.     text-align:left;
  22. }
  23. h1,h2,h3,h4,h5,h6 {
  24.     font-size:100%;
  25.     font-weight:normal;
  26. }
  27. q:before,q:after {
  28.     content:'';
  29. }
  30. abbr,acronym { border:0;
  31. }
  32.  
  33. /* @end */
I also start thinking that it is not the peekaboo bug..
Feb 16 '08 #5
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..
Feb 16 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Carriage Return | last post: by
5 posts views Thread by Frostillicus | last post: by
3 posts views Thread by Barry Pearson | last post: by
5 posts views Thread by Alex Bell | last post: by
18 posts views Thread by Niels | last post: by
8 posts views Thread by Tom | last post: by
6 posts views Thread by sbalko | last post: by
1 post views Thread by donpro | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.