Re: [css-d] Sticky Menus

[Christian Heilmann]

> > Hmm, I beg to differ.  There is a nice way to handle this, using just CSS:
> >
> > http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
>
> That's exactly the same as what I was saying. The identification of
> the current page is in the markup. It has to be scripted server-side
> or done by hand.
>
> Don't go stopping my heart with wild ideas like current-page-detection
> in CSS. You had me thinking my current world view was about to be
> turned upside down.

Again - and please refer to the class vs. ID thread some days ago:

http://archivist.incutio.com/viewlist/css-discuss/67500
http://archivist.incutio.com/viewlist/css-discuss/67513

This is a sexy idea and very much fun and all, but only using classes
and CSS to highlight the current page is NOT accessible. Users without
CSS need to know aswell what is the current page, which is why:

- The current page should not be linked at all - I replace the current
link with a strong
- The parent page of the current page should have an extra HTML
indicator that it is a parent page (adding a strong inside the link
makes sense).

Then you can also do the CSS highlighting, via

li strong {}
li a strong {}
li li strong {}

However, all of that has to happen server side. If you can use PHP and
domxml, take a look at http://onlinetools.org/tools/easynav/ which
does that for you.

As to answering the question: No, neither CSS nor JavaScript can keep
a state of a navigation without markup changes (in JavaScript you
could use a cookie to store the state or send it via the URL but that
is also not accessible as it does rely on either of them).

CSS is great to stye structured content, and is neither a JavaScript
nor a SSI replacement: http://www.wait-till-i.com/index.php?p=136

HTH
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] Sticky Menus

[Christian Montoya]

On 12/15/05, matt andrews <[EMAIL PROTECTED]> wrote:
> On 16/12/05, Christian Montoya <[EMAIL PROTECTED]> wrote:
> > On 12/15/05, MocaLoca <[EMAIL PROTECTED]> wrote:
> > > I am fresh trying to start creating clean standard sites and I always have
> > > trouble with sticky menus. I mean the down state that sticks on the next
> > > page clicked.
> >
> > If you mean menus that have the link to the current page styled
> > differently, that has to be done server side. You can style the
> > appearance with CSS, but server side techniques to differentiate the
> > "current" link from the others is not on topic for this list.
>
> Hmm, I beg to differ.  There is a nice way to handle this, using just CSS:
>
> http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

That's exactly the same as what I was saying. The identification of
the current page is in the markup. It has to be scripted server-side
or done by hand.

Don't go stopping my heart with wild ideas like current-page-detection
in CSS. You had me thinking my current world view was about to be
turned upside down.

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

[css-d] overflow bug

[jamie cantrell]

I've been Playing around with the overflow property trying to scroll  
my div content over a non-scrolling background image.  Have it  
working in Netscape,Opera 8, Firefox 1.5, and safari, but in IE the  
content scrolls fine but image does as well.  When I set background  
position to fixed it breaks it in Opera and Netscape.  Any Ideas?
Jamie Cantrell
Creative Director
Square 1 Creative
ph: 703.738.9656
[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] content over flow

[Dustin Krysak]

Hi there - more of a "tinker" type person with css, and had the  
following code:

* {
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
}
div#bg {
border: medium solid #FF;
height: 100%;
width: 650px;
}
div#bgBody {
height: 100%;
width: 645px;
border: medium solid #FF;
}

Now the HTML is nothing but:


   
 
//simple for-loop to write out some text 20 times!

for(i=0; i<=20; i++)
{
document.write('
Here is some layer content!
');
}

   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] Compuserve 7.0

[Richard Grevers]

On 12/13/05, Ingo Chao <[EMAIL PROTECTED]> wrote:
> Josine Krant wrote:
> > If Compuserve 7.0 is not IE6, what is it ?
>
>
> Google says it's a gecko engine. According to [1], the user agent string
> of Compuserve 7 is
>
> Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS
> 2000 7.0/7.0.
That would explain it - there were some pre 1.0 builds of Gecko
(including the one that Netscape 6.0 used) in which floated 
elements caused form elements to vanish (actually, to position way
offscreen).

--
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] Sticky Menus

[matt andrews]

On 16/12/05, Christian Montoya <[EMAIL PROTECTED]> wrote:
> On 12/15/05, MocaLoca <[EMAIL PROTECTED]> wrote:
> > I am fresh trying to start creating clean standard sites and I always have
> > trouble with sticky menus. I mean the down state that sticks on the next
> > page clicked.
>
> If you mean menus that have the link to the current page styled
> differently, that has to be done server side. You can style the
> appearance with CSS, but server side techniques to differentiate the
> "current" link from the others is not on topic for this list.

Hmm, I beg to differ.  There is a nice way to handle this, using just CSS:

http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_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] Sticky Menus

[MocaLoca]

Hi,

Yes I realize is not the topic, I thought there was a css only way of doing
with maybe some JavaScript that I was not aware of. I did get some great
offline help about it.

Thanks anyway :)

MocaLoca
Digital Media Artist
---
www.mocaloca.com
305.926.7775

-Original Message-
From: Christian Montoya [mailto:[EMAIL PROTECTED] 
Sent: Friday, December 16, 2005 2:31 PM
To: MocaLoca
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Sticky Menus

On 12/15/05, MocaLoca <[EMAIL PROTECTED]> wrote:
> I am fresh trying to start creating clean standard sites and I always have
> trouble with sticky menus. I mean the down state that sticks on the next
> page clicked.

If you mean menus that have the link to the current page styled
differently, that has to be done server side. You can style the
appearance with CSS, but server side techniques to differentiate the
"current" link from the others is not on topic for this list.

--
--
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] Sticky Menus

[Christian Montoya]

On 12/15/05, MocaLoca <[EMAIL PROTECTED]> wrote:
> I am fresh trying to start creating clean standard sites and I always have
> trouble with sticky menus. I mean the down state that sticks on the next
> page clicked.

If you mean menus that have the link to the current page styled
differently, that has to be done server side. You can style the
appearance with CSS, but server side techniques to differentiate the
"current" link from the others is not on topic for this list.

--
--
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] Sticky Menus

[David Laakso]

MocaLoca wrote:

>This is my first post here, please forgive my ignorance :-)
>I am fresh trying to start creating clean standard sites and I always have
>trouble with sticky menus. I mean the down state that sticks on the next
>page clicked.  
>What is the best practice? What is your preference? Any resource or code to
>share?
>Moca
>  
>
I am afraid that I do not know what you mean by 'sticky' menus, unless 
it has something to do with JavaScript. And I know even less about that 
than CSS.
A great resource for CSS lists is . Be 
sure to check the accompanying browser support charts when you pick a menu.
Regards,
~dL
__
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] div heights issues

[David Laakso]

Tanya Renne wrote:

>Can anyone pin point the issue that is causing the third column on this 
>page to be slightly shorter than the first?
>http://www.orchidsuites.net/homefree/
>-Tanya- 
>
One method you may want to consider is using background images to create 
faux columns. This and other methods are explained on the wiki: 
.
There are a couple of other things you may want to consider as well. It 
would help to bring your content text up to default as it is sure to be 
unreadable for some folks at 1280, 1400, and up. As it stands, the 
content text is breaking out the bottom of its container when zoomed 
. And it is going a bit goofy in IE 
at text-size 'largest' because you have the font-size on the body set to 
em's. Setting it to 100.01% or 'medium' on the body will avoid this ie 
bug. Re-setting the page width to 770 will avoid the scroll bar you are 
getting at 800. And deleting all the white space and extraordinarily 
long notes in the css will speed page loading. Validating the markup 
would be a good idea.
Best,
~dL

__
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] can this behavior be beaten out of IE

[Rob Agar]

hi Lori

> Is there any way to get IE6 to honor the css attribute 
> 'min-width', or a 
> way to script, hack or cheat some version of it?

As it happens, I was reading* about a way of doing this yesterday.  The
trick was to use a javascript expression in the css, which IE apparently
supports.

e.g

#container {
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

I've not tried it in anger, so YMMV.

Rob

*http://www.webcredible.co.uk/user-friendly-resources/css/more-css-trick
s.shtml, tip #3

__
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] can this behavior be beaten out of IE

[Lori K. Brown]

Dear Listers:

Is there any way to get IE6 to honor the css attribute 'min-width', or a 
way to script, hack or cheat some version of it?

Context? I'm working on a layout that has three small content blocks 
that should sit next to each other.


|  block 1 single line  |  block 2 single line  | block 3 single line  |


Each block is a single line. I don't want the contents of the blocks to 
wrap. And I don't want the blocks themselves to shift to stack one 
underneath the other when the browser window is narrow. In real 
browsers, I can set a minimum width on the outermost containing div that 
more or less solves all of the above. But what the heck do I do with IE? 
I can solve this problem with a table in minutes, but I haven't been 
able to solve it with floated divs in probably 6 hours of work.

Thanks in advance for your assistance.

Lori Brown

__
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] [REPOST] IE6 - top margin too large

[Gunlaug Sørtun]

Rachael Beale wrote:
> I'm not sure if I didn't get any replies previously because the 
> solution is really obvious to everyone else... but it's certainly not
>  obvious to me, and I am being badgered to hand over this template! 
> I've Googled and searched the Wiki and am no closer to understanding
>  what the problem is. Can anyone help me?
> 
> Page: 

It isn't obvious at all what's going on in there :-)
Had to make several attempts before cracking it.

It is a margin-collapse of sort. It can be seen clearly if borders are
put on those elements, but as you have already found out; that doesn't
solve it, and I didn't find any element to put the fix on either.

Finally I added a clearing-element, and everything fell into place...





Then I added 'padding-top: 1px;' to #centrecontent, and it worked as
expected because of the clearing-element. You can now adjust
'margin-top' on #centrecontent, and get the same result in all browsers.

I'm still not sure if this is the best solution, but at least it's a
stable one.

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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css speed

[Philippe Wittenbergh]

On 16 Dec 2005, at 12:06 am, Adam Kuehn wrote:

>> My second questions is related to that, dose anyone know of any
>> resources on writing more optimised css. For example I was just
>> reading on this list in the talk comparing class to id and there was
>> mention there was performance difference between
>>
>> element.class {}
>> and
>> .class {}
>
> I'm the one who brought up this performance difference, and I was
> careful to qualify that I only knew the facts for one browser (in
> this case, Mozilla).  A general attempt to optimize CSS may not even
> be possible.  Each browser vendor is free to optimize page display in
> any way they can think of.  Because of the specific way that Mozilla
> has optimized selector matching, a class or ID without the element is
> *slightly* faster to match than one that includes the element.  That
> may or may not be true with some other browser (and it might be
> difficult to even discover in anything other than an open-source
> implementation, unless you are willing to do brute-force technical
> testing on thousands of combinations).

Some reading matter


Both by David Hyatt, lead developer of Safari.

Both argue that
element.class and element#id are slightly slower than #id or .class.

This of course does not take into account the various other  
environmental variables, as Adam points out.

 From a practical point of view, I'd argue for #id or .class rather  
than element#id or element.class, because the first notation is less  
specific, and hence more easy to override in case of necessity.

Philippe
---
Philippe Wittenbergh



__
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] table and min-width

[Philippe Wittenbergh]

On 16 Dec 2005, at 8:21 am, Justin Makeig wrote:

> I can't seem to get the min-width property to have any effect on an
> XHTML table element. width does what I would expect it to do, but min
> and max-width seem to do nothing in Firefox 1.5 and Safari 2.0.2. (Of
> course, they do nothing in IE Win, but that's another thread.) My
> problem is that I have some really wide tables with potentially
> dozens of columns. I've got a wrapper div that is specified with
> overflow: auto. If the table is wider than the wrapper div I'd like
> the div to scroll horizontally. This works by setting the table width
> to auto. However, if the table is skinnier than the div I'd like the
> table to fill up the div horizontally so any vertical scroll bars
> will be positioned right next to the table. I would think this would
> be a job for min-width. However, it doesn't seem to have an effect on
> the table.
>
> []
>
> Am I off base? Any help would be much appreciated.

The min-width property doesn't really apply to table elements


Ok, it is a bit more complicated, due to the complexities of the css  
table model.

Have a look at the figure under 17.4:

you'll see a grey dotted line around the table. That is the anonymous  
box that holds the whole table (caption, table-rows, etc) together.  
Your min-width will apply to that anonymous box. But the table-rows  
(and the thead, tbody elements) will expand or shrink in width,  
depending on the content of the table-cell boxes. Unless ?

Unless if you set the width of the table to be 100%. Because 'width'  
as applied to the  element is really a min-width. Picture  
this: you have a div that is 500px wide (width set), and you add a  
table in there with many columns. Give your table a background-colour  
and a width of 100%. If your table-cells contain each one character,  
chances are that the table will fit in the div. But add more content  
to the table-cells, and watch your table expand in width, overflowing  
the container. The same will happen if your table has a width set to  
500px.

Demo:



Philippe
---
Philippe Wittenbergh



__
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] table and min-width

[Justin Makeig]

I can't seem to get the min-width property to have any effect on an  
XHTML table element. width does what I would expect it to do, but min  
and max-width seem to do nothing in Firefox 1.5 and Safari 2.0.2. (Of  
course, they do nothing in IE Win, but that's another thread.) My  
problem is that I have some really wide tables with potentially  
dozens of columns. I've got a wrapper div that is specified with  
overflow: auto. If the table is wider than the wrapper div I'd like  
the div to scroll horizontally. This works by setting the table width  
to auto. However, if the table is skinnier than the div I'd like the  
table to fill up the div horizontally so any vertical scroll bars  
will be positioned right next to the table. I would think this would  
be a job for min-width. However, it doesn't seem to have an effect on  
the table.

.wrapper {
width: 100%; /* fill its container */
min-height: 10em;
overflow: auto;
}
.wrapper table {
min-width: 100%; /* doesn't seem to do anything */
}




...



Am I off base? Any help would be much appreciated.

- Justin Makeig
__
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] div heights issues

[Tanya Renne]

Can anyone pin point the issue that is causing the third column on this 
page to be slightly shorter than the first?

http://www.orchidsuites.net/homefree/

-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] Flexible Width Layout -- Simple Page Problems

[Robin Whitman]

Hello all and thanks in advance.

I'm looking at this page with Firefox browser (for Windows):

http://www.gurdonbrewster.com/209index.html

Already I have two problems:

1. The left side of the page has a white space gap down the left margin: How
can I get the page to fill up the browser, just like the right side fills up
the browser?

2. The page is slightly too large horizontally, and a horizontal scroll bar
is needed to scroll right just a bit. How can I eliminate the need for this
horizonal scroll bar?

Thanks again! ... RW

--
Best wishes,

Robin Whitman, Student Intern
Youthtopia.Org  | Towards A Sustainable Lifestyle
http://www.Youthtopia.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] Right Img Header problem

[videoscott1]

After a long hiatus from web design here I am again depending on this 
great list of people,
and swamped with too many things at once.  I've tried for hours to 
diminishing returns for
sleep, PLEase help! I would really appreciate any help I can get to get 
this design working
in IE doze. It works in Opera, NS, IE, & Safari on Mac, and NS doze, but 
not IE. The url
is videointegrations.com/serenity Looking at it in the trouble free 
browsers should give a
clue as to how it should look. Essentially the background HeaderImg div 
is pushing things
right and down.

-- 

Much Regards,
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] [REPOST] IE6 - top margin too large

[Zoe M. Gillenwater]

Rachael Beale wrote:

>Page: 
>CSS: 
>
>In IE6, the top margin of #centrecontent appears to be measured from
>the bottom of the navigation div, which means there is a large white
>gap between the bottom of the navigation and the "breadcrumbs". In
>Firefox/Opera/Safari, the margin is apparently being measured from the
>top of the #page div.
>
>I thought this might be the "collapsing margins" issue, but applying
>borders and padding to everything I could think of seemed to make no
>difference.
>
>What am I missing here??
>  
>

It seems like a margin collapsing issue to me too.  Unfortunately, I'm 
about to run out the door, so I can't dig into right now.  It seems like 
you should be able to remove the top margin on #centrecontent, give it 
1px of top padding, then give .trail the appropriate amount of top 
margin to push it down from the navigation bar.

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] anchor doesn't receive focus in firefox 1.5

[Manfred Staudinger]

Hi list,

This following can be demonstrated with (currently for _fx_only_) page
http://free.pages.at/staudinger/Regest/Indices/Index.html

The anchor E on the left side
E
will receive focus in firefox 1.0.4+ when anchor E from the top line
E
is clicked - but not in firefox 1.5.

Is the change intentional? Is there anything I can do about?

Regards, Manfred
__
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] Faux Columns

[Zoe M. Gillenwater]

Stephen Kortz wrote:

>I am building Faux Columns. In Fireworks I made a document that is 10 pixels
>tall and 2000 pixels wide to start the process. My question is: how do I
>transfer my Fireworks document to my CSS file that I am working with? This
>idea has me baffled. I'm sure that there is a simple answer that I am just
>overlooking.  
>  
>

1. Export your Fireworks file in whatever file type is appropriate (JPG, 
GIF, or PNG).
2. Assign this graphic as a background in your CSS:
#container { background: #fff url("fauxcolumns.gif") repeat-y;

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] Page not stretching across in Firefox

[Zoe M. Gillenwater]

Shawn Ferguson wrote:

>Could you help me figure out why this is happening?  The page looks fine
>in IE (of course) but when I view it in Firefox, it doesn't stretch
>across the page.  Take a look and if you can help, please do:
>http://www.jardsenterprises.com/isom 
>  
>

Seems to be filling the width of the browser viewport here in FF 1.5 on 
Win.  Did you fix it?  If so, would you mind sharing with the list how 
you did so so that others many benefit?

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] [ADMIN - OFFTOPIC] Re: Flash or No Flash switch?

[Alex Robinson]

OK, that's enough on this never on topic thread. Next person to 
mention flash is toast.

Let's stick to CSS.


A grumpy css-d moderator
__
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] Flash or No Flash switch?

[Jesse Skinner]

Ya, for sure. It might as well be something you can actually use instead 
of wasting bandwidth. I think it would be best to use whichever image is 
largest on the page, one that will be on the page anyway, to give you 
the best estimate. Chances are this would be your flash replacement image.

Jesse Skinner
www.thefutureoftheweb.com

brushstreet-Duke wrote:
> Rather than a purely decorative image, couln't the standard gif to be used
> instead of the Flash, be used and downloaded?  Then if the Flash is
> determined not to be used, the alternate would already be there?
__
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] Clickable image

[Jesse Skinner]

You can set the image to be the background of the a tag. With your code, 
that would look something like this:

#nh{
   display:block;
   position:absolute;
   top:150px;
   left:20px;
   width:191px;
   height:87px;
   overflow:hidden;
   text-indent:-200px;
   background: url(/media/image/nh_logo2005.gif);
}

Cheers,

Jesse Skinner
www.thefutureoftheweb.com

> If you look at the "new heights" logo on the upper left of the layout,it's a
> background image, but I'd like to make it clickable. Problem is, I haven't
> found a way to put that image there without throwing off the rest of the
> layout. Any suggestions?
__
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] Clickable image

[Jim Ryan]

Thanks to everyone who replied. You were most helpful. The page is up and
clickable and the image replacement technique is filed away for future
reference.

thanks again,
Jim

-Original Message-
From: Christian Heilmann [mailto:[EMAIL PROTECTED]
Sent: Thursday, December 15, 2005 10:46 AM
To: Jim Ryan
Cc: CSS Email List
Subject: Re: [css-d] Clickable image


> I've redesigned this formerly-tabled page in all-css--something the tech
> guys at the company's forward-looking CMS tell me they refuse to
support(!!)
> http://www.childrensaidsociety.org/newheights/
>
> If you look at the "new heights" logo on the upper left of the layout,it's
a
> background image, but I'd like to make it clickable. Problem is, I haven't
> found a way to put that image there without throwing off the rest of the
> layout. Any suggestions?
>

If that is to be a link and crucial content - why is it a background image?

I had issues in the past where we needed to use background images in
CSS and a link above them. The solution was to use a real text link,
and position it absolute above the image in the layout. As your logo
is not somewhere in the content but at a fixed position, this is not
much of a problem to do:

New Heights Start Page

#nh{
  position:absolute;
  top:20px;
  left:20px;
  width:100px;
  height:70px;
  overflow:hidden;
  text-indent:-200px;
}

or any other image replacement technique.

It is a hack, but makes both parties happy.

--
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] Flash or No Flash switch?

[brushstreet-Duke]

Hi, duke here
Rather than a purely decorative image, couln't the standard gif to be used
instead of the Flash, be used and downloaded?  Then if the Flash is
determined not to be used, the alternate would already be there?
duke

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Jesse Skinner
Sent: Thursday, December 15, 2005 8:28 AM
To: css discuss
Subject: Re: [css-d] Flash or No Flash switch?


> 25kB is a small smaple to test it responsibly. Some latency may distort
> the measurment. The image can also get cached.

In the article, I suggest avoiding caching by appending a random URL
parameter to the image (not so nice but it works).

As for the size, it will have to depend on the situation. In Duke's
case, he wants to decide whether to show a flash banner. Since the extra
download is purely decoration, there would be no issue if some
high-speed users didn't get the flash. It's still useful to have a rough
estimate.

A very large test image would defeat the purpose -- if users had to
download such an image to test their speed, they might as well download
the flash in the first place.

Jesse Skinner
www.thefutureoftheweb.com


--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.13.13/200 - Release Date: 12/14/2005

__
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] maybe I should just use tables, line break before float problem...

[Roger Roelofs]

Eric,

On Dec 15, 2005, at 4:35 AM, Eric Cash wrote:

> I've been ripping my hair out over this for two days straight now,
> please help, I need to eat soon.
>
> Maybe I'm using floats incorrectly, I'm not sure.
>
> I'm laying out this site with a friend, it's my first collaborative  
> project, and it's still in the early stages, I apologize for the  
> messy css, my problem is here: http://www.mentallyregarded.com/ 
> discussion.php  Be careful, there's some random (albeit harmless)  
> profanity in there.
> The floats
> I'm floating the buttons to the right, but IE and Firefox want to  
> throw in a line break before them each time, ...

Source order matters for floats, and I think that's what is causing  
your problem.

However, the reason you are pulling your hair out is because you are  
trying to cram two pages into one.  Start simpler.  In fact, if your  
user looks at the page with css turned off they will be _very_  
confused.  The kind of functionality you appear to be trying to build  
should be handled server-side or by multiple static pages, or even  
via javascript.  It is much better to dynamically add/remove dom  
elements than to put them all in and try to style away the ones you  
don't want the user to see right now.

You also might want to re-think the html from a semantic angle.   
Think about the kind of info you are displaying and what html element  
makes the most sense to display it.  Is it a list?  Is it tabular  
data?  Is it an outline?  In other words, pick the markup elements  
based on what they mean without worrying about how you want them to  
look.  After you have clean markup, and the html validates, the css  
will make tons more sense.

hth

Roger,

Roger Roelofs
[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/

Re: [css-d] Flash or No Flash switch?

[Jan Brasna]

> (not so nice but it works).

Ah, haven't noticed, sorry. This is fine and it works, that's important.

> A very large test image would defeat the purpose

Sure, that's the reason I wrote earlier that some valuable measuring 
wouldn't be nice for bandwith.

-- 
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] Preloading Background Images

[Christian Montoya]

On 12/15/05, Kevin Cannon <[EMAIL PROTECTED]> wrote:
> On Tue, Dec 13, 2005 at 11:54:43AM -0500, Christian Montoya wrote:>
> > You can preload images, just use your imagination, load them off
> > screen with position:absolute; and give them a size of nothing. But I
> > really discourage that.
>
> Yep, that's one option available. Why would you discourage that, yet promote
> merging images into one large one. The extra markup you'd have to add?

No, I just think users might get confused as to why the page is still
loading when it's really just images offscreen. I guess I don't
discourage it all that much, if you are really intent on having
preloading images.

--
--
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] http://css-discuss.incutio.com/?page=FrontPage Hacked

[Bjoern Hoehrmann]

* Felix Miata wrote:
>:-(
>
> FrontPage
>FrontPage | RecentChanges | Preferences
>
>WIKIISGAY

Well, it's a Wiki, you can fix it... I've restored the FrontPage.
-- 
Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 
__
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] http://css-discuss.incutio.com/?page=FrontPage Hacked

[Dan McCullough]

Thats a shame :(

On 12/15/05, Felix Miata <[EMAIL PROTECTED]> wrote:
> :-(
>
>  FrontPage
> FrontPage | RecentChanges | Preferences
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
>
> WIKIISGAY
> --
> Jesus Christ is the reason for the season.
>
>  Team OS/2 ** Reg. Linux User #211409
>
> Felix Miata  ***  http://members.ij.net/mrmazda/auth/
>
> __
> 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/

[css-d] http://css-discuss.incutio.com/?page=FrontPage Hacked

[Felix Miata]

:-(

 FrontPage
FrontPage | RecentChanges | Preferences

WIKIISGAY

WIKIISGAY

WIKIISGAY

WIKIISGAY

WIKIISGAY

WIKIISGAY

WIKIISGAY

WIKIISGAY
-- 
Jesus Christ is the reason for the season.

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

Felix Miata  ***  http://members.ij.net/mrmazda/auth/

__
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] Flash or No Flash switch?

[Jesse Skinner]

> 25kB is a small smaple to test it responsibly. Some latency may distort 
> the measurment. The image can also get cached.

In the article, I suggest avoiding caching by appending a random URL 
parameter to the image (not so nice but it works).

As for the size, it will have to depend on the situation. In Duke's 
case, he wants to decide whether to show a flash banner. Since the extra 
download is purely decoration, there would be no issue if some 
high-speed users didn't get the flash. It's still useful to have a rough 
estimate.

A very large test image would defeat the purpose -- if users had to 
download such an image to test their speed, they might as well download 
the flash in the first place.

Jesse Skinner
www.thefutureoftheweb.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/

[css-d] [REPOST] IE6 - top margin too large

[Rachael Beale]

Hello,

I'm not sure if I didn't get any replies previously because the
solution is really obvious to everyone else... but it's certainly not
obvious to me, and I am being badgered to hand over this template!
I've Googled and searched the Wiki and am no closer to understanding
what the problem is. Can anyone help me?

Page: 
CSS: 

In IE6, the top margin of #centrecontent appears to be measured from
the bottom of the navigation div, which means there is a large white
gap between the bottom of the navigation and the "breadcrumbs". In
Firefox/Opera/Safari, the margin is apparently being measured from the
top of the #page div.

I thought this might be the "collapsing margins" issue, but applying
borders and padding to everything I could think of seemed to make no
difference.

What am I missing here??

(Am aware of the messy left nav in IE6 also, but haven't yet had a go
at fixing that one myself so won't trouble the rest of you with it).

Many thanks,

Rachael
__
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] Clickable image

[Tobias Baldauf]

Jim Ryan schrieb:
> I've redesigned this formerly-tabled page in all-css--something the tech
> guys at the company's forward-looking CMS tell me they refuse to support(!!)
> http://www.childrensaidsociety.org/newheights/
> 
> If you look at the "new heights" logo on the upper left of the layout,it's a
> background image, but I'd like to make it clickable. Problem is, I haven't
> found a way to put that image there without throwing off the rest of the
> layout. Any suggestions?

One possible solution might be to take the logo completely out of the
sourrounding layout. Just position e.g. a div containing the logo (as a
normal img-tag) absolute and place it on the position where it is
supposed to go (in your case top:168px; and left:46px; & don't forget a
proper width & height 191x87px), then put a  to the image.
To ensure that it is not hidden by another element, add a z-index
attribute. As your layout is not liquid, this solution will work.
Summary is that an element which can be positioned by fixed values need
not neccesarily be included in the layout like one might expect from a
table-cell.

Tobias

__
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] Clickable image

[Christian Heilmann]

> I've redesigned this formerly-tabled page in all-css--something the tech
> guys at the company's forward-looking CMS tell me they refuse to support(!!)
> http://www.childrensaidsociety.org/newheights/
>
> If you look at the "new heights" logo on the upper left of the layout,it's a
> background image, but I'd like to make it clickable. Problem is, I haven't
> found a way to put that image there without throwing off the rest of the
> layout. Any suggestions?
>

If that is to be a link and crucial content - why is it a background image?

I had issues in the past where we needed to use background images in
CSS and a link above them. The solution was to use a real text link,
and position it absolute above the image in the layout. As your logo
is not somewhere in the content but at a fixed position, this is not
much of a problem to do:

New Heights Start Page

#nh{
  position:absolute;
  top:20px;
  left:20px;
  width:100px;
  height:70px;
  overflow:hidden;
  text-indent:-200px;
}

or any other image replacement technique.

It is a hack, but makes both parties happy.

--
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] Clickable image

[Jim Ryan]

I've redesigned this formerly-tabled page in all-css--something the tech
guys at the company's forward-looking CMS tell me they refuse to support(!!)
http://www.childrensaidsociety.org/newheights/

If you look at the "new heights" logo on the upper left of the layout,it's a
background image, but I'd like to make it clickable. Problem is, I haven't
found a way to put that image there without throwing off the rest of the
layout. Any suggestions?





__

"It's possible to divide the world into two groups:
those who divide the world into two groups
and those who do not."
--Robert Benchley
__

Jim Ryan
Web Manager,
The Children's Aid Society
105 East 22nd St. Suite 504
New York, New York, 10010
(212)949-4397



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

[Adam Kuehn]

kenny heaton wrote:
>I've heard talk about how much faster css is at rendering pages than
>table layouts, but I've never seen the proof (actual statistics). I
>was wondering if anyone knew of a study on this.

I don't think a general study is possible, since the rendering time 
depends largely on exactly what it is you are laying out and what 
browser you are using to do so.  A table can, for example, render 
faster than a complex series of CSS floats.  On the other hand, CSS 
which relies on relative positioning and only a few "layers" 
(absolute positioning or floats) is generally considerably faster 
than a table for the same job.  CSS generally (but not always) ends 
up lighter weight in total than a table-based layout, and it has the 
advantage that the CSS portion can be cached.  This can lead to 
significant savings under most real-world conditions.  Try it yourself to see.

However, look carefully at any test that makes a general claim that 
one is always faster than the other.  It just isn't so.

>My second questions is related to that, dose anyone know of any
>resources on writing more optimised css. For example I was just
>reading on this list in the talk comparing class to id and there was
>mention there was performance difference between
>
>element.class {}
>and
>.class {}

I'm the one who brought up this performance difference, and I was 
careful to qualify that I only knew the facts for one browser (in 
this case, Mozilla).  A general attempt to optimize CSS may not even 
be possible.  Each browser vendor is free to optimize page display in 
any way they can think of.  Because of the specific way that Mozilla 
has optimized selector matching, a class or ID without the element is 
*slightly* faster to match than one that includes the element.  That 
may or may not be true with some other browser (and it might be 
difficult to even discover in anything other than an open-source 
implementation, unless you are willing to do brute-force technical 
testing on thousands of combinations).

I think it is likely that optimizing CSS is probably not worth your 
time.  In addition to significant browser and platform differences, 
network latency, page weight, and other overhead will most likely 
completely overwhelm any effects from the CSS, which has been written 
explicitly with progressive rendering (i.e. speed) in mind.  There 
are a few CSS3 properties that may have more significant effects, but 
for now, if browsers support it, it is probably fast enough not to 
make much difference.

Mind you, this is anecdotal and somewhat speculative.  I know of no 
formal testing on the subject that I would consider reliable.

HTH,


-Adam Kuehn 

__
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] links not clickable in Safari

[Erik Visser]

David Hucklesby wrote:
> Erik Visser wrote:
>>it is fixed
> 
> Would you like to share with us how you fixed it? 

this:
http://archivist.incutio.com/viewlist/css-discuss/59082

brought me to this:
http://www.456bereastreet.com/lab/float_negative_margins/

that did it in my case

Erik
__
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] list alignment auto fit

[Scott Hamm]

I'm working on my new web using FireFox as a tool to design my CSS. 
Currently IE is broken (steps) and will be worked on later.  For now,
I need to figure out a way to automatically fit the menu list into the
remaining width (on right side).  The content in that list will change
and would like for it to fit every time when content is changed.  I
tried % to no avail. When I set border-bottom to same width (.6em) for
both #header p a and ul#menulist li a and when increased or decreased
the text in firefox, they didn't match up.  Any help would be
appreciated.

Here is the link with embedded CSS:

http://www.geocities.com/theksskoder/css_question.htm

Thanks,


Scott
--
Power to people, Linux is here.
__
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] Sticky Menus

[MocaLoca]

Hi Everyone,

 

This is my first post here, please forgive my ignorance :-)

 

I am fresh trying to start creating clean standard sites and I always have
trouble with sticky menus. I mean the down state that sticks on the next
page clicked. 

 

What is the best practice? What is your preference? Any resource or code to
share?

 

Thanks a lot,

 

Moca

 

 

MocaLoca
Digital Media Artist
---
  www.mocaloca.com
305.926.7775

 

__
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] wrapping a list around an image

[Ari Davidow]

> > I played around with the code, and was somewhat shocked to find this
> > solution:
> >
> > ul { display: inline; }
> >
> > Aren't lists always displayed inline? No matter, it fixes your IE6/Win
> > problems. I haven't tested on a Mac though, but I would image/hope it
> > would have no effect.
> >
>
>No, lists (ol, ul and dl) are defined as block level elements. Check the
>HTML 4 DTD:
>


This does solve the IE problem, but doesn't solve the Safari issues. It 
=is= true that we have an element in the left navbar that exceeds the width 
defined for it. I'm going to follow up the earlier suggestion to rethink 
the coding for those elements and see if that resolves the issue.

In a worst case, we're changing the sidebar element in about two weeks and 
can pay attention to width issues this time around.

ari


__
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 Background Images

[Kevin Cannon]

On Tue, Dec 13, 2005 at 11:54:43AM -0500, Christian Montoya wrote:
> On 12/13/05, Kevin Cannon <[EMAIL PROTECTED]> wrote:
> > I'm not that keen on combining the 6 images into 1 large one and changing 
> > the
> > background position, as that would mean the homepage would take too long to
> > appear.

> If you combined the 6 images into 1, that one image would load faster.

Well, It won't load faster than loading & showing 1 image first, and then
loading the rest afterwards. (see my other reply for a more detailed
explanation)

> You can preload images, just use your imagination, load them off
> screen with position:absolute; and give them a size of nothing. But I
> really discourage that.

Yep, that's one option available. Why would you discourage that, yet promote
merging images into one large one. The extra markup you'd have to add?

Thanks,

- Kevin
__
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 Background Images

[Kevin Cannon]

On Tue, Dec 13, 2005 at 09:38:05AM -0600, CJ Larson wrote:
> > Is it possible to preload the images in anyway, via CSS or Javascript?

> > I'm not that keen on combining the 6 images into 1 large one and
> changing the
> > background position, as that would mean the homepage would take too
> long to
> > appear.

> [cj]
> I think my brain is dead today, so forgive the newbie question:  How
> would preloading 6 different images take less time than loading 1
> combined image?

It wouldn't, but it will affect the overall experience.

I'll try and explain:

4 Smaller Images:   5  Seconds each = 20 seconds total
1 Large Combined Image: 20 Seconds


Now, if I load the combined image it'll take 20 seconds before the image is
properly visible. If I load one of the smaller images, it'll only take 5, so
the whol page is loaded much more quickly.
Once that's done, I want to cpntinue load the rest of the images in the
background.

I hope that explains it. If not, just let me know. :)


- Kevin
__
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] Weirdest IE bug I've ever seen

[Nick Fitzsimons]

> Hi folks,
>
> Is this a known bug? I've got a colleague who has a series of DIVs as
> follows:
>


This is the IE duplicate characters bug, described in detail at:



HTH,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/

__
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] Weirdest IE bug I've ever seen

[Choan C. Gálvez]

Spike Spencer wrote:
> Is this a known bug? I've got a colleague who has a series of DIVs as
> follows:
> 
>  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> 
> 
> 
> aa
> 
> 
> 
> bb
> 
> 
 > [...]
 >
> 
> 
> 
> 
> 
> 
> 
> 
> And this CSS:
> [...]
> .aa
> {
> width: 700px;
> height: 80px;
> background-color: red;
> float: left;
> }
> 
> .bb
> {
> width: 80px;
> height: 720px;
> background-color: blue;
> float: right;
> }
> [...]
 >
> Looking in IE6, it replicates the last two characters of the sentence in DIV
> class ee. Any ideas?

Yes. Remove the comments (or move them). This is what is causing the 
duplicate chars.

--
Choan
__
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] Weirdest IE bug I've ever seen

[Spike Spencer]

Hi folks,

Is this a known bug? I've got a colleague who has a series of DIVs as
follows:


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





aa



bb



ff





cc



dd




This is an entire sentence, captain. Please have a safe flight.










And this CSS:

*
{
margin:0;
padding: 0px;
}

body
{
margin: auto;
}


.aa
{
width: 700px;
height: 80px;
background-color: red;
float: left;
}

.bb
{
width: 80px;
height: 720px;
background-color: blue;
float: right;
}

.cc
{
width: 50%;
height: 100%;
background-color: green;
float: right;
}

.dd
{
width: 50%;
height: 50%;
background-color: yellow;
float: left;
}

.ee
{
width: 50%;
height: 50%;
background-color: purple;
float: left;
}

.ff
{
width: 80px;
height: 720px;
background-color: orange;
float: left;
}

.gg
{
width: 700px;
height: 80px;
background-color: grey;
}

.main
{
width: 780px;
height: 800px;
background-color: pink;
text-align: center;
margin: auto;
}

.wrap
{
width: 620px;
height: 640px;
float:right
}

Looking in IE6, it replicates the last two characters of the sentence in DIV
class ee. Any ideas?
__
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] Firefox slipping? Float issues? Margin?

[Tanya Renne]

I having trouble getting this site: http://www.writingworkbook.com - to 
behave in firefox (PC). The top part of the screen sorts of falls open. 
I'm using negative margins to move the nav up the screen - is that the 
problem? Fine in NS and IE.

-- Tanya
--
Tanya Renne, Director, ORCHID SUITES, Inc.
Online tools to engage your constituency, build capacity, and fundraise.
For progressive political organizations, candidates, labor and nonprofits.
http://www.orchidsuites.net  ~  [EMAIL PROTECTED]
Washington, DC  ~ (888) 545-9092


__
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] maybe I should just use tables, line break before float problem...

[Eric Cash]

I've been ripping my hair out over this for two days straight now, 
please help, I need to eat soon.

Maybe I'm using floats incorrectly, I'm not sure.

I'm laying out this site with a friend, it's my first collaborative 
project, and it's still in the early stages, I apologize for the messy 
css, my problem is here:
http://www.mentallyregarded.com/discussion.php  Be careful, there's some 
random (albeit harmless) profanity in there.
The floats
I'm floating the buttons to the right, but IE and Firefox want to throw 
in a line break before them each time, is this behavior correct?  Opera 
displays it without the line break.  I also tried floating the "last 
post" information (.subtitle) and had the same preblem, it doesn't seem 
right, I've tried a million different ways to coax firefox into 
displaying this correctly, to no avail.  Am I wrong?  Can I not use 
floats this way?

Thanks for the help

ec
__
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] wrapping a list around an image

[Nick Fitzsimons]

> Hi Ari,
>
> I played around with the code, and was somewhat shocked to find this
> solution:
>
> ul { display: inline; }
>
> Aren't lists always displayed inline? No matter, it fixes your IE6/Win
> problems. I haven't tested on a Mac though, but I would image/hope it
> would have no effect.
>

No, lists (ol, ul and dl) are defined as block level elements. Check the
HTML 4 DTD:


regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/

__
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] wrapping a list around an image

[jesse]

Hi Ari,

I played around with the code, and was somewhat shocked to find this
solution:

ul { display: inline; }

Aren't lists always displayed inline? No matter, it fixes your IE6/Win
problems. I haven't tested on a Mac though, but I would image/hope it
would have no effect.

Cheers,

Jesse Skinner
www.thefutureoftheweb.com

> Ah, I went only halfway there when I redefined the  element. I
> needed  to zero out  as well. But this still doesn't work in
> IE6/Win. Looks  perfect in Firefox1.0x/Win. Doesn't work in
> Safari/OSX.
>
> Something is still missing.



__
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] wrapping a list around an image

[Philippe Wittenbergh]

On 15 Dec 2005, at 1:56 pm, Roger Roelofs wrote:

>> Ah, I went only halfway there when I redefined the  element. I
>> needed to zero out  as well. But this still doesn't work in
>> IE6/Win. Looks perfect in Firefox1.0x/Win. Doesn't work in Safari/ 
>> OSX.
>
> I can't test in ie/win (I'm on a mac).  I can tell what is  
> happening in
> safari 1.31, but I'm not sure how to fix it.  If you add a light
> background color to the li you will see how gecko and khtml  
> differ.  In
> firefox/gecko the li element is affected by the float and thus moves
> over to accommodate it and the bullet is drawn relative to the li.  In
> safari/khtml the li flows under the float just like the ul does and
> there is sort of an invisible container that is affected by the  
> floated
> image and the bullet is drawn relative to this anonymous block.

This works as expected in various browsers.
style in the .

Essentially make the li become a new formatting context, then the  
whole thing moves. I use {display:table} for modern browsers,  
'hasLayout' for old IE. IE Mac will need {display:inline-block}.

Of course, if you want the list to wrap under the image, then another  
solution is required.




Philippe
---
Philippe Wittenbergh



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