473,383 Members | 1,748 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 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:
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
5 1474
Death Slaught
1,137 1GB
Try adding this:

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

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

Similar topics

1
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:...
5
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...
3
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...
5
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,...
18
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;...
8
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 -...
9
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...
6
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...
1
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...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.