[WSG] Overflow hidden and floated divs

2010-07-15 Thread Stevio
I have a row of floated list items inside a container with height 1.2em, 
which is inside a parent div with a background colour.


e.g. something like this (not the actual HTML of course ;) -
div with background colour
 ul with height 1.2em
   li floated/li
   li floated/li
   li floated/li
 /ul
/div

If the floated list items were too wide, the rightmost list item jumped down 
beneath, but the container did not expand so it looked bad.


However, if I add overflow:hidden; to the parent div, then the rightmost 
list item still jumps down, but now the box expands down the way, so it 
looks a lot better.


My question is why does it do this? I have looked up what overflow hidden is 
meant to do and from what I read it sounds like the content should just get 
clipped at the right hand side and not be shown. Why is it causing the box 
to expand down the way?


Thanks.

Here is the CSS:

#navigationbar {
background-color:#DEDEDE;
overflow:hidden;
}
#navigationbar ul {
padding: 0.2em 0 0.2em 0;
margin: 0px;
list-style: none;
height:1.2em;
}
#navigationbar ul li {
padding: 0;
margin: 0;
display: block;
float: left;
} 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Overflow hidden and floated divs

2010-07-15 Thread Luc
 Good afternoon Stevio,

It was foretold that
on 15/07/2010 @ 16:11:50 GMT+0100 (which was 12:11:50 where I live)
Stevio would write:

snipped a bit

S However, if I add overflow:hidden; to the parent div, then the rightmost
S list item still jumps down, but now the box expands down the way, so it
S looks a lot better.
S My question is why does it do this? I have looked up what overflow hidden is
S meant to do and from what I read it sounds like the content should just get
S clipped at the right hand side and not be shown. Why is it causing the box
S to expand down the way?

Because  a  float is removed from the flow. When you float a child,
the  parents’  height  collapses to 0 unless you set a height or clear
the float. The floats float out of the container. To
make  the  parent  encompass the float (e.g. when you want the parents
background  colour to extend) then you need to clear the float so that
the parent encopasses the float. There are several ways to do that but
the latest technique is to use the overflow:hidden technique (for
other techniques, google 'containing floats').  This
technique creates a new block formatting context [1] and forces the parent
to acknowledge the floated children.

Overflow:hidden  will  not work in IE6 but for that old beast you just
have to give the parent haslayout [2] which can easily be tripped by
supplying a dimension.

[1] http://www.w3.org/TR/CSS2/visuren.html#block-formatting
[2] http://reference.sitepoint.com/css/haslayout

-- 
Regards,
Luc
_

 http://www.dzinelabs.com

Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera. 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] Overflow hidden and floated divs

2010-07-15 Thread Jody Tate
I asked a similar question back in February and this link helped explain it:

http://www.quirksmode.org/css/clearing.html

-jody


On Jul 15, 2010, at 8:11 AM, Stevio wrote:

 I have a row of floated list items inside a container with height 1.2em, 
 which is inside a parent div with a background colour.
 
 e.g. something like this (not the actual HTML of course ;) -
 div with background colour
  ul with height 1.2em
li floated/li
li floated/li
li floated/li
  /ul
 /div
 
 If the floated list items were too wide, the rightmost list item jumped down 
 beneath, but the container did not expand so it looked bad.
 
 However, if I add overflow:hidden; to the parent div, then the rightmost 
 list item still jumps down, but now the box expands down the way, so it 
 looks a lot better.
 
 My question is why does it do this? I have looked up what overflow hidden is 
 meant to do and from what I read it sounds like the content should just get 
 clipped at the right hand side and not be shown. Why is it causing the box 
 to expand down the way?
 
 Thanks.
 
 Here is the CSS:
 
 #navigationbar {
 background-color:#DEDEDE;
 overflow:hidden;
 }
 #navigationbar ul {
 padding: 0.2em 0 0.2em 0;
 margin: 0px;
 list-style: none;
 height:1.2em;
 }
 #navigationbar ul li {
 padding: 0;
 margin: 0;
 display: block;
 float: left;
 } 
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



RE: [WSG] Overflow hidden and floated divs

2010-07-15 Thread Foskett, Mike
Using overflow:hidden is the standard method of clearing floated objects.
It'll even work on the ul directly.
Sometimes IEv6 requires a width to be stated, but it doesn't have to be fixed.

ul style=width:100%; overflow:hidden; background:#000; color:#fff
  li floated /
  li floated /
  li floated /
/ul

Note height is no longer needed.
Which allows the user to increase text size while retaining some element of 
design.
Even works in IEv6.


Mike Foskett
http://websemantics.co.uk/



-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On 
Behalf Of Stevio
Sent: 15 July 2010 16:12
To: Web Standards Group
Subject: [WSG] Overflow hidden and floated divs

I have a row of floated list items inside a container with height 1.2em,
which is inside a parent div with a background colour.

e.g. something like this (not the actual HTML of course ;) -
div with background colour
  ul with height 1.2em
li floated/li
li floated/li
li floated/li
  /ul
/div

If the floated list items were too wide, the rightmost list item jumped down
beneath, but the container did not expand so it looked bad.

However, if I add overflow:hidden; to the parent div, then the rightmost
list item still jumps down, but now the box expands down the way, so it
looks a lot better.

My question is why does it do this? I have looked up what overflow hidden is
meant to do and from what I read it sounds like the content should just get
clipped at the right hand side and not be shown. Why is it causing the box
to expand down the way?

Thanks.

Here is the CSS:

#navigationbar {
 background-color:#DEDEDE;
 overflow:hidden;
}
#navigationbar ul {
 padding: 0.2em 0 0.2em 0;
 margin: 0px;
 list-style: none;
 height:1.2em;
}
#navigationbar ul li {
 padding: 0;
 margin: 0;
 display: block;
 float: left;
}



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***


This is a confidential email. Tesco may monitor and record all emails. The 
views expressed in this email are those of the sender and not Tesco.

Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] light box issue can you help

2010-07-15 Thread Luc
Good evening list,

i just received a mail from a member who has troubles mailing to the
list so he asked me to post his cry for help:

begin mail

Hi Everyone,

 

This is my fist post but hope you can help

 

I have a light box running on this page
http://www.skyeshopfitters.com/clients.html  It isn't running very smoothly
in IE8 and am getting the error below:

 

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0;
SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR
3.5.30729; FDM; .NET CLR 3.0.30729; Tablet PC 2.0)

Timestamp: Thu, 15 Jul 2010 14:34:49 UTC

 

 

Message: Array length must be assigned a finite positive number

Line: 464

Char: 5

Code: 0

URI: http://www.skyeshopfitters.com/js/prototype.js

 

 

Here is the code it is talking about:

 

  shift: function() {

var result = this[0];

for (var i = 0; i  this.length - 1; i++)

  this[i] = this[i + 1];

this.length--;

return result;

  },

 

This is line 464 of the above code:

 

this[i] = this[i + 1];

 

Char 5:

 

T

 

Can anyone help

 

 

Thank You

 

Edward Deane

 

New2excel Logo copy

 http://www.2excel.com.au/ www.2excel.com.au

ede...@2excel.com.au

 

Ph: (08) 8121 7724

Mob: 0488 616 676

Fax: (08) 8268 7718

end mail


 
  
-- 
Regards,
 Luc
_

http://www.dzinelabs.com

Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera.

Due to unforeseen circumstances, the release date of Windows 2000
has been postponed until January 1901. 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] light box issue can you help

2010-07-15 Thread Mathew Robertson
Not sure why you want to do that it is doing, when you can simply do a
shift() without reimplementing it...

But to fix the bug, make it this.length - 2 in the for().

Mathew Robertson


On 16 July 2010 09:43, Luc l...@dzinelabs.com wrote:

 Good evening list,

 i just received a mail from a member who has troubles mailing to the
 list so he asked me to post his cry for help:

 begin mail

 Hi Everyone,



 This is my fist post but hope you can help



 I have a light box running on this page
 http://www.skyeshopfitters.com/clients.html  It isn't running very
 smoothly
 in IE8 and am getting the error below:



 Webpage error details



 User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0;
 SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR
 3.5.30729; FDM; .NET CLR 3.0.30729; Tablet PC 2.0)

 Timestamp: Thu, 15 Jul 2010 14:34:49 UTC





 Message: Array length must be assigned a finite positive number

 Line: 464

 Char: 5

 Code: 0

 URI: http://www.skyeshopfitters.com/js/prototype.js





 Here is the code it is talking about:



  shift: function() {

var result = this[0];

for (var i = 0; i  this.length - 1; i++)

  this[i] = this[i + 1];

this.length--;

return result;

  },



 This is line 464 of the above code:



 this[i] = this[i + 1];



 Char 5:



 T



 Can anyone help





 Thank You



 Edward Deane



 New2excel Logo copy

  http://www.2excel.com.au/ www.2excel.com.au

 ede...@2excel.com.au



 Ph: (08) 8121 7724

 Mob: 0488 616 676

 Fax: (08) 8268 7718

 end mail




 --
 Regards,
  Luc
 _

 http://www.dzinelabs.com

 Using the best e-mail client: The Bat! version 4.2.6 with
 Windows XP (build 2600), version
 5.1 Service Pack 3 and
 using the best browser: Opera.

 Due to unforeseen circumstances, the release date of Windows 2000
 has been postponed until January 1901.



 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] light box issue can you help

2010-07-15 Thread Luke Hoggett

not really the right list for such a question.

but
http://www.google.com.au/search?q=prototype+ie8+lightbox

seems to supply plenty of suggestions


On 16/07/2010 9:43 AM, Luc wrote:

Good evening list,

i just received a mail from a member who has troubles mailing to the
list so he asked me to post his cry for help:

begin mail

Hi Everyone,



This is my fist post but hope you can help



I have a light box running on this page
http://www.skyeshopfitters.com/clients.html  It isn't running very smoothly
in IE8 and am getting the error below:



Webpage error details



User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0;
SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR
3.5.30729; FDM; .NET CLR 3.0.30729; Tablet PC 2.0)

Timestamp: Thu, 15 Jul 2010 14:34:49 UTC





Message: Array length must be assigned a finite positive number

Line: 464

Char: 5

Code: 0

URI: http://www.skyeshopfitters.com/js/prototype.js





Here is the code it is talking about:



   shift: function() {

 var result = this[0];

 for (var i = 0; i  this.length - 1; i++)

   this[i] = this[i + 1];

 this.length--;

 return result;

   },



This is line 464 of the above code:



this[i] = this[i + 1];



Char 5:



T



Can anyone help





Thank You



Edward Deane



New2excel Logo copy

  http://www.2excel.com.au/  www.2excel.com.au

ede...@2excel.com.au



Ph: (08) 8121 7724

Mob: 0488 616 676

Fax: (08) 8268 7718

end mail




   



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***