Re: [css-d] Deciding what browsers to build for/test in

[David Dorward]

On 04/01/06, Dan Jallits <[EMAIL PROTECTED]> wrote:
> Ever browser user should have the same experience when viewing a design.

Never going to happen. e.g. take a Lynx user, a Firefox user and an
IBM Homepage Reader user.


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

Re: [css-d] Weird IE problem with a background image - SOLVED

[Christian Montoya]

On 1/5/06, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Christian Montoya wrote:
> > http://temp.rdpdesign.com/ezcms/
>
> > "Calendar" and "News and Events" ... Why doesn't IE show the icon?
>
> The usual IE/win layout bug...
> #rightColumn h2 {position: relative;}
> ...will work. So will any other hasLayout trigger.

Thanks Georg. That did it.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS help for WordPress theme?

[Tony Crockford]

Charles Wiltgen wrote:

> I'm using the current beta release at .

at that site in particular I can get IE to behave by changing .primary to:

.primary {
width: 500px;
_width: 500px; /* IE Hack */
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
display: inline;
}


display:inline to cure the doubled margin bug (IIRC) and added 10px of 
right margin.


*however*  if I were doing a two column layout, I wouldn't do it that 
way...  and therefore can't say what other browser bugs will be 
introduced by my fixes for IE (on PC BTW)

;o)


-- 
Join me: http://wiki.workalone.co.uk/
Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F
Engage me: http://www.boldfish.co.uk/portfolio/

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

Re: [css-d] Looking for Header, 2 columns, footer fixed at bottom of screen example?

[Julian Voelcker]

OK, I have managed to recreate a version of:

http://www.gunlaug.no/tos/moa_8d.html

That works on the required browser platforms but am still having to run 
IE in quirks mode.

Thinking about it further I'm happy to drop the need for scrolling, so 
can anyone recommend another version of the header, 2 cols and then 
footer at the bottom of the page layout?

Ideally I want to avoid background images or background colours, but 
would like to have a visible dividing line between the two columns 
running from the header down to the foooter.

The design needs to work on IE6+ FF1.0+ on the PC and Safari and FF1.0 
on the Mac.

Thanks fo the support so far.

Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] Deciding what browsers to build for/test in

[Ian Anderson]

Christian Heilmann wrote:

> Make the sites work in all browsers, enhance by object detection or
> valid CSS selectors and do the cleaning up for those your users are
> most likely to have according to your stats.

I agree with the principle Christian outlines here, but I think the 
danger in the wording used here and in other responses is the definition 
of the word "work" assumed by the reader.

If "work" is taken to mean looking the same more or less to the pixel, 
then this is not possible given the browsers listed in the OP's stats. 
Netscape 2? Even table layouts won't work reliably, I suspect.

I believe that most professionals would define "work" as in providing 
access to the content and basic functionality, while reserving visual 
design consistency for those browsers capable of displaying it.

In practice, this means using well-structured valid HTML, with CSS 
delivered selectively to those browsers capable of using it. This should 
not require any scripting on the client or server side, unless one wants 
it to.

I believe a common approach is to support the version 5 browsers and up 
visually, to the greatest extent you can. Personally, I support the aim 
of making the most common use cases work well (IE6 Windows, usually), 
but not at the expense of the better browsers.

Using media attributes (e.g. media="screen") in the link tag or 
importing styles is a good way to hide all the CSS from NN4 which will 
often make a page unusable if it can see the styles intended for other 
browsers.

So to summarise; IMHO version 5 browsers and up should get as close to 
the same visual experience as one can get it, subject to available 
resources and time available, while earlier browsers should receive 
unstyled HTML.

There is no reason at all why one should not use simple layout tables 
for the rapid development and delivery of a site, if one lacks the 
experience to build the same design in CSS in a reasonable timescale. In 
reality, only the web designer will know whether the site is CSS layout 
or not. No user will know or care.

@ Dova - You mentioned using tables and DIVs together; in fact, in this 
hybrid style of web design (cf. Zeldman [1]) the TDs replace DIVs in 
most cases; you can use the same class and ID selectors as you would in 
a CSS layout, and enjoy the best of both worlds while you work on an 
all-CSS version to hone your CSS skills.

The unknown browsers in your stats are almost certainly search engine 
spiders and other robots. Using JavaScript-based stats like Shawn 
Inman's Mint avoids these gross distortions, while introducing other, 
more minor ones. It also looks like there are other irregularities - NN2 
should not be there; NN4 is no way more common than IE5.5, and so on. Or 
- either you have a very small, unrepresentative sampling of the general 
browser population, or folks have some strange browsing habits down 
there in Virginia. :)

Cheers

Ian

[1] Designing with Web Standards, Jeffrey Zeldman 2003, New Riders 
Chapter 7, page 181


-- 
_
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net

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

[css-d] Header, 2 cols, fixed footer

[Julian Voelcker]

Morning All,

Following on from my posts last night to illustrate what I am trying to 
achieve, I have thrown up a cut down copy of the frameset I am trying 
to replace and it can be seen at http://tinyurl.com/a6r9f.

I'm basically trying to replace a frameset layout whilst retaining some 
of the functionality.

We need to retain the footer in the fixed position since it acts as a 
status bar for the application.

The columns aren't going to have coloured backgrounds but will require 
a dividing line running from top to bottom.

The pages aren't designed to scroll at the required resolutions, but if 
by chance there is some overflow I want the scrolling to occur within 
the div, rather than moving the footer.

Any advice, pointers to samples, etc would be appreciated.
Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] clearing a float without clearing another float

[Liam ONeil]

By setting your width to 99.9% as opposed to 100% you do not get the
horizontal scrollbar


Kind regards,
Liam

On 12/21/05 2:17 AM, "Zoe M. Gillenwater" <[EMAIL PROTECTED]>
wrote:

> Since floats shrinkwrap their content when you leave a width off, you
> need to use width: 100%.  But then you'd get a horizontal scrollbar.
> Unless, that is, you use negative margins.


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

Re: [css-d] ie bug with css positioned div over dropdown form element

[Ingo Chao]

chuck clark wrote:
> Hi,
>   How can i correct this bug where a drop down form element is showing ontop
> of an absolute positioned
> div with a higher z-index.
...
> http://chucklarge.mine.nu/csstest/iebugs/csspopup2.htm

IE makes a distinction between 'windowed' and 'windowless' objects. Both 
sides establish their own stacking. This is not a bug, it's by design, a 
feature. Workarounds using iframes are in the wild.

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

Re: [css-d] Header, 2 cols, fixed footer

[Michael Hulse]

On Jan 5, 2006, at 2:34 AM, Julian Voelcker wrote:
> Any advice, pointers to samples, etc would be appreciated.

Here is an example, I think it is kinda like what you are looking for:

Link: http://www.pmob.co.uk/temp/mac3column.htm
Link description: 3 column layout - any column can be the longest. 
Footer will stay at bottom of window unless content is greater then it 
stays at bottom of document.

Found here:
http://www.pmob.co.uk/

Paul O'B rocks! He is one of several cool admins/advisors/mentors found 
on www.sitepoint.com.

If the example link I gave above is not what you are looking for, you 
may want to poke around his root list of links... maybe another example 
will have what you need.

Hth,
Good luck,
Cheers,
Micky
-- 
¸.·´¯`·.¸¸><(((º>`·.¸¸.·´¯`·.¸¸><º>
·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸><º>
`·.¸¸><º>¸.·´¯`·.¸¸><º>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Header, 2 cols, fixed footer

[Tony Crockford]

Julian Voelcker wrote:

> We need to retain the footer in the fixed position since it acts as a 
> status bar for the application.

naively stupid question, but couldn't you show status in the fixed 
header instead?

simplifies the problem to non-existent...

;o)


-- 
Join me: http://wiki.workalone.co.uk/
Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F
Engage me: http://www.boldfish.co.uk/portfolio/

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

[css-d] Generic table formatting definitions

[Pete Home]

I spend most of my time developing database driven pages where, as was
pointed out to me by members of this forum, the tabular output often
necessitates the use of a table. However, these tables often contain text
(field descriptions etc) and require formatting in terms of alignment, font,
size etc.
 
I have been looking at developing a set of 'tags' that could be used
generically so that changing the layout/format of the table can be properly
driven by CSS, so for example I would have a tag for column header, column,
row, cell, table etc that I could generate via my script for any database
table and control all the formatting in the CSS definitions.
 
I wondered if anyone might have already gone down this path or have any
input into the subject that would save me inventing any wheels.
 
Regards and thanks
Pete 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Header, 2 cols, fixed footer

[Martin Heiden]

Julian,

  I know this problem... We tried several approaches of which the best
  would be to use fixed positioning.

  Finally we chose to use the following:

  You need four absolute positioned divs.

  body { height: 100%; }
  div#header {
 position: absolute;
 top:0;
 left:0;
 height: n;
 width:100%;
 overflow: hidden|scroll;
  }

  div#left {
 position: absolute;
 top: n;
 bottom: m;
 left: 0;
 width: l;
 overflow: scroll;
  }
  div#right {
 position: absolute;
 top: n;
 bottom: m;
 left: l;
 right: 0;
 overflow: scroll;
  }
  div#footer {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: m;
 overflow: hidden|scroll;
  }

  replace n,m,l with your favourite measures and choose between hidden
  and scroll for header and footer overflows.

  That will work just fine in Firefox and Opera (Didn't test it in
  Safari). IE has some serious problems with absolute positioned
  elements with top/bottom or left/right set. But you can compute the
  height or width by using expression() and some Javascript. That will
  even work if you use em instead of px, but it will be a bit more
  difficult ;-)

regards

  Martin

 



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

[css-d] background div

[In Tel webdesign]

I give the container-div a repeating background and make its height 100%
I want it to fill the complete height with the image, but it doesnt.
http://hraudiovisuals.nl/index_test.htm
http://www.hraudiovisuals.nl/css/hr-1.css

Met vriendelijke groeten

Adrie den Hertog
In tel webdesign
www.in-tel.nl 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Generic table formatting definitions

[Christian Heilmann]

> I have been looking at developing a set of 'tags' that could be used
> generically so that changing the layout/format of the table can be properly
> driven by CSS, so for example I would have a tag for column header, column,
> row, cell, table etc that I could generate via my script for any database
> table and control all the formatting in the CSS definitions.

What's wrong with the tags HTML comes with and descendant selectors?

thead td
thead th
tbody td
tbody th...

Works for a lot of designs: http://icant.co.uk/csstablegallery/

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS WordPress - Changing Bullet Image on Link Hover

[Christian Heilmann]

> Hi :)
> I'm creating a theme for WordPress and I wish to have a secondary bullet
> image show up in the sidebar when you hover over a link there. The
> current bullet image is a purple heart (bullet.gif), the other bullet I
> made for hover is green (bullet2.gif) Below is the code I'm trying to
> use I just can't figure out where or how to add it so that it will
> work in the sidebar, and everything I've tried isn't working lol.
>
> list-style-image: url(images/bullet2.gif);
> list-style-type: circle;
> margin-left: 18px;

Searching the list archives or google brings up a solution as this has
been quite often discussed

http://css.maxdesign.com.au/listamatic/vertical04.htm
"Comments: Use list-style-image: url(imagename); to replace the
bullets entirely with images. The downside of this method is that each
browsers positions the images differently. CSS background images for
list bullets is a more consistent method."

Therefore:
http://css.maxdesign.com.au/listamatic/vertical05.htm

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS WordPress - Changing Bullet Image on Link Hover

[Tobias Baldauf]

Like already pointed out by the links below, using a background-image & 
then background-position together with text-indent to get the text away 
from the image will result in a solid way to position whatever 
bullet-pic you choose.

Tobias

Christian Heilmann schrieb:
>>Hi :)
>>I'm creating a theme for WordPress and I wish to have a secondary bullet
>>image show up in the sidebar when you hover over a link there. The
>>current bullet image is a purple heart (bullet.gif), the other bullet I
>>made for hover is green (bullet2.gif) Below is the code I'm trying to
>>use I just can't figure out where or how to add it so that it will
>>work in the sidebar, and everything I've tried isn't working lol.
>>
>>list-style-image: url(images/bullet2.gif);
>>list-style-type: circle;
>>margin-left: 18px;
> 
> 
> Searching the list archives or google brings up a solution as this has
> been quite often discussed
> 
> http://css.maxdesign.com.au/listamatic/vertical04.htm
> "Comments: Use list-style-image: url(imagename); to replace the
> bullets entirely with images. The downside of this method is that each
> browsers positions the images differently. CSS background images for
> list bullets is a more consistent method."
> 
> Therefore:
> http://css.maxdesign.com.au/listamatic/vertical05.htm
> 
> --
> Chris Heilmann
> Blog: http://www.wait-till-i.com
> Writing: http://icant.co.uk/
> Binaries: http://www.onlinetools.org/
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE problem

[Zoe M. Gillenwater]

Hi Andrew,

It looks like no one responded to your question, but if this ended up in 
another thread that I missed, I apologize.  Just ignore me then. :-)

Andrew Mason wrote:

>I recently redesigned my site, and for some reason my two main  
>columns aren't aligning properly in IE.  Anyone know a good fix for  
>this?  The problem is in two places:
>http://policytree.org/
>and
>http://policytree.org/tree.php?root=924
>  
>

I don't see a problem in IE as compared with FF.  Did you fix this?

>Also, on that second link, I'd like to make the image iframe resize  
>automatically when the user resizes their browser window.  I've  
>played with percentages, but couldn't get something that looked okay  
>in a smaller browser window and worked across different browsers.  If  
>anyone has any ideas, like whatever google maps does, I'd love to  
>hear them.
>

Can you provide us with a link to a page that shows your attempt at 
resizing so we can play with it and see if there is anything that can be 
done to fix it?

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

[css-d] Please help me out with a complex layout

[emm . sii]

Hi!

Please help me out with a complex layout.
It should work also in Internet Explorer 5

I made an illustrative picture:
http://img494.imageshack.us/img494/9761/layout0ho.gif

- left menu has fixed width (for example 200px)
- the content (marked with #wrap) is 100% wide
- width of the first "column" is 60% of #wrap's width
- width of the second "column" is 40% of #wrap's width

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

Re: [css-d] Header, 2 cols, fixed footer

[Julian Voelcker]

Hi Michael,

> Link: http://www.pmob.co.uk/temp/mac3column.htm 
> Link description: 3 column layout - any column can be the longest. 
> Footer will stay at bottom of window unless content is greater then it 
> stays at bottom of document.

That looks great, thanks for that.

Have been hacking away and nearly have it sorted now that I have thrown 
in all the other messy content I want ;-)

Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] Header, 2 cols, fixed footer

[Julian Voelcker]

Hi Martin,

> That will work just fine in Firefox and Opera (Didn't test it in 
>  Safari). IE has some serious problems with absolute positioned 
>  elements with top/bottom or left/right set. But you can compute the 
>  height or width by using expression() and some Javascript. That will 
>  even work if you use em instead of px, but it will be a bit more 
>  difficult ;-)

Thanks Martin, I will consider it, just need to test out the version 
Michael has suggested.

Do you have a version of it on the web that I can test in Safari?
Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] Header, 2 cols, fixed footer

[Julian Voelcker]

Hi Tony,

> naively stupid question, but couldn't you show status in the fixed 
> header instead?

Possibly, although it's not a logical place to have it and I have other 
pretty things up there and anything more up there will make a mess of 
it. 8-)

Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] offset problem with IE

[Zoe M. Gillenwater]

Robert,

I don't see a reply to this thread you started, but if the dicussion got 
moved elsewhere that I missed, I apologize.

Robert Voogdgeert wrote:

>Could any of you tell me how te solve the mess that IE makes of offset
>values. I have used top, left and bottom offsets with percentage values
>with 'position:absolute', all browsers deal fine with this except IE.
>
>div.button1{
>position:absolute;
>bottom:10%;
>right:20%}
>
>  
>

IE indeed has problems when you combine left and right values, or top 
and bottom values, or percentage values with side values.  But I don't 
see that you are doing these things in this CSS rule.  Can you provide a 
URL to the page that shows the issue?  If not, can you provide more 
complete code and more description of the problem you are seeing?

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

[css-d] preloading and background slices

[ross]

http://www.nssdesign.scot.nhs.uk/about_us/whoweare.php


The slices on this page load at different times. Is there a way to delay the 
page loading until the all CSS background images are loaded. Or make them all 
apear at the same time?

I tried the basic preloading (javascript) techniques but nothing really works.






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

Re: [css-d] to position absolutely or float???

[Zoe M. Gillenwater]

ron zisman wrote:

>http://www.ricochet.org/flippingpixels/images/gallery_bloco_dos_sujos/ 
>index.html
>
>
>on the above page i needed a seconday navigation that i wanted  
>discreetly to sit in the upper left corner of the page regardless of  
>the browser window. My original intent was to position the div  
>absolutely, thinking that absolute positioning would take it out of the  
>normal flow. it didn't seem to work as it pushed the rest of the page  
>to the right. floating the div gives me visually what i am looking for.
>
>Why did absolute positioning affect the position of the other elements  
>on the page?
>  
>

Can you provide a link to a page that shows it absolutely positioned?  
We can't debug what you did without seeing it, so the link to your 
currently working page is not of much use to us.

Thanks,
Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Please help me out with a complex layout

[Martin Heiden]

Hi!

on Thursday, January 5, 2006 at 13:29 [EMAIL PROTECTED] wrote:

> Please help me out with a complex layout.
> It should work also in Internet Explorer 5

That's not very difficult. Choose one of the 3col layouts from the
wiki:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

regards

  Martin

 



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

Re: [css-d] image replacement problem in Mac IE

[Zoe M. Gillenwater]

Lowell Allen wrote:

>I'm having a problem with Fahrner Image Replacement in Mac IE 5.2. I'm 
>floating "button" links within paragraphs. When the floated button 
>isn't followed by a paragraph, the image replacement works fine, but 
>when a paragraph follows the floated div the button images are not 
>clickable links. I've put up a test page with the CSS in the head at 
>. Can anyone advise how to 
>get this working in Mac IE?
>  
>

Lowell,

I'm not a MacIE expert (still haven't gotten that MacMini to play around 
with, alas) but I know that there are other image replacement methods 
that are more accessible than FIR and that work better with MacIE.  This 
is the best one for across the board compatibility:
http://www.ryznardesign.com/web_coding/image_replacement/

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] clearing a float without clearing another float

[Zoe M. Gillenwater]

Liam ONeil wrote:

>On 12/21/05 2:17 AM, "Zoe M. Gillenwater" <[EMAIL PROTECTED]>
>wrote:
>  
>
>>Since floats shrinkwrap their content when you leave a width off, you
>>need to use width: 100%.  But then you'd get a horizontal scrollbar.
>>Unless, that is, you use negative margins.
>>
>>
>
>By setting your width to 99.9% as opposed to 100% you do not get the
>horizontal scrollbar
>  
>

I don't know the page this was in reference to any longer (it's been cut 
out of the text of the message, pity) but I seem to recall that the 
horizontal scrollbar would appear because there was to be another 
element beside the float, and I'm guessing this element was set to more 
than 0.1%. :-)  So no, 99.9% would not do any good in this case.  
Someone please reply with the URL this was in reference to if I'm mistaken.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

[css-d] Css div - strange behavor in FF terrible in Opera. IE looks ok.

[Piotr]

Hi.
I'm preparing polish version of Herbalife.com. I want to make xhtml 
compatible.
Under this link: http://www.kredytomat.pl/hbl/ is a test verison of this 
page. In IE it looks ok. In FF left and right side doesn't fit perfect 
in height. In Opera the page is totally messed up. Is there a way to 
make it work with every browser? I thought about puttning different css 
file for each browser, but i can't get Opera working correctly. The css 
file is here: http://www.kredytomat.pl/hbl/style.css. Can someone look 
at this?, maybe You will have an idea how to fix this.

Thanks,
Piotr J.

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

Re: [css-d] IE positioning problem with menu

[Ingo Chao]

shawn herrin wrote:
> Hi there,
> 
> I have been working on mixing son of suckerfish dropdowns with
> explodingboy.com's css menus.
> 
> I'm having a problem with IE positioning.
> 
> Working version - http://viewwerx.com/dev/menu/menus.html
> 
> Broken version -   http://viewwerx.com/dev/menu/menusiebug.html
> 

The current li:hover sets left:auto for the a.p. ul.SecondlevelMenu, but 
IE needs an actual position like left:0, therefore, the li should 
establish a containing block for this a.p. ul via position:relative.

Ingo


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

Re: [css-d] min-width

[Zoe M. Gillenwater]

Guillaume wrote:

>Does *min-width* behave the same way as min-height in standard friendly 
>browsers and in Ie, meaning:
>min-width = min-width in standard friendly browsers
>min-width = width in Ie.
>  
>

No.  You can test this yourself by creating a test page and playing with 
it in FF, Opera, and IE.  You will find that they do not behave the same.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Browser Incompatibility

[Zoe M. Gillenwater]

Dan Jallits wrote:

>This may be an arrogant opinion, but I think the majority of us t on
>the PC platform design our sites for Mozilla Firefox
>(mozilla.com/firefox/ ITS FREE) first, then we go back and adjust for
>Internet Explorer on the PC and the Mac. 
>

That's not an arrogant opinion -- it's a perfectly practical solution to 
a difficult problem.  I get things working right in FF first because 
when I do this, I cut my development time way down.  It's harder to hack 
a good browser into emulating IE's bugs (many of which have no rhyme or 
reason to them, so they can be impossible to emulate) than it is to hack 
IE into emulating the correct rendering.

By the way, did everyone notice how I cut out all the rest of the quoted 
text and left in only the part I was replying to?  This is called 
trimming, and everyone is *required* to do this.  Exercise your 
drag-select-delete skills in this new year and get in the habit.  
Another new year's resolution that we would love you to adopt: 
bottom-posting, which I have also illustrated here.  This, however, is 
not part of the list policies as a requirement -- trimming is.  Please 
do it.

Thanks,
Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

[css-d] Boxhelp

[Daniel Liljeberg]

Hi

 

I have a box with rounded corners created with divs and background graphics
of the corners, sides and the bottom.

The problem is that it doesn't scale with the content. So I used a
javascript to do that. But that doesn't always work. Often when it goes
wrong it becomes ok if I refresh the page. But this seems like a buggy
solution. Also, Mozilla and IE seems to decide the height a little
differently so I have to check for wich browser it is etc. Would be nice to
get away from this Javascript way.Is there a CSS way to get it to the right
size?

The php can be mostly ignored. The  part is the  part that print the
actual message.

Also, if the message height becomes less than the newsimage used it would be
nice to have the entire thing conform to the size of the image instead.

 

Here is the code: 

 

 

 



 

  

  







  

  

  

  

 CET

  

  Written by   is_admin)

{

echo(' | Edit post | Delete Post');

}?>Read more - Comments:
()





  

  

  

  







  

  

  

 





// Make the three div columns the same height (these values
apply to MOZ)

document.getElementById("nbleft").style.height
= document.getElementById("nbmiddle").offsetHeight - 19;

document.getElementById("nbright").style.height   =
document.getElementById("nbmiddle").offsetHeight - 19;

document.getElementById("nbcontainer").style.height
= document.getElementById("nbmiddle").offsetHeight;



 

Thanx for your time

 

 

Best regards

Daniel Liljeberg

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

[css-d] CSS newbie books

[ghvyghvy]

I joined this group and I daily receive messages. I am a newbie to CSS. 
I would like to learn CSS. Please give me a set of books with authors so 
that I can learn from start in a step by step way. I know HTML (almost). 
I need to learn CSS now. Please advice.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera 8.5 z-index (?) question

[Gary Wilhelm]

Hi all,

I've had this problem for a while but it hasn't been at the forefront of 
my mind.

If you go to http://www.ncswlearn.org/ (stylesheet at 
http://www.ncswlearn.org/styles/default.css) in Opera 8.5, you'll see 
that there's some header text in the left navigation bar that's cut off 
at the top.  It works fine in IE and FF.  I've got a z-index set on the 
navigation bar, but it doesn't seem to be working.  Suggestions?

Thanks,

Gary

-- 
Gary Wilhelm, MSIS
Applications Analyst
School of Social Work, UNC-Chapel Hill
301 Pittsboro Street, CB 3550
Chapel Hill, NC 27599-3550
[EMAIL PROTECTED]


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

[css-d] Boxproblem

[Daniel Liljeberg]

Hi

 

I have a box with rounded corners created with divs and background graphics
of the corners, sides and the bottom.

The problem is that it doesn't scale with the content. So I used a
javascript to do that. But that doesn't always work. Often when it goes
wrong it becomes ok if I refresh the page. But this seems like a buggy
solution. Also, Mozilla and IE seems to decide the height a little
differently so I have to check for wich browser it is etc. Would be nice to
get away from this Javascript way.Is there a CSS way to get it to the right
size?

The php can be mostly ignored. The  part is the  part that print the
actual message.

Also, if the message height becomes less than the newsimage used it would be
nice to have the entire thing conform to the size of the image instead.

 

Here is the code: 

 

 

 



 

  

  







  

  

  

  

 CET

  

  Written by   is_admin)

{

echo(' | Edit post | Delete Post');

}?>Read more - Comments:
()





  

  

  

  







  

  

  

 





// Make the three div columns the same height (these values
apply to MOZ)

document.getElementById("nbleft").style.height
= document.getElementById("nbmiddle").offsetHeight - 19;

document.getElementById("nbright").style.height   =
document.getElementById("nbmiddle").offsetHeight - 19;

document.getElementById("nbcontainer").style.height
= document.getElementById("nbmiddle").offsetHeight;



 

Thanx for your time

 

 

Best regards

Daniel Liljeberg

 

 

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

Re: [css-d] image replacement problem in Mac IE

[Ian Anderson]

Zoe M. Gillenwater wrote:

> I'm not a MacIE expert (still haven't gotten that MacMini to play
> around with, alas) but I know that there are other image replacement
> methods that are more accessible than FIR and that work better with
> MacIE.  This is the best one for across the board compatibility: 
> http://www.ryznardesign.com/web_coding/image_replacement/

That is a great summary. Just a quick note on accessibility and image 
replacement, since that you mention the issue.

When people have considered accessibility in relation to IR techniques, 
they have generally only considered screen reader access; this is 
insufficient. Just because a method is not harmful for screen reader 
users is not the same as it being accessible.

I believe it's important to be aware that *ALL* image replacement is 
inherently much less accessible than using real text. Users are 
prevented from changing the type size and colour through their normal 
browser controls if image replacement is used, and these problems are 
just as damaging for general accessibility. Making text into images is 
not accessible web design, whether the images is applied through CSS or not.

There are also problems with some methods, where the focus rectangle is 
hidden when users tab through links that have IR on them, making it very 
difficult for keyboard-only users to tell what they are on.

Apologies for the OT. Historically, the wider accessibility implications 
have not been discussed sufficiently in regard to IR; I am aware this is 
not the forum for such a discussion now, but I just thought that a few 
people might be interested in the ramifications.

Cheers

Ian

-- 
_
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net

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

Re: [css-d] Browser Incompatibility

[David Dorward]

On 04/01/06, Dan Jallits <[EMAIL PROTECTED]> wrote:
> NOTE: Firefox has a IE Tab extension where you can open your site up
> in Firefox but see how it will render in Internet Explorer. I have yet
> to see a browser extension for IE Mac replication on the PC though
> through Firefox. Whoever figures that out would be the Web Standards
> Man/Woman of the Year.

IE/Win32 is available as an ActiveX control, so it isn't too difficult
to embed it in
other applications for Windows (such as Firefox/Win32). IE/Mac is compiled for
Mac OS on PPC hardware. Getting it running on Windows at all would be
difficult[1],
let alone doing so in a way that its rendering engine can be embedded
in another
application.

A Konqueror (with its relatively close relationship to Safari)
version, on the other hand,
wouldn't be out of the question. The source code for all its
dependancies is available, and
some are available for Windows already.

[1] Understatement of the year so far
--
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS newbie books

[D Ross]

On Jan 5, 2006, at 8:31 AM, ghvyghvy wrote:

> I joined this group and I daily receive messages. I am a newbie to  
> CSS.
> I would like to learn CSS. Please give me a set of books with  
> authors so
> that I can learn from start in a step by step way. I know HTML  
> (almost).
> I need to learn CSS now. Please advice.


Dan Cederholm's books are really good and teach you how to do stuff  
the right way:
http://www.simplebits.com/publications/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS newbie books

[Christian Heilmann]

> I joined this group and I daily receive messages. I am a newbie to CSS.
> I would like to learn CSS. Please give me a set of books with authors so
> that I can learn from start in a step by step way. I know HTML (almost).
> I need to learn CSS now. Please advice.

I keep giving out the Dan Cederholm books to new guys here: Web
Standards Solutions and Bulletproof CSS. Both are great step by step
introductions to all the tweaks and hooks.

I added them to the WIKI some time ago, too:
http://css-discuss.incutio.com/?page=GoodBooks


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Site Check and Image Layout Help

[Aaron Roberson]

*Site Check:*
Please check out the following site I just completed yesterday! If you find
any quirks, please let me know what page you found it on and what
browser,version and resolution you are using to access the site :)

Pet Heaven:
www.petheaven.info

*Image Layout Problem:*
I usually use align and hspace to have my text flow around my images. The
problem with doing this, besides that I am using some valid xhtml attibutes
to acheive the presentation I am looking for, is that everything flows to
the side of the picture - even the text that I desire to be under the
picture. You can see this on the resources page (
www.petheaven.info/resources/index.php).

I tried to wrap the image and the paragraph I want to flow around the image
in a div tag because divs are block level elements. Of coarse, that didn't
work because img align ignores block level images. I also tried placing a
 tag between each section but that is not working either.

I thought about wrapping the image in a div and giving it a float:left or
float:right style and then just clearing the float with a clear:left or
clear:right, but I usually get into trouble when I begin to use the float
selector and I am not sure this would be the best method eighter.

Finally, I am wondering if this wouldn't be considered data that is suitable
for tables anyways...? Even if so, the image on the home page is not and I
would still need a "fix" for that.

Thank you if you can give me some pointers and get me going in the right
direction!

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

[css-d] the perfect layout

[shlomi asaf]

http://www.dogma.co.il/shlomi/htmlTest/stracture_everything.html
http://www.dogma.co.il/shlomi/htmlTest/layout_stracture.gif
*hi :)*
i need to build this page as structured at the Giff and been started working
on at the html page i attached.

i need to make a 3 columns page
i have a Left column, a Right column, and a middle content area.
at the bottom there's a Footer.

this footer should be placed at the middle. and inherit the middle content
width. (as shown at the GIF example i made)

i mannaged to make a float layout, that if u take the left or right layout
(by display:none), the middle automatic takes his place.

*i have to problems unsolved here:*
*1.* how can i solve my fotter issue? he is in absolute position,
bottom:0. how can i make him sit at the middle AND at the bottom of the
page, say like bottom of the middle column, and the middle colum widths,
like at my picture.
*2.*  if i dont give my DIV#main a fixed height, i wont have a scope for the
#left #right Children to adjust to.
and if my content height is over the height i declared in my style, the
content wont influence the div height. couse its fixed.

ill appriciate any help
Shlomi Asaf
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Header, 2 cols, fixed footer

[Julian Voelcker]

Hi Martin,

> In that version the footer won't stay visible if the content gets too 
> large. It is different from what a frameset does.

Thanks for that.

Ideally I would love to go for http://tinyurl.com/8ybye but don't have 
the time to test it properly with the other elements of the site.

> No, but I attached one of our demos

Thanks, I'll have a play with it later.

Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

[css-d] css & fonts

[jeremy]

Hey -- a while ago I found (and I thought I Furled) some site that showed like
paragraphs of type in different web-safe fonts -- you could change the size,
font, spacing, line-height, everything. There were three columns so you
could compare...

Does this ring a bell? anyone? I can't find it now...

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

[css-d] Loading slices

[Miki Kersgard]

Original Message:
Date: Thu, 5 Jan 2006 12:41:09 -
From: <[EMAIL PROTECTED]>
Subject: [css-d] preloading and background slices
To: 
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain;   charset="iso-8859-1"

http://www.nssdesign.scot.nhs.uk/about_us/whoweare.php
The slices on this page load at different times. Is there a way to delay the 
page loading until the all CSS background images are loaded. Or make them all 
apear at the same time?


Not sure if this is what you want but, if you go back to the photoshop files 
(pre-slice) and save the jpegs as progressive they will all load at the same 
time but be blurred at first and then become progressively clearer.
Miki


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

Re: [css-d] CSS newbie books

[Jim Nannery]

Good Morning


>I joined this group and I daily receive messages. I am a newbie to CSS.
> I would like to learn CSS. Please give me a set of books with authors so
> that I can learn from start in a step by step way. I know HTML (almost).
> I need to learn CSS now. Please advice.

Welcome to the list.  You'll find a great deal of information about CSS and 
it's practical uses in the CSS-D Wiki [1].  Especially check the section on 
"Learning" .  There is a section on Books there.

A google on css + books [2] returns a large number of resources.  In 
addition to Dan Cederholm's books, you should also consider any of the books 
by Eric Meyer.  Especially "Cascading Style Sheets, the definitive guide" 
(second edition).

Best regards

Jim Nannery
www.redfernenterprises.com


[1]  http://css-discuss.incutio.com/
[2] 
http://www.google.com/search?q=css+%2B+books&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official
 


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

Re: [css-d] Site Check and Image Layout Help

[Martin Heiden]

Aaron,

on Thursday, January 5, 2006 at 16:08 Aaron Roberson wrote:

> I tried to wrap the image and the paragraph I want to flow around the image
> in a div tag because divs are block level elements. Of coarse, that didn't
> work because img align ignores block level images. I also tried placing a
>  tag between each section but that is not working either.

hr { clear: both; }

regards

  Martin

 



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

Re: [css-d] CSS help for WordPress theme?

[Charles Wiltgen]

> at that site in particular I can get IE to behave by changing .primary to:

Excellent, I'll try this today!

> *however*  if I were doing a two column layout, I wouldn't do it that
> way...  and therefore can't say what other browser bugs will be
> introduced by my fixes for IE (on PC BTW)

Any pointers on the right way to do this, or to links that cover
best-practices for 2- and 3-column layouts, would be /very/ much
appreciated.

I just started Zeldman's Designing with Web Standards, but I'd love to be
able to help solve this before the style is released!

-- Charles


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tony Crockford
Sent: Thursday, January 05, 2006 12:48 AM
To: Charles Wiltgen
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS help for WordPress theme?

Charles Wiltgen wrote:

> I'm using the current beta release at .

at that site in particular I can get IE to behave by changing .primary to:

.primary {
width: 500px;
_width: 500px; /* IE Hack */
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
display: inline;
}


display:inline to cure the doubled margin bug (IIRC) and added 10px of 
right margin.


*however*  if I were doing a two column layout, I wouldn't do it that 
way...  and therefore can't say what other browser bugs will be 
introduced by my fixes for IE (on PC BTW)

;o)


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

Re: [css-d] the perfect layout

[Martin Heiden]

shlomi,

on Thursday, January 5, 2006 at 16:10 shlomi asaf wrote:

> i need to make a 3 columns page
> i have a Left column, a Right column, and a middle content area.
> at the bottom there's a Footer.

> this footer should be placed at the middle. and inherit the middle content
> width. (as shown at the GIF example i made)

Choose one of the layouts from the wiki, of which you think that it is
the best for your needs. Probably a layout based on negative margins
will be the best.

Try to get the 2cols, 1col and 3cols layout working.

Add an id to the body tag to distinguish between the different layouts
css. Combine the css and mark the differences by the body id:

body#3col #wrapper #middle {...}
body#rightcol #wrapper #middle { something different }

> *1.* how can i solve my fotter issue? he is in absolute position,
> bottom:0. how can i make him sit at the middle AND at the bottom of the
> page, say like bottom of the middle column, and the middle colum widths,
> like at my picture.

With a negative margins based layout it will be quite simple, you can
use your method...

regards

  Martin

 



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

Re: [css-d] css & fonts

[jm]

http://typetester.maratz.com/

Quoting jeremy <[EMAIL PROTECTED]>:

> Hey -- a while ago I found (and I thought I Furled) some site that showed
> like
> paragraphs of type in different web-safe fonts -- you could change the size,
> font, spacing, line-height, everything. There were three columns so you
> could compare...
> 
> Does this ring a bell? anyone? I can't find it now...
> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 


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

Re: [css-d] css & fonts

[Tony Crockford]

jeremy wrote:
> Hey -- a while ago I found (and I thought I Furled) some site that showed like
> paragraphs of type in different web-safe fonts -- you could change the size,
> font, spacing, line-height, everything. There were three columns so you
> could compare...
> 
> Does this ring a bell? anyone? I can't find it now...

I suspect it's this:
http://typetester.maratz.com/
Typetester – Compare fonts for the screen

hth


-- 
Join me: http://wiki.workalone.co.uk/
Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F
Engage me: http://www.boldfish.co.uk/portfolio/

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

[css-d] floats falling apart

[Tanya Renne]

I've been having trouble with a three col layout - I suspect a padding 
issue but the behavior is so inconsistent - sometimes the 3rd col drops 
sometimes both the 2nd and 3rd drop - sometimes - perhaps mostly - it 
holds together. Sometimes refreshing the screen rights the situation - 
sometimes the 3rd col starts dropped and then pops up to join the level 
of the other cols.

the site is http://www.orchidsuites.net
the browsercam review is here:
http://www.browsercam.com/public.aspx?proj_id=215065

I've tweaked all the padding and margins I can think of but still get 
these abysmal results.

Any help would be appreciated.

-- Tanya
--
Tanya Renne, CEO, ORCHID SUITES, Inc.
Online tools to engage your constituency, build capacity, and fundraise.
http://www.orchidsuites.net  ~  [EMAIL PROTECTED]
Washington, DC  ~ (877) 255-4300

   

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

[css-d] Safari and off-left

[Christian Heilmann]

I am getting really annoyed with Safari now, it seems that off-left to
hide and show elements does not work properly for it.

I just upgraded puredom explorer to a more modern version:

http://onlinetools.org/tools/dom-tree-menu-puredom/

It works wonderful on MSIE6/FireFox/Opera on PC but Safari on Mac will
just not expand the sections any longer. I show and hide the nested
lists by applying two classes:

/* The class to hide nested ULs */
.hide{
position:absolute;
top:0;
left:-4000px;
width:1px;
}
/* The class to show nested ULs */
.show{
position:static;
top:0;
left:0;
width:auto;
}

However, it seems not to work in Safari

Does anybody know why? You can also download the zip and play around
locally. Any fix will be mentioned on the site of course.

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] preloading and background slices

[Paul Novitski]

At 04:41 AM 1/5/2006, [EMAIL PROTECTED] wrote:
>http://www.nssdesign.scot.nhs.uk/about_us/whoweare.php
>The slices on this page load at different times. Is there a way to 
>delay the page loading until the all CSS background images are 
>loaded. Or make them all apear at the same time?


Ross,

If you want the images to appear all at once, why slice them apart in 
the first place?

(I'm guessing that the answer is that you want the slices to appear 
at non-contiguous locations on the page.)

Consider that one large image is generally smaller than the 
cumulative size of the slices that make it up, because every image 
file carries an overhead.  An exception to this might occur if two 
images are very different in character -- say, a black-to-white 
gradient and a full-color photo.

If you load all the slices (or any set of images, really) into the 
same image file, they will obviously all load together.  For example, 
you can concatenate your photos of doctor and patient in the same 
image file, then display each segment of that master image in a 
different location on the screen by setting the size and background 
image position for their respective elements.

Take a look at "CSS Sprites: Image Slicing's Kiss of Death" by Dave Shea
http://alistapart.com/articles/sprites/

Here's an example of my own, in which each item in a menu is swapped 
on hover with a different segment of one background image:

Example 7 from "CSS Swag: Multi-Column Lists" by Paul Novitski
http://alistapart.com/d/multicolumnlists/example7.html

While neither of these probably illustrates what you're trying to do 
precisely, the underlying technique should accomplish your goal.

Regards,
Paul 

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

Re: [css-d] preloading and background slices

[Michael Hulse]

On Jan 5, 2006, at 4:41 AM, <[EMAIL PROTECTED]> wrote:
> The slices on this page load at different times. Is there a way to 
> delay the page loading until the all CSS background images are loaded. 
> Or make them all apear at the same time? I tried the basic preloading 
> (javascript) techniques but nothing really works.

You could try Javascript preloading (or, probably better, preload with 
CSS[1]) techniques on some sort of splash/intro page.

On Jan 5, 2006, at 7:55 AM, Miki Kersgard wrote:
> Not sure if this is what you want but, if you go back to the photoshop 
> files (pre-slice) and save the jpegs as progressive they will all load 
> at the same time but be blurred at first and then become progressively 
> clearer.

I did not think CSS background images could be progressive?

[1] Do google search for "preloading images with css".

Good luck,
Cheers,
Micky
-- 
BCC for Privacy: http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html
My del.icio.us: http://del.icio.us/mhulse

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

Re: [css-d] css & fonts

[Ian Anderson]

[EMAIL PROTECTED] wrote:
> http://typetester.maratz.com/

That could be the coolest thing I have seen this year. (*ahem*)

But why does 1em Verdana look so small? Surely it's totally misleading? 
Looks like it's based on setting the default size really small in the 
first place - somewhere not in the UI.

Gotta love this guy's sense of humour though; in the comment at the top 
of the CSS file for that tool it reads:

/*===
  Typetester 
  v.0.93b, version date: 27 Sep 2005.
  Copyright (c) Marko Dugonjić  2005.

  This is beta. The code is occasionally ridiculous.
  Please, report troubles at 
*/

Cheers

Ian

-- 
_
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net

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

Re: [css-d] Safari and off-left

[Ingo Chao]

Christian Heilmann wrote:
> I am getting really annoyed with Safari now, it seems that off-left to
> hide and show elements does not work properly for it.
> 
> I just upgraded puredom explorer to a more modern version:
> 
> http://onlinetools.org/tools/dom-tree-menu-puredom/
> 
> It works wonderful on MSIE6/FireFox/Opera on PC but Safari on Mac will
> just not expand the sections any longer. I show and hide the nested
> lists by applying two classes:
> 
> /* The class to hide nested ULs */
>   .hide{
>   position:absolute;
>   top:0;
>   left:-4000px;
>   width:1px;
>   }
> /* The class to show nested ULs */
>   .show{
>   position:static;
>   top:0;
>   left:0;
>   width:auto;
>   }
> 
> However, it seems not to work in Safari
> 
Hmm, I don't know what's wrong. By giving a background color for both 
the hidden and show states, and with a shorter left of -400px, the show 
state does not move a bit.

I've played with it and ended with this one, without much understanding, 
but Safari works now (with the zipped files), I think.

.hide{
position:absolute;
top:0;
left:-4000px;
/*  left:-400px; */
/*  background: yellow; */
}


.show{
position:static;
display: table;
top:0;
left:1em;
/*  background: red;*/
}


regards,

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

Re: [css-d] css & fonts

[Duckworth, Nigel]

Ian said: 
> But why does 1em Verdana look so small? 

The 1em is relative to 10px. 

-Nigel



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

Re: [css-d] preloading and background slices

[francky]

[EMAIL PROTECTED] wrote:

>http://www.nssdesign.scot.nhs.uk/about_us/whoweare.php
>I tried the basic preloading (javascript) techniques but nothing really works.
>  
>
Some remarks in addition to the other reply's.
As a basic explanation, if needed, for the positioning of 
background-images in css, I've the short article "The Porthole Theory 
".

Looking at the page, I think before trying new stuff, some basic things 
have to be improved.
The html-validator 

 
gives back that the page is not valid at some essential points. For 
instance, probably due to the including of php-parts (which we can't see 
from the outside), there are two -tags before the start of the 
. Means the parts in between cannot (or not good) be reached.
And that is among others just the javascript for preloading!
See also the Watchfire WebXACT analysis  
for this page (tab "Quality" > Content Defects > broken links): 3 
js-files not found, 3 whoweare-images not found.
Guess that when the browser is trying to get the not-found files, the 
download of the page will be slower instead of faster.

Hoping this will contribute to a solution,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera 8.5 z-index (?) question

[Roger Roelofs]

Gary,

On Jan 5, 2006, at 8:55 AM, Gary Wilhelm wrote:

> If you go to http://www.ncswlearn.org/  in Opera 8.5, you'll see
> that there's some header text in the left navigation bar that's cut off
> at the top.

I just looked in Opera 9pre and it looks just like firefox 1.5.  Given 
the speed with which Opera users upgrade, I'm betting this problem will 
go away if you ignore it for a while :-)

hth

Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari and off-left

[Christian Heilmann]

> Hmm, I don't know what's wrong. By giving a background color for both
> the hidden and show states, and with a shorter left of -400px, the show
> state does not move a bit.
> I've played with it and ended with this one, without much understanding,
> but Safari works now (with the zipped files), I think.
> .hide{
> position:absolute;
> top:0;
> left:-4000px;
> /*  left:-400px; */
> /*  background: yellow; */
> }
>
>
> .show{
> position:static;
> display: table;
> top:0;
> left:1em;
> /*  background: red;*/
> }
> regards,
> Ingo

var ingo=getListMembersByName("Chao")[0];
ingo.setAttribute('theman',true);

Thanks heaps!
Chris

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] preloading and background slices

[francky]

And a bit off topic, but also css: in Firefox on Win98SE the menu is not 
quite o.k. (as a miracle: good in IE; also fine in Opera).

(1) Going down in the submenu of "Our divisions": the submenu disappears 
when you try to go below the 3rd item. I'm not sure, but can that have 
something to do with the z-index of the .submenuul and .submenuli a 
(first z-index:100; later z-index:10)?

(2) Hovering around the "contact"-item, there is a flickering shift of 
the page. I think it is the upcoming and disappearing scrollbar at the 
right side. To got rid of it (always a scrollbar in FF), you can add 
"html { height: 101%; }" to the css.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] floats falling apart

[Roger Roelofs]

Tonya,

On Jan 5, 2006, at 12:14 PM, Tanya Renne wrote:

> I've been having trouble with a three col layout - I suspect a padding
> issue but the behavior is so inconsistent -
> the site is http://www.orchidsuites.net

the problem is that when I increase the size of my text, 'Client 
Showcase' wraps onto a new line which is forcing the floated first 
column over by that amount.  The other issue that you end up with white 
text on a white background, kind of hard to see :-)  You may be able to 
fix your immediate problem by adding 'clear: left;' to the first col.  
A better option might be to wrap the 3 columns in a containing div and 
put the clear: left; there.  That way all the columns will stay 
together.  You might want to add the gradient background image to the 
top level li elements so if they wrap the user can still see them.  It 
is a little ugly, but at least it works.

You are also putting ie/win into 'quirks' mode with the comment above 
the doctype.  If this isn't 'on purpose' you might want to remove it.

hth
Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Boxproblem

[Roger Roelofs]

Daniel,

On Jan 5, 2006, at 9:03 AM, Daniel Liljeberg wrote:

> I have a box with rounded corners created with divs and background 
> graphics
> of the corners, sides and the bottom.
>
> The problem is that it doesn't scale with the content.

Is there any chance of getting a url for this page?  It is much easier 
to diagnose in the browser.

Rounded corners are one of the current 'hot' looks, and there are many 
tutorials for doing this in css or in javascript.  I have yet to 
succumb, so I don't have a favorite technique.  There is a whole wiki 
page devoted to this topic 


hth
Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Css div - strange behavor in FF terrible in Opera. IE looks ok.

[Roger Roelofs]

Pietr,

On Jan 5, 2006, at 8:01 AM, Piotr wrote:

> Under this link: http://www.kredytomat.pl/hbl/ is a test verison of 
> this
> page. In IE it looks ok. In FF left and right side doesn't fit perfect
> in height. In Opera the page is totally messed up. Is there a way to
> make it work with every browser?

It looks very similar in Opera 9pre, ff1.5 and safari on my mac.  
ie/mac needs a little tweaking, but that's not unusual.  Can you 
explain in more detail what is wrong?


Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] footer problem-please help!

[videoscott1]

http://videointegrations.com/serenity/procedure_relax_pleasure.html


The Horizontal scroll bar only in IE6 is apparently caused by the footer. I 
can't figure out how to get rid of it without causing the problems I resolved 
in using the css for this particular footer. Compared to anything in the wiki, 
I think this footer is best, with exception to this problem. I'd love for 
someone to give me a better footer but seeing all the others comments I don't 
believe there's better then this. PROVE ME WRONG PLEASE!
http://videointegrations.com/serenity/layout.css
Look at the bottom for #footer

--
Thanks,
scott




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

Re: [css-d] background div

[Roger Roelofs]

Adrie,

On Jan 5, 2006, at 6:48 AM, In Tel webdesign wrote:

> I give the container-div a repeating background and make its height 
> 100%
> I want it to fill the complete height with the image, but it doesnt.
> http://hraudiovisuals.nl/index_test.htm

The height: 100%; only works if the parent has a defined height.  In 
your case you could add

html, body {
height: 100%;
}

The problem with this is that the html and body elements are now only 
as tall as the window.  If your content overflows, the lines won't 
extend below the bottom edge of the window.

If I were coding this layout I'd be tempted to move the repeating 
background to #container and remove almost all of the absolute 
positioning.  The absolute positioned items are removed from the 
document 'flow' and their containers shrink to 0 because they have no 
content left.  You can use margins to get the content to center like 
you want.  The only thing that has to be absolutely positioned is the 
'camerman'.  Also, you can use a transparent png or (really old school) 
a checkerboard transparent gif to fake the translucency you seek rather 
than the opacity rule.  That rule affects the text as well as the 
background color which causes you to need extra containers.

hth
Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vanishing borders (IE Win)

[Richard Grevers]

Can anyone fogure why IE on windows (both 6 and 5.5) is failing to
display the coloured bottom borders of the main navigation at
http://www.freeparking.co.nz/, while they show fine on MacIE, Mozilla,
Opera and Safari.

Styles are spread over http://www.freeparking.co.nz/css/common.css and
http://www.freeparking.co.nz/css/index.css
The nav is an absolutely positioned UL with display:inline

--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE positioning problem with menu

[shawn herrin]

Thank you so much for the reply.  Unfortunately, i'm not sure I understand
what you are suggesting.  If it's not too much trouble, could you elaborate
a bit?

Thanks again,
Shawn

On 1/5/06, Ingo Chao <[EMAIL PROTECTED]> wrote:
>
> shawn herrin wrote:
> > Hi there,
> >
> > I have been working on mixing son of suckerfish dropdowns with
> > explodingboy.com's css menus.
> >
> > I'm having a problem with IE positioning.
> >
> > Working version - http://viewwerx.com/dev/menu/menus.html
> >
> > Broken version -   http://viewwerx.com/dev/menu/menusiebug.html
> >
>
> The current li:hover sets left:auto for the a.p. ul.SecondlevelMenu, but
> IE needs an actual position like left:0, therefore, the li should
> establish a containing block for this a.p. ul via position:relative.
>
> Ingo
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Boxproblem

[Roger Roelofs]

Daniel,

On Jan 5, 2006, at 10:05 PM, Daniel Liljeberg wrote:

> Heres a small testpage using my solution.
> Any ideas would be gladly taken.
>
> http://damien.x.i8t.com/box/boxtest.html
>
> Best regards
> Daniel Liljeberg
>
>> -Original Message-
>> From: [EMAIL PROTECTED] 
>> [mailto:[EMAIL PROTECTED]
>> discuss.org] On Behalf Of Roger Roelofs
>> Sent: den 6 januari 2006 03:08
>> To: 'CSS list'
>> Cc: Daniel Liljeberg
>> Subject: Re: [css-d] Boxproblem
>>
>> Daniel,
>>
>> On Jan 5, 2006, at 9:03 AM, Daniel Liljeberg wrote:
>>
>>> I have a box with rounded corners created with divs and background
>>> graphics
>>> of the corners, sides and the bottom.
>>>
>>> The problem is that it doesn't scale with the content.
>>
>> 

Please check out the wiki page referenced above.  The 'Sliding Doors' 
links will do exactly what you want in a very simple manner, no 
javascript required.  This one 
 (the first link under 
'Sliding Doors' on the wiki page) does a good job of showing how to 
apply the technique.   Your box has a fixed with, so you only need two 
or three images.  Read the various tutorials and pick the one that 
makes sense to you.  In your case, I think the markup could be 
something like

--  html -

2005 01 16, 16:00 CET
This is a news!
The divs of this box gets resized at the end by javascripts. But it 
doesn't always work and I'm on the hunt for a pure CSS way to fix 
this.
Read more - 
Comments: (0)
Written by DAMiEN

--  css 
.news-item {
background: url(bottom.gif) bottom left no-repeat;
padding-bottom: 1em; /* some amount to keep the text fron touching the 
edge */
}

.news-item h3 {
background: url(top.gif) top left no-repeat;
padding-top: 1em  /* same reason a above */
}
/* this one is optional depending on how you make your images  */
.news-item p {
background: url(middle.gif) top left repeat-y;
}
.news-item p.posted-date, .news-item p.comments {
float: right;
background-image: none;
}
.news-item p.authorship {
background-image: none;
}


hth

Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Layout Consultation/Analysis

[Thomas Hall]

Group, 

I have been asked to recode an existing site for seo purposes -
http://www.bestlubrication.com    As you
can see in the code it is not properly structured using a plethora of tables
and inline styling. After poking around the site a bit you can see it is a
pretty elaborate site but the layout seems consistent from page to page.
That being said I am curious to know what type of  layout you see from
looking at it. I see a header section across the top, a nav section on the
left, and a main content section. This would be a 2-column layout with a
header and a footer no? 

 

Thanks.

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

Re: [css-d] Vanishing borders (IE Win)

[Mark Henderson]

hi Richard

I'm on digest so my apologies if this has already been answered. Add 
line-height: 25px (or similar, but you are using pixels for font-sizing 
so this was consistent) to #main_nav and things appear to rectify 
themselves (from memory IE has a habit on certain absolutely positioned 
elements of failing to expand based on the elements within).

Caveat - it appears you aren't designing for IE 5.0 so I didn't try to 
fix the issues in this browser,.but a good start would be adding height: 
0 to #main_nav li in order for it to support margins on inline elements.

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