Re: [css-d] Positioning a div

[Del Wegener]

I would play with floats.

Thanks mem.  I did play around as you suggested and it turned out that the 
secret was with overflow:auto.


Del 



__
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] Positioning a div

[mem]

Other more experienced may help better then me. 
Still. I would play with floats.

1) Add overflow:hidden; to your #container 
2) Add float: left; to both: vmenu and content;
3) Add overflow:hidden; to your #content
4) Group on a div, your h3 and img inside #content;
5) Float left your blue div;
6) Float left your red div;
7) Give your #footer the following: clear: both; (or left);

>From here, validate your markup and css, and if in doubt, post back.


k. regards,
mem

On Sep 27, 2012, at 16:24 , Del Wegener wrote:

> Good Morning;
> A colored illustration of my problem is at
> http://www.alliedcorrosion.com/products/aa_testing.php
> My question also appears in the green box in that illustration.
> 
> I have a pretty standard vertical menu (orange) on the left with content 
> (gray) on the right.  At the top of the content area will appear a left div 
> (blue) and right div (red).
> Below those two is to be a div (green) which is as wide as the gray content 
> div (and is inside that content div) and touches the bottom of the longer of 
> the blue or red div.
> 
> When I use clear:both or clear:left, the green div clears the menu div which 
> puts it far to far down the page.
> 
> How do I fix this?   Thanks
> 
> Del
> 
> 
> __
> 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/

[css-d] Positioning a div

[Del Wegener]

Good Morning;
A colored illustration of my problem is at
http://www.alliedcorrosion.com/products/aa_testing.php
My question also appears in the green box in that illustration.

I have a pretty standard vertical menu (orange) on the left with content 
(gray) on the right.  At the top of the content area will appear a left div 
(blue) and right div (red).
Below those two is to be a div (green) which is as wide as the gray content 
div (and is inside that content div) and touches the bottom of the longer of 
the blue or red div.


When I use clear:both or clear:left, the green div clears the menu div which 
puts it far to far down the page.


How do I fix this?   Thanks

Del


__
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] Positioning & Div Order with Media Queries

[David Laakso]

On Wed, Sep 19, 2012 at 5:07 PM, Matthew Willis  wrote:

> Hi CSS List,
>
> I am working on a site with a responsive layout via media queries and I'm
> having some difficulties. I need it set up so when the width of the screen
> is above 768px, a div containing logo appears as the first element, and
> then a div containing the navigation menu as the next element.
>
> However, on any screen 768px wide or less, the menu should sit above the
> logo.
> - Matthew
>




Try absolute positioning the logo with a min-height to the top of the page.
And absolute position the nav with a min-height to the bottom of the logo.
In the 768 media query  reverse the absolute positioning so that the nav is
at the top of the page with the logo positioned beneath it.

Best,
David Laakso

 A link to a test page or the actual page in question always  helps your
cause.



-- 
Chelsea Creek Studio
http://ccstudi.com
__
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] Positioning & Div Order with Media Queries

[mem]

On Sep 19, 2012, at 22:07 , Matthew Willis wrote:

> Hi CSS List,
> 
> I am working on a site with a responsive layout via media queries and I'm 
> having some difficulties. I need it set up so when the width of the screen is 
> above 768px, a div containing logo appears as the first element, and then a 
> div containing the navigation menu as the next element. 
> 
> However, on any screen 768px wide or less, the menu should sit above the logo.

I would advice against that.
If you wish to tweak the structure, then perhaps you are looking for different 
websites. One for mobile and another for the other media ?
If you wish not to have different websites, then, what reason could one have to 
change the structural markup ?

If you still desire that, perhaps you can float your later div, and add a 
considerable padding to your first div achieving a "reordered effect" ?


> - Matthew
Only my 2 cents.

Márcio
__
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] Positioning & Div Order with Media Queries

[Matthew Willis]

Hi CSS List,

I am working on a site with a responsive layout via media queries and I'm 
having some difficulties. I need it set up so when the width of the screen is 
above 768px, a div containing logo appears as the first element, and then a div 
containing the navigation menu as the next element. 

However, on any screen 768px wide or less, the menu should sit above the logo.

So I'm trying to determine the best practice for changing the order of the divs 
based on the size of the screen receiving the page. My best solution so far is 
to make two versions any div that needs to be reordered and have either one 
version of the div or the other set to display: none depending on the size of 
the screen.

I basically works, but it is a mess having doubles of div all over the html. 
I'm wondering if there is a better way, maybe through positioning, so that divs 
do not need to be replicated to be reordered.

Thanks in advance for any help!

- Matthew
__
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] positioning issue; flexible layout

[Hakan K]

Hi,

You meant, you want to have the same width with images on that red framed
part?


Regards
Hakan KIRKAN
IT Manager
Dominor LLC / Miami
http://dominor.com

On Mon, Jul 2, 2012 at 11:58 AM, Ron Zisman  wrote:

> http://www.ricochet.org/test/test5.html
>
>
> the desired effect i'm looking for is that the gray element with the red
> border align and scale with the images below it.
>
> i've been staring at for some time and can't figure out what the issue is.
> some insight would be greatly appreciated.
>
> thanks in advance,
>
> ron
> __
> 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] positioning issue; flexible layout

[Ron Zisman]

http://www.ricochet.org/test/test5.html


the desired effect i'm looking for is that the gray element with the red border 
align and scale with the images below it.

i've been staring at for some time and can't figure out what the issue is. some 
insight would be greatly appreciated.

thanks in advance,

ron
__
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] positioning

[David Laakso]

On Sat, May 5, 2012 at 12:01 PM, Brian Funk  wrote:
 On Sat, 2012-05-05 at 01:50 -0400, David Laakso wrote:
I am curious. Does the button show-up in:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.16) Gecko/20120421
Iceweasel/3.5.16 (like Firefox/3.5.16)

Yes, it does.
 Brian

O.K. And thank you for the screenshot, Brian.
Best,
David Laakso



-- 
Chelsea Creek Studio
http://ccstudi.com
__
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] positioning

[David Laakso]

On Fri, May 4, 2012 at 7:15 PM, Brian Funk  wrote:

Why does the sphere not show up in IE/9 or Opera?
 

 Still no-show in Iceweasel.

 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.16) Gecko/20120421
 Iceweasel/3.5.16 (like Firefox/3.5.16)

Brian

- Yeah. Abandoned the svg image in favor of a CSS3 button with red a
red  digit[s] knocked out of an olive-like background-color in the
production-run [1] .

[1] 

I am curious. Does the button show-up in:
 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.16) Gecko/20120421
 Iceweasel/3.5.16 (like Firefox/3.5.16)

Thanks!

Best,
David Laakso






-- 
Chelsea Creek Studio
http://ccstudi.com
__
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] positioning

[Tom Livingston]

Beige gradient sphere visible iPhone 4, iOS 5.1 Safari.

Sent from iOS 5

On Apr 15, 2012, at 6:58 AM, David Laakso  wrote:

> On Fri, Apr 13, 2012 at 10:12 PM, David Laakso 
> wrote:
> 
>> Greetings,
>> 
>> Why does the sphere not show up in IE/9 or Opera?
>> 
>> 
>> Thanks.
>> 
>> Best,
>> David Laakso
>> 
>> 
> 
> Thanks to all who replied.
> Above url revised 4/15/2012 at 6:45a.
> Notes of file.
> This end: HP Pavilion g4 Notebook PC and Android/2.2.2 on Samsung Galaxy
> Prevail [with Opera Mobile and Opera Mini on same device].
> Best,
> David Laakso
> 
> "Oh *what a tangled web we weave, ..."*
> 
> 
> -- 
> Chelsea Creek Studio
> http://ccstudi.com
> __
> 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] positioning

[David Laakso]

On Fri, Apr 13, 2012 at 10:12 PM, David Laakso wrote:

> Greetings,
>
> Why does the sphere not show up in IE/9 or Opera?
> 
>
> Thanks.
>
> Best,
> David Laakso
>
>

Thanks to all who replied.
Above url revised 4/15/2012 at 6:45a.
Notes of file.
This end: HP Pavilion g4 Notebook PC and Android/2.2.2 on Samsung Galaxy
Prevail [with Opera Mobile and Opera Mini on same device].
Best,
David Laakso

"Oh *what a tangled web we weave, ..."*


-- 
Chelsea Creek Studio
http://ccstudi.com
__
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] positioning

[Georg]

On 13.04.2012 23:21, David Hucklesby wrote:

The media queries all seem to target
either webkit or moz. Could that be the answer?


Yes! Opera and IE never see the relevant styles. A more cross-browser 
mediaquery makes it work as intended.


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/

Re: [css-d] positioning

[Philippe Wittenbergh]

On Apr 14, 2012, at 11:12 AM, David Laakso wrote:

> Why does the sphere not show up in IE/9 or Opera?
> 

1. the media query only targets Gecko and Webkit, Opera will not see anything…

@media only screen and (-opera-min-device-pixel-ratio: 1/1)  {} will allow 
Opera11.0+ to see the svg file.

2. For IE9 (and IE10dp), there are no media query of that type.

3. You can safely remove the -o- and -ms- prefixed background-size; the 
-webkit- and -moz- can still be kept for older Safari iOS 4.x, Safari running 
on 10.4 and 10.5, Camino.
(Camino will not see your svg file anyway, as it doesn't support svg on 
background-image and it doesn't understand the device-pixel-ratio media query).

4. you could also use (in addition to the existing media query) min-resolution: 
1dppx. That does the same as (min-device-pixel-ratio: 1) and is already 
standardised [1] (as opposed to device-pixel-ratio). I believe Gecko will 
implement this relatively soon, and remove the device-pixel-ratio).

[1] http://www.w3.org/TR/css3-values/#resolution

have fun,
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
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] positioning

[David Hucklesby]

On 4/13/12 7:12 PM, David Laakso wrote:

Greetings,

Why does the sphere not show up in IE/9 or Opera?




Apologies for the too hasty reply. The media queries all seem to target
either webkit or moz. Could that be the answer?
--
Cordially,
David
__
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] positioning

[David Hucklesby]

On 4/13/12 7:12 PM, David Laakso wrote:

Greetings,

Why does the sphere not show up in IE/9 or Opera?




I don't have IE 9 ATM. Opera Developer Tools gives this error message:

"-o-background-size is an unknown property"

Opera 11.62 on OS X 10.7.3

:(
--
Cordially,
David

__
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] positioning

[David Laakso]

Greetings,

Why does the sphere not show up in IE/9 or Opera?


Thanks.

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
__
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] positioning background images in IE 8/7

[Ghodmode]

On Tue, Apr 10, 2012 at 12:16 AM, Debbie Campbell
 wrote:
> In this page in IE 8/7:
>
>> http://www.redkitecreative.com/projects/tax/
>
>
> The background images in the three blue boxes are out of position. Even
> putting the CSS style into the ie8.css stylesheet makes the background
> images disappear from the page completely... How do I get them to move up in
> IE 8 and 7?

I was able to get the desired placement in IE8 by adding the following
properties to the CSS for div.blue-box-content:
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

The box is positioned absolutely in relation to div.blue-box because that box
already has position:relative.

Since the box doesn't actually contain anything, you have to tell it how big to
be.  You already have height:310px set in your stylesheet, so I only needed to
set its width.

In IE8, the background-position properties are being interpreted properly, but
the position of div.blue-box-content is determined differently.  In most
browsers, div.blue-box-content is at the top left corner of div.blue-box, but in
IE8 it's below the H3 text.  So, the background image is placed 112px from the
top of the div.blue-box-content like it's supposed to be, but the div itself is
in the wrong place.

I figured all of this out using the Developer Tools built into IE9.  I was able
to see the problem immediately when I set a background-color on
div.blue-box-content.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com

> --
> Debbie
> www.redkitecreative.com
__
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] positioning background images in IE 8/7

[Debbie Campbell]

In this page in IE 8/7:


http://www.redkitecreative.com/projects/tax/


The background images in the three blue boxes are out of position. Even 
putting the CSS style into the ie8.css stylesheet makes the background 
images disappear from the page completely... How do I get them to move 
up in IE 8 and 7?


--
Debbie
www.redkitecreative.com
__
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] positioning search button

[Debbie Campbell]

Ah - that image link issue makes perfect sense. Thanks!

--
Debbie

On 1/18/2012 8:15 PM, Ghodmode wrote:

On Thu, Jan 19, 2012 at 3:58 AM, Debbie Campbell
  wrote:

In IE on this page:

http://www.greendrakephoto.com/site/contact/

The little green-bordered square's image content is showing up underneath
the panel. Can someone help please?


The image content isn't showing up underneath the panel.  It isn't
showing at all.

The problem is caused by the location of your IE-specific stylesheet.
Without a full path, resources are relative to the stylesheet.  The
images directory is in the same place as Wordpress' style.css, but
your IE stylesheet is in a subdirectory.  So, it can't find the image.

Move your ie.css to the same place as style.css, change your
references to match the new location, and it'll fix your problem.

Better yet, don't use a browser-specific stylesheet.  I kinda like
Paul Irish's method using conditional comments:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

... but I'm doing User Agent detection in PHP on the server side.

--
Ghodmode
http://www.ghodmode.com/blog



--
Debbie Campbell
www.redkitecreative.com



__
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] positioning search button

[Ghodmode]

On Thu, Jan 19, 2012 at 3:58 AM, Debbie Campbell
 wrote:
> In IE on this page:
>
> http://www.greendrakephoto.com/site/contact/
>
> The little green-bordered square's image content is showing up underneath
> the panel. Can someone help please?

The image content isn't showing up underneath the panel.  It isn't
showing at all.

The problem is caused by the location of your IE-specific stylesheet.
Without a full path, resources are relative to the stylesheet.  The
images directory is in the same place as Wordpress' style.css, but
your IE stylesheet is in a subdirectory.  So, it can't find the image.

Move your ie.css to the same place as style.css, change your
references to match the new location, and it'll fix your problem.

Better yet, don't use a browser-specific stylesheet.  I kinda like
Paul Irish's method using conditional comments:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

... but I'm doing User Agent detection in PHP on the server side.

--
Ghodmode
http://www.ghodmode.com/blog


> --
> Debbie Campbell
> www.redkitecreative.com
__
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] positioning search button

[Debbie Campbell]

In IE on this page:

http://www.greendrakephoto.com/site/contact/

The little green-bordered square's image content is showing up 
underneath the panel. Can someone help please?


--
Debbie Campbell
www.redkitecreative.com
__
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] Positioning a popup window over the button

[Tom Livingston]

Sent from iOS 5

On Jan 7, 2012, at 1:29 PM, Laura Valentino  wrote:

> On Jan 7, 2012, at 10:47 AM, "G.Sørtun"  wrote:
> 
>> 
>>> One solution is to add ' margin-bottom: -460px;' to > (height + padding + border-width), so it doesn't take up any space in
>> original position.
>> 
> 
> Thanks Georg, that solves the problem! I have yet to wrap my brain around
> this yet though...
> 
> On Sat, Jan 7, 2012 at 5:59 PM, Tom Livingston  wrote:
> 
>> You could try using absolute positioning, making it relative to the
>> button's containing element.
> 
> 
> I did think of that, but apparently I'm not clear enough on how to do this
> yet. Do I have to add positioning to the containing element?
> __


Yes, position relative on the container.
__
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] Positioning a popup window over the button

[Laura Valentino]

 On Jan 7, 2012, at 10:47 AM, "G.Sørtun"  wrote:

>
> > One solution is to add ' margin-bottom: -460px;' to  (height + padding + border-width), so it doesn't take up any space in
> original position.
>

Thanks Georg, that solves the problem! I have yet to wrap my brain around
this yet though...

On Sat, Jan 7, 2012 at 5:59 PM, Tom Livingston  wrote:

> You could try using absolute positioning, making it relative to the
> button's containing element.


I did think of that, but apparently I'm not clear enough on how to do this
yet. Do I have to add positioning to the containing element?
__
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] Positioning a popup window over the button

[Tom Livingston]

You could try using absolute positioning, making it relative to the button's 
containing element. I'm guessing that would allow you to position it better 
with the button as you desire.

Sent from iOS 5

On Jan 7, 2012, at 10:47 AM, "G.Sørtun"  wrote:

> On 07.01.2012 15:12, Laura Valentino wrote:
>> I'm trying to position a popup window over a button. I've succeeded in
>> doing that by using position: relative and applying a negative top value.
>> The problem is that it creates a space below the button (I assume the same
>> size as the window) and pushes the footer down below that. What's going
>> on??
>> 
>> http://vidmot.com/popupwindow/
> 
> Relative positioning means the space occupied by the element, is taken up in 
> the original - non-offset - position.
> 
> One solution is to add ' margin-bottom: -460px;' to  + padding + border-width), so it doesn't take up any space in original 
> position.
> 
> 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] Positioning a popup window over the button

[G.Sørtun]

On 07.01.2012 15:12, Laura Valentino wrote:

I'm trying to position a popup window over a button. I've succeeded in
doing that by using position: relative and applying a negative top value.
The problem is that it creates a space below the button (I assume the same
size as the window) and pushes the footer down below that. What's going
on??

http://vidmot.com/popupwindow/


Relative positioning means the space occupied by the element, is taken 
up in the original - non-offset - position.


One solution is to add ' margin-bottom: -460px;' to (height + padding + border-width), so it doesn't take up any space in 
original position.


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] Positioning a popup window over the button

[Laura Valentino]

I'm trying to position a popup window over a button. I've succeeded in
doing that by using position: relative and applying a negative top value.
The problem is that it creates a space below the button (I assume the same
size as the window) and pushes the footer down below that. What's going
on?? If I change the position to absolute, it doesn't create this space and
I can position the popup relative to the browser window, but I really want
it to be aligned with the button. Any suggestions or links to tutorials
about this?

Here is the example. The button is below the image. The popup styles are in
the html. I made the content background bright blue so you can see how much
space is added when the popup appears.

http://vidmot.com/popupwindow/

Any help would be greatly appreciated! I've been away from this list for a
few years and rediscovering css is as "fun" as ever ;)
Laura
__
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] positioning over jquery slider...

[David Hucklesby]

On 12/19/11 10:05 AM, Michael Beaudoin wrote:

Hello all.

I'm working on a page using the jquery nivo slider which rotates
images. I would like to position some images over top (for different
links) of the slider and let the images move beneath. I've tried and
cannot seem to get it to work. I can position the elements over an
image, but when I try to do it over the slider, it messes me up.

Here is the page with the slider and a link to the entire image (you
will see it needs 3 links):
http://www.ba-doyn.com/junk/leah/index_slider.html

Here is the page with just the plain image and the items positioned
over the image: http://www.ba-doyn.com/junk/leah/index.html

Here is the attempt at positioning the items over the slider:
http://www.ba-doyn.com/junk/leah/index_layers.html

Thanks everyone.


Are you talking about the gap at the top of the slider?

If so, that's caused by the relatively positioned dvi#facebook,
div#home_contact, and div#home_buy. These elements only appear to be in
the positions you specify. Uncheck the "position: relative;" for these
three elements in your Web Inspector of choice, and  you'll see how they
are taking up the space above the slider.

Not sure if that's what you mean, so I hope it helps. :)
--
Cordially,
David
__
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] positioning over jquery slider...

[Michael Beaudoin]

Hello all.

I'm working on a page using the jquery nivo slider which rotates images. I 
would 
like to position some images over top (for different links) of the slider and 
let the images move beneath. I've tried and cannot seem to get it to work. I 
can 
position the elements over an image, but when I try to do it over the slider, 
it 
messes me up.

Here is the page with the slider and a link to the entire image (you will see 
it 
needs 3 links): http://www.ba-doyn.com/junk/leah/index_slider.html

Here is the page with just the plain image and the items positioned over the 
image: http://www.ba-doyn.com/junk/leah/index.html

Here is the attempt at positioning the items over the slider: 
http://www.ba-doyn.com/junk/leah/index_layers.html

Thanks everyone.

M
__
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] positioning over mpeg video..

[Michael Beaudoin]

On Dec 11, 2011, at 8:31 PM, Mark Senff wrote:


On 2011-12-11, at 9:18 PM, Michael Beaudoin wrote:

Is it possible to position a transparent button over an embeded  
mpeg video?
I can move them around but when the page loads, it seems the  
buttons are behind the movie.
I've tried z-index but I'm sure I'm not doing it right. Code is  
below but the link is http://www.ba-doyn.com/junk/video/


For what it's worth -- it does seem to work on a Mac in Firefox and  
Safari, but not Chrome.
Personally, I prefer using a Flash player for embedded videos, and  
with the all-popular JWplayer it's no problem to use images over the  
video container (but of course that won't solve your problem of  
wanting to place images over an embedded MPEG video).


mS



Yeah, with a transparent gif it works on the Mac, but not on the PC in  
IE or Firefox.


I'll keep working,

Thanks,
Michael
__
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] positioning over mpeg video..

[Mark Senff]

On 2011-12-11, at 9:18 PM, Michael Beaudoin wrote:

> Is it possible to position a transparent button over an embeded mpeg video?
> I can move them around but when the page loads, it seems the buttons are 
> behind the movie.
> I've tried z-index but I'm sure I'm not doing it right. Code is below but the 
> link is http://www.ba-doyn.com/junk/video/

For what it's worth -- it does seem to work on a Mac in Firefox and Safari, but 
not Chrome. 
Personally, I prefer using a Flash player for embedded videos, and with the 
all-popular JWplayer it's no problem to use images over the video container 
(but of course that won't solve your problem of wanting to place images over an 
embedded MPEG video).

mS

__
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] positioning over mpeg video..

[Michael Beaudoin]

Is it possible to position a transparent button over an embeded mpeg  
video?


I can move them around but when the page loads, it seems the buttons  
are behind the movie.


I've tried z-index but I'm sure I'm not doing it right. Code is below  
but the link is http://www.ba-doyn.com/junk/video/


The css:
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
margin-bottom: 1px;
}
body {
text-align: center;
}
#page-wrap {
text-align: left;
width: 960px;
margin: 0 auto;
}
#video  {
}
#button1  {
background-color: #FF;
height: 25px;
width: 75px;
position: relative;
top: -200px;
left: 150px;
z-index: 100;
}
#button2 {
background-color: #0033FF;
height: 25px;
width: 75px;
position: relative;
top: -150px;
left: 150px;
z-index: 100;
}
.clear {
clear: both;
}

The html:


  
embed>

button1
button2
  



Thanks,
Michael


__
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] Positioning Problems

[David Laakso]

On 8/5/11 6:35 AM, Darrin Roenfanz wrote:

 http://roenfanz.info/images/dcr_preview.png
Could the kind CSS Listers please go over my design and maybe help 
polish things up?

See: http://roenfanz.info/projects/dcr.v2.5/

Thanks in advance,
Darrin C Roenfanz



I think you are tripping over your own code.
Perhaps this will help get it started...

Quick checked in Google, FF, Safari, IE/7 and IE/8.
Use an html5 doctype if you prefer but you'll need to include the html5 
"shim" if you do so.

HTH.
Best,
~d

--
http://chelseacreekstudio.com/


__
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] Positioning Problems

[Alan Gresley]

On 5/08/2011 8:35 PM, Darrin Roenfanz wrote:

Good morning fellow listers!

The past couple days, I've been toying around with a test design for my
yet-to-be-published website. Except for edges not lining up exactly, the
design happens to work just about right with my current install of
Firefox (I think it's FF6b2) on Win7. While the CSS I've hobbled
together seems to get the job done, I don't think it's the most elegant
or effective way to do it. I should also mention that the behavior
almost works in IE9 as well, but the absolutely positioned elements
don't stick where I think they're supposed to stick. Instead of
attempting to describe the layout, I've included a link to a snapshot of
how it's supposed to look (See:
http://roenfanz.info/images/dcr_preview.png ). Since it's a test case, I
thought I'd try out some HTML5, which probably causes rendering issues
unless equipped with the most up-to-date browsers. (In retrospect, I
should stick with my trusty HTML 4.01, but that's out of the prevue of
this list.)

Could the kind CSS Listers please go over my design and maybe help
polish things up?
See: http://roenfanz.info/projects/dcr.v2.5/

Thanks in advance,
Darrin C Roenfanz



I see nothing wrong in IE9. Are you sure you are not in IE8 mode? BTW, 
Since you are using HTML5, why are you not using type selectors like 
'header' or 'nav'?





--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
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] Positioning Problems

[Darrin Roenfanz]

Good morning fellow listers!

The past couple days, I've been toying around with a test design for my 
yet-to-be-published website. Except for edges not lining up exactly, the 
design happens to work just about right with my current install of 
Firefox (I think it's FF6b2) on Win7. While the CSS I've hobbled 
together seems to get the job done, I don't think it's the most elegant 
or effective way to do it. I should also mention that the behavior 
almost works in IE9 as well, but the absolutely positioned elements 
don't stick where I think they're supposed to stick. Instead of 
attempting to describe the layout, I've included a link to a snapshot of 
how it's supposed to look  (See: 
http://roenfanz.info/images/dcr_preview.png ). Since it's a test case, I 
thought I'd try out some HTML5, which probably causes rendering issues 
unless equipped with the most up-to-date browsers. (In retrospect, I 
should stick with my trusty HTML 4.01, but that's out of the prevue of 
this list.)


Could the kind CSS Listers please go over my design and maybe help 
polish things up?

See: http://roenfanz.info/projects/dcr.v2.5/

Thanks in advance,
Darrin C Roenfanz
__
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] Positioning images within a table cell

[Geoff Lane]

On Thursday, February 10, 2011, 3:16:08 AM, "G.Sørtun" wrote:

> If you intend to keep the form wrapped around the table like in your
> example, you can position relative to that form.
> If not you have to wrap a div around the table and position relative to 
> that div.

Many thanks, George. I probably wouldn't have arrived at my overall
solution without your help as that solution is merely a tweaked
version of your first example. I suspect that it's probably easier to
wrap the entire table in a DIV - which is what I've done - as that
will always work no matter whether the table is 'part of' a form.

> ...and the reason it has changed somewhat is because your HTML code were 
> no good - not valid - so *HTML Tidy* cleaned it up a bit.
> I advice frequent validity checks, or else positioning relative to a 
> table will be the least problem.

Believe it or not, my HTML code passed the W3C validator! Later, when
I checked, I found that the opening body tag was missing. So I've
learned another lesson here - that the W3C validator isn't infallible!

That said, let's not lose sight that this is work-in-progress. I'm
trying to develop a user interface for a map and database driven
application. That HTML was produced not directly but as the output of
about 500 lines of PHP that has yet to be fully tested and debugged!

Thanks again for your help.

-- 
Geoff

__
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] Positioning images within a table cell

[G.Sørtun]

> Georg's solution relied on the table being at the top of the page.
> To fix it, add a "position:relative" rule to the table. Then his
> solution should work beautifully.
 I tried adding "style='position:relative;'" to the opening table tag
 with no discernible effect.


Of course it didn't, since those Gecko-browsers won't absolute-position 
anything relative to a table - not to _any_ part of a table.


If you intend to keep the form wrapped around the table like in your 
example, you can position relative to that form.
If not you have to wrap a div around the table and position relative to 
that div.


Updated demo here...



...and the reason it has changed somewhat is because your HTML code were 
no good - not valid - so *HTML Tidy* cleaned it up a bit.
I advice frequent validity checks, or else positioning relative to a 
table will be the least problem.


FYI: Browsers have no built-in understanding of "valid" when served 
garbage-code. They just tune it up a bit through garbage-correction 
filters and render it the best they can with no regard to web standards. 
The result of such *error-correction* is somewhat unpredictable so don't 
rely on that any browser actually got it right.


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/

Re: [css-d] Positioning images within a table cell

[Geoff Lane]

On Wednesday, February 9, 2011, 7:02:39 PM, Tim Climis wrote:

> Georg's solution relied on the table being at the top of the page.  To
> fix it, add a "position:relative" rule to the table.  Then his
> solution should work beautifully.
---

Thanks.

I tried adding "style='position:relative;'" to the opening table tag
with no discernible effect. To ensure that the absolutely positioned
images were still being rendered relative to the top of the page, I
added a further two lines to the heading, which moved the table
further down and left those images in exactly the same place on the
page when viewed in Firefox 3.6. You can see the resulting page at
http://www.gjctech.co.uk/test/maptest2.html


On Wednesday, February 9, 2011, 8:07:14 PM, Paul Burney wrote:

> That would work in most browsers, but not Firefox*. If you enclose
> your table in a div with a "position: relative" rule, you should be
> all set. Hope it helps.

Indeed it does. 'Wrapping' the table in a DIV with relative
positioning makes all the difference and George's solution seems to
work when modified this way. I've tested it in FF 3.6, IE 8, Opera 11,
and Chrome 9 under Windows and in FF 3.6, Konqueror 3.5 and Chrome 9
under Linux and it renders correctly with them all. You can see the
results at http://www.gjtech.co.uk/test/maptest3.html

More than having a complete solution, I've learned a work-around for
the fact that some browsers position tables and their included
elements statically no matter how you try to style them, which is to
wrap the required element in a DIV with relative positioning.

Many thanks to all who contributed.

-- 
Geoff

__
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] Positioning images within a table cell

[Paul Burney]

> Georg's solution relied on the table being at the top of the page.  To
> fix it, add a "position:relative" rule to the table.  Then his
> solution should work beautifully.

That would work in most browsers, but not Firefox*. If you enclose
your table in a div with a "position: relative" rule, you should be
all set. Hope it helps.

-Paul Burney
http://www.burney.ws/

* Thanks to Peter-Paul Koch:
http://www.quirksmode.org/bugreports/archives/2004/12/table_never_rel.html
__
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] Positioning images within a table cell

[Tim Climis]

> > Maybe this will do...
> > 
> ---
> 
> My initial reaction was, "Wow! Many thanks for that!" It seems so
> simple yet seems to work in FF, IE, Chrome, and Opera. Yet when I
> tried something similar the images in the right-hand column were all
> over the place!
> 

Georg's solution relied on the table being at the top of the page.  To
fix it, add a "position:relative" rule to the table.  Then his
solution should work beautifully.

---Tim

__
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] Positioning images within a table cell

[Geoff Lane]

On Wednesday, February 9, 2011, 5:46:28 PM, "G.Sørtun" wrote:

> Maybe this will do...
> 
---

My initial reaction was, "Wow! Many thanks for that!" It seems so
simple yet seems to work in FF, IE, Chrome, and Opera. Yet when I
tried something similar the images in the right-hand column were all
over the place!

According to a few references I found on the 'net, it shouldn't work
because tables and cells have static positioning and position:absolute
positions relative to the first non-static parent element with 
being the containing block if no non-static parent element exists.
Thus I would have thought that "position:absolute; top:35px;" would
have positioned relative to the top of the page rather than relative
to the top of the cell. Then I realized that you hadn't specified a
left/right position and so carried out a quick test. Keeping your code
pretty much otherwise intact, I added a heading. This had the effect
of pushing the table down the page leaving the plus and minus controls
where they were. You can see the result of this on my site at
http://www.gjctech.co.uk/test/maptest.html


FWIW, I've come up with a 'sort of' solution that I've just uploaded
over my original page (http://www.gjctech.co.uk/test/test.php) . That
said, I'm not too happy with my effort as the only reason I can get it
working is that the page is generated programmatically and the height
of the map tiles and top and bottom table rows are known or can be
calculated. That lets me specify a vertical offset for the arrow that
positions it in the middle of the cell. However, this approach would
not work if the mapping were replaced by content (e.g. text) that
might change height as the browser width changed. So I'm still looking
for something more elegant!

Thanks again,

-- 
Geoff

__
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] Positioning images within a table cell

[Dan Kaufman]

Nicely done.


Dan K.

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of "G.Sørtun"
Sent: Wednesday, February 09, 2011 9:46 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Positioning images within a table cell

On 09.02.2011 13:18, Geoff Lane wrote:
> Any further help gratefully received.

Maybe this will do...
<http://www.gunlaug.no/tos/alien/pb/Map%20Test.htm>

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] Positioning images within a table cell

[G.Sørtun]

On 09.02.2011 13:18, Geoff Lane wrote:

Any further help gratefully received.


Maybe this will do...


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/

Re: [css-d] Positioning images within a table cell

[Geoff Lane]

On Tuesday, February 8, 2011, 11:22:33 PM, Eric A. Meyer wrote:

> So, as Paul says, throw a div in there, gritting your teeth about 
> the crufty markup if necessary, and relatively position the div.  If 
> you want to position in relation to the right or bottom edges of the 
> cell, you may have to get creative with heights and widths and so on. 
> If you only care about top and/or left, you can skip all that.
---

My thanks to all who've offered help.

Unfortunately, the suggested approach only gives me partial success
(initial tests in Firefox 3.6 and IE8). The table cell extends over 5
rows, is of class 'mapnav' and the CSS stylesheet sets
vertical-align:center;

I added a DIV styled display:block; position:relative; height:100%
within the table cell and then added styling to each of the image
input tags, e.g. position:absolute; top:25; (.) The result was a
jumbled mess and the table cell seems to have disappeared.

I then tried setting the table cell vertical alignment to 'top', which
had the effect of moving the jumbled mess of images from the middle of
the cell to the top and the table cell still could not be seen.

I then tried setting the background colour of the DIV to yellow so
that I could see whether the DIV extended the full height of the cell
but neither the DIV nor the table cell could be seen. So I added
width:100% to the DIV styling to force it to occupy the entire table
cell but this had no discernible effect on the rendered page.

I then tried adding a non-breaking space to the content of the DIV and
was rewarded by a yellow block one character high and wide and a black
line one character wide extending down the remainder of the cell.

So, it seems that using position:absolute to take the images out of
the normal flow causes the table cell width to collapse. So I added
width:25px; to the cell style. The result was still a jumbled mess but
at least the table cell had returned (with the DIV rendering as a
one-character high block of yellow at the top).

So I explicitly positioned both the '+' and '-' images with left:0 and
both of those obligingly moved onto the table cell and are now where I
want them (previously, they were vertically aligned with the right
arrow).

The page can be seen at http://www.gjctech.co.uk/test/test.php with
the CSS stylesheet at http://www.gjctech.co.uk/test/csw.css

Note that I've also tried (unsuccessfully) to position the right arrow
vertically centred in the table cell. I've set both margin-top and
margin-bottom to auto but I suspect this doesn't work because the DIV
doesn't seem to extend over the entire table cell even though I've set
it to 'height:100%'.

I temporarily set the table cell vertical alignment back to center and
also tried setting it to 'middle' but both move the block of images
from the top to the middle of the cell. I guess that what's needed is
some method of persuading the DIV to occupy the entire cell.

Any further help gratefully received.

-- 
Geoff

__
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] Positioning images within a table cell

[Eric A. Meyer]

At 4:51 PM -0500 2/8/11, Paul Burney wrote:


 It sounds like you need to set position: relative on the td element. That
 way, it will establish a system of coordinates for "absolutely" positioned
 elements inside it - i.e., they will be positioned relative to the upper
 left corner of the cell.


I believe this is correct, but if I recall correctly, relative
positions don't work reliably on table cells. If you find that to be
the case, you'll need to add a container div inside of the table cell,
set its width and height to 100%, and its position to relative.


   Correct.  The behavior of positioned table cells is undefined, so 
browsers get to do whatever they want, up to and including ignoring 
your declaration altogether.  At least some do.  If you explicitly 
set the cell to 'display: block' then most (but possibly not all) 
browsers will then honor 'position: relative' but the cell will no 
longer act as part of the overall table, which probably defeats the 
original intent.
   So, as Paul says, throw a div in there, gritting your teeth about 
the crufty markup if necessary, and relatively position the div.  If 
you want to position in relation to the right or bottom edges of the 
cell, you may have to get creative with heights and widths and so on. 
If you only care about top and/or left, you can skip all that.


--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
  -- Martina Kosloff (http://mako4css.com/)
__
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] Positioning images within a table cell

[Paul Burney]

> It sounds like you need to set position: relative on the td element. That
> way, it will establish a system of coordinates for "absolutely" positioned
> elements inside it - i.e., they will be positioned relative to the upper
> left corner of the cell.

I believe this is correct, but if I recall correctly, relative
positions don't work reliably on table cells. If you find that to be
the case, you'll need to add a container div inside of the table cell,
set its width and height to 100%, and its position to relative.

-Paul Burney
http://burney.ws
__
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] Positioning images within a table cell

[Jukka K. Korpela]

Geoff Lane wrote:


I'm trying to put together a map-driven interface. An embryonic
example is at http://www.gjctech.co.uk/test/test.php (.) The 'work in
progress' CSS stylesheet is at http://www.gjctech.co.uk/test/csw.css

The map consists of a number of tiles, each in a table cell. At each
vertical edge of the map is a full-height table cell. What's vexing me
is trying to find a way to position the '+' and '-' controls at the
top of the right-hand cell while keeping the 'scroll right' control in
the centre of the same cell.

[...]

I've tried using position:absolute, but that
positions the controls absolutely on the page while I need them
positioned relative to the top edge of the table cell.


It sounds like you need to set position: relative on the td element. That 
way, it will establish a system of coordinates for "absolutely" positioned 
elements inside it - i.e., they will be positioned relative to the upper 
left corner of the cell.


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


__
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] Positioning images within a table cell

[Geoff Lane]

Hi All,

I'm trying to put together a map-driven interface. An embryonic
example is at http://www.gjctech.co.uk/test/test.php (.) The 'work in
progress' CSS stylesheet is at http://www.gjctech.co.uk/test/csw.css

The map consists of a number of tiles, each in a table cell. At each
vertical edge of the map is a full-height table cell. What's vexing me
is trying to find a way to position the '+' and '-' controls at the
top of the right-hand cell while keeping the 'scroll right' control in
the centre of the same cell. I can kludge this by creating an inner
table with three rows in the right-hand cell, but I'd rather do this
with CSS if possible. I've tried using position:absolute, but that
positions the controls absolutely on the page while I need them
positioned relative to the top edge of the table cell. Since the cell
itself has vertical-align:center, using position:relative on the
images places them close to the centre of the cell just above the
scroll arrow. What I need is to have the '+' and '-' near to the top
of the cell with the scroll arrow in the centre.

Is this possible using CSS, and if so how?

All help gratefully received.

-- 
Geoff

__
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] Positioning a float

[Dan Kaufman]

This looks like a great solution. I can't wait to use it myself.

However, it appears to be a case (for me on my browsers) of IE doing the job
asked for and Chrome not quite. A reversal of my normal experience.

In IE 8 on Windows it works great. But in Google Chrome (also on Windows) I
am seeing the text at the tops of the (orange) images half-overlapped by the
image--as if there were more padding needed on the tops of the images.

While not always the best solution, I often give up fighting with IE and
write a separate IE css file to "adjust things back to where I need them"
and just include that in the  with an IE conditional comment wrap,
such as:





-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of "G.Sørtun"
Sent: Thursday, January 27, 2011 9:51 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Positioning a float


> I need the in-flow, wrapping properties of a float combined with the
positioning properties of an absolutely-positioned element.
>
> Is anyone aware of a way of achieving that?

You may be able to adapt the method shown here...
<http://www.satzansatz.de/cssd/tmp/floatspacer.html>
...for the line-up and appearance you describe: a float positioned at 
the bottom with text wrapping around it.

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] Positioning a float

[G.Sørtun]

I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?


You may be able to adapt the method shown here...

...for the line-up and appearance you describe: a float positioned at 
the bottom with text wrapping around it.


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/

Re: [css-d] Positioning a float

[Bobby Jack]

--- On Thu, 1/27/11, Gabriele Romanato  wrote:

> You cannot position and float an
> element at the same time. So:
> 
> 1. make the container relative
>     position: relative
> 
>    Thus you create a context.
> 
> 
> 2. position the box with the image at the bottom, using
>     left/right: 0 bottom: 0
> 
> 3. add some top and left margin to the positioned box to
> prevent surrounding text from overlapping it.
> 
>     if your container has no background image,
> you can use borders instead of margins, with the same color
> of the background of your container.
> 
> 
> Let me know if this helped. :-)

Unfortunately, no. Since the image is positioned, the text alongside it will 
not wrap accordingly, as the image is no longer in the normal flow. This is 
regardless of whether the image has width/height, margins, borders, or any 
other box-model related attribute.

- Bobby
__
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] Positioning a float

[Philip Taylor (Webmaster, Ret'd)]

Bobby Jack wrote:


I'm working on a layout that requires text to wrap around a positioned image. 
In my case, I need an image in the bottom-right of a box, with text inside the 
box. So I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?


I wish there were.  Over a year ago I asked about positioning
an image at the end of a stretch of text, so that the text
would wrap around it and the last line of the text would
align with the bottom of the image (the image itself should
float right).  Although there were several replies, none
actually solved the problem as posed. This seems pretty
close to your requirement, so I will watch with interest
to see if anyone can today identify a real solution.

Philip Taylor
__
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] Positioning a float

[Gabriele Romanato]

You cannot position and float an element at the same time. So:

1. make the container relative
position: relative

   Thus you create a context.


2. position the box with the image at the bottom, using
left/right: 0 bottom: 0

3. add some top and left margin to the positioned box to prevent  
surrounding text from overlapping it.


if your container has no background image, you can use borders  
instead of margins, with the same color of the background of your  
container.



Let me know if this helped. :-)


http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
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] Positioning a float

[Bobby Jack]

Hi all,

I'm working on a layout that requires text to wrap around a positioned image. 
In my case, I need an image in the bottom-right of a box, with text inside the 
box. So I need the in-flow, wrapping properties of a float combined with the 
positioning properties of an absolutely-positioned element.

Is anyone aware of a way of achieving that?

Regards,

- Bobby
__
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] Positioning navigation menu items

[Gabriele Romanato]

This is a problem that occurs when we have two separate blocks and we  
want the second block appear within the first without changing our  
markup.

here are my 2 cents on this:

http://onwebdev.blogspot.com/2010/12/css-positioning-navigation-menu-items.html

HTH :-)

http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
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] Positioning and spies

[Thierry Koblentz]

> Any idea what I could do about the highlighted problem 2 below?

Change this:

.LastUpdated {
color:#2B;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-style:italic;
}

To this:

.LastUpdated {
color:#2B;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-style:italic;
margin-bottom:0;
padding-bottom:10px;
}

To understand why, search for "collapsing margin".

For the top part, remove the  you have before sidebar.

As a side note, your construct is really weak, I'd start from scratch. And
you should not use  or  to create vertical space.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] Positioning and spies

[Ada Elgavish]

You are the greatest!  Found the errors and corrected them. Now the vertical 
navigation bar works just the way I want it at: 
http://138.26.120.126/CAMAC/Trial21.html



Any idea what I could do about the highlighted problem 2 below?



Thank you so much!



Ada



-Original Message-
From: Thierry [mailto:thierry.koble...@gmail.com] On Behalf Of Thierry Koblentz
Sent: Thursday, November 11, 2010 1:30 PM
To: Ada Elgavish; 'David Laakso'; css-d@lists.css-discuss.org
Subject: RE: [css-d] Positioning and spies



> I have been agonizing over this spry for a week... It worked like a

> charm!

>

>

>

> At http://138.26.120.126/CAMAC/Trial21.html:

>

>

>

> (1)   I cannot tell why the submenu in the vertical navigation bar

> doesn't show all of a sudden.

>

> (2)   I am still having problems understanding the "positioning" term.

> I cannot get the left side bar all the way to the horizontal navigation

> bar or to the footer. There is always a white slice of background

> showing.

>

>

>

> I will greatly appreciate your help.



Two of your js files return 404

I used one of your CSS file as an example, you need to take care of the

other assets



--

Regards,

Thierry

www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
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] Positioning and spies

[Thierry Koblentz]

> I have been agonizing over this spry for a week... It worked like a
> charm!
> 
> 
> 
> At http://138.26.120.126/CAMAC/Trial21.html:
> 
> 
> 
> (1)   I cannot tell why the submenu in the vertical navigation bar
> doesn't show all of a sudden.
> 
> (2)   I am still having problems understanding the "positioning" term.
> I cannot get the left side bar all the way to the horizontal navigation
> bar or to the footer. There is always a white slice of background
> showing.
> 
> 
> 
> I will greatly appreciate your help.

Two of your js files return 404
I used one of your CSS file as an example, you need to take care of the
other assets

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] Positioning and spies

[Ada Elgavish]

I have been agonizing over this spry for a week... It worked like a charm!



At http://138.26.120.126/CAMAC/Trial21.html:



(1)   I cannot tell why the submenu in the vertical navigation bar doesn't show 
all of a sudden.

(2)   I am still having problems understanding the "positioning" term. I cannot 
get the left side bar all the way to the horizontal navigation bar or to the 
footer. There is always a white slice of background showing.



I will greatly appreciate your help.



Ada





-Original Message-
From: Thierry [mailto:thierry.koble...@gmail.com] On Behalf Of Thierry Koblentz
Sent: Wednesday, November 10, 2010 9:14 PM
To: Ada Elgavish; 'David Laakso'; css-d@lists.css-discuss.org
Subject: RE: [css-d] Spries



Your css file is here:

http://138.26.120.126/CAMAC/SpryAssets/SpryMenuBarVertical.css



But you link to:

http://138.26.120.126/SpryAssets/SpryMenuBarVertical.css



via 



Try:







--

Regards,

Thierry

www.tjkdesign.com | www.ez-css.org | @thierrykoblentz





> -Original Message-

> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-

> boun...@lists.css-discuss.org] On Behalf Of Ada Elgavish

> Sent: Wednesday, November 10, 2010 6:33 PM

> To: David Laakso; css-d@lists.css-discuss.org

> Subject: [css-d] Spries

>

> Hello,

>

>

>

> In Dreamweaver (Live View), the spry looks exactly as I want it to

> look. When I upload the file and the Spry assets to the server, the

> webpage displays in the browser as a list instead of the cool spry. See

> at: http://138.26.120.126/CAMAC/Trial21.html

>

>

>

> Could you help?

>

>

>

> Thanks.

>

>

>

> Ada

>

>

>

>

> __

> 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] positioning of sidebar accessibility validation issue

[Angela French]

No I'm not looking for a column layout, but the ability to place a box on the 
page where I want it visually, but also where I want it in the document flow in 
case a screen reader is reading the page.  

-Original Message-
From: David Laakso [mailto:da...@chelseacreekstudio.com] 
Sent: Wednesday, September 22, 2010 5:41 PM
To: Angela French
Cc: 'css-d (css-d@lists.css-discuss.org)'
Subject: Re: [css-d] positioning of sidebar accessibility validation issue

  On 9/22/10 6:54 PM, Angela French wrote:
> Hello,
>
> I'm got a problem with pages in my site that have a  floating sidebox.  They 
> LOOK fine, but they are not accessible in terms of a semantic document 
> outline.  The problem is that the headings I have given my sidebar box aren't 
> correct in terms of their position in my document flow (the code).   So my 
> goal is to put in a semantically correct headline, but have the sidebar 
> appear in the document flow in a correct location for the context of the 
> content.  For instance, on this page 
> (http://checkoutacollege.com/GetStarted/HSCompletion.aspx  ) I would like to 
> make the sidebar heading an, keep it where it is positioned visually,  
> but  have it located in the document flow (the code) right after the "What 
> About State Testing" section.  This is where, if the user was using a screen 
> reader, or had turned off CSS, I would want them to encounter the content.
>
> If anyone could tell me some general principles about that sort of thing I'd 
> appreciate it.  Or refer me to some web sites.  I did a Google search, but I 
> don't think my search keywords were on track.
>
> I tried moving the content in the source code to where I want it, then 
> absolutely positioning the sidebar box up where I want it, but that just 
> layered the text blocks.  I'm hoping this won't require major restructuring 
> of the page layout, but I'm afraid it might.  I do want to keep the main 
> content "reaching" under the sidebar box.
>
> Thank you,
>
>
> Angela French




Assuming I understand your question, the so-called "negative-margin" 
layout concept meets that need. Most of these are spin-off of this layout [1]. 
And include more recent examples such as these [2].
[1] <http://www.alistapart.com/articles/negativemargins/>
[2 <http://blog.html.it/layoutgala/>

Best,
~d


--
:: desktop and mobile ::
http://chelseacreekstudio.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] positioning of sidebar accessibility validation issue

[David Hucklesby]

On 9/22/10 3:54 PM, Angela French wrote:

Hello,

I'm got a problem with pages in my site that have a  floating
sidebox.

[...]


I tried moving the content in the source code to where I want it,
then absolutely positioning the sidebar box up where I want it, but
that just layered the text blocks.  I'm hoping this won't require
major restructuring of the page layout, but I'm afraid it might.  I
do want to keep the main content "reaching" under the sidebar box.



Hi Angela,

Is this something like what you are after? -



I think you are on the right track. My solution is to add an empty 
just where you want it, so the text flows around that, then position the
sidebar over that "spacer" box.

The main difficulty is that the width of the sidebar is in pixels, while
the height depends on the text size, which could be anything, depending
on browser and OS settings.

As your navigation does not work well when text-size is larger, I
altered the layout to "elastic" by substituting EMs for pixel widths on
the whole layout. That way, both width and height vary in proportion so 
that lines are not so inclined to re-wrap.


Check it out-- and don't forget to use the browser text-size and minimum
font size controls...

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] positioning of sidebar accessibility validation issue

[David Laakso]

 On 9/22/10 6:54 PM, Angela French wrote:

Hello,

I'm got a problem with pages in my site that have a  floating sidebox.  They LOOK fine, but 
they are not accessible in terms of a semantic document outline.  The problem is that the 
headings I have given my sidebar box aren't correct in terms of their position in my document 
flow (the code).   So my goal is to put in a semantically correct headline, but have the 
sidebar appear in the document flow in a correct location for the context of the content.  For 
instance, on this page (http://checkoutacollege.com/GetStarted/HSCompletion.aspx  ) I would 
like to make the sidebar heading an, keep it where it is positioned visually,  but  
have it located in the document flow (the code) right after the "What About State 
Testing" section.  This is where, if the user was using a screen reader, or had turned off 
CSS, I would want them to encounter the content.

If anyone could tell me some general principles about that sort of thing I'd 
appreciate it.  Or refer me to some web sites.  I did a Google search, but I 
don't think my search keywords were on track.

I tried moving the content in the source code to where I want it, then absolutely 
positioning the sidebar box up where I want it, but that just layered the text blocks.  
I'm hoping this won't require major restructuring of the page layout, but I'm afraid it 
might.  I do want to keep the main content "reaching" under the sidebar box.

Thank you,


Angela French





Assuming I understand your question, the so-called "negative-margin" 
layout concept meets that need. Most of these are spin-off of this 
layout [1]. And include more recent examples such as these [2].

[1] 
[2 

Best,
~d


--
:: desktop and mobile ::
http://chelseacreekstudio.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] positioning of sidebar accessibility validation issue

[Angela French]

Hello,

I'm got a problem with pages in my site that have a  floating sidebox.  They 
LOOK fine, but they are not accessible in terms of a semantic document outline. 
 The problem is that the headings I have given my sidebar box aren't correct in 
terms of their position in my document flow (the code).   So my goal is to put 
in a semantically correct headline, but have the sidebar appear in the document 
flow in a correct location for the context of the content.  For instance, on 
this page (http://checkoutacollege.com/GetStarted/HSCompletion.aspx  ) I would 
like to make the sidebar heading an , keep it where it is positioned 
visually,  but  have it located in the document flow (the code) right after the 
"What About State Testing" section.  This is where, if the user was using a 
screen reader, or had turned off CSS, I would want them to encounter the 
content.

If anyone could tell me some general principles about that sort of thing I'd 
appreciate it.  Or refer me to some web sites.  I did a Google search, but I 
don't think my search keywords were on track.

I tried moving the content in the source code to where I want it, then 
absolutely positioning the sidebar box up where I want it, but that just 
layered the text blocks.  I'm hoping this won't require major restructuring of 
the page layout, but I'm afraid it might.  I do want to keep the main content 
"reaching" under the sidebar box.

Thank you,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] positioning a horozontal bar

[Val Dobson]

Why use a HR?  Why not use a styled border property for one of the divs?

Val

On 8 June 2010 15:21, Andy B.  wrote:
> Hi. I have the following html and css code. My question is this: I need to
> use css to position the  tag blow the ACTIONS, ICON, TITLE AND
> VISIBILITY divs and above the ContentPane div (using it as a divider between
> the title bar and the content). How exactly would I do this. It needs to
> work for all the major browsers.
]
>
> __
> 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/
>



-- 
---
"Somewhere, something incredible is waiting to be known" - Carl Sagan
www.oakleafdesignprint.co.uk
www.oakleafcircle.org.uk
www.valdobson.co.uk
www.astrodiary.co.uk
__
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] positioning a horozontal bar

[Andy B.]

Hi. I have the following html and css code. My question is this: I need to
use css to position the  tag blow the ACTIONS, ICON, TITLE AND
VISIBILITY divs and above the ContentPane div (using it as a divider between
the title bar and the content). How exactly would I do this. It needs to
work for all the major browsers.

[html code]








[/html code]

[css code]
.CONTAINER {Padding: 5px; }
.ACTIONS, .ICON, .TITLE, .VISIBILITY {float: left;}
.TITLE {
Color: blue;
Background-Color: White;
Font-Family: Georgia;
Text-Align: Center;}
hr {
Width: 100%;
Height: 10px;
Color: blue;}
.ContentPane {
Left: auto;
Right: auto;
Top: auto;
Bottom: auto;}
[/css code]

__
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] positioning [mac vs win]

[David Laakso]

Thierry Koblentz wrote:
 

 
>>> Could be related to white space.
>>> What do you get across browser land when you kill the white space
>>>   
>> between
>> 
>>> the List Items?
>>>   
>> Among the browsers that I just now checked (FF, SeaMonkey, IE/8) the
>> space between the list-items in the horizontal navigation bar, appear
>> to
>> be relatively consistent in both XP and Mac OSX 10.4.
>> 
>
>
> I'm not talking about that space, but about the space *in the markup*.
> If I remove the white space between the list items in FF/Mac, it fixes the
> alignment issue.
>
>
> --
> Regards,
> Thierry
>
>   





Oh no, like yuk o'rama-- think I'll stick with Lady Gala  and shoot 
* with display: table :-) ; Or, how about display: inline-table. Or, 
maybe just keave at is and forget it... ;-)





-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] positioning [mac vs win]

[Thierry Koblentz]

> >> 
> >>
> >
> > Could be related to white space.
> > What do you get across browser land when you kill the white space
> between
> > the List Items?
> 
> 
> Among the browsers that I just now checked (FF, SeaMonkey, IE/8) the
> space between the list-items in the horizontal navigation bar, appear
> to
> be relatively consistent in both XP and Mac OSX 10.4.


I'm not talking about that space, but about the space *in the markup*.
If I remove the white space between the list items in FF/Mac, it fixes the
alignment issue.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
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] positioning [mac vs win]

[David Laakso]

Thierry Koblentz wrote:
> Hi David,
>
>   
>> 
>> 
>
> Could be related to white space.
> What do you get across browser land when you kill the white space between
> the List Items?
>
> --
> Regards,
> Thierry
>   



Among the browsers that I just now checked (FF, SeaMonkey, IE/8) the 
space between the list-items in the horizontal navigation bar, appear to 
be relatively consistent in both XP and Mac OSX 10.4.

Thanks.

Best,

Lady Gaga - Poker Face


-- 
desktop
http://chelseacreekstudio.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] positioning [mac vs win]

[Thierry Koblentz]

Hi David,

> On this test page  the
> title block in the header is 10 or so pixels more to the left in all XP
> browsers than is in Mac browsers.
> 
> This is not the end of the world as we know it. I am more curious how
> come than anything else.
> 
> I assume it is due to differences of intrinsic font-rendering between
> the the two OSes. But it has been a long day. Confirmation or
> enlightenment appreciated.
> Best,

Could be related to white space.
What do you get across browser land when you kill the white space between
the List Items?

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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] positioning [mac vs win]

[David Laakso]

Felix Miata wrote:
> On 2010/05/23 20:42 (GMT-0400) David Laakso composed:
>
>   
>>  
>> 
>
>   
>
> On Linux, no apparent title block differences among browsers checked. Font
> rendering does differ among FF 3.6.3, FF 2.0.0.20 & Konq 3.5.9, and the big
> 100 only shows up in FF3, a big blank nothingness in its place in Konq & FF2.
> FF2 never stops showing "waiting for chelseac...".
>   




The "big 100," Adobe flash-block garbage-can, is not of my making and at 
the moment  of no concern other than as a place holder. I do not have 
FF2 this end but will get a copy and see what gives...

Thanks for the feedback.

Best,
~d


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] positioning [mac vs win]

[Felix Miata]

On 2010/05/23 20:42 (GMT-0400) David Laakso composed:

> On this test page  the 
> title block in the header is 10 or so pixels more to the left in all XP 
> browsers than is in Mac browsers.

> This is not the end of the world as we know it. I am more curious how 
> come than anything else.

> I assume it is due to differences of intrinsic font-rendering between 
> the the two OSes. But it has been a long day. Confirmation or 
> enlightenment appreciated.

On Linux, no apparent title block differences among browsers checked. Font
rendering does differ among FF 3.6.3, FF 2.0.0.20 & Konq 3.5.9, and the big
100 only shows up in FF3, a big blank nothingness in its place in Konq & FF2.
FF2 never stops showing "waiting for chelseac...".
-- 
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.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] positioning [mac vs win]

[David Laakso]

On this test page  the 
title block in the header is 10 or so pixels more to the left in all XP 
browsers than is in Mac browsers.

This is not the end of the world as we know it. I am more curious how 
come than anything else.

I assume it is due to differences of intrinsic font-rendering between 
the the two OSes. But it has been a long day. Confirmation or 
enlightenment appreciated.

Best,

Joost Schmidt
Bauhaus


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] positioning IE versus ff

[Tim Snadden]

On 16/04/2010, at 10:29 AM, Angela French wrote:

> I am trying to create a jquery slider content box which uses a  
> Previous and Next image button on each end of the content area (left  
> and right ends).  I am having a hard getting them to position the  
> same between IE8 and FF 3.6.  I am using absolute positioning on the  
> images, I have given them a height and width and I have set the  
> parent container to be relatively positioned. They render the same  
> position from the left, but not from the top.  IE is rendering them  
> lower vertically.
>
> Can anyone suggest what else I might be missing?  It's not super  
> critical, but I was trying to put the buttons in the middle of the  
> content area (vertically).

A publicly accessible URL is always helpful. Anything else is just an  
educated guess. First debug step would be to ensure that your HTML/CSS  
is valid (or that you at least know what isn't valid and have  
consciously chosen this as in the case of vendor prefixes in CSS).

Cheers, Tim
__
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] positioning IE versus ff

[Angela French]

I am trying to create a jquery slider content box which uses a Previous and 
Next image button on each end of the content area (left and right ends).  I am 
having a hard getting them to position the same between IE8 and FF 3.6.  I am 
using absolute positioning on the images, I have given them a height and width 
and I have set the parent container to be relatively positioned. They render 
the same position from the left, but not from the top.  IE is rendering them 
lower vertically.

Can anyone suggest what else I might be missing?  It's not super critical, but 
I was trying to put the buttons in the middle of the content area (vertically).

Thank you.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.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] Positioning problem

[David Laakso]

Matthew wrote:
>   
>> Thank you, but when I float: left the div containing the text, and float: 
>> right the image, the image vanishes and the crowd at the bottom is no longer 
>> behind the next. Nor does it stop at the right point if the browser becomes 
>> too small.
>>
>>
>> 



Man, Otis is going to drive everyone on this list nuts-- and then some.

Switched to jquery on ap. See change in CSS and markup.
Best,
~d
PS Bottom post, please.



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] Positioning problem

[Matthew]

At least part of why it is confusing to get those javascript rotating images to 
place correctly is because there are two properties controlling them:

/* - rotator in-page placement - */
div#rotator {
background: #000;
width:300px;
position: relative;
z-index: 1;
padding: 0;
margin: 0;
text-align: center;
}
/* rotator css */
div#rotator span {
float:right;
position:absolute;
list-style: none;
left: 459px;
top: -360px;

I don't know javascript so I'm fumbling around some here. When I change 
div#rotator span (the style that places the image within the page to relative, 
they are no longer contained in the same place. When they rotate through they 
appear all over the page.

Is it possible that this is a case where the absolute positioning is required?

Any help is greatly appreciated! 
Matthew


On Apr 6, 2010, at 3:52 PM, Matthew wrote:

> Thank you, but when I float: left the div containing the text, and float: 
> right the image, the image vanishes and the crowd at the bottom is no longer 
> behind the next. Nor does it stop at the right point if the browser becomes 
> too small.
> 
> 
> On Apr 6, 2010, at 3:42 PM, David Laakso wrote:
> 
>> Matthew wrote:
>>> Hi everyone,
>>> 
>>> Please check out this site:
>>> 
>>> www.em-w.com/oldschoolband
>>> 
>>> Can someone help me figure out how to control the positioning of the image 
>>> in the right side without using absolute positioning? I can't do it! I 
>>> can't make objects appear next to each other with relative positioning; I 
>>> can only stack them. I realize absolute positioning is not the way to go 
>>> here, but its all I can do. I also notice that it appears in different 
>>> places depending on the browser I'm using. I'm not getting something 
>>> fundamental about CSS. Please help if you think you can.
>>> 
>>> Thank you!
>>> Matthew
>>> 
>> 
>> 
>> Simple: float. 
>>  
>> Best,
>> ~d
>> 
>> 
>> 
>> -- 
>> desktop
>> http://chelseacreekstudio.com/
>> mobile
>> http://chelseacreekstudio.mobi/
>> 
>> __
>> 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-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] Positioning problem

[David Laakso]

Matthew wrote:
> Do you mean Alan Gresely, the person who helped me with this site a 
> few days ago?


Yes.

~d



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] Positioning problem

[Matthew]

Do you mean Alan Gresely, the person who helped me with this site a few days 
ago? Send him a direct email? I hope my problems aren't too basic or dumb. I'm 
asking in the spirit of the information page of this list, which states:

"My philosophy is that there are two kinds of questions: good questions and 
unasked questions. I much prefer the former. It doesn't matter how "dumb" you 
think the question might be, because I guarantee you that at least five other 
subscribers are wondering the same thing, and will learn from the answer. "How 
do I position a background image?" is as valid a question as "Why does this 
15KB stylesheet almost but not quite work in Opera when I use an HTML4.01 
Frameset DOCTYPE?"
Thanks for your help! 
Matthew

On Apr 6, 2010, at 4:02 PM, David Laakso wrote:

> Matthew wrote:
>> Thank you, but when I float: left the div containing the text, and float: 
>> right the image, the image vanishes and the crowd at the bottom is no longer 
>> behind the next. Nor does it stop at the right point if the browser becomes 
>> too small.
>> 
>> 
>> 
>> 
>>> Simple: float. 
>>>  
>>> Best,
>>> ~d
>>> 
>>> 
>>> 
>>> 
>> 
>> 
> 
> 
> Ask Alan.
> ~d
> 
> -- 
> desktop
> http://chelseacreekstudio.com/
> mobile
> http://chelseacreekstudio.mobi/
> 
> __
> 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] Positioning problem

[David Laakso]

Matthew wrote:
> Thank you, but when I float: left the div containing the text, and float: 
> right the image, the image vanishes and the crowd at the bottom is no longer 
> behind the next. Nor does it stop at the right point if the browser becomes 
> too small.
>
>
>
>   
>> Simple: float. 
>>  
>> Best,
>> ~d
>>
>>
>>
>> 
>
>   


Ask Alan.
~d

-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] Positioning problem

[Matthew]

Thank you, but when I float: left the div containing the text, and float: right 
the image, the image vanishes and the crowd at the bottom is no longer behind 
the next. Nor does it stop at the right point if the browser becomes too small.


On Apr 6, 2010, at 3:42 PM, David Laakso wrote:

> Matthew wrote:
>> Hi everyone,
>> 
>> Please check out this site:
>> 
>> www.em-w.com/oldschoolband
>> 
>> Can someone help me figure out how to control the positioning of the image 
>> in the right side without using absolute positioning? I can't do it! I can't 
>> make objects appear next to each other with relative positioning; I can only 
>> stack them. I realize absolute positioning is not the way to go here, but 
>> its all I can do. I also notice that it appears in different places 
>> depending on the browser I'm using. I'm not getting something fundamental 
>> about CSS. Please help if you think you can.
>> 
>> Thank you!
>> Matthew
>> 
> 
> 
> Simple: float. 
>  
> Best,
> ~d
> 
> 
> 
> -- 
> desktop
> http://chelseacreekstudio.com/
> mobile
> http://chelseacreekstudio.mobi/
> 
> __
> 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] Positioning problem

[David Laakso]

Matthew wrote:
> Hi everyone,
>
> Please check out this site:
>
> www.em-w.com/oldschoolband
>
> Can someone help me figure out how to control the positioning of the image in 
> the right side without using absolute positioning? I can't do it! I can't 
> make objects appear next to each other with relative positioning; I can only 
> stack them. I realize absolute positioning is not the way to go here, but its 
> all I can do. I also notice that it appears in different places depending on 
> the browser I'm using. I'm not getting something fundamental about CSS. 
> Please help if you think you can.
>
> Thank you!
> Matthew
>   


Simple: float. 
 
Best,
~d



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
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] Positioning problem

[Matthew]

Hi everyone,

Please check out this site:

www.em-w.com/oldschoolband

Can someone help me figure out how to control the positioning of the image in 
the right side without using absolute positioning? I can't do it! I can't make 
objects appear next to each other with relative positioning; I can only stack 
them. I realize absolute positioning is not the way to go here, but its all I 
can do. I also notice that it appears in different places depending on the 
browser I'm using. I'm not getting something fundamental about CSS. Please help 
if you think you can.

Thank you!
Matthew
__
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] positioning text in a table cell

[Bobby Jack]

--- On Fri, 2/5/10, Cyril Motsch  wrote:

> > Have you tried absolute positioning?
>
> I have tried that, with "position: absolute; bottom: 0pt",

(Don't forget that, strictly speaking, "0pt" is invalid because a value of "0" 
doesn't need a unit)

> but both Safari 4.0.4 and Firefox 3.5.6 for Mac understand that to
> be relative to the whole table, not to the individual cell.

Generally speaking, an absolutely-positioned element will be positioned in 
relation to its closest relatively-positioned ancestor. However, even adding 
'position: relative' to the table cell doesn't fix the problem.

In my very brief testing, it appears this is related to the table-cell display 
value, and is - hopefully - behaving according to spec. Changing the display to 
'block' resolves that although, of course, this may have undesirable 
side-effects (and may not work in various IE versions).

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

Re: [css-d] positioning text in a table cell

[Cyril Motsch]

> (Don't forget that, strictly speaking, "0pt" is invalid because a  
> value of "0" doesn't need a unit)

OK


>> but both Safari 4.0.4 and Firefox 3.5.6 for Mac understand that to
>> be relative to the whole table, not to the individual cell.
>
> Generally speaking, an absolutely-positioned element will be  
> positioned in relation to its closest relatively-positioned  
> ancestor. However, even adding 'position: relative' to the table  
> cell doesn't fix the problem.
>
> In my very brief testing, it appears this is related to the table- 
> cell display value, and is - hopefully - behaving according to  
> spec. Changing the display to 'block' resolves that although, of  
> course, this may have undesirable side-effects (and may not work in  
> various IE versions).
>
> - Bobby
>

Finally, I managed to obtain what I wanted. Thanks a lot

Cyril

__
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] positioning text in a table cell

[Cyril Motsch]

> Have you tried absolute positioning? Mind you, I don't know how  
> well AP
> works with table cells. In 7 years I have used very few tables...
>

I have tried that, with "position: absolute; bottom: 0pt", but both  
Safari 4.0.4 and Firefox 3.5.6 for Mac understand that to be relative  
to the whole table, not to the individual cell.
To alleviate that, I tried to put a block box inside each cell,  
hoping the user agent would understand, but it still refers to the  
table box.
I hope I made myself clear...

Cyril

__
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] positioning text in a table cell

[David Hucklesby]

On 2/4/10 11:04 AM, Cyril Motsch wrote:
> Hi,
> I have an html table, and I want to put into each cell 3 snippets of
> text:
>
> - "text 1" at the top, centered,
> - "text 2" at the bottom left,
> - "text 3" at the bottom right.
>

Have you tried absolute positioning? Mind you, I don't know how well AP
works with table cells. In 7 years I have used very few tables...

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/

[css-d] positioning text in a table cell

[Cyril Motsch]

Hi,
I have an html table, and I want to put into each cell 3 snippets of  
text:

- "text 1" at the top, centered,
- "text 2" at the bottom left,
- "text 3" at the bottom right.

I manage to have "text 1" correctly placed with a property "vertical- 
align:top" of the "td" element, and to have "text 2" and "text 3"  
horizontally placed with a float, but I don't know how to move down  
the block "text 2 ... text 3". Of course it can be done manually by  
specifiying a distance, but I consider this brittle and inelegant, to  
say the least.

Furthermore, "text 2" is actually something like "blah blahsup", and I end up with the baseline of "text 3" aligned with that  
of "sup" !

Thank you very much in advance if you can help a poor newbie.

cyber

__
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] positioning images on a background graphic

[Anthony L]

> The easiest solution is to add...
>
> #container {
> padding: 1px 0;
> }

Thanks Georg, that seems to have done the trick :-)
And thanks for the link ...

best,
Anthony
__
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] positioning images on a background graphic

[Gunlaug Sørtun]

Anthony L wrote:
> A question though: I thought the 1px border was just for debugging
> ... But if I comment out the #container border, the button images
> shift right to the top of the div ... any idea why?

Collapsing margins...




The easiest solution is to add...

#container {
padding: 1px 0;
}

...as replacement for the border. Other solutions/options are listed in
the W3C article.

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] positioning images on a background graphic

[Anthony L]

On Fri, May 15, 2009 at 12:40 AM, Erik Vorhes  wrote:
>>
>> re:
>> 
>>
>> Anthony, the original poster, has followed your advice as of this writing.
>> He has included display:inline; on the li. Follow the above url and note
>> your suggestion does not fix IE/6. Nor does it fix IE/7.
>>
>> What I suggested is not the only way to correct the problem.  But it does
>> work in IE/8, FF, Opera, and Safari.  IE/6 and IE/7 go along for the ride
>> without issue.
>> Please see:
>> 
>
>
> I apologize, I didn't know that Anthony had attempted my proposed fix.


Hi both,

Sorry, I made the change and didn't have to opportunity to test it in
IE ... that was why I hadn't replied yet ...

.
> This CSS will bring IE 6/7/8 on board with FF, Safari, Opera.

Thanks for the tip.
I've added the code and it looks OK in FF and Safari on OSX ... I
can't check on a Win box before later this morning when I get to work.
A question though: I thought the 1px border was just for debugging ...
But if I comment out the #container border, the button images shift
right to the top of the div ... any idea why?

thanks again,
Anthony
__
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] positioning images on a background graphic

[Erik Vorhes]

>
> re:
> 
>
> Anthony, the original poster, has followed your advice as of this writing.
> He has included display:inline; on the li. Follow the above url and note
> your suggestion does not fix IE/6. Nor does it fix IE/7.
>
> What I suggested is not the only way to correct the problem.  But it does
> work in IE/8, FF, Opera, and Safari.  IE/6 and IE/7 go along for the ride
> without issue.
> Please see:
> 


I apologize, I didn't know that Anthony had attempted my proposed fix.
Sorry it didn't work!
__
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] positioning images on a background graphic

[David Laakso]

Erik Vorhes wrote:
> On Thu, May 14, 2009 at 2:51 PM, David Laakso
>  wrote:
>   
>> There is no "bug" that I am aware of.
>>
>> 
>
> Actually, the following CSS does trigger the IE 6 doubled-margin float bug:
>
>   
>> li
>> {
>> float: left;
>> margin: 0 0.15em;
>> }
>> 
>
> For details on this phenomenon, see
> .
>
> The workaround is to apply "display: inline;" to the floated element.
> Because floated elements are always treated as block elements, this
> declaration has no side-effects in any standards-compliant browser.
> And it will get rid of the extra space on the sides of your floated
>  elements.
>
> Erik
>
>   



re: 


Anthony, the original poster, has followed your advice as of this writing.
He has included display:inline; on the li. Follow the above url and note 
your suggestion does not fix IE/6. Nor does it fix IE/7.

What I suggested is not the only way to correct the problem.  But it 
does work in IE/8, FF, Opera, and Safari.  IE/6 and IE/7 go along for 
the ride without issue.
Please see:


~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] positioning images on a background graphic

[Erik Vorhes]

On Thu, May 14, 2009 at 2:51 PM, David Laakso
 wrote:
>
> There is no "bug" that I am aware of.
>

Actually, the following CSS does trigger the IE 6 doubled-margin float bug:

> li
> {
> float: left;
> margin: 0 0.15em;
> }

For details on this phenomenon, see
.

The workaround is to apply "display: inline;" to the floated element.
Because floated elements are always treated as block elements, this
declaration has no side-effects in any standards-compliant browser.
And it will get rid of the extra space on the sides of your floated
 elements.

Erik
__
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] positioning images on a background graphic

[David Laakso]

Anthony L wrote:
> Is not that big a problem, but I am seeing a shift in the images when
> viewing the page on IE windows.
>
>
> and here is a link to the page ...
> http://liberto.info/cssplay/fromWork/migration_rollover/migration_opacity_tests_part_b.html
>
> Another thing that perplexes me is that if I a margin-left value to
> the ul instead of padding-left the images are placed correctly in IE
> and then are shifted in Firefox.
>
> Can anyone tell me which IE bug I am missing ?
>   


There is no "bug" that I am aware of. Putting borders around elements 
will often show where you are going wrong.
This CSS will bring IE 6/7/8 on board with FF, Safari, Opera.


html, body {margin: 0 padding: 0;}

#container { border: 1px solid blue;
width: 735px;
height: 500px;
margin: auto;
background: url(arrow_files/banner_b.jpg) no-repeat;
}

ul {
border:1px solid red;
overflow: hidden;
list-style: none;
/*padding-top: 240px; to move the list into position on the background 
graphic */
padding: 0;
margin: 248px 0 0 80px;
width:515px;
}

li
{
float: left;
margin: 0 0.15em;
}

img {
border-style: none;
}

a {
border: none;
}

__
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] positioning images on a background graphic

[Erik Vorhes]

On Thu, May 14, 2009 at 1:36 PM, Anthony L  wrote:
>
> Can anyone tell me which IE bug I am missing ?
>


It's the dreaded double-margin float bug, I bet. Add

display: inline;

to your  styles and you should be good to go.

Erik
__
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] positioning images on a background graphic

[Anthony L]

Is not that big a problem, but I am seeing a shift in the images when
viewing the page on IE windows.

I know: big surprise.

Basically, I have a container div and then an unordered list where
each list item is an image.

Here's the relevant css :

#container {
background:blue;
width: 735px;
height: 500px;
margin: auto;
background: url(banner_back.jpg) no-repeat;
}

ul {
list-style: none;
padding-top: 240px; /* to move the list into position on the
background graphic */
padding-left: 75px;

}

li
{
float: left;
margin: 0 0.15em;
}   

img {
border-style: none;
}

a {
border: none;
}

and here is a link to the page ...
http://liberto.info/cssplay/fromWork/migration_rollover/migration_opacity_tests_part_b.html

Another thing that perplexes me is that if I a margin-left value to
the ul instead of padding-left the images are placed correctly in IE
and then are shifted in Firefox.

Can anyone tell me which IE bug I am missing ?

Thanks :-)
Tony
__
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] Positioning and spacing issues... site check

[Michael Beaudoin]

Tim Snadden wrote:

> --
>> The screenshot covers some spacing issues and positioning issues
>> within a  so the text areas are set even when the browser is
>> resized.
>>
>> The site is at: http://ba-doyn.com/junk/meeks_test_2/contact.html
>> for you all to look at.
>
> Hi Michael - Absolutely positioned elements are positioned in relation
> to their nearest positioned ancestor, but none of contactLeft and
> contactRight's ancestors are positioned so they are positioning
> themselves in relation to . You could resolve the problem by
> giving imageArea position: relative.
>
> If you aren't clear on how absolute positioning works you could easily
> do this design with floats instead.
>
> Also, validating your markup is an important step. You never know
> whether errors are causing browsers to barf in different ways.
>
> >
>
> Cheers, Tim

Tim,

Thanks for the reply. I was able to set up the blocks of text on  
contact.html using floats. Work fine now.

I still have a few questions to all regarding this layout and IE. Go  
to:  www.ba-doyn.com/junk/meeks_test_3 and you will see in IE the  
following:

- that the top left navigation still is riding high compared to  
Firefox (PC and Mac)
- the large type at the bottom seems to be different in IE and Firefox
- no square bullets on the horizontal links in IE (i've tried to find  
a solution to this but it escapes me.) should I use images?
- beneath the horizontal links, in Firefox the space is larger for the  
index vs. the contact pages.

Thanks so much for helping me along with this. I've been cramming my  
head with so much lately that sometimes I'm sure the solution is right  
there I just can't see it.

Thanks,
Michael

__
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] Positioning and spacing issues... site check

[Tim Snadden]

>
> The screenshot covers some spacing issues and positioning issues  
> within a  so the text areas are set even when the browser is  
> resized.
>
> The site is at: http://ba-doyn.com/junk/meeks_test_2/contact.html  
> for you all to look at.

Hi Michael - Absolutely positioned elements are positioned in relation  
to their nearest positioned ancestor, but none of contactLeft and  
contactRight's ancestors are positioned so they are positioning  
themselves in relation to . You could resolve the problem by  
giving imageArea position: relative.

If you aren't clear on how absolute positioning works you could easily  
do this design with floats instead.

Also, validating your markup is an important step. You never know  
whether errors are causing browsers to barf in different ways.



Cheers, Tim
__
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] Positioning and spacing issues... site check

[Michael Beaudoin]

I'm back with some more issues that have me tearing what's left of my hair out.

I have been fiddling with this test site, and using some of the comments here, 
it's getting better.

I do have a few questions, and here's a link to a screenshot with some comments 
in case I can't explain clearly enough:

screenshot: http://ba-doyn.com/junk/meeks_test_2/position_correct.jpg

The screenshot covers some spacing issues and positioning issues within a  
so the text areas are set even when the browser is resized.

The site is at: http://ba-doyn.com/junk/meeks_test_2/contact.html for you all 
to look at.

Thanks so much,

Michael
__
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] Positioning images and wrapping text...

[Divya Manian]

On 3/30/09 4:20 PM, "Bobby Jack"  wrote:

> 
> --- On Mon, 3/30/09, Michael Beaudoin  wrote:
> 
>> Is there a way to precisely position an image and have the
>> wrap follow?
> 

You can float the image and assign precise margins as Gunlaug has done to
get what you need. I think the best would be to attempt it and post here
with what works/doesn't work.

- divya


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