[css-d] Layout jumps around

[wlb]

Greetings!

I have a minor but irritating problem.

I am prototyping a site that uses a graphic navbar at the top. The buttons
work, but some of the buttons ("classes" and "seminar") cause the entire
layout to jump about 10 px to the right when clicked. This only happens in
Safari and Opera on the Mac. Firefox on Mac and WIN and IE 6 & 7 on WIN have
no problem, as far as I can tell. In WIN IE 5 on the MAC, the nav buttons
don't show up at all. I haven't checked it in WIN IE 5.

 All these buttons have uniform CSS in the external stylesheet, so they
shouldn't jump around like this. I have combed through the HTML in
"classes.html" and "seminar.html" (the problem files) but can't find
anything strange or wrong. The CSS validates and the five HTML files do as
well. I am at a loss to figure this out.

Here are the URLs:

http://www.boletta.com/bolestyle/

http://www.boletta.com/bolestyle/bolestyle.css

Any help appreciated.

Bill Boletta
__
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] Layout jumps around

[Gunlaug Sørtun]

wlb wrote:

> I am prototyping a site that uses a graphic navbar at the top. The 
> buttons work, but some of the buttons ("classes" and "seminar") cause
>  the entire layout to jump about 10 px to the right when clicked. 
> This only happens in Safari and Opera on the Mac. Firefox on Mac and 
> WIN and IE 6 & 7 on WIN have no problem, as far as I can tell.

> http://www.boletta.com/bolestyle/

Vertical scrollbar comes and goes, which causes jumping. It isn't
limited to the browsers you mention, as I get that jumping in all non-IE
browsers on any OS.

Make pages taller than the browser-window - min-height: 100% + 1px or
something, or style for a permanent vertical scrollbar in other ways.

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] div doesn't contain img if small window, no floats involved

[Henrik Nyh]

Hi,

I'm seeing an unexpected issue where an image inside a div is not
contained by the div, if the browser window is smaller than the image
width. There are no floats.

What I expect is for the div to contain the image, so the div is
stretched out to the width of the image plus the div padding.

Tiny test case here, with inline CSS: http://nyh.name/x.html The
source of that page is also at the end of this mail.

I see the issue in Firefox 3 and Safari 3 on OS X. Have not looked in
other browsers yet.

I've noticed that if I add position:absolute or float:left to the div,
the image will be contained in Firefox but not Safari, and the div
will then be flush against the right side of the window instead of
respecting the body padding.

I don't want the image to be scaled down in size, so workarounds like
using max-width:100% on the img don't cut it. This is for a "show
full-size image" type page.

Source for the page:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">

   Test
   
 body {
   margin: 0;
   padding: 30px;
   background: pink;
 }
 div {
   margin: 0;
   padding: 10px;
   background: #FFF;
   border: 1px solid #000;
 }
   





 

   http://www.athar.pk/wp-content/uploads/2008/06/widescreen-wallpaper.jpg";
alt="" />
 



__
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] div doesn't contain img if small window, no floats involved

[Gunlaug Sørtun]

Henrik Nyh wrote:

> What I expect is for the div to contain the image, so the div is 
> stretched out to the width of the image plus the div padding.
> 
> http://nyh.name/x.html



-- 
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] div doesn't contain img if small window, no floats involved

[Peter Hyde-Smith]

- Original Message - 
From: "Henrik Nyh" <[EMAIL PROTECTED]>
To: 
Sent: Saturday, November 15, 2008 2:26 PM
Subject: [css-d] div doesn't contain img if small window, no floats involved


> Hi,
>
> I'm seeing an unexpected issue where an image inside a div is not
> contained by the div, if the browser window is smaller than the image
> width. There are no floats. What I expect is for the div to contain the 
> image, so the div is
> stretched out to the width of the image plus the div padding.
>
> Tiny test case here, with inline CSS: http://nyh.name/x.html The
> source of that page is also at the end of this mail.
>
> I don't want the image to be scaled down in size, so workarounds like
> using max-width:100% on the img don't cut it. This is for a "show
> full-size image" type page.
>

Henrik:

I can only give you a partial answer. The image is 1280px x 800 px, so the 
behavior is not unexpected in smaller viewports. Your CSS constrains the 
dimensions of the  relative to the viewport. If the viewport is not 
1280+60+2+20 = 1362px (more or less) in dimension, the image will never be 
constrained and centered in the  because the image overflow property 
defaults to visible. If you want to prevent the image from overflowing the 
, you have to declare img {overflow: hidden;}, although that doesn't 
resolve an issue with the right padding not being present. Another thing, if 
the viewport is larger than 1362px, the div will be (much) larger than the 
img. I think you're SOL if you don't want to scale the image. Otherwise, 
declare img {width: 100%} in the CSS, or do the same thing in the XHTML, 


Peter
www.fatpawdesign.com
developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024
checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1
In God we trust, all else bring data... 

__
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] div doesn't contain img if small window, no floats involved

[Henrik Nyh]

On Sat, Nov 15, 2008 at 9:50 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Henrik Nyh wrote:
>> What I expect is for the div to contain the image, so the div is stretched
>> out to the width of the image plus the div padding.
>> http://nyh.name/x.html
>
> 

Thanks a lot, Gunlaug.

I would be curious to hear if you (or anyone else) know *why* the div
does not grow to fit without using floats.

That did fix the particular issue, though it has some undesirable
side-effects like having to deal with floats (the actual page is, of
course, a little more complex than the example) and that for small
images, the div will shrink (without float, it becomes no smaller than
the window width). A small div would be okay if I could center it, but
since it's floated that becomes tricky also...

I think if there is no easy and simple solution for this, I think I
will take the easy way out and go with max-width:100% on the img; it
will be made smaller if the window is small, but I think all in all
I'd rather accept that than use a lot of workarounds.
__
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] div doesn't contain img if small window, no floats involved

[Henrik Nyh]

On Sat, Nov 15, 2008 at 9:58 PM, Peter Hyde-Smith
<[EMAIL PROTECTED]> wrote:
>
> - Original Message - From: "Henrik Nyh" <[EMAIL PROTECTED]>
>> I'm seeing an unexpected issue where an image inside a div is not
>> contained by the div, if the browser window is smaller than the image
>> width. [snip]
>
> If the viewport is not
> 1280+60+2+20 = 1362px (more or less) in dimension, the image will never be
> constrained and centered in the  because the image overflow property
> defaults to visible. If you want to prevent the image from overflowing the
> , you have to declare img {overflow: hidden;}, although that doesn't
> resolve an issue with the right padding not being present.

Thanks for your reply!

I'm afraid overflow:hidden (on the div; don't think it has any effect
on the img) isn't what I want, since it hides part of the img instead
of making the containing div wider.

Another thing, if
> the viewport is larger than 1362px, the div will be (much) larger than the
> img. I think you're SOL if you don't want to scale the image. Otherwise,
> declare img {width: 100%} in the CSS, or do the same thing in the XHTML,
> 

Yeah, as I mentioned in my reply to Gunlaug's solution, I might scale
the image with max-width. It won't be exactly what I want, but in this
case better than the image breaking out of the div, and probably
better than workarounds on top of workarounds.
__
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] div doesn't contain img if small window, no floats involved

[Gunlaug Sørtun]

Henrik Nyh wrote:
>>> http://nyh.name/x.html
>> 

> I would be curious to hear if you (or anyone else) know *why* the div
>  does not grow to fit without using floats.

You want a loss-free shrink-wrap effect and that can only be achieved
with floats or table. Since IE6/7 don't support CSS table your options
are somewhat limited.

The following exemplifies the problems with lack of CSS support in
present IE...



...and the "solution" in my test page will keep IE8 and probably also
future IE versions on level with IE5.5 - quirks mode, which is no good.

An HTML table construction would work though.


Note that IE6 has severe problems with image-scaling, if you choose that
option. Too many images or too large files, and IE6 and older may simply
time out and forget image-proportions on slower connections. The result
is ugly.

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] div doesn't contain img if small window, no floats involved

[Henrik Nyh]

On Sat, Nov 15, 2008 at 11:02 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Henrik Nyh wrote:

 http://nyh.name/x.html
>>>
>>> 
>
>> I would be curious to hear if you (or anyone else) know *why* the div
>>  does not grow to fit without using floats.
>
> You want a loss-free shrink-wrap effect and that can only be achieved
> with floats or table.

Thanks a lot for the explanation.

> ...and the "solution" in my test page will keep IE8 and probably also
> future IE versions on level with IE5.5 - quirks mode, which is no good.

By the "solution" in your test page, are you referring to your first
reply with the floats on the body and div?

> An HTML table construction would work though.

That sounded promising. Tried it here: http://nyh.name/y.html

Hope I understood you correctly.

It mostly works (again, only tried in Firefox 3 and Safari 3 on OS X
so far). The container (now a td instead of a div) is full-width for
smaller images (see below the large image on y.html), and grows to
contain larger images.

With a small window and a large image, the white container will still
go almost flush against the right-hand side of the window, though, and
not respect the body padding, so not quite there. Perhaps there is no
perfect solution.
__
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] div doesn't contain img if small window, no floats involved

[Gunlaug Sørtun]

Henrik Nyh wrote:

> By the "solution" in your test page, are you referring to your first 
> reply with the floats on the body and div?

No. I referred to the fact that I throw all IE/win versions into quirks
mode here...



...since even quite old versions then act as intended even if they don't
understand/support the relevant CSS.

>> An HTML table construction would work though.

> With a small window and a large image, the white container will still
>  go almost flush against the right-hand side of the window, though,
> and not respect the body padding, so not quite there. Perhaps there
> is no perfect solution.

You can still float the body to make it expand. You can then center all
non-floating content inside the body, but not body itself.

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] div doesn't contain img if small window, no floats involved

[Peter Hyde-Smith]

- Original Message - 
From: "Henrik Nyh" <[EMAIL PROTECTED]>
To: 
Sent: Saturday, November 15, 2008 3:30 PM
Subject: Re: [css-d] div doesn't contain img if small window,no floats 
involved

>
> I would be curious to hear if you (or anyone else) know *why* the div
> does not grow to fit without using floats.
>

Henrik:

It's the way browsers render block-level elements. Someone will correct me 
if I am wrong, but unless told otherwise (including borders, padding, and 
margins) block-level elements automatically expand in width to be 100% as 
wide as their parent, and expand in height to contain their content (there 
are exceptions to this last bit). They do not automatically expand in width 
to contain their content. The browser defaults the CSS overflow property to 
be : visible; Thus, if the content is wider than its container, as in your 
case the image is wider than (many/most) browser viewports, the overflow 
will be visible. If you want to see what happens when the browser viewport 
is wider than the image, reset you monitor resolution to be 1400px or 1600px 
wide! I didn't think overflow: hidden; was what you wanted. And yes, you 
declare that on the container, not the content.

Peter
www.fatpawdesign.com
developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024
checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1
In God we trust, all else bring data... 

__
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] Layout jumps around

[David Laakso]

wlb wrote:
> Greetings!
>
> I have a minor but irritating problem.
>
>
> http://www.boletta.com/bolestyle/
>
> Bill Boletta
>   


See page shift:




__
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] Right Column div spacing issues

[Ambient Glow]

Having a couple of problems with the RightColumn1 div  on this page:

page: http://ambientglow.com/garage/manz/sample-inside.html
css: http://ambientglow.com/garage/manz/sample-inside.html

1.  Viewing the page in IE the Content and RightColumn1 divs line up
so the tops are parallel with each other. Viewing the page in FF,
Opera, Mac, Camino, and Safari (i.e., all the other browsers ;-)) the
tops of these divs are not aligned.  Any ideas on how to fix this?

2.  There is a "box" div in the RightColumn1. One "box" contains a
photo, the other a table.  Any idea on how to eliminate the
several-pixel space between the image and the table?  I've tried
putting the image directly into the box containing the table but that
didn't work.

Thanks,

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