472,984 Members | 2,147 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,984 software developers and data experts.

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:
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">
  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;    
  4. }
  6. #masthead li {
  7.     float: left;
  9. }
  11. #masthead li a.but1 {
  12.     width: 90px;
  13.     height: 40px;
  14.     display: block;
  15.     background-color: yellow;
  16. }
  18. ul#masthead2 {
  19.     width: 90px;
  20.     float: left;
  21. }
  23. #masthead2 li a.but2a {
  24.     width: 90px;
  25.     height: 20px;
  26.     display: block;
  27.     background-color: blue;
  28. }
  30. #masthead2 li a.but2b {
  31.     width: 90px;
  32.     height: 20px;
  33.     display: block;
  34.     background-color: red;
  35. }
  37. #masthead li a.but3 {
  38.     width: 90px;
  39.     height: 40px;
  40.     display: block;
  41.     background-color: green;
  42. }
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
5 1467
Death Slaught
1,137 1GB
Try adding this:

Expand|Select|Wrap|Line Numbers
  1. li {
  2.   display:inline;
  3. }
(' . ')
Feb 15 '08 #2
7,435 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
7,435 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. }
  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

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

Similar topics

by: Carriage Return | last post by:
Hi, I posted earlier because my content was disappearing on IE6, and was pointed towards the peekaboo bug site, http://www.positioniseverything.net/explorer/peekaboo.html I used the 'position:...
by: Frostillicus | last post by:
I've created a page that will contain a the thumbnails of photos I took in Beijing a couple of years back but since making each thumbnail <div> a float: left the <h1> tag in the document...
by: Barry Pearson | last post by:
I'm posting here because this is associated with the behaviour of a floated element. It has similarities to the IE 6 (on Windows) "peekaboo" bug, and I suspect was written by the same coder having...
by: Alex Bell | last post by:
Please look at the page http://www.members.iinet.net.au/~abell1/test/leaders.htm whose css file is city.css in the same directory. The page has a header, a left fixed and floated navigation div,...
by: Niels | last post by:
Hi group, I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example: <html><body> <div id='left' style='float:left;...
by: Tom | last post by:
Has anyone ever seen a IComparer for floats the returns magnitude. i.e. instead of returning -1, it would return -5. To let you know HOW different the two numbers are. obviously for int it is a -...
by: Daz | last post by:
Hello hello! I'm trying to finish off putting my design into HTML and I've come across a problem that I can't get my head around. I've got divs floating in two columns, but I'm having problems...
by: sbalko | last post by:
Hi, I am trying to read Java-floats (IEEE 754 encoding) stored in a binary file from C (gcc on linux/i386, more specifically). Unfortunately, C seems to expect floats to be stored somewhat...
by: donpro | last post by:
https://testbed.odysseyshipping.com/index.php This is driving me nuts. I've spent much time trying to style this page footer but because I cannot set widths using "display: inline". I've tried...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.