Re: [css-d] Special how-to request

[David Laakso]

Keith Kaiser wrote:
>
> The div id is topMenu the css is at http://bsaroundtable.com/css/rtstyle.css 
>   please if you have a few minutes would you help me figure this out.
>
>
> -- Keith
>
>   



#topMenu {
  width: 100%;
  background: #C5DFA4;
  float: left;
min-height: 7em; < add
}

for IE/6 write:
* html #topMenu {height:7em;}

The height unit is the same for IE/6 as compliant browsers-- but, is not 
preceded by min- for IE/6 (which it does not understand min-height)'

The "ticker" looks to be controlled by this inline style (located 
beneath all the #topMenu links in the source html document):

span id="amberalert" style="position: absolute; left:80; top:35;">

Tweak "left" /and/ "top" to position it.

Reduce the values of min-height and height in #topMenu (above).

Compare in Firefox, IE/7 and IE/6 until you get all 3 browsers 
"relatively" close to where you want them.

Note:  I did not look at your page in any IE browser, and went with the 
assumption you are relatively close to Firefox in IE at this writing.



*
*





-- 
http://chelseacreekstudio.com/

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

[css-d] Special how-to request

[Keith Kaiser]

For the last several years I've been running a Code Amber Alert ticker  
on my Boy Scout related web site at; http://bsaroundtable.com the  
problem is I really need to move the ticker.

I took a poll of my readers they want me to keep the ticker, the best  
place for it would be under the menu in the green section of the page.  
I've been trying to find a way to put it there (on and off) for over a  
year, could one of you guys who really knows this stuff help me move  
that JavaScript based ticker to this div?

The div id is topMenu the css is at http://bsaroundtable.com/css/rtstyle.css 
  please if you have a few minutes would you help me figure this out.

Thanks in advance for any advise.

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

Re: [css-d] Width of absolutely-positioned div

[Gunlaug Sørtun]

Mary Ellen Curtin wrote:
> http://datagnostics.com/test/testbasic4.html
> 
> I have to remove the border on the latter or else I get a 2-pixel 
> horizontal scrollbar.

You can keep the border if you subtract its width, on both sides, in the
expression...



Since IE6 has an extremely flawed width-calculation and needs time to
settle, letting it position absolute from the right side by "auto'ing"
the left side, will prevent horizontal scrollbar from appearing during
window-resizing.

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

Re: [css-d] when are 2 external css called for?

[Kepler Gelotte]

> I have 2 pages ( so far) in a site which share the same structure or  
> design "grid" but have differences with some of the visual elements,  
> such as differing background colors, or different link treatments...

Hi John,

A trick I use to use different CSS rules in a page is to add an
id="page_name" to each page's  tag. In cases where one page's style is
different from another, define multiple CSS rules:

body#home {background-color: #cc0; color: #000;}
body#about {background-color: #fff; color: #060;}

Then leave body#page_name off all CSS rules that stay the same between
pages.


Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904

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

Re: [css-d] equal height columns in css

[vincent pollard]

thanks man. i'll take another look at that.

as far as IE8 goes, it's great to hear the improvements coming but i'm more
excited by the death of IE6. i don't think IE7 is that bad in comparison.

On 10/04/2008, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> vincent pollard wrote:
>
> > looked at this:
> > http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
> >  but it doesn't work in IE;
> >
>
> In case you overlooked it, the whole article I pointed to in my first
> response is about making something like Roger's "equal height boxes"
> work in IE...
> 
>
> IE8 won't need any workarounds BTW. They (the IE-team) just have to
> finish making its CSS2.1 support real and complete.
>
>Georg
> --
> http://www.gunlaug.no
>



-- 
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Width of absolutely-positioned div

[Mary Ellen Curtin]

I've put up two versions with the new suggestions:

the David Laakso "percentage width on the pink box" version:

http://datagnostics.com/test/testbasic3.html

and the Rob Swan version suggested by Georg:

http://datagnostics.com/test/testbasic4.html

I have to remove the border on the latter or else I get a 2-pixel 
horizontal scrollbar.

I think that for my current purposes I'll use the Swan version, or else 
see if I really need it to be absolutely positioned after all.

Thanks for your help, all.

Mary Ellen
Doctor Science, MA
http://doctorscience.blogspot.com 

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

Re: [css-d] equal height columns in css

[Gunlaug Sørtun]

vincent pollard wrote:
> looked at this: 
> http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
>  but it doesn't work in IE;

In case you overlooked it, the whole article I pointed to in my first
response is about making something like Roger's "equal height boxes"
work in IE...


IE8 won't need any workarounds BTW. They (the IE-team) just have to
finish making its CSS2.1 support real and complete.

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

Re: [css-d] Width of absolutely-positioned div

[Gunlaug Sørtun]

Mary Ellen Curtin wrote:
> What kind of IE6 workaround would you suggest? I am not at all happy
>  with the suggestion, because my site stats show that I've still got
> a *lot* of IE6-using visitors.

The whole issue, including workaround for IE6, is described here...

...and I would guess most sites has 25 - 50% IE6 users as visitors, and
will have for some time to come.

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

Re: [css-d] when are 2 external css called for?

[Benjamin White]

On 4/10/08, John <[EMAIL PROTECTED]> wrote:
> I have 2 pages ( so far) in a site which share the same structure or
> design "grid" but have differences with some of the visual elements,
> such as differing background colors, or different link treatments...
>
> can I combine the 2 sheets and have the documents "know" which link
> treatments and background colors they're supposed to have?

Yes, you can link to as many stylesheets on any given page as you
like. Getting the styles you want on a given page will greatly depend
on your understanding of the cascade:



The general rule is that style declarations near the "bottom" of a
stylesheet will take precedence in the event of a conflict. HTML Dog
has a great little tutorial on the matter at



The gist of this is thus: So long as your page-specific styles are
being declared after the base styles for the site you're golden.
Either make certain the base sheet is linked first, or possibly even
better yet, import the base css sheet into your page specific styles.
If you import the base styles it would be equivalent of you pasting
the entire sheet at the very top of each of your page-specific sheets.
Therefore, those rules will be overwritten by the page-specific rules
entirely.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] when are 2 external css called for?

[John]

I have 2 pages ( so far) in a site which share the same structure or  
design "grid" but have differences with some of the visual elements,  
such as differing background colors, or different link treatments...

can I combine the 2 sheets and have the documents "know" which link  
treatments and background colors they're supposed to have?

it seems like I *should* be able to, but relative to another's  
comment here, I've kept my naming conventions identical, so I can see  
the pages' not knowing which sheet to obey.

thanks for any pointers on this!

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

Re: [css-d] Centering image h/v in *smaller* div

[Martin Sammtleben]

At 10:35 -0600 10/4/08, Lisa Onizuka wrote:
>Martin, I'm not sure if you want to bother with any inline css, but you
>could achieve it this way:
>
>style="background:url('dynamically-generated-path.jpg') center center
>no-repeat">   

Thanks Lisa,

I had actually thought of this approach, but the thumbnails also need 
to be clickable links and in order to achieve that I would need to 
modify a core component of the CMS.

I might end up doing just that.


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

Re: [css-d] equal height columns in css

[vincent pollard]

thanks David! that One True Layout example works beuatifully (in IE6, IE7
and FF on PC at least).

On 10/04/2008, David Laakso <[EMAIL PROTECTED]> wrote:
>
> vincent pollard wrote:
>
> > how do i create these?
> >
> > i want 3 columns with variable content but i want the middle column to
> > have
> > a border so it needs to be 100% of its parent div.
> >
> > the examples i've found online either use faux columns which is no use
> > or
> > don't work in IE, which is no use (and kind of shocking that supposed
> > css
> > experts would post it on their css blog without checking ie first -
> > names
> > will not be mentioned).
> >
> >
> >
>
>
> In addition to the link Georg provided, see also:
>
> 
> and
> 
> & check the "make columns equal height" box.
>
> --
> http://chelseacreekstudio.com/
>
>


-- 
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] equal height columns in css

[David Laakso]

vincent pollard wrote:
> how do i create these?
>
> i want 3 columns with variable content but i want the middle column to have
> a border so it needs to be 100% of its parent div.
>   




See also:


and

& check the "make columns equal height" box.


-- 
http://chelseacreekstudio.com/

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

Re: [css-d] equal height columns in css

[David Laakso]

vincent pollard wrote:
> how do i create these?
>
> i want 3 columns with variable content but i want the middle column to have
> a border so it needs to be 100% of its parent div.
>
> the examples i've found online either use faux columns which is no use or
> don't work in IE, which is no use (and kind of shocking that supposed css
> experts would post it on their css blog without checking ie first - names
> will not be mentioned).
>
>   


In addition to the link Georg provided, see also:


and

& check the "make columns equal height" box.

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Width of absolutely-positioned div

[David Laakso]

Mary Ellen Curtin wrote:
> Here is a test page:
> http://datagnostics.com/test/testbasic.html
> Is there a way to make the pink absolutely-positioned box as wide as the 
> yellow regular box -- 
> pink box: {position:absolute;top: 7em;left: 210px;text-align:center;}
> yellow box: {margin: 0 0 0 210px; text-align: center;}
>
>
> Mary Ellen
>   


Don't know if this will meet your need, or not...

css
#stuff {
float : left;
width : 100%;
border : 1px solid red;
margin : 0 auto;
position : relative;
}
#navbar {
width : 200px;
background : #ccffcc;
color : black;
border : 1px solid black;
float : left;
}
#topbox {
background : yellow;
margin : 0;
text-align : center;
border : 1px solid green;
float : right;
width : 86%;
}
#absbox {
background : #ffccff;
text-align : center;
position : absolute;
top : 7em;
right : 0;
border : 1px solid red;
margin : 0 0 0 200px;
width : 86%;
}
h2 {
text-align : center;
margin : 1em;
}
html



this is a non-absolutely-positioned box


this is an absolutely-positioned box
how do I make it as wide as the yellow box?



navbar
is always
a list
on the side
absolutely
positioned





-- 
http://chelseacreekstudio.com/

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

Re: [css-d] equal height columns in css

[vincent pollard]

thanks Georg

i looked at:
http://blog.kometdigital.web.id/2006/03/equal_heights_three_column_lay.php but
don't like the workaround for IE;
looked at this: http://www.codeproject.com/KB/HTML/relatively_simple.aspx but
don't like how busy the DIV structure is;
looked at this: http://www.ejeliot.com/blog/61 but my columns have varying
widths so i dn't like the background-image method;
looked at this:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ but
it doesn't work in IE;
don't like the various javascript methods, e.g.
http://blog.creonfx.com/javascript/equal-height-two-three-columns-div-layout

I'M TRYING THIS RIGHT NOW: http://2columns.net/ i like it but i need to
adapt it for 3 columns.

On 10/04/2008, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> vincent pollard wrote:
>
> > how do i create these?
> >
> > i want 3 columns with variable content but i want the middle column
> > to have a border so it needs to be 100% of its parent div.
> >
>
> Since there are so many methods for creating 3 columns layouts, I think
> we'll need to see what method(s) you had in mind before suggesting which
> "equal height" methods that are best suited.
>
> A few "equal height columns" methods are listed/described here...
> 
> ...but I have no idea if any will work for you.
>
> regards
>Georg
> --
> http://www.gunlaug.no
>



-- 
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Width of absolutely-positioned div

[Mary Ellen Curtin]

> Add...
> #absbox {right: 0;}
> ...and a workaround for IE6' lack of support for 4-side positioning of 
> elements.

Yeah, I tried that:
http://datagnostics.com/test/testbasic2.html
and also making that box relatively positioned:
http://datagnostics.com/test/testbasic1.html

What kind of IE6 workaround would you suggest? I am not at all happy 
with the suggestion, because my site stats show that I've still got a 
*lot* of IE6-using visitors.

Mary Ellen
Doctor Science, MA
http://doctorscience.blogspot.com 

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

Re: [css-d] equal height columns in css

[Gunlaug Sørtun]

vincent pollard wrote:
> how do i create these?
> 
> i want 3 columns with variable content but i want the middle column
> to have a border so it needs to be 100% of its parent div.

Since there are so many methods for creating 3 columns layouts, I think
we'll need to see what method(s) you had in mind before suggesting which
"equal height" methods that are best suited.

A few "equal height columns" methods are listed/described here...

...but I have no idea if any will work for you.

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

Re: [css-d] Width of absolutely-positioned div

[Gunlaug Sørtun]

Mary Ellen Curtin wrote:

> http://datagnostics.com/test/testbasic.html

> Is there a way to make the pink absolutely-positioned box as wide as 
> the yellow regular box -- that is, just wide enough to fill up the 
> width of the screen, whatever that may be?

Add...
#absbox {right: 0;}
...and a workaround for IE6' lack of support for 4-side positioning of
elements.

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

[css-d] equal height columns in css

[vincent pollard]

how do i create these?

i want 3 columns with variable content but i want the middle column to have
a border so it needs to be 100% of its parent div.

the examples i've found online either use faux columns which is no use or
don't work in IE, which is no use (and kind of shocking that supposed css
experts would post it on their css blog without checking ie first - names
will not be mentioned).

-- 
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Width of absolutely-positioned div

[Mary Ellen Curtin]

Here is a test page:
http://datagnostics.com/test/testbasic.html
Is there a way to make the pink absolutely-positioned box as wide as the 
yellow regular box -- that is, just wide enough to fill up the width of 
the screen, whatever that may be? They are both moved over to the right 
to make way for the absolutely-positioned left-side navigation bar. Text 
is centered within the boxes.

pink box: {position:absolute;top: 7em;left: 210px;text-align:center;}
yellow box: {margin: 0 0 0 210px; text-align: center;}

halp.

Mary Ellen
Doctor Science, MA
http://doctorscience.blogspot.com 

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

Re: [css-d] safari specific stylesheets

[Alan Gresley]

Publicstyle wrote:
> Ok I have spent the last few hours lurking google and the archives of this
> list hard, but with no luck yet.
> 
> Does anyone know of a way to make safari ignore my main stylesheet and read
> a seperate one -- something like conditional comments for IE.


Yes there is a way.

[..]
  > The site is here:
> www.publicstyle.com.au
> www.publicstyle.com.au/safari
> 
> Cheers
> Aaron


Hi Arron

Before we hack we must understand what is happening. You have run head 
on into a case of browser inconstancy.

Firefox and IE8 will render one way. Safari 3 will render another way. 
Opera 9.5 will render similar to Safari but there extra space to scroll 
to below the viewpoint. Your design is a true Acid test. There was quite 
some controversy about Joel Spolsky's article Martian Headsets.

http://www.joelonsoftware.com/items/2008/03/17.html

This describes the world of many many standards where there is no true 
STANDARD. When this article was raised on the CSS WG mailing list by my 
self it was considered off-topic on that list and was forward onto the 
archive list.

http://lists.w3.org/Archives/Public/www-archive/2008Mar/0059.html

The only place that I could raise this issue was in this blog which 
criticized Joel Spolsky's article.

http://my.opera.com/hallvors/blog/show.dml/1818385#comment5002217

The second example I give was this test case.

http://css-class.com/test/css/viseffects/overflow-box-next-to-float.htm

This test case relates to your problem on your page. This test case will 
render the same in Firefox and IE8 but render different in Safari 3 and 
Opera 9.5

I have have reworked your code which is very interesting showing exactly 
what is happening.

http://css-class.com/x/pub/

Firefox and IE8 will render very close. The div#left float (red) is 
clearing the div.mik overflow:hidden (gold). In Safari 3 and Opera 9.5 
this red float is hidden outside and above the viewpoint. Since this 
happens it drags the body (gray) upwards exposing the white background 
of the html element at the bottom of the page. Note that the height of 
the red float seen in Firefox and IE8 is the same height of the white 
background at the bottom of the page in Safari 3 and Opera 9.5.

I know of a hack that you can serve to Opera 9.5.

In closing this message I will ask the web design community to pull 
together on this issue that there is "no true standard"


Alan

http://css-class.com/









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

Re: [css-d] Beginner CSS Having Absolution Pos Issue in IE7 WIN

[David Laakso]

Rhiannon Cunag wrote:
> www.scotty-valentine.com, is viewed perfectly fine in
> Safari and Firefox, but in IE 7WIN (works fine on IE MAC), there are some
> issues with elements that are absolutely positioned.
>  Rhiannon
>
>   


It is cute and charming and I am not so sure I agree about Safari and 
Firefox. If no one provides a solution before 5p, Fri., April 11, write 
me off-list, and I will /try/ to help.

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Centering image h/v in *smaller* div

[Lisa Onizuka]

Martin, I'm not sure if you want to bother with any inline css, but you
could achieve it this way:

   

div.imagebox  {
width: 80px;
height: 80px;
overflow: hidden; }

-Lisa
http://free-ecard-greetings.com
http://cleanwebdesign.com
--


Hi,

I use a  to display thumbnails in a square box. 
These thumbnails are of various sizes and aspect ratios (auto-generated by a
CMS), but they all exceed the dimensions of the box. Here's the css:

div.imagebox  {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }


I want to position them so that their center-portion is displayed, but since
they're bigger not even  text-align: center  has any effect. All I see is
the upper left corner of the images.

Now all the resources I've found so far deal with the case of the
surrounding div being *larger* than the images. But I got some hints that
might be useful like setting the div's position to relative and using
absolute positioning for the images.

The problem with that is however that I can't use fixed values as the
size/orientation of the thumbnails varies.

Can this be done? Any help would be very much appreciated!


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

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

Re: [css-d] Breaking out of a div

[David Laakso]

Paul Jinks wrote:
>
> I've set a background image to the h1 element, and using negative margins
> and padding etc. I'm trying to get it to 'pop' out of the containing div.
> In Firefox2 for win this works more or less as I want it to, but in IE6
> the part of the image outside the containing div cannot be seen. Any
> solutions?
>
> link: http://www.pauljinks.co.uk/itc/cgexperiments/
>
>
>
> Paul
>
>
>   





h1 { z-index: 1;  position: relative; }
  
 


-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Breaking out of a div

[Philippe Wittenbergh]

On Apr 11, 2008, at 12:05 AM, Paul Jinks wrote:
> Hi
>
> First the back story: I'm working at a university using a piece of web
> authoring software called Course Genie. Teaching staff write their
> materials in Word, hit generate and out pops the web page. Fine.
>
> My job is to write templates so this looks pretty, however, the html
> leaves few hooks work with on. Basically there's
> 
> 
> 
> Assorted other html tags
> 
> 
> One option I'm looking at is to use the h1 element to introduce a  
> little
> graphical flavour.
>
> So far so good. Here's my problem:
>
> I've set a background image to the h1 element, and using negative  
> margins
> and padding etc. I'm trying to get it to 'pop' out of the containing  
> div.
> In Firefox2 for win this works more or less as I want it to, but in  
> IE6
> the part of the image outside the containing div cannot be seen. Any
> solutions?
>
> link: http://www.pauljinks.co.uk/itc/cgexperiments/

The parent container 'hasLayout'. [1]
This should work:
  h1 {position:relative; zoom:1;}

[1] 

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





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

Re: [css-d] Breaking out of a div

[Christian Kirchhoff]

Hello,

adding "position: relative;" to the h1 style could do the trick.

Best regards,

Christian Kirchhoff
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza


Paul Jinks schrieb:
> Hi
>
> First the back story: I'm working at a university using a piece of web
> authoring software called Course Genie. Teaching staff write their
> materials in Word, hit generate and out pops the web page. Fine.
>
> My job is to write templates so this looks pretty, however, the html
> leaves few hooks work with on. Basically there's
> 
> 
> 
> Assorted other html tags
> 
> 
> One option I'm looking at is to use the h1 element to introduce a little
> graphical flavour.
>
> So far so good. Here's my problem:
>
> I've set a background image to the h1 element, and using negative margins
> and padding etc. I'm trying to get it to 'pop' out of the containing div.
> In Firefox2 for win this works more or less as I want it to, but in IE6
> the part of the image outside the containing div cannot be seen. Any
> solutions?
>
> link: http://www.pauljinks.co.uk/itc/cgexperiments/
>
> Many thanks in advance
>
> Paul
>
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Horrible Lag time in CS3 Design/WYSIWYG View

[Mark Story]

Craig Givens wrote:
> I'm in need of an expert Dreamweaver CS3 engineer or guru to take a
> look at why my CSS layout is experiencing such a horrendous 1-2 minute
> delay/refresh time in the WYSIWYG. A sample page and its css files can
> be downloaded here:
>
> http://www.geocities.com/craiggivens01/cs3_lag_example.zip
>
> It currently only renders correctly in Firefox, but everything validates.
>
> I believe the problem has to do with the "modules.css" file and all of
> the modules being called in the middle of the page grid, but I really
> can't pinpoint exactly WHY CS3 takes 1-2 minutes to refresh every time
> I try to either :
>
> a) paste in new text content
> b) add a new  in one of the modules
> c) create a new module by duplicating the existing div and its container grid
>
> Is it trying to re-calculate the widths of the grid? Is it the number
> of modules called in the markup? Is it the load time of multiple
> classes per div? Is it a syntax issue? I've been wrecking myself for
> days trying to fix this but nothing works.
>
> Any ideas are much appreciated!
>   
I didn't have a chance to look over you code samples but shallow / 
inspecific selectors can run slower than more specific selectors

So

li * {styles here}

will run slower than

li span,
li a,
li em {styles here}

At least that is the case with IE but its always special like that. 
Perhaps dreamweaver is equally special

-Mark


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

[css-d] Breaking out of a div

[Paul Jinks]

Hi

First the back story: I'm working at a university using a piece of web
authoring software called Course Genie. Teaching staff write their
materials in Word, hit generate and out pops the web page. Fine.

My job is to write templates so this looks pretty, however, the html
leaves few hooks work with on. Basically there's



Assorted other html tags


One option I'm looking at is to use the h1 element to introduce a little
graphical flavour.

So far so good. Here's my problem:

I've set a background image to the h1 element, and using negative margins
and padding etc. I'm trying to get it to 'pop' out of the containing div.
In Firefox2 for win this works more or less as I want it to, but in IE6
the part of the image outside the containing div cannot be seen. Any
solutions?

link: http://www.pauljinks.co.uk/itc/cgexperiments/

Many thanks in advance

Paul


-- 

Check out my website: http://www.pauljinks.co.uk :o)


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

Re: [css-d] Centering image h/v in *smaller* div

[Martin Sammtleben]

At 15:56 +0200 10/4/08, ilduca69 wrote:
>well, the name of the classes must match:
>



Sorry, that was just a typo in the mail - they actually do match, but 
no effect.

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

[css-d] Centering image h/v in *smaller* div

[Martin Sammtleben]

Hi,

I use a  to display thumbnails in a square box. 
These thumbnails are of various sizes and aspect ratios 
(auto-generated by a CMS), but they all exceed the dimensions of the 
box. Here's the css:

div.imagebox  {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }


I want to position them so that their center-portion is displayed, 
but since they're bigger not even  text-align: center  has any 
effect. All I see is the upper left corner of the images.

Now all the resources I've found so far deal with the case of the 
surrounding div being *larger* than the images. But I got some hints 
that might be useful like setting the div's position to relative and 
using absolute positioning for the images.

The problem with that is however that I can't use fixed values as the 
size/orientation of the thumbnails varies.

Can this be done? Any help would be very much appreciated!


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

Re: [css-d] Building a Print CSS

[Jeff Gates]

Christian, thanks. That helped. But now I see that my first printed page's 
margins are quite wide, while the second page is just as it should be. I 
have the width set to auto for that #center div. 

Jeff

> I once had similar problems and found out that "overflow: hidden;" set 
> on one of the parents of the text container that is cropped caused them.
> 
> Set
> 
> #center {
> overflow: visible;
> }
> 
> for print. That should help.
> 
> 
> Jeff Gates schrieb:
> > I'm trying to create a print css and am having a few problems. The first
> > is that when there is a lot of text on a Web page, it only prints one
> > page, cutting the rest of the text off.
> >
> > Example: http://inourpath.com/essay1.html
> > Print CSS: http://inourpath.com/iop_print.css

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

Re: [css-d] safari specific stylesheets

[David Laakso]

Publicstyle wrote:
> Does anyone know of a way to make safari ignore my main stylesheet and read
> a seperate one -- something like conditional comments for IE. (I can sense
> some groans already,
> judging by google i'm not the only person who has been looking)
>
>
>
> The site is here:
> www.publicstyle.com.au
> www.publicstyle.com.au/safari
>
> Cheers
> Aaron
>   



This closed it on a local file in Safari and Mac/Opera:

First to open last to close division added to markup.
#stuff {overflow:hidden;border 1px solid red;}

and modification of this rule set.

#wrap {
overflow:hidden /*add*/;
margin: /*15px*/0 0px -90px 15px/*amend*/;
}





-- 
http://chelseacreekstudio.com/

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

[css-d] safari specific stylesheets

[Publicstyle]

Ok I have spent the last few hours lurking google and the archives of this
list hard, but with no luck yet.

Does anyone know of a way to make safari ignore my main stylesheet and read
a seperate one -- something like conditional comments for IE. (I can sense
some groans already,
judging by google i'm not the only person who has been looking)

I have a very weird display glitch on my site which effects Safari only -- I
managed to sort it out in a test version but I had to remove my footer
element
and change a few things around to get it to look right.

However since it is working ok everywhere else i'd prefer to leave my
original stylesheet as is if at all possible.

I read somewhere a suggestion to use java, i'd like to avoid that if
possible (mainly because I wouldn't know how to write it) but any
suggestions
are welcome.

The site is here:
www.publicstyle.com.au
www.publicstyle.com.au/safari

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

Re: [css-d] @media print height units

[Philippe Wittenbergh]

> Neil Pharazyn wrote:


>> However, if you run this HTML page you'll see that it still doesn't
>> achieve
>> what I want, which is to limit the number of pages of content
>> printed out.
>> In this case there are two A4 pages of content. It  prints both pages
>> despite my  body.A4 saying not print anything past 29.7cm, which is
>> one A4
>> sheet length. Maybe overflow doesn't work for printing, or cm isn't
>> recognised, or who knows what
>> [...]

>> 
>> 
>> overflow_print_test.htm
>> 
>> 
>>
>> 
>>
>> p
>> {
>> font-family: Times New Roman, Times, serif;
>> font-size: 12px;
>> line-height: 115%;
>> margin: 10px;
>> }
>>
>>
>> @media print {
>> body {
>>   height:100px;
>>   width:100px;
>>   overflow:hidden;
>> }
>> }
>>
>> @media print {
>> body.A3 {
>>height:42cm;
>>overflow:hidden;
>> }
>> body.A4 {
>>height:29.7cm;
>>overflow:hidden;
>> }
>> }
>>
>> 
>> 
>>
>> 
>>
>> > name="holdit">
>> 
>>   
>>
>> column 1
>> I
>> From fairest creatures we desire increase,
>> That thereby beauty's rose might never die,
>> But as the riper should by time decease,
[...] (snipped long text content)

That worked nearly perfectly with Gecko 1.9. I get a 1-page pdf file.
Opera 9.5b and Safari didn't do that well:
Safari: multi-page output (ignores overflow:hidden)
Opera: 1 page filed, but a multi-page pdf file.

Notes:
1. you limit the body to height of 29.7 cm. That is too tall if what  
you want to limit the print result to one sheet of paper; you need to  
take the default print-margins into account (print-margins as set by  
the printer, something you cannot control - the 'Non-printable area'  
in CSS 3 paged media).

2. I'm not sure what should happen with overflowed content (hidden) in  
paged media. Should the device reserve space for the hidden content as  
Opera does - that doesn't seem to make sense ?

3. cm (centimetre) is perfectly valid. The are no media-specific  
limits to the overflow property.

4. there is no 4.



Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





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

[css-d] Fwd: @media print height units

[Philippe Wittenbergh]

I am sure Neil intended to reply to the list.

Begin forwarded message:

> From: "Neil Pharazyn" <[EMAIL PROTECTED]>
> Date: April 10, 2008 12:56:29 PM JST
> To: "Philippe Wittenbergh" <[EMAIL PROTECTED]>
> Subject: Re: [css-d] @media print height units
> X-Mailer: Microsoft Outlook Express 6.00.2800.1914
>
> Thanks Philippe
> I hope I've now got the class selector correct in the complete HTML  
> page
> code below as 
>
> However, if you run this HTML page you'll see that it still doesn't  
> achieve
> what I want, which is to limit the number of pages of content  
> printed out.
> In this case there are two A4 pages of content. It  prints both pages
> despite my  body.A4 saying not print anything past 29.7cm, which is  
> one A4
> sheet length. Maybe overflow doesn't work for printing, or cm isn't
> recognised, or who knows what
>
> Any ideas?
>
> Regards
>
> Neil Pharazyn
>
> ***
>
> 
> 
> overflow_print_test.htm
> 
> 
>
> 
>
> p
> {
> font-family: Times New Roman, Times, serif;
> font-size: 12px;
> line-height: 115%;
> margin: 10px;
> }
>
>
> @media print {
>  body {
>height:100px;
>width:100px;
>overflow:hidden;
>  }
> }
>
> @media print {
>  body.A3 {
> height:42cm;
> overflow:hidden;
>  }
>  body.A4 {
> height:29.7cm;
> overflow:hidden;
>  }
> }
>
> 
> 
>
> 
>
>  name="holdit">
>  
>
>
> column 1
> I
> From fairest creatures we desire increase,
> That thereby beauty's rose might never die,
> But as the riper should by time decease,
> His tender heir might bear his memory:
> But thou contracted to thine own bright eyes,
> Feed'st thy light's flame with self-substantial fuel,
> Making a famine where abundance lies,
> Thy self thy foe, to thy sweet self too cruel:
> Thou that art now the world's fresh ornament,
> And only herald to the gaudy spring,
> Within thine own bud buriest thy content,
> And, tender churl, mak'st waste in niggarding:
> Pity the world, or else this glutton be,
> To eat the world's due, by the grave and thee.
> II
> When forty winters shall besiege thy brow,
> And dig deep trenches in thy beauty's field,
> Thy youth's proud livery so gazed on now,
> Will be a totter'd weed of small worth held:
> Then being asked, where all thy beauty lies,
> Where all the treasure of thy lusty days;
> To say, within thine own deep sunken eyes,
> Were an all-eating shame, and thriftless praise.
> How much more praise deserv'd thy beauty's use,
> If thou couldst answer 'This fair child of mine
> Shall sum my count, and make my old excuse,'
> Proving his beauty by succession thine!
> This were to be new made when thou art old,
> And see thy blood warm when thou feel'st it cold.
> III
> Look in thy glass and tell the face thou viewest
> Now is the time that face should form another;
> Whose fresh repair if now thou not renewest,
> Thou dost beguile the world, unbless some mother.
> For where is she so fair whose unear'd womb
> Disdains the tillage of thy husbandry?
> Or who is he so fond will be the tomb
> Of his self-love, to stop posterity?
> Thou art thy mother's glass and she in thee
> Calls back the lovely April of her prime;
> So thou through windows of thine age shalt see,
> Despite of wrinkles this thy golden time.
> But if thou live, remember'd not to be,
> Die single and thine image dies with thee.
> IV
> Unthrifty loveliness, why dost thou spend
> Upon thy self thy beauty's legacy?
> Nature's bequest gives nothing, but doth lend,
> And being frank she lends to those are free:
> Then, beauteous niggard, why dost thou abuse
> The bounteous largess given thee to give?
> Profitless usurer, why dost thou use
> So great a sum of sums, yet canst not live?
> For having traffic with thy self alone,
> Thou of thy self thy sweet self dost deceive:
> Then how when nature calls thee to be gone,
> What acceptable audit canst thou leave?
> Thy unused beauty must be tombed with thee,
> Which, used, lives th' executor to be.
> V
> Those hours, that with gentle work did frame
> The lovely gaze where every eye doth dwell,
> Will play the tyrants to the very same
> And that unfair which fairly doth excel;
> For never-resting time leads summer on
> To hideous winter, and confounds him there;
> Sap checked with frost, and lusty leaves quite gone,
> Beauty o'er-snowed and bareness every where:
> Then were not summer's distillation left,
> A liquid prisoner pent in walls of glass,
> Beauty's effect with beauty were bereft,
> Nor it, nor no remembrance what it was:
> But flowers distill'd, though they with winter meet,
> Leese but their show; their substance still lives sweet.
> VI
> Then let not winter's ragged hand deface,
> In thee thy summer, ere thou be distilled:
> Make sweet some vial; treasure thou some place
> With beauty's treasure ere it be self-killed.
> That use is not forbidden usury,
> Which happies those that pay the willing loan;
> That's for thy self to breed another thee,
> Or ten times happier