Re: [css-d] Float problem in Firefox

[Gunlaug Sørtun]

Gaurav Sharma wrote:

> http://gauravsharma.uuuq.com

First: your example keeps all IE/win versions in a rendering mode
equivalent to that of IE5.5 - Quirks Mode, and doesn't allow for any
improvements made in IE6, IE7 and IE8. Not very wise to block all
progress made to IE, so I hope you don't do that in real designs.

Non-IE browsers don't care which mode your pages trigger - or not - as
long as they're styled correctly and completely.


So, your example will work just fine in Firefox and all other browsers,
regardless of mode, if you add some real "clearfix" styling...

.clearfix:after {
content: "."; display: block; height: 0; clear: both; overflow: hidden;
visibility: hidden;
}

...as can be seen in this, more completely styled but still in quirks
mode, copy of your example...


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float problem in Firefox

[designer]

Try this:

http://www.alistapart.com/articles/multicolumnlists

Bob


- Original Message - 
From: "David Laakso" 
To: "Gaurav Sharma" 
Cc: "css-d css-d" 
Sent: Sunday, March 29, 2009 12:10 PM
Subject: [css-d] Float problem in Firefox


> 
> Gaurav Sharma wrote:
>> Hi,
>>
>> I have a small problem with float in Mozilla.
>>
>> http://gauravsharma.uuuq.com
>>
>>  I
>> need two lists side-by-side. Please help.
>>
>> Thanks and regards,
>> Gaurav Sharma.
>>   
> 

> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
>

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float problem in Firefox

[David Laakso]

Gaurav Sharma wrote:
> Hi,
>
> I have a small problem with float in Mozilla.
>
> http://gauravsharma.uuuq.com
>
>  I
> need two lists side-by-side. Please help.
>
> Thanks and regards,
> Gaurav Sharma.
>   

Nothing wrong with Firefox. There is a lot wrong with all versions of 
IE, particularly IE/6.

Make a big box. Shove smaller boxes in it [1]. Code only to Firefox. Use 
no absolute positioning. Assign a doctype (see source). Validate the 
markup and CSS. When it is working properly in FF and Opera, and Safari 
check it in IE 7/6.

[1] 



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float problem in Firefox

[Bobby Jack]

--- On Sat, 3/28/09, Gaurav Sharma  wrote:

> I have a small problem with float in Mozilla.
> 
> http://gauravsharma.uuuq.com
> 
> the background image does not render right.

Hi Gaurav,

With only a cursory glance, I have a feeling that the structure is slightly 
more complicated than it need be - there are quite a few nested divs there. 
However, with what you have, the containing element with the background 
(#footer) needs to clear the floats that it contains. One method is applying 
'overflow: auto' to that element. Alternatives can be found with a search for 
'self clearing float'.

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float problem in Firefox

[Gaurav Sharma]

Hi,

I have a small problem with float in Mozilla.

http://gauravsharma.uuuq.com

The site above is a totally stripped down version with only the problem code
displayed. The class box is assigned a float: left property. It works fine
in IE 6, but in firefox 3, the background image does not render right. I
need two lists side-by-side. Please help.

Thanks and regards,
Gaurav Sharma.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] float problem in FireFox

[Alisha]

Philippe Wittenbergh wrote:


Given that there is no padding nor borders, one can also use
li {
width:100%;
}


I didn't know about this bug. Well gladly the width:100% solves it 
perfectly. Thanks a lot.
Btw is there any documentation on the web about this bug? I'm quite 
curious because I never heard of ti before and I'd like to know 
something more.

Thanks!

*Alisha*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] float problem in FireFox

[Philippe Wittenbergh]

On 18 Jun 2005, at 6:52 am, Bruno Fassino wrote:


The only workaround that I know is:
li {
  -moz-float-edge: content-box;
}


Which *is* a good solution.
which makes the s to behave correctly in presence of floats. 
That's a
Mozilla proprietary property so unfortunately it doesn't validate.  
You may
prefer restructuring a bit your markup to avoid this situation.  Maybe 
there

are other workarounds, I don't know.


Given that there is no padding nor borders, one can also use
li {
width:100%;
}
That worked for me when I originally had to work around this bug.
But you must hide that from older browsers like IE Mac and Win.


Philippe
---
Philippe Wittenbergh


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] float problem in FireFox

[Bruno Fassino]

Alisha wrote:

> first of all, here is the document where i experience the problem
> http://www.alisha.it/cv.htm
> and here is the css http://www.alisha.it/style.css
>
> the problem is that the text doesn't relly flow around the floated
> image. anyone has any suggestion about it?
> sorry if i sound so "newbie" :)

As far as I know, it is not a "newbie" problem at all!  FireFox shows a bug
here [1].  Your text is inside a , and FF reduces the width of a  in
presence of a float, instead of simply reducing the width of some line boxes
created by the text inside the .  Add a border to the "studies"  to
see what happens.
The only workaround that I know is:
li {
  -moz-float-edge: content-box;
}
which makes the s to behave correctly in presence of floats. That's a
Mozilla proprietary property so unfortunately it doesn't validate.  You may
prefer restructuring a bit your markup to avoid this situation.  Maybe there
are other workarounds, I don't know.

Bruno

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=163110

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem in FireFox

[Alisha]

first of all, here is the document where i experience the problem 
http://www.alisha.it/cv.htm

and here is the css http://www.alisha.it/style.css

the problem is that the text doesn't relly flow around the floated 
image. anyone has any suggestion about it?

sorry if i sound so "newbie" :)

*Alisha*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/