Re: [css-d] Float problem. I think.

[BHomis]

Greg,
Thanks.  That always bites me.
Thanks again,
Bruce
 
 
In a message dated 7/11/2012 8:40:31 P.M. Eastern Daylight Time,  
gunla...@c2i.net writes:

On  12.07.2012 01:17, bho...@aol.com wrote:
> I'm doing over a very old  website, and I'm having a problem with a 
floated
> div (content_main)  not staying to the upper right.

You are apparently using "overflow:  auto;" on  to 
contain floats, which creates a  scrollbar that takes up space so the 
right float can't fit alongside the  left.
Make that '.section {overflow: hidden;}' and it will line up as  intended.

regards
Georg
__
css-discuss  [css-d@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 [css-d@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. I think.

[Georg]

On 12.07.2012 01:17, bho...@aol.com wrote:

I'm doing over a very old website, and I'm having a problem with a floated
div (content_main) not staying to the upper right.


You are apparently using "overflow: auto;" on  to 
contain floats, which creates a scrollbar that takes up space so the 
right float can't fit alongside the left.

Make that '.section {overflow: hidden;}' and it will line up as intended.

regards
Georg
__
css-discuss [css-d@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. I think.

[BHomis]

I'm doing over a very old website, and I'm having a problem with a floated  
div (content_main) not staying to the upper right.  The problem can be  
found on _http://www.sportsmansresource.com/contact.htm_ 
(http://www.sportsmansresource.com/contact.htm) .   No matter what I'm trying, 
it drops below the 
div floated left  (left_content).  It works fine on a possible homepage I 
created (_http://www.sportsmansresource.com/home_page_css.htm_ 
(http://www.sportsmansresource.com/home_page_css.htm) ).
If you can help or offer any help, I'd be very appreciative.
Thanks
Bruce
__
css-discuss [css-d@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 IE6/7

[Wenlong Xu]

Well, thanks anyway.
Best~

Wenlong.



From: David Laakso 
To: Wenlong Xu 
Cc: css-discuss 
Sent: Mon, December 7, 2009 9:27:37 AM
Subject: Re: [css-d] float problem in IE6/7

Wenlong Xu wrote:
> Hi, David.
>
> i have just solved it in your way.
> Thank you for your help.
> However, I'm pretty curious about why the former code doesn't work well in 
> IE6/7.
> do you have any ideas? 
> Thank you!
>
>
>  


We will both need to rely on someone else to answer that good question.

As for myself, I have more than enough difficulty getting anything to
work at all. And I mean that.

I leave more esoteric matters, such as explaining why something does not
work, to others who are far better qualified. than me.

Best,
~d



  ___ 
  好玩贺卡等你发，邮箱贺卡全新上线！ 
http://card.mail.cn.yahoo.com/__
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 IE6/7

[David Laakso]

Wenlong Xu wrote:
> Hi, David.
>
> i have just solved it in your way.
> Thank you for your help.
> However, I'm pretty curious about why the former code doesn't work well in 
> IE6/7.
> do you have any ideas? 
> Thank you!
>
>
>   


We will both need to rely on someone else to answer that good question.

As for myself, I have more than enough difficulty getting anything to
work at all. And I mean that.

I leave more esoteric matters, such as explaining why something does not
work, to others who are far better qualified. than me.

Best,
~d
__
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 IE6/7

[Wenlong Xu]

Thanks for your reply.
Please forgive me my careless.
in the real application, i'm sure every selector name is appropriate.
here just use '1', '2' for short. 
anyway, Thank you!


  ___ 
  好玩贺卡等你发，邮箱贺卡全新上线！ 
http://card.mail.cn.yahoo.com/__
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 IE6/7

[Wenlong Xu]

Hi, David.

i have just solved it in your way.
Thank you for your help.
However, I'm pretty curious about why the former code doesn't work well in 
IE6/7.
do you have any ideas? 
Thank you!



From: David Laakso 
To: Wenlong Xu 
Cc: css-d@lists.css-discuss.org
Sent: Mon, December 7, 2009 7:21:56 AM
Subject: Re: [css-d] float problem in IE6/7

Wenlong Xu wrote:
> Hi, dear all,
> I have met a float problem in IE6/7.
>
> code:
> 
> 
> 
> 
> 
> 
> 
> 
> it looks pretty good in FF3+/IE8, but in IE6/7  the #3 DIV seems to be inside 
> #1 DIV.
> is this a IE bug or something else? how to fix it?
>
> any reply will be helpful, thanks.
> Wenlong.
>
>
>  



It is not necessary to float the lime block. Consequently, it is not
necessary to clear the float. The html comment  simply
tells the software (specifically IE/6) that there is something "in" the
division(s).

Set it like this and compliant browsers, and even IE/6.0 and IE/7.0 will
be on-board:





abc



body {margin:0; background: #fff; color:#000;}
#a {background:lime;height:30px; width:100%;}
#b {background:red;height:5px; margin: 0 5px;}










  ___ 
  好玩贺卡等你发，邮箱贺卡全新上线！ 
http://card.mail.cn.yahoo.com/__
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 IE6/7

[David Laakso]

Wenlong Xu wrote:
> Hi, dear all,
> I have met a float problem in IE6/7.
>
> code:
> 
> 
> 
> 
> 
> 
> 
> 
> it looks pretty good in FF3+/IE8, but in IE6/7  the #3 DIV seems to be inside 
> #1 DIV.
> is this a IE bug or something else? how to fix it?
>
> any reply will be helpful, thanks.
> Wenlong.
>
>
>   



It is not necessary to float the lime block. Consequently, it is not
necessary to clear the float. The html comment  simply
tells the software (specifically IE/6) that there is something "in" the
division(s).

Set it like this and compliant browsers, and even IE/6.0 and IE/7.0 will
be on-board:





abc



body {margin:0; background: #fff; color:#000;}
#a {background:lime;height:30px; width:100%;}
#b {background:red;height:5px; margin: 0 5px;}













__
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 IE6/7

[Reese]

Wenlong Xu wrote:
> Hi, dear all,
> I have met a float problem in IE6/7.
> 
> code:
> 
> 
> 
> 
> 
> 
> 
> 
> it looks pretty good in FF3+/IE8, but in IE6/7  the #3 DIV seems to be inside 
> #1 DIV.
> is this a IE bug or something else? how to fix it?
> 
> any reply will be helpful, thanks.

Change id="1" to id="one" and id="3" to id="three" with the
appropriate changes to your style sheet, and then try it out
to see how it works.

If you have any other div ID's that start with numerals,
they must also be changed to start with a letter [A-Za-z].

See http://www.w3.org/TR/1999/REC-html401-19991224/types.html
section 6.2 SGML basic types.

Reese

__
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 IE6/7

[Wenlong Xu]

Hi, dear all,
I have met a float problem in IE6/7.

code:








it looks pretty good in FF3+/IE8, but in IE6/7  the #3 DIV seems to be inside 
#1 DIV.
is this a IE bug or something else? how to fix it?

any reply will be helpful, thanks.
Wenlong.



  ___ 
  好玩贺卡等你发，邮箱贺卡全新上线！ 
http://card.mail.cn.yahoo.com/__
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

[MOHAMMED NASEER]

many thanks for those responses, I have added the fieldset with  
clear:left and border:0 for the styling for radio buttons.
But was wondering how I could fine tune the layout, for the fieldset  
(radio buttons), like that achieved by the descendent selector,  
'subForm .label' which allows the form elements to :

a.  move the label or the text to the left side of window,
b.  right align them in a column 230px wide,
c.  have a gap of 10px between the label/text and the form element in  
my case the set of three 'radio buttons'
etc.

and also apply the same styling as the id selectors below where the  
form elements are nudged up 2px by the margin-top: -2px

thanking in advance, Naz.



}
#subForm .label {
   float: left;
   width: 230px;
   margin-right: 10px;
   text-align: right;
   font-weight: bold;
   clear: left;
}
..

#name, #email, #comments {
   background-color: #FBEF99;
   font-family: "Lucida Console", Monaco, monospace;
   font-size: .9em;
   width: 300px;
   margin-top: -2px;
}
...

fieldset {
   clear: left;
   border:0;
}

...

 
 What is your name?
   
  What is your email address?  
Information collected at this site is limited to our  network of 9,872  
partner affiliates. Your information will only be shared among  
them...
   
Rate your apartment farming 
skills

Novice

Intermediate

Advanced
  
  
Where did you hear about us? 

  Select One
  Friend
  Herban Jungle
  Compost Today
  Vanity Fair
 
  
  
Any additional comments? 
 
  
  

  
 



>

__
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

[David Hucklesby]

MOHAMMED NASEER wrote:
> that does the job but it's out of place from the rest of the layout
>  due to the border. I tried wrapping it up in a div, applied a class
>  with 'clear:left' and that did the trick :-)
> 
> On 24 Sep 2009, at 16:31, Thierry Koblentz wrote:
>> Try to you use a fieldset instead of a p to wrap the radio buttons
>>  and use clear:left on that fieldset. That you should fix your
>> float problem as fieldsets create a new block-formatting context
>> and will also contain the floats. Also, using fieldset is more
>> semantic than using paragraphs for this.
>> 

Try

   fieldset { border: 0; }

Cordially,
David
--
__
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

[MOHAMMED NASEER]

that does the job but it's out of place from the rest of the layout  
due to the border. I tried wrapping it up in a div, applied a class  
with 'clear:left' and that did the trick :-)

On 24 Sep 2009, at 16:31, Thierry Koblentz wrote:
>>
>
> Try to you use a fieldset instead of a p to wrap the radio buttons  
> and use
> clear:left on that fieldset. That you should fix your float problem as
> fieldsets create a new block-formatting context and will also  
> contain the
> floats.
> Also, using fieldset is more semantic than using paragraphs for this.
>
>
> -- 
> Regards,
> Thierry | http://www.TJKDesign.com
__
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

[Thierry Koblentz]

> Hi - I was working on a tutorial and they suggested adding 'clear:
> left;'   to the descendent selector below in order to remove the
> problem of next label/question ( in this case:  'Rate your apartment
> farming skills' ) wrapping around the float in case where the text for
> the question/label before runs more than one line, as is the case with
> the second label.
> Although this problem is fixed, but now I am running into another
> problem in that the next 'input types' ( Novice, Intermediate, and
> Advanced  ) are wrapping around the long text. How can I best resolve
> this - thanking in advance, Naz.
> 
> 
> #subForm .label {
>float: left;
>width: 230px;
>margin-right: 10px;
>text-align: right;
>font-weight: bold;
>clear: left;
> }
> 
> .
> 
> 
> 
>   What is your
name?
>
>What is your email
> address? There's one last step for these labels. Because they're
> floated to the left, if the
> text runs more than one line, the question that follows will also try
> to wrap around to the right./* ...SECOND LABEL */
>   
>Rate your apartment farming
skills
>   
>/>Novice
>   
>  >Intermediate
>   
>/>Advanced label>
>
> 
>   .
> 

Try to you use a fieldset instead of a p to wrap the radio buttons and use
clear:left on that fieldset. That you should fix your float problem as
fieldsets create a new block-formatting context and will also contain the
floats.
Also, using fieldset is more semantic than using paragraphs for this. 


-- 
Regards,
Thierry | http://www.TJKDesign.com






__
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

[MOHAMMED NASEER]

Hi - I was working on a tutorial and they suggested adding 'clear:  
left;'   to the descendent selector below in order to remove the  
problem of next label/question ( in this case:  'Rate your apartment  
farming skills' ) wrapping around the float in case where the text for  
the question/label before runs more than one line, as is the case with  
the second label.
Although this problem is fixed, but now I am running into another  
problem in that the next 'input types' ( Novice, Intermediate, and  
Advanced  ) are wrapping around the long text. How can I best resolve  
this - thanking in advance, Naz.


#subForm .label {
   float: left;
   width: 230px;
   margin-right: 10px;
   text-align: right;
   font-weight: bold;
   clear: left;
}

.



What is your name?
 
 What is your email  
address? There’s one last step for these labels. Because they’re  
floated to the left, if the
text runs more than one line, the question that follows will also try  
to wrap around to the right./* ...SECOND LABEL */

 Rate your apartment farming 
skills

Novice

 Intermediate

Advanced
 

.


__
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

[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 with order of HTML

[David Laakso]

Rory Fitzpatrick wrote:
> Hi,
>
> I'm trying to create a layout that has the nav section taking up a  
> left hand column from position 0,0 of the container, with a header and  
> then content on the right. I want to do this with the nav HTML element  
> appearing below the header, but without using absolute positioning. My  
> progress so far is at:
>
> http://www.roryf.co.uk/projects/safhs
>
> Rory
>   

Header first, content second, vertical nav third, and footer fourth in 
source is also possible with a float construction...


-- 

A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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 with order of HTML

[Gunlaug Sørtun]

Rory Fitzpatrick wrote:

> http://www.roryf.co.uk/projects/safhs
> 
> This shows the desired effect I want but has the nav first in the  
> HTML.

Maybe this "all floats" layout will work for you...



Relevant CSS: 


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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 with order of HTML

[Rory Fitzpatrick]

Hi,

I'm trying to create a layout that has the nav section taking up a  
left hand column from position 0,0 of the container, with a header and  
then content on the right. I want to do this with the nav HTML element  
appearing below the header, but without using absolute positioning. My  
progress so far is at:

http://www.roryf.co.uk/projects/safhs

This shows the desired effect I want but has the nav first in the  
HTML. If it comes second it renders below the header, whatever margin- 
left or float value I give to the header element. The only way I've  
found is giving the header an absolute width, but this then causes  
problems with the margin-right on the nav and I'd rather it was more  
flexible than that.

Any suggestions?

Cheers
Rory
__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Luc]

Good afternoon Gunlaug, 

It was foretold that on 24/10/2008 @ 17:18:28 GMT+0200 (which was
13:18:28 where I live) Gunlaug Sørtun would write:

> You're right: web design isn't magic - just code :-)

Yup and code is already difficult enough for me, let alone magic ;-)

> FWIW: my expression takes height for font resizing. That's the whole
> idea behind extracting the browser's own font-size and using it to
> calculate dimensional trigger-points.

I see ... it starts to fall into place now!

> And, yes, ideally we should take all those variants and options at the
> user-end into account while designing. Someone may actually use them.
> Pity those who create hardware and software don't always agree on how to
> make all those variants and options interact, as that would have made it
> much easier for us.

> As more and more browsers come around to support mediaqueries, we can
> start doing something useful for end-users with other set-ups and
> preferences than our own. Still need some leveling on the hardware and
> software front for it to work consistently though.

Couldn't agree more.

 
-- 
Best regards,
 Luc
_


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

"A democracy is a government in the hands of men of low birth, no
property, and vulgar employments." - Aristotle, Rhetoric,
Independency. 


__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Gunlaug Sørtun]

Luc wrote:

>> That expression do not work well on other screen-resolutions than 
>> 96dpi - the most widespread one that IE6 may be found on at the 
>> moment, and there's not much I can do about that since resolution 
>> can't be easily checked and used as a variable in expressions.
> 
> Oh well, for me it suffices ... i guess if we want to consider all 
> possible screen resolutions out there and users that change default 
> font size etc we'll be in the magic business :-)

You're right: web design isn't magic - just code :-)

FWIW: my expression takes height for font resizing. That's the whole
idea behind extracting the browser's own font-size and using it to
calculate dimensional trigger-points.

And, yes, ideally we should take all those variants and options at the
user-end into account while designing. Someone may actually use them.
Pity those who create hardware and software don't always agree on how to
make all those variants and options interact, as that would have made it
much easier for us.

As more and more browsers come around to support mediaqueries, we can
start doing something useful for end-users with other set-ups and
preferences than our own. Still need some leveling on the hardware and
software front for it to work consistently though.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Luc]

Good afternoon Mark, 

It was foretold that on 24/10/2008 @ 02:39:42 GMT+1300 (which was
11:39:42 where I live) Mark Henderson would write:



> I can hear the sound of frantic keyboard tapping.  

and banging head to table :-)
 
-- 
Best regards,
 Luc
_


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

"Old age comes at a bad time." 


__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Mark Henderson]

Luc wrote:
> Oh well, for me it suffices ... i guess if we want to consider all
> possible screen resolutions out there and users that change default
> font size etc we'll be in the magic business :-)
>   
Ut oh! I can hear the sound of frantic keyboard tapping.
*cringes and heads to bed*
__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Luc]

Good morning Gunlaug, 

It was foretold that on 24/10/2008 @ 06:35:22 GMT+0200 (which was
02:35:22 where I live) Gunlaug Sørtun would write:



> Delete 'width: 18em' on #puller2 and let that float default to 'width:
> auto' and shrink-wrap. Delete 'margin-left: 1em' while you're at it.
> That will give you the most stable line-up, at the right edge of #main-top.

When trying to correct it myself yesterday, i indeed used the
'width:auto' but ofcourse forgot about the margin-left.

Works like a charm!!

>> I also have a float drop in IE: resizing drops the whole content 
>> beneath the nav. Have i messed up my math somewhere?

> Think so :-)

> It is the percentage (not 100%) that makes it a little harder to
> calculate trigger-points.
> A quick test gives me these values for near-flawless operation on 96dpi
> resolution screens...

> * html #container{ width:expression(
> (document.documentElement.offsetWidth) >(830/12)
> * parseInt(document.body.currentStyle.fontSize)?  "48.75em"
> : ((document.documentElement.offsetWidth) <(600/12)
> * parseInt(document.body.currentStyle.fontSize)? "34.75em" : "96%")); }

> I raised min-width to 34.75em because IE6 has a tendency to drop content
> too early on narrow windows.

Darn, i recalculated all my widths yesterday except for the
expression. Never thought that would be culprit. On the
hand it's the first time i used that technique so i hope i'll be
forgiven ;-)

Guess i need to read your excellent article again :-)

> That expression do not work well on other screen-resolutions than 96dpi
> - the most widespread one that IE6 may be found on at the moment, and
> there's not much I can do about that since resolution can't be easily
> checked and used as a variable in expressions.

Oh well, for me it suffices ... i guess if we want to consider all
possible screen resolutions out there and users that change default
font size etc we'll be in the magic business :-)

 
-- 
Best regards,
 Luc
_


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

"Doctors automatically know what's wrong with you. They have a sick
sense." - Beau M., age 10. 


__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Gunlaug Sørtun]

Luc wrote:
> Hello Gunlaug,
> 
> It was foretold that on 23/10/2008 @ 01:26:02 GMT+0200 (which was 
> 21:26:02 where I live) Gunlaug Sørtun would write:
> 
> 
> 
>> Those headings are contained in #main-top, which has a 'width: 
>> 36em' declared on it. This means it'll have a certain width, and 
>> that width will change with font-resizing but _not_ with 
>> window-resizing.
> 
>> By simply changing that to...
> 
>> #main-top {width: 100%;}
> 
>> ...and deleting the left paddings on h1 and h2, the line-up will 
>> adjust to window-size with the rest of the page, and won't be 
>> affected by font-resizing.
> 
> That's indeed simple lol.
> 
> Your solution works for the main-top but i tried the same for the 
> nested puller2 div but i had no luck. That one still gives me the 
> same problem.

Delete 'width: 18em' on #puller2 and let that float default to 'width:
auto' and shrink-wrap. Delete 'margin-left: 1em' while you're at it.
That will give you the most stable line-up, at the right edge of #main-top.


> I also have a float drop in IE: resizing drops the whole content 
> beneath the nav. Have i messed up my math somewhere?

Think so :-)

It is the percentage (not 100%) that makes it a little harder to
calculate trigger-points. I usually just test and tweak until it is
"close enough for comfort".

A quick test gives me these values for near-flawless operation on 96dpi
resolution screens...

* html #container{ width:expression(
(document.documentElement.offsetWidth) >(830/12)
* parseInt(document.body.currentStyle.fontSize)?  "48.75em"
: ((document.documentElement.offsetWidth) <(600/12)
* parseInt(document.body.currentStyle.fontSize)? "34.75em" : "96%")); }

I raised min-width to 34.75em because IE6 has a tendency to drop content
too early on narrow windows.

That expression do not work well on other screen-resolutions than 96dpi
- the most widespread one that IE6 may be found on at the moment, and
there's not much I can do about that since resolution can't be easily
checked and used as a variable in expressions.

> http://www.dzinelabs.com/sandbox/ieexpresssion.html

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Luc]

Hello Gunlaug, 

It was foretold that on 23/10/2008 @ 01:26:02 GMT+0200 (which was
21:26:02 where I live) Gunlaug Sørtun would write:



> Those headings are contained in #main-top, which has a 'width: 36em'
> declared on it. This means it'll have a certain width, and that width
> will change with font-resizing but _not_ with window-resizing.

> By simply changing that to...

> #main-top {width: 100%;}

> ...and deleting the left paddings on h1 and h2, the line-up will adjust
> to window-size with the rest of the page, and won't be affected by
> font-resizing.

That's indeed simple lol.

Your solution works for the main-top but i tried the same for the
nested puller2 div but i had no luck. That one still gives me the
same problem.

I also have a float drop in IE: resizing drops the whole content
beneath the nav. Have i messed up my math somewhere?

http://www.dzinelabs.com/sandbox/ieexpresssion.html

-- 
Best regards,
 Luc
_


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

"To bookmark this homepage or not to bookmark, that is the question." 


__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Gunlaug Sørtun]

Luc wrote:

> http://www.dzinelabs.com/sandbox/ieexpresssion.html

> When resizing your browser, and also on resizing the font, all the 
> headings shift way over. At first i thought it was a "containing 
> float" problem but if i'm correct that only effects escaping floats 
> vertically.

Those headings are contained in #main-top, which has a 'width: 36em'
declared on it. This means it'll have a certain width, and that width
will change with font-resizing but _not_ with window-resizing.

By simply changing that to...

#main-top {width: 100%;}

...and deleting the left paddings on h1 and h2, the line-up will adjust
to window-size with the rest of the page, and won't be affected by
font-resizing.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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: not being contained or something else?

[Luc]

 Good afternoon list,  

 Page:

 http://www.dzinelabs.com/sandbox/ieexpresssion.html

 Problem: next to the heading "Departamento Logistica", you'll see two
 other headings, one on top of the other:

 Grupo Mendes Peres with the www..

 When resizing your browser, and also on resizing the font, all the
 headings shift way over. At first i thought it was a "containing
 float" problem but if i'm correct that only effects escaping floats
 vertically.

 I can't figure out how to resolve it. I tried using text-align
 instead of floats but no go.

 Any takers?
 
-- 
Best regards,
 Luc
 http://www.dzinelabs.com
 

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

"Even if you're on the right track, you'll get run over if you just
sit there." - Will Rogers.



__
css-discuss [EMAIL PROTECTED]
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 IE

[Kepler Gelotte]

> Here's my second problem of the day: the floated main navigation links are
> dropping down incrementally in IE 6, and are doing the same in IE 7, but
> also hiding all but the top link in IE 7 behind an image in the div below.


Hi Janie,

Try changing the  elements of your navigation to inline as in:

#main_nav UL {
FLOAT: right; MARGIN-RIGHT: 20px;
LIST-STYLE: none
}
#main_nav UL LI {
DISPLAY: inline
}

Regards,
Kepler Gelotte
__
css-discuss [EMAIL PROTECTED]
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 IE

[Janie Hadsel]

It's not a good CSS day for me. My site was working fine in IE6 & 7 until I
started cleaning some things up today. I received some help from Ingo
earlier, adding overflow: hidden to the main_nav's ul li a styles to fix a
problem in FF, but I don't think that has anything to do with the new
problem, because it still exists if I remove the attribute.

Here's my second problem of the day: the floated main navigation links are
dropping down incrementally in IE 6, and are doing the same in IE 7, but
also hiding all but the top link in IE 7 behind an image in the div below.
The problem exists throughout the site. Here's the link:
http://www.hadseldesign.com , and here's the main navigation style sheet:
http://www.hadseldesign.com/common/main_nav.css .

I've checked the site in latest versions of Firefox (Windows XP and Mac
OSX), Safari, and Opera on Mac OSX, and I don't see any problems.

Thanks again,
Janie
__
css-discuss [EMAIL PROTECTED]
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

[Vicki Stebbins]

At 09:55 AM 9/11/2007, Gunlaug Sørtun wrote:
>Vicki Stebbins wrote:
>
>>I'm almost there with this page 
>>http://www.keenstreet-dev.com/trying.html but 
>>the floated box on the right keeps going to the 
>>bottom of the 'ufwus div' instead of the top
>>and then having the text wrap.
>
>The floated box on the right side can't go higher up than the one you
>have cleared below navigation on the left side - unless you "isolate"
>the right float from the left. That's how floats are supposed to work.
>
>The addition of...
>
>#ufwus {display: table; height: 1%;}
>
>...will "isolate" in most browsers.
>Can't use 'overflow: hidden' since you have the right float hanging over
>the edge.
>
>IE6 is acting up, but I don't have time to fix that old bugger now.
>
>regards
> Georg
>--
>http://www.gunlaug.no

Hi Georg and Jim,

Many thanks, Firefox is working :-)) I didn't 
even think of adding table... I know I certainly 
have lots to learn... hopefully that will always be ;-)

I'll repost this with the subject changed so with 
the IE 6.0 error just in case anyone knows off 
the top of their head. Isn't it a bugger that IE 
is such a pain and you just know most people use it!

Thank you so much again for your time.

Kind regards

Vicki


__
css-discuss [EMAIL PROTECTED]
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

[Jim Davis]

Vicki,

Adding the rule display: table; to the ufwus div will fix the float problem
in Firefox. As I view the site in IE 6, however, there appears to be major
problems. I will send you a screen shot off the list.

Jim

On Nov 8, 2007 2:15 PM, Vicki Stebbins <[EMAIL PROTECTED]> wrote:

> Hi Everyone,
>
> I'm almost there with this page
> http://www.keenstreet-dev.com/trying.html but the floated box on the
> right keeps going to the bottom of the 'ufwus div' instead of the top
> and then having the text wrap.
>
>
__
css-discuss [EMAIL PROTECTED]
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

[Gunlaug Sørtun]

Vicki Stebbins wrote:

> I'm almost there with this page 
> http://www.keenstreet-dev.com/trying.html but the floated box on the 
> right keeps going to the bottom of the 'ufwus div' instead of the top
> and then having the text wrap.

The floated box on the right side can't go higher up than the one you
have cleared below navigation on the left side - unless you "isolate"
the right float from the left. That's how floats are supposed to work.

The addition of...

#ufwus {display: table; height: 1%;}

...will "isolate" in most browsers.
Can't use 'overflow: hidden' since you have the right float hanging over
the edge.

IE6 is acting up, but I don't have time to fix that old bugger now.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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

[Vicki Stebbins]

Hi Everyone,

I'm almost there with this page 
http://www.keenstreet-dev.com/trying.html but the floated box on the 
right keeps going to the bottom of the 'ufwus div' instead of the top 
and then having the text wrap.

I've placed it in quite a few different places, validated the html 
and CSS and still cannot see why.

It's probably a case of the 'forest for the trees' but I'm just not seeing it.

Can anyone spare a couple of minutes to have a look as see what I'm missing?

Page: http://www.keenstreet-dev.com/trying.html
Main CSS: http://www.keenstreet-dev.com/styles/catchment.css
Navigation CSS: http://www.keenstreet-dev.com/styles/nav.css

Many thanks,

Vicki

__
css-discuss [EMAIL PROTECTED]
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

[Steven Soers]

You're right.

Thanks a lot. 
I've been searching a couple of hours to find a solution for this.


> From: Gunlaug Sørtun <[EMAIL PROTECTED]>
> Date: Fri, 26 Oct 2007 16:45:10 +0200
> To: Steven Soers <[EMAIL PROTECTED]>
> Cc: 
> Subject: Re: [css-d] Float problem
> 
> Steven Soers wrote:
> 
>> I¹m trying to make the text (textdiv) appear next to the image (like
>> in the example.) But, I don¹t want to give the div that contains the
>> texts a width. If i remove the width, the textdiv appears under the
>> picture. Giving the div a margin is not an option because in case of
>> no picture the text must start on the left side.
> 
>> HTML: http://studio.stage.vintage.be/users/steven/index.html
> 
> I think you want this effect...
> 
> <http://www.gunlaug.no/tos/alien/ss-1/test_07_1026.html>
> 
> ...which works as described here...
> 
> <http://www.gunlaug.no/contents/wd_example_01_02.html>
> 
> regards
> Georg
> -- 
> http://www.gunlaug.no

__
css-discuss [EMAIL PROTECTED]
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

[Gunlaug Sørtun]

Steven Soers wrote:

> I¹m trying to make the text (textdiv) appear next to the image (like
> in the example.) But, I don¹t want to give the div that contains the
> texts a width. If i remove the width, the textdiv appears under the
> picture. Giving the div a margin is not an option because in case of
> no picture the text must start on the left side.

> HTML: http://studio.stage.vintage.be/users/steven/index.html

I think you want this effect...



...which works as described here...



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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

[Tim White]

>I¹m trying to make the text (textdiv) appear next to the image (like
>in the
>example.)
>But, I don¹t want to give the div that contains the texts a width. If
>i
>remove the width, the textdiv appears under the picture.

That's because you have the textdiv floated:left. Remove the float and the text 
will be fine. Of course...

>I putted the text a div because text may not wrap around the image.

You don't want the text to wrap under the image (if present)? Then you need the 
margin or width. 

I may not be understanding exactly what you want to do. Pages with image need 
to have the "left column" clear, pages without images text should be flush left 
(no "left column")?

Tim



__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
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

[cFA]

On 10/26/07, Steven Soers <[EMAIL PROTECTED]> wrote:
>
>
> Hi all,
> I¹m trying to make the text (textdiv) appear next to the image (like in
> the
> example.)
> But, I don¹t want to give the div that contains the texts a width. If i
> remove the width, the textdiv appears under the picture.
> Giving the div a margin is not an option because in case of no picture the
> text must start on the left side.
> I putted the text a div because text may not wrap around the image.
>
> HTML: http://studio.stage.vintage.be/users/steven/index.html
> Css:http://studio.stage.vintage.be/users/steven/_assets/css/stylesheet.css
>
> Many thanks
>
> Steven
>
> __
> css-discuss [EMAIL PROTECTED]
> 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/
>


Can you just float the image and not the div and let the parent determine
the width of the text?


-- 
iron sharpens iron
__
css-discuss [EMAIL PROTECTED]
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

[Steven Soers]

Hi all,
I¹m trying to make the text (textdiv) appear next to the image (like in the
example.)
But, I don¹t want to give the div that contains the texts a width. If i
remove the width, the textdiv appears under the picture.
Giving the div a margin is not an option because in case of no picture the
text must start on the left side.
I putted the text a div because text may not wrap around the image.

HTML: http://studio.stage.vintage.be/users/steven/index.html
Css:http://studio.stage.vintage.be/users/steven/_assets/css/stylesheet.css

Many thanks

Steven

__
css-discuss [EMAIL PROTECTED]
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 IE6

[Gunlaug Sørtun]

Lyn Williams wrote:
> I'm having problem with a some floats on IE6. Could someone checkout
>  the following page and let me know exactly what is wrong.
> 
> http://www.ragonline.co.uk/main/

Some content, or residue from IE's white-space bug, is pushing
mainrightcol from the inside, and IE6 by default doesn't respect
declared dimensions - making mainrightcol too wide.

You can add...

#mainrightcol {overflow-x: hidden;}

...to eliminate IE6' "auto-expansion" bug and thereby prevent the float
drop.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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 IE6

[Lyn Williams]

I'm having problem with a some floats on IE6. Could someone checkout  
the following page and let me know exactly what is wrong.

http://www.ragonline.co.uk/main/
__
css-discuss [EMAIL PROTECTED]
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 IE

[bill scheider]

bill scheider wrote:

> In IE, the box floats to the right but the text doesn't flow around 
> it.

> http://tinyurl.com/3anvnc

Delete the width on those paragraphs - at least for IE, as the width 
acts as a 'hasLayout' trigger, making each paragraph a rigid block in 
IE. There's no way around this effect of the 'Layout' bug but to avoid 
triggering it.

Use margins or paddings to line up those paragraphs as intended.

regards
Georg
-- 
Thank you, Georg

That fixed it, of course. I thought I had tried everything but didn't think
that width would be the culprit. I think I'll never understand that
hasLayout stuff!

Bill


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
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 IE

[Gunlaug Sørtun]

bill scheider wrote:

> In IE, the box floats to the right but the text doesn't flow around 
> it.

> http://tinyurl.com/3anvnc

Delete the width on those paragraphs - at least for IE, as the width 
acts as a 'hasLayout' trigger, making each paragraph a rigid block in 
IE. There's no way around this effect of the 'Layout' bug but to avoid 
triggering it.

Use margins or paddings to line up those paragraphs as intended.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float problem in IE

[bill scheider]

Hi all, 

 

I'm hoping someone can help me out with this.

 

My layout is a two-column with opposing floats (float: left, float: right).
All was well until I decided to add a right floating box into the
right-floating column. It renders as it should (or as I expect it to - not
always the same thing) in FF, NS and Opera. In IE, the box floats to the
right but the text doesn't flow around it. I've spent the day trying
everything I know how to do, and I sure would appreciate another set of eyes
on the page if anyone could take the time. I'm thinking it has something to
do with all those floats, but I'd like to be wrong! The html and css
validate. The page can be found here:  http://tinyurl.com/3anvnc

 

Thanks in advance for any help,

Bill Scheider

 

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

Re: [css-d] Float problem

[David Hucklesby]

On Mon, 18 Jun 2007 11:38:58 -0500, Amy Drayer wrote:
> Dear CSSers:
>
> This floating problem is driving me crazy.  The layout works fine in IE (so 
> of course
> there's a problem...), and for some odd reason the left content box gets 
> pushed below
> the floated right element in all the other browsers. I know some of my code 
> doesn't
> validate (it happens with content management systems, I have no control over 
> it), but I
> don't see anything that would cause it to not let the left box float next to 
> the box on
> the right (although when I hide the #xmlfeed1, there's no problem, so I think 
> that's
> the problem).  Grrr...
>
> Can anyone see something that I am not seeing?  It's at:
> http://new.jocolibrary.org/default.aspx?id=2173
>

Hi Amy,
I think you are on the right track. #xmlfeed1 is before #contentbox1
in the source code. Modern browsers are obeying rules for floats, and
not displaying the second floated element higher than the first:

"The outer top of a floating box may not be higher than the outer top
 of any block or floated box generated by an element earlier in the
 source document." (W3.org)

I can think of no solution that does not involve changing the source.
Sorry.

Cordially,
David
--


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

[css-d] Float problem

[Amy Drayer]

Dear CSSers:

This floating problem is driving me crazy.  The layout works fine in IE (so
of course there's a problem...), and for some odd reason the left content
box gets pushed below the floated right element in all the other browsers.
I know some of my code doesn't validate (it happens with content management
systems, I have no control over it), but I don't see anything that would
cause it to not let the left box float next to the box on the right
(although when I hide the #xmlfeed1, there's no problem, so I think that's
the problem).  Grrr...

Can anyone see something that I am not seeing?  It's at:
http://new.jocolibrary.org/default.aspx?id=2173

The code in question is:

.article, #xmlfeed1, #contentbox2 {
  clear:right;
  float:right;
  width:45%;
  margin-bottom:2%;
}

#contentbox1 {
  float:left;
  width:52%;
}

Thank you so much in advance!!


-- 
In peace,

Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] float problem

[Audra Coldiron]

Martin Paton wrote:
> Hi
>  
> I've got a nice 3 col layout working.
> 
> Problem is, in the "centre" column I need to create an unordered list
> which needs to be floated left
> 
> When I clear the float underneath, it any content after the clear
> appears in the centre column, but just beneath where the left menu ends.
> 
> This problem affects every browser.

Float your centre column too and you'll be able to use floats with 
clears inside that column with no problem.

AC
-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS. 
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem

[Martin Paton]

Hi
 
I've got a nice 3 col layout working.

Problem is, in the "centre" column I need to create an unordered list
which needs to be floated left

When I clear the float underneath, it any content after the clear
appears in the centre column, but just beneath where the left menu ends.

This problem affects every browser.

I.e


[  LEFT  ] [   CENTRE   ] [  RIGHT  ]
[] [] [ ]
[] [  content   ] [ ]
[] [  floatleft ] [ ]
[] [] [ ]
[] [] 
[] [] 
[] [] 
[] [] 
[] []
[] []
   [  content   ] 
  post-clear

Martin


This message has been scanned for malware by SurfControl plc. 
www.surfcontrol.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] float problem. Was: Born again CSS

[Luc]

Good afternoon Sarah,
   
It was foretold that on 1/6/2007 @ 14:41:49 GMT-0400 (which was
15:41:49 where I live) Sarah Atkinson would write:



> Well if it's a 3 column layout then you should have 4 divs

Tnx Sarah ... i'm heading out for the weekend now but i'll give it a
try on monday!

 
-- 
Best regards,
 Luc
_

Powered by The Bat! version 3.99.3 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"Priests console each other on the fact they aren't married when they
hear women in confession". - Armand Salacroix. 


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

Re: [css-d] float problem. Was: Born again CSS

[Sarah Atkinson]

-Original Message-
From: Luc [mailto:[EMAIL PROTECTED] 
Sent: Friday, June 01, 2007 2:30 PM
To: Sarah Atkinson
Subject: Re: [css-d] float problem. Was: Born again CSS

As  to  your question if i have a mock pic, it's attached hereby. How
 it  should look: left the nav, center the rounded text, right the pic
 and underneath all that the thumbs.

 Basicly it's just a 3 column lay-out 

--

Well if it's a 3 column layout then you should have 4 divs


Float this one left, set to width 33% or so, and add your left stuff



middle stuff
float left
width 33%



big picture
float left
width 33%



thumbnails
bottom stuff
float left
clear both




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

Re: [css-d] float problem. Was: Born again CSS

[Sarah Atkinson]

DO you have a mock pict of how you want the layers to look? As to what
order and where?
Also checkout
http://csscreator.com/divs-do-not-replace-tables
http://1976design.com/blog/archive/2004/09/07/link-presentation-fitts-la
w/


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Luc
Sent: Friday, June 01, 2007 8:34 AM
To: Css list
Subject: [css-d] float problem. Was: Born again CSS

 Good morning list,

 After over 1 year of not messing with CSS i'm picking up CSS-design
 again and i'm stunned of how much i already forgot. I'm doing a
 mockup at the moment involving floats and they go crazy on me.

 On resizing the viewport the center float jumps down ... is there a
 kind soul out there that can point me in the right direction to get
 the floats sit tight?  Or maybe i'm on the wrong path and need
 absolute positioning?

 page: http://www.dzinelabs.com/projects/MP/Pages/test.html

 sheet: http://www.dzinelabs.com/projects/MP/Styles/Test%20nav.css  
  
 
-- 
Best regards,
 Luc


Powered by The Bat! version 3.99.3 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"Until you walk a mile in another man's moccasins, you can't imagine
the smell."


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


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

[css-d] float problem. Was: Born again CSS

[Luc]

 Good morning list,

 After over 1 year of not messing with CSS i'm picking up CSS-design
 again and i'm stunned of how much i already forgot. I'm doing a
 mockup at the moment involving floats and they go crazy on me.

 On resizing the viewport the center float jumps down ... is there a
 kind soul out there that can point me in the right direction to get
 the floats sit tight?  Or maybe i'm on the wrong path and need
 absolute positioning?

 page: http://www.dzinelabs.com/projects/MP/Pages/test.html

 sheet: http://www.dzinelabs.com/projects/MP/Styles/Test%20nav.css  
  
 
-- 
Best regards,
 Luc


Powered by The Bat! version 3.99.3 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"Until you walk a mile in another man's moccasins, you can't imagine
the smell."


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

Re: [css-d] float problem...

[Chris Martin]

Sorry, originally posted this from my mobile and there's no 'reply
all', so this didn't make it back to the list

the way the css is defined, #left and #right would need to be nested
inside a div, that's nested inside the 'header-bottom' class, but
that's not how it's marked up.

try simply

#left { width: 190px; float: left; }
#right { width: 560px; float: right; }

this would work too

.header-bottom #left { width: 190px; float: left; }
.header-bottom #right { width: 560px; float: right; }

IMO there's no need because these are ID's, and they won't (or
shouldn't) be found more than once in the markup.


On 11/17/06, Marty Martin <[EMAIL PROTECTED]> wrote:
> I'm having trouble getting div#left and div#right to float correctly.  I
> want them beside each other but right now they are wrapping under each other
> and I can't figure where I'm going wrong with this float...help?!
>
> Here's what I have--
>
> .header-bottom { width:755px; background-color: #FFF; background-image:
> url(../img/page-bg.gif); padding-top: 1px; color: #fff; }
> .header-bottom div { height: 177px; width: 751px; margin: 0 auto;
> background-color: #000c53; }
> .header-bottom div #left { width: 190px; float: left; }
> .header-bottom div #right { width: 560px; float: right; }
>
> < div class="header-bottom">
>   < div id="left">left
>   < div id="right">
> < img src="images/urologic-experts-header.jpg" width="560" height="177"
> alt="Roanoke Urology" />
> < /div>
>
> You can view here--  http://urologicsurgeryonline.com/
>
>
> Thanks!
>
> Marty Martin
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


-- 

Chris Martin
Web Developer
Open Source & Web Standards Advocate
http://www.chriscodes.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] float problem...

[muskokee]

Try floating the right one to the left as well.  They should sit beside each
other then.

On 11/17/06, Marty Martin < [EMAIL PROTECTED]> wrote:
>
> I'm having trouble getting div#left and div#right to float correctly.  I
> want them beside each other but right now they are wrapping under each
> other
> and I can't figure where I'm going wrong with this float...help?!
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem...

[Marty Martin]

I'm having trouble getting div#left and div#right to float correctly.  I
want them beside each other but right now they are wrapping under each other
and I can't figure where I'm going wrong with this float...help?!

Here's what I have--

.header-bottom { width:755px; background-color: #FFF; background-image:
url(../img/page-bg.gif); padding-top: 1px; color: #fff; }
.header-bottom div { height: 177px; width: 751px; margin: 0 auto;
background-color: #000c53; }
.header-bottom div #left { width: 190px; float: left; }
.header-bottom div #right { width: 560px; float: right; }

< div class="header-bottom">
  < div id="left">left
  < div id="right">
< img src="images/urologic-experts-header.jpg" width="560" height="177"
alt="Roanoke Urology" />
< /div>

You can view here--  http://urologicsurgeryonline.com/


Thanks!

Marty Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float problem (bug?) only in Opera and IE

[Daryl Spitzer]

You'll see in http://www.spitzer.us/daryl/Daryl_Spitzer_resume.html
that in Opera (9.0.2) and IE (6.0) that the first date and city under
"Experience" and the word "ongoing" under "Education" float up too
high.  This is strange, because they're the same class as the ones
below, which are fine.  And this doesn't happen in Firefox or Safari.

Does anyone recognize my mistake, or recognize this as a bug?

(Note that the CSS is contained within the XHTML of the URL above.)

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

Re: [css-d] Float problem

[Stuart Homfray]

Hi Christine,

Christine Reed wrote:
> 
> http://clairerichco.uk/hypnotherapy.html full css at attached file
> 

Is the url http://www.clairerich.co.uk/whatishypnotherapy.html ?? :)


> 
> Problem: Float leaving a huge gap Scroll down to the picture of the
> dog - why doesn't it float just ouside the paragraph and has to leave
> such a big gap. Have tried and checked everything - so I think
> 

Have a look at this rule:

#content img{
padding:0;
margin:0;
position:relative;  <-- here
left:177px; <-- and here!
}

If you remove (or comment out) the two highlighted lines everything 
should become clear!

You might want to add in a left margin declaration too (say, 
margin-left:1em )

cheers,

Stuart
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float problem

[Dave Goodchild]

On 25/07/06, Christine Reed <[EMAIL PROTECTED]> wrote:
>
> Hi everyone,
>
> Please could someone put me out of this misery?
>
> http://clairerichco.uk/hypnotherapy.html
> full css at attached file
>
>
> Problem:
> Float leaving a huge gap
> Scroll down to the picture of the dog - why doesn't it float just ouside
> the paragraph and has to leave such a big gap.
> Have tried and checked everything - so I think
>
> Would be so grateful for some help on this!
>
> Many thanks to anyone who has taken the time to read this email.
>
> Christine


The site does not appear!




-- 
http://www.web-buddha.co.uk
http://www.projectkarma.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float problem

[Christine Reed]

Hi everyone,

Please could someone put me out of this misery?

http://clairerichco.uk/hypnotherapy.html
full css at attached file


Problem:
Float leaving a huge gap
Scroll down to the picture of the dog - why doesn't it float just ouside the 
paragraph and has to leave such a big gap.
Have tried and checked everything - so I think

Would be so grateful for some help on this!

Many thanks to anyone who has taken the time to read this email.

Christine

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem... eh

[Nicholas Morgan]

Well I was trying to be slick using floats the way they were meant to  
be used and well of course IE doesn't cooperate.

I tried setting the heights of the containing wrappers to 1% for IE  
only and setting the line height. Any other suggestions?

Here is the url for the page:

http://rochoet.newcitymedia.com/test.html

stylesheets:

http://rochoet.newcitymedia.com/css/generic.css
http://rochoet.newcitymedia.com/css/layout.css
http://rochoet.newcitymedia.com/css/ie.css

Problem only shows up with IE.  Expected effect is in Firefox.  It is  
not polished but has the structure and most of the graphics.

Nick

 
-
Nick Morgan | Web Developer | New City Media
P: 540.552.1320 x204   F: 540.552.5493  C: 540.921.7835  W:  
www.newcitymedia.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem -fixed it

[Eoin Maguire]

Ignore my earlier email, fixed the problem, middle column was missing a
float.

 

Thanks

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem in FF

[Theoracle9]

hi,
I am a newbie. My css works in IE, but not FF. I tried using floats. Please help
thanks
http://www.badcreditdeleter.com

I validated the XHTML and CSS and it still does not work in Mozilla
thanks again

www.sharpindividuals.net
__
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 IE v. FF

[Marty Martin]

As usual, my code works perfectly in FF but breaks in IE.  I know
that's a shocker to you-all.  Can someone point out what I need to do
to fix this?

I have the following code---







In FF the second div is moving up beside the first div as it should. 
In IE it isn't.

See here-- http://www.roanokehousehunter.com/

Help!!

marty
__
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 (update) - bluelink.net

[Mikhail Bozgounov]

Sorry, forgot to mention:

Version: FireFox 1.07 on WinXP Pro :-)


__
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

[Roy Schestowitz]

Quoting Tim Zappe:


How do I make this so that the #footer stays at the bottom?

http://www.western.edu/admissions/new/viewbook.html

Thanks
-t


Relevant CSS bits:

#footer{clear:both;width:764px;margin:0 auto;background:#5c5c5c;}
#footer_content{padding:10px 0 0;text-align:left;color:#a0a0a0;}
#footer_nav{clear:both;text-align:center;padding:15px 0 30px;}

#footer_nav a, #extra_nav a{color:#a0a0a0;font-weight:normal;}
#footer_nav a:hover, #extra_nav a:hover{color:#000;}

I fail to see where you instruct for footer to stay at the bottom.

Try adding something like the following to your stylesheet:

position:absolute; bottom:0; left:0;

Given the brevity of your message, I am not entirely sure what you are 
trying to

achieve, but I hope my suggestion makes a good starting point.

Roy


--
Roy S. Schestowitz
http://Schestowitz.com

__
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

[Tim Zappe]

How do I make this so that the #footer stays at the bottom?

http://www.western.edu/admissions/new/viewbook.html

Thanks
-t
-- 
Tim Zappe
Junior :: Computer Informational Science
Western State College of Colorado

http://www.tzappe.com
http://www.western.edu
__
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 IE Mac... display:inline-block

[Tracy Shorrock]

Spoke too soon...

I've fixed the problem in IE 5.2 where the right floated content 
dropped below the left floated content when you resized the window using


* html>body div.floatbox {float:none; display:inline-block}

However, I'm now getting this problem (screenshot): 
http://www.vandevelde.co.uk/WebAlbum/IEMac.tiff when the window is 
smaller than the content. When you make the width of the browser window 
wider it moves into the correct place... Help!


I'm determined to get this to work, so any solutions would be 
appreciated


Cheers,

Tracy

From: Tracy Shorrock <[EMAIL PROTECTED]>
 Thank you for the link, it lead me to a page which helped solve my  
IE 5.2 problem as well.


http:// www.vandevelde.co.uk/WebAlbum/safari1.tiff
http://www.vandevelde.co.uk/WebAlbum/index.html
http://www.vandevelde.co.uk/WebAlbum/presentation.css
http://www.vandevelde.co.uk/WebAlbum/layout.css



__
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

[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/

[css-d] float problem--repost

[Jeanne Prine]

Hi Kaspars,

Thanks very much for your reply, which was very
helpful. I first saw Doug Livingstone's code in
a book by someone else, but with no width included
for #outer. His code at www.redmelon.net/tstme/
3cols2/noborder.htm has width: auto which I tried 
just before I got your reply. As you saw, that didn't work--but your suggestion 
did. 

This is my first css layout, so I appreciate the
corrections and have replaced the incorrect classes with  and . I 
see your point about just using the code on www.redmelon.net and will clean
up my code with that model in mind.   

But I'm trying to make the same underlying structure work for both main and 
back page layouts (which are quite different visually), so that's why I needed 
to alter his column widths. I definitely want to keep
all 3 floating columns (and the header and footer),
just with minor variations. I'm still experimenting
and thinking things through but will soon be able
to move the structural code into a separate css file
and organize all the rest of the presentational code (the big mess). ;)

Regards,
Jeanne



Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
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--repost

[Kaspars Dambis]

Jeanne Prine wrote:

Hello,

I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80% 
(but then that breaks at 800 x 600)?  What I want is for #navcontainer to float 
left but it's floating to the far right instead.  Layout is based on one of 
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div.  The columns are intended to be different colors but on this particular page they're all #fff (by design). 
 
Here are the URLs--but my mail program will probably split them onto 2 lines and underline only the first line. Please watch out for the truncated URLs. 


www.rx.uga.edu/main/home/redesign/annual_giving.html

www.rx.uga.edu/main/home/redesign/annual.css
 
---code sample begins---

#outer {
border-left: 227px solid #fff; /*left column background */ 
border-right: 140px solid #fff; /*right column background */

background-color: #fff; /*center column background */
}

#inner {
margin: 0;
width: 100%;
}

#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}

#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px; 
padding: 4px;

border: 1px solid silver;
}

#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}

#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}

#navcontainer a { 
background-color: #fff;

color: #333;
border-bottom: 1px dotted silver;
}

#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}

#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}


.here {
background: transparent;
color: #99;
text-decoration: underline;
}

---code sample ends---

If anyone can help, I'd really appreciate it.

Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
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/



Hi Jeanne,

One more thing to add. If this 
http://www.redmelon.net/tstme/3cols2/ is the layout you 
are trying to achieve (with floating central column) I 
suggest you to use the code on that site. Yours is very 
messy and there are tags like .bold which do the  
thing. I mean, the site is okei, but you could make the 
code much more cleaner (and floating middle column, to add).


Best regards,
Kaspars
__
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--repost

[Kaspars Dambis]

Jeanne Prine wrote:

Hello,

I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80% 
(but then that breaks at 800 x 600)?  What I want is for #navcontainer to float 
left but it's floating to the far right instead.  Layout is based on one of 
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div.  The columns are intended to be different colors but on this particular page they're all #fff (by design). 
 
Here are the URLs--but my mail program will probably split them onto 2 lines and underline only the first line. Please watch out for the truncated URLs. 


www.rx.uga.edu/main/home/redesign/annual_giving.html

www.rx.uga.edu/main/home/redesign/annual.css
 
---code sample begins---

#outer {
border-left: 227px solid #fff; /*left column background */ 
border-right: 140px solid #fff; /*right column background */

background-color: #fff; /*center column background */
}

#inner {
margin: 0;
width: 100%;
}

#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}

#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px; 
padding: 4px;

border: 1px solid silver;
}

#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}

#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}

#navcontainer a { 
background-color: #fff;

color: #333;
border-bottom: 1px dotted silver;
}

#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}

#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}


.here {
background: transparent;
color: #99;
text-decoration: underline;
}

---code sample ends---

If anyone can help, I'd really appreciate it.

Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
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/



Hi Jeanne,

The error is from the width: auto; in #outer. It should be 
something like:


#outer {
width: 522px;
[...]
}

Goodnight,
Kaspars
__
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--repost

[Jeanne Prine]

Hello,

I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80% 
(but then that breaks at 800 x 600)?  What I want is for #navcontainer to float 
left but it's floating to the far right instead.  Layout is based on one of 
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div.  The columns are intended to be different colors but on this 
particular page they're all #fff (by design). 
 
Here are the URLs--but my mail program will probably split them onto 2 lines 
and underline only the first line. Please watch out for the truncated URLs. 

www.rx.uga.edu/main/home/redesign/annual_giving.html

www.rx.uga.edu/main/home/redesign/annual.css
 
---code sample begins---
#outer {
border-left: 227px solid #fff; /*left column background */ 
border-right: 140px solid #fff; /*right column background */
background-color: #fff; /*center column background */
}

#inner {
margin: 0;
width: 100%;
}

#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}

#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px; 
padding: 4px;
border: 1px solid silver;
}

#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}

#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}

#navcontainer a { 
background-color: #fff;
color: #333;
border-bottom: 1px dotted silver;
}

#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}

#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}


.here {
background: transparent;
color: #99;
text-decoration: underline;
}

---code sample ends---

If anyone can help, I'd really appreciate it.

Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
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/