By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

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

P: 3
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
Share this Question
Share on Google+
5 Replies


Death Slaught
100+
P: 1,137
Try adding this:

Expand|Select|Wrap|Line Numbers
  1. li {
  2.   display:inline;
  3. }
Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Feb 15 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
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 5K+
P: 7,435
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

P: 3
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

P: 3
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.