Re: [css-d] IE6 doesn't see styles

[David Hucklesby]

On 1/20/10 1:20 PM, Peter Bradley wrote:
> James White wrote:
>> It's an issue with multipleIE, basically IE6 thinks that it's whatever
>> version your native IE installation is when evaluating conditional
>> styles because multiple IE doesn't change the IE version that's stored
>> in your system registry.
>>
>
> Phew!  That's a relief.
>
> Many thanks for that, James.  You learn something every day.  I was
> beginning to doubt IETester, but clearly it's getting it right.
>

Regarding the conditional comments, I thought that this issue had been 
fixed? There was a discussion about this on PositionIsEverthing[1] some 
years ago, which led to Tredosoft issuing these standalones along with 
automatic changes to the registry[2].

Not being sure what your setup is, I don't know if this is relevant - 
However, according to the Tredosoft site, Multiple IE does not work on 
Vista.

[1] http://www.positioniseverything.net/articles/multiIE.html
[2] http://tredosoft.com/Multiple_IE

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] Fraction bar

[Jukka K. Korpela]

Del Wegener wrote:

> I have been fighting these same issues for a several years and I am
> convinced that the best method is to use images.

Hardly. Using images for such purposes are the last resort and always come 
with problems, even if you define them with CSS settings that make them 
scale according to font size and provide adequate alt attributes. For 
example, any text in an image has a specific shape which practically always 
differs from the one in text characters. An "a" in your image is different 
from an "a" in your text, which is bad if they are supposed to be same 
variale.

> You can see illustrations by looking at some of the examples on
> http://www.drdelmath.com/intermediate_algebra/chapter_summary/intermediate_algebra_chapter1_summary.htm

It should be easy to see some of the fundamental problems there.

It is not easy to find any example of the use of fraction bar there. I'm 
afraid you misunderstood the question, or the OP misunderstood what 
"fraction bar" means. It means a character resembling "/" but with different 
angle and properties, used to construct fractional numbers in a particular 
rendering, similar to that of "½".

There are some _characters_ such as "½" that you can use in documents. Even 
a character for 2/3 exists in Unicode and is relatively well supported by 
fonts (even in Arial). So they might be suitable if you really want 
fractions. You can write e.g. the vulgar fraction 2/3 as a character in HTML 
using the reference ⅅ. Check out Unicode resources such as 
http://www.fileformat.info/info/unicode/ to find what's available.

For some notes on using HTML and CSS for presenting mathematical 
expressions, check
http://www.cs.tut.fi/~jkorpela/math/

There's no good approach to fraction slash issue, in cases where the vulgar 
fractions are not suitable. You would need to reduce the size of digits, 
which tends to make their lines too thin, and positioning the digits well 
with respect to the slash (whether you use "/" or the Unicode fraction slash 
character) in a cross-browser way might be mission impossible.

In the OP's document, I would worry more about issues like using the proper 
minus sign (−) instead of the ambiguous hyphen-minus "-". (On a very 
ambitious web page, you would even consider using CSS, e.g. the 
vertical-align property, to position a minus sign well in the vertical 
direction. It should be obvious that e.g. if a−x looks good, then 
A−X won't, since lowercase and uppercase letters would require 
different vertical position for the minus.)

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/ 

__
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] Fraction bar

[Rob Emenecker]

>   http://www.cs.tut.fi/~jkorpela/math/#fractions
> 
> Their recommended solution (#8260 is the "fraction slash" character):
> 
> .above, .below { font-size: 70%;
> font-family: Verdana, Arial, sans-serif; } 
> .above { vertical-align: 0.7ex; } .below { vertical-align: -0.3ex; }
> 
> 5⁄8

I have had good success with this as well. It is a pretty decent method that
does not break your line spacing.

An alternate method that I've also used is:

.sup {
font-size: 0.67em;
position: relative;
top: -0.33em;
}

.sub {
font-size: 0.67em;
position: relative;
bottom: -0.2 em;
}

An example using inline styles can be found here:

http://www.hairydogdigital.com/samples/fraction.html

That example uses a standard forward slash (solidus). A better appearance
can be gotten using a fraction slash (u2044).

...Rob


Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
 

__
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] Fraction bar

[Del Wegener]

> I am Eduardo, from Buenos Aires.
> I have a site at
> 
> http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
>
> and I want to write numbers like 3/2 with a fraction bar, ie 3
> 
> 2
>
> Does anyone know how to do it?
>
> Thanks
> Eduardo

Eduardo;
I have been fighting these same issues for a several years and I am 
convinced that the best method is to use images.  I create the fraction in 
MS Word with the MathType add-on, then use Snagit to create a gif file and 
insert that in the HTML document.
You can see illustrations by looking at some of the examples on
http://www.drdelmath.com/intermediate_algebra/chapter_summary/intermediate_algebra_chapter1_summary.htm

Since my advice does not involve CSS, if you want more information, contact 
me off list.
Del
d...@delweg.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] Fraction bar

[Bill Braun]

Eduardo Varela wrote:
> Hi, first time I write here. 
> I am Eduardo, from Buenos Aires.
> I have a site at
> 
> http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
>
>   
Eduardo, Norton Internet Security is reporting 47 virus threats coming 
from this site. Are you aware of that?

Bill B

__
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] Fraction bar

[Craig Ogg]

> On Wed, Jan 20, 2010 at 7:23 PM, Eduardo Varela  wrote:
> > Hi, first time I write here.
> > I am Eduardo, from Buenos Aires.
> > I have a site at
> >
> > http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
> >
> > and I want to write numbers like 3/2 with a fraction bar, ie 3

There is good coverage of the options for doing this here:

  http://www.cs.tut.fi/~jkorpela/math/#fractions

Their recommended solution (#8260 is the "fraction slash" character):

.above, .below { font-size: 70%;
font-family: Verdana, Arial, sans-serif; }
.above { vertical-align: 0.7ex; }
.below { vertical-align: -0.3ex; }

5⁄8

Craig
__
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] Fraction bar

[Troy Harshman]

I think your best bet would be to use lists. I threw this code
together really quick and it looks good to me. Likely will need to be
tweaked to meet your specific needs, but it's a start.




ul {width: 8px; list-style:none;}
li.numerator {border-bottom:1px solid #000;}




3
2




On Wed, Jan 20, 2010 at 7:23 PM, Eduardo Varela  wrote:
> Hi, first time I write here.
> I am Eduardo, from Buenos Aires.
> I have a site at
>    
> http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion
>
> and I want to write numbers like 3/2 with a fraction bar, ie 3
>                                                                               
>      2
>
> Does anyone know how to do it?
>
> Thanks
> Eduardo
> __
> 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/

Re: [css-d] IE6 doesn't see styles

[Troy Harshman]

I played with your code for a few minutes and it appears that the IE6
conditional comments are working. I think your issue is related to
browser resolution. It looks fine in IE6 at 1280x1024, but not at
1024x768. Firefox, it looks fine regardless of screen resolution. You
also have another issue in IE6, the menus about double in width when
you put the mouse over them.
__
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] Fraction bar

[Eduardo Varela]

Hi, first time I write here. 
I am Eduardo, from Buenos Aires.
I have a site at

http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion

and I want to write numbers like 3/2 with a fraction bar, ie 3  

2

Does anyone know how to do it?

Thanks
Eduardo
__
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] IE6 doesn't see styles

[Peter Bradley]

Troy Harshman wrote:
> Well, I also so happen to have IE6 still on my XP install (I dual-boot
> Vista and XP), which I didn't upgrade to use for testing.  I'm still
> seeing the same behavior.  However, I notice you're using absolute
> positioning for your navigation and such, which may be making things
> more difficult than they need to be. Is there a particular reason why
> you didn't use floats? Using percentages and such with absolute
> positioning just seems like a situation where you'll upset IE. If you
> want the navigation and content to flow a certain way without styles,
> then you could float the left nav and content (left) in a div and then
> float that entire div left and float the right nav to the right. So
> your markup would be right nav, left nav, and then content, with right
> nav alone and left nav and the content in a div.. I would think that
> would work. You'd need an extra div, but it may make life easier with
> cross-browser compatibility.
>   
Thanks, Troy,

Yeah.  I'm sure it'd work.  The only thing against it would be SEO.  I 
may do that.

This isn't for a real site.  It's a demonstration for a presentation I'm 
doing to a writer's group, so I don't want anyone in the audience who's 
got IE6 on a laptop to suddenly stick a hand up and say, "Hey!  It 
doesn't work in IE6!".  I may do both just to show the choices that are 
available.

The real site that I took this from is the site of the group I'm giving 
the presentation to (http://www.wss.org.uk): so you'll see why it makes 
a good demonstration!

Thing is, I suppose, is that it's not the CSS that upsets IE.  It just 
doesn't see the CSS under some circumstances.  Given IE's history with 
floats I may yet have the same problem with floats.  I'll definitely 
give it a try, though.

BTW, when you say you're still seeing the same behaviour, do you mean 
the "Rendering correctly" behaviour, or the "Rendering incorrectly" 
behaviour"?  I'm hoping the former, but fearing the latter.

Thanks for the help.


Cheers


Peter
http://www.peredur.net

__
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] IE6 doesn't see styles

[Troy Harshman]

Well, I also so happen to have IE6 still on my XP install (I dual-boot
Vista and XP), which I didn't upgrade to use for testing.  I'm still
seeing the same behavior.  However, I notice you're using absolute
positioning for your navigation and such, which may be making things
more difficult than they need to be. Is there a particular reason why
you didn't use floats? Using percentages and such with absolute
positioning just seems like a situation where you'll upset IE. If you
want the navigation and content to flow a certain way without styles,
then you could float the left nav and content (left) in a div and then
float that entire div left and float the right nav to the right. So
your markup would be right nav, left nav, and then content, with right
nav alone and left nav and the content in a div.. I would think that
would work. You'd need an extra div, but it may make life easier with
cross-browser compatibility.

On Wed, Jan 20, 2010 at 4:39 PM, Peter Bradley  wrote:
> Troy Harshman wrote:
>> I happen to have IE6 on my computer at work. I'm going to be leaving
>> shortly, but I took a look at your page and code quick. The page
>> doesn't look the same in IE6 as it does in Firefox. The left and right
>> navigation menus are both pushed a ways off the screen. Based on your
>> IE6 conditional comments, it looks like they aren't coming through
>> since it appears you set some "left" properties to fix the issue.
>>
>
> Oh dear!  This is very odd.
>
> I just installed IE6 under WINE on my Ubuntu box.  It picks up the
> conditional styles OK in that configuration.  Why won't it just die!
>
> :)
>
> Anyone else got any ideas.  I really don't know what to make of this, now.
>
> Cheers
>
>
> Peter
>
> __
> 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/

Re: [css-d] IE6 doesn't see styles

[Peter Bradley]

Troy Harshman wrote:
> I happen to have IE6 on my computer at work. I'm going to be leaving
> shortly, but I took a look at your page and code quick. The page
> doesn't look the same in IE6 as it does in Firefox. The left and right
> navigation menus are both pushed a ways off the screen. Based on your
> IE6 conditional comments, it looks like they aren't coming through
> since it appears you set some "left" properties to fix the issue.
>   

Oh dear!  This is very odd.

I just installed IE6 under WINE on my Ubuntu box.  It picks up the 
conditional styles OK in that configuration.  Why won't it just die!

:)

Anyone else got any ideas.  I really don't know what to make of this, now.

Cheers


Peter

__
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] IE6 doesn't see styles

[Troy Harshman]

I happen to have IE6 on my computer at work. I'm going to be leaving
shortly, but I took a look at your page and code quick. The page
doesn't look the same in IE6 as it does in Firefox. The left and right
navigation menus are both pushed a ways off the screen. Based on your
IE6 conditional comments, it looks like they aren't coming through
since it appears you set some "left" properties to fix the issue.

On Wed, Jan 20, 2010 at 4:20 PM, Peter Bradley  wrote:
> James White wrote:
>> It's an issue with multipleIE, basically IE6 thinks that it's whatever
>> version your native IE installation is when evaluating conditional
>> styles because multiple IE doesn't change the IE version that's stored
>> in your system registry.
>>
>
> Phew!  That's a relief.
>
> Many thanks for that, James.  You learn something every day.  I was
> beginning to doubt IETester, but clearly it's getting it right.
>
> Cheers
>
>
> Peter
>
> __
> 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/

Re: [css-d] IE6 doesn't see styles

[Peter Bradley]

James White wrote:
> It's an issue with multipleIE, basically IE6 thinks that it's whatever
> version your native IE installation is when evaluating conditional
> styles because multiple IE doesn't change the IE version that's stored
> in your system registry.
>   

Phew!  That's a relief.

Many thanks for that, James.  You learn something every day.  I was 
beginning to doubt IETester, but clearly it's getting it right.

Cheers


Peter

__
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] IE6 doesn't see styles

[James White]

It's an issue with multipleIE, basically IE6 thinks that it's whatever
version your native IE installation is when evaluating conditional
styles because multiple IE doesn't change the IE version that's stored
in your system registry.

On Wed, Jan 20, 2010 at 4:08 PM, Peter Bradley  wrote:
> I have a page at:
>
> http://www.peredur.net/swanwick
>
> The main stylesheet is at:
>
> http://www.peredur.net/swanwick/styles/styles.css
>
> There are two blocks of inline, conditional styles; one block for IE7
> and one for IE6.
>
> IE7 picks up its styles fine, but IE6 doesn't appear to pick up those
> for IE6 - at least not when I use the MultipleIEs IE6 installation.  In
> IETester, the rendering is fine on an IE6 tab.  I don't have any other
> access to IE.
>
> Is there something I've missed concerning conditional styles that means
> that IE6 is ignoring the ones I've put in the file?
>
> The page's HTML is valid (per the w3c validator), as is the CSS.
>
> Many thanks in advance,
>
>
> Peter
>
>
>
> __
> 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] IE6 doesn't see styles

[Peter Bradley]

I have a page at:

http://www.peredur.net/swanwick

The main stylesheet is at:

http://www.peredur.net/swanwick/styles/styles.css

There are two blocks of inline, conditional styles; one block for IE7
and one for IE6.

IE7 picks up its styles fine, but IE6 doesn't appear to pick up those
for IE6 - at least not when I use the MultipleIEs IE6 installation.  In
IETester, the rendering is fine on an IE6 tab.  I don't have any other
access to IE.

Is there something I've missed concerning conditional styles that means
that IE6 is ignoring the ones I've put in the file?

The page's HTML is valid (per the w3c validator), as is the CSS.

Many thanks in advance,


Peter



__
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] font shorthand

[Thierry Koblentz]

IE in quirksmode does not drop a declaration such as: font:100% 
When other font aspects are already declared, it appears that IE resets all 
aspects to their default value, but preserve font-family.

Do you know what's the behavior of other browsers in quirksmode? Do they fail 
to obey the specs too

I'm wondering about the need to sandbox such declaration using the "*property" 
hack (or a CC) to serve font-size:100% to IE when browsers are in quirksmode.

If it is IE *specific*, then a simple "font:100%" should do it

Thanks

--
Regards,
Thierry | 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] Width 100% Question - 3rd Attempt

[Troy Harshman]

I viewed your site in 1024x768 and main sections were misaligned and I
did have to scroll horizontally.  You won't want to leave it like
that. All of the important stuff does fit within my screen, so you're
fine with the widths. I would center all of the important stuff and
then center the background image, and not force a width of 1600px
(which will likely produce a scroll). The important stuff would be
viewable down to 1024 without a horizontal scroll, they would just not
see all of the background.  Those with higher resolutions will see the
rest of the background. So basically, fixed width and the amount of
background shown will depend on the resolution of the user. Here is an
example of a site that does this -> http://www.webdesignerwall.com/

On Wed, Jan 20, 2010 at 10:30 AM, Elli Vizcaino  wrote:
> --- On Tue, 1/19/10, Alan Gresley  wrote:
>
>> From: Alan Gresley 
>> Subject: Re: [css-d] Width 100% Question - 3rd Attempt
>> To: "Elli Vizcaino" 
>> Cc: cs...@css-discuss.org
>> Date: Tuesday, January 19, 2010, 8:29 PM
>> Elli Vizcaino wrote:
>> > 3rd attempt not sure why my email isn't coming through
>> to this group.
>> > Hello Gang,
>> >
>> > I have the main wrapper of a site I'm coding set to
>> width: 100% it contains a background image that repeats
>> across width of page (repeat-x). However I notice that when
>> I resize the viewport the wrapper's background only goes
>> across to the width of the resized window and any containers
>> set to a specified width within it,  then look off.
>> >
>> > If I set a min-width to the wrapper then everything
>> looks fine. I am wondering why min-width has to be set in
>> order for the main wrapper to stretch across the viewport. I
>> thought setting it to 100% would take care of that just the
>> way a background image set to repeat-x on the body element
>> does, no matter what size the viewport is.
>> >
>> > For an idea of what I'm talking about, go here: 
>> > http://keithkemper.net/html/index.html and resize your
>> window.
>> >
>> >
>> > TIA,
>> > Elli
>>
>>
>> Hello Elli,
>>
>> Ok, take a look at this page (testing something else),
>>
>> 
>>
>> which has a white background on  and blue
>> background on the . This is normal for XHTML.
>> Since from the specs on overflow [1] has this.
>>
>> "UAs must apply the 'overflow' property set on the root
>> element to the viewport. When the root element is an HTML
>> "HTML" element or an XHTML "html" element, and that element
>> has an HTML "BODY" element or an XHTML "body" element as a
>> child, user agents must instead apply the 'overflow'
>> property from the first such child element to the viewport,
>> if the value on the root element is 'visible'."
>>
>> In layman terms, the  is the *initial
>> containing block* for the wrapper. When you resize the
>> window, the wrapper element overflows the 
>> element into the HTML. So the 100% declared on the wrapper
>> is still 100% of the width of the  element. This
>> leaves you with two simple choices. You may need to check
>> which works better the your page.
>>
>> #kk_main_wrapper {
>>   float:left;
>> }
>>
>> or
>>
>> body {
>>   float:left;
>> }
>>
>> On my test page, this works with the later.
>>
>>
>> 1. 
>>
>>
>> -- Alan http://css-class.com/
>>
>
> Alan,
>
> Thanks for your response it helped give me a better understanding as to why 
> my wrapper although set to width 100% was not "viewing" as 100% once the 
> window got resized. I went ahead and tried out some of your suggestions and 
> what I discovered was that whether I applied the overflow property to either 
> the html, body or wrapper container (which btw worked in having a 100% view 
> of wrapper w window resized) was that it removed the scroll bars from the 
> browser window, thus making it impossible for someone to view the site as 
> intended. Basically any one with a lower resolution than what I had set as my 
> min-width would not be able to see the complete site. So in this case, I 
> realize I'm better off setting min-width so folks can at least get scrollbars 
> to view site if need be. Unless you know of a way, that I can apply overflow 
> hidden so my wrapper stretches across window, whether resized or not and the 
> scroll bars can remain intact?
>
> Elli
>
>
>
> __
> 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
Suppor

Re: [css-d] Width 100% Question - 3rd Attempt

[Elli Vizcaino]

--- On Tue, 1/19/10, Alan Gresley  wrote:

> From: Alan Gresley 
> Subject: Re: [css-d] Width 100% Question - 3rd Attempt
> To: "Elli Vizcaino" 
> Cc: cs...@css-discuss.org
> Date: Tuesday, January 19, 2010, 8:29 PM
> Elli Vizcaino wrote:
> > 3rd attempt not sure why my email isn't coming through
> to this group. 
> > Hello Gang,
> > 
> > I have the main wrapper of a site I'm coding set to
> width: 100% it contains a background image that repeats
> across width of page (repeat-x). However I notice that when
> I resize the viewport the wrapper's background only goes
> across to the width of the resized window and any containers
> set to a specified width within it,  then look off.
> > 
> > If I set a min-width to the wrapper then everything
> looks fine. I am wondering why min-width has to be set in
> order for the main wrapper to stretch across the viewport. I
> thought setting it to 100% would take care of that just the
> way a background image set to repeat-x on the body element
> does, no matter what size the viewport is.
> > 
> > For an idea of what I'm talking about, go here: 
> > http://keithkemper.net/html/index.html and resize your
> window.
> > 
> > 
> > TIA,
> > Elli
> 
> 
> Hello Elli,
> 
> Ok, take a look at this page (testing something else),
> 
> 
> 
> which has a white background on  and blue
> background on the . This is normal for XHTML.
> Since from the specs on overflow [1] has this.
> 
> "UAs must apply the 'overflow' property set on the root
> element to the viewport. When the root element is an HTML
> "HTML" element or an XHTML "html" element, and that element
> has an HTML "BODY" element or an XHTML "body" element as a
> child, user agents must instead apply the 'overflow'
> property from the first such child element to the viewport,
> if the value on the root element is 'visible'."
> 
> In layman terms, the  is the *initial
> containing block* for the wrapper. When you resize the
> window, the wrapper element overflows the 
> element into the HTML. So the 100% declared on the wrapper
> is still 100% of the width of the  element. This
> leaves you with two simple choices. You may need to check
> which works better the your page.
> 
> #kk_main_wrapper {
>   float:left;
> }
> 
> or
> 
> body {
>   float:left;
> }
> 
> On my test page, this works with the later.
> 
> 
> 1. 
> 
> 
> -- Alan http://css-class.com/
> 

Alan, 

Thanks for your response it helped give me a better understanding as to why my 
wrapper although set to width 100% was not "viewing" as 100% once the window 
got resized. I went ahead and tried out some of your suggestions and what I 
discovered was that whether I applied the overflow property to either the html, 
body or wrapper container (which btw worked in having a 100% view of wrapper w 
window resized) was that it removed the scroll bars from the browser window, 
thus making it impossible for someone to view the site as intended. Basically 
any one with a lower resolution than what I had set as my min-width would not 
be able to see the complete site. So in this case, I realize I'm better off 
setting min-width so folks can at least get scrollbars to view site if need be. 
Unless you know of a way, that I can apply overflow hidden so my wrapper 
stretches across window, whether resized or not and the scroll bars can remain 
intact?

Elli 


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