Re: [css-d] def list :: pcIE fix?

[Christian Heilmann]

> The problem is in your . You have put clear=all inside the tag. You
> need to style it as
> 

Actually in CSS it is clear:both not clear:all. 
http://www.sitepoint.com/blog-post-view?id=238086
-- 
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] Website Stats

[George Georgiou]

Hi there,

Well, this is a non-coldfusion related question but since we have so
many webmasters here, perhaps you know how to help.

I am looking for a very simple tool, (i.e. it could be a toolbar on
our web browser) which will calculate some basic statistics for the
websites we are currently browsing. The most important one is the
exact size of the current page, including HTML code, CSS, JS, images
and any other media.

I have searched every corner of the web (hehe not really possible)
with no luck!

any ideas?

Giorgoc
__
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] Trouble with Mozilla and IE6

[Patrick Jackson]

I am still a newbie to CSS and I am in the process of trying to build my 
first small site for a band.  I have run into two problems :


1. On Mozilla browsers, the rounded image that is below the nav and the 
masthead, does not appear.


2.  The layout is destroyed in IE / Win.  The layout utilizes two floats, to 
which I have applied the display: inline feature and the child selector to 
attempt to correct the 3px bug.  Nothing has solved the issue.  Please help!


thanks for taking the time to help a newbie out of a hole.

the page is at :
http://handoff.solidhex.com/

the css file is at :
http://handoff.solidhex.com/c/c05.css

note: the yellow colors are markers so I could see what the heck I was 
doing, and are not part of the design :)


-patrick

_
Don’t just search. Find. Check out the new MSN Search! 
http://search.msn.click-url.com/go/onm00200636ave/direct/01/


__
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 height in IE

[Prabhath Sirisena]

I think what you need to do is to contain the floated leftNav in mainBlock.

Try this:
http://positioniseverything.net/easyclearing.html

HTH,
Prabhath
http://nidahas.com


On 5/27/05, Terry Jeske <[EMAIL PROTECTED]> wrote:
> http://www.buzzjeske.com/untitled-1.htm
> 
> I have a centered div "mainBlock" that contains a div "leftNav" that
> is floated left.  I need leftNav to be the same size as mainBlock .
> If I give leftNav a height of 100%, it kind of works in Firefox,
> although it appears to push bottom of leftNav into the footer div. In
> IE however, the height is not effected at all with a percentage value.
> 
> I read on some other posts that the html and body containing blocks
> need their heights to be set in order to give the div some percentage
> to go off of. But setting them to 100% still has no effect.  On a
> similar note, I read in an Eric Meyer book that the containing block
> always has to have it's height set, otherwise the nested block will
> default to auto.  Setting mainBlock to 100% still has no effect on IE,
> but in FF it pushs the footer div past the bottom of the viewport
> causing a scroll.
> 
> Any ideas on how to implement this?
> 
> 
> his?
> __
> 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] div height in IE

[Terry Jeske]

http://www.buzzjeske.com/untitled-1.htm

I have a centered div "mainBlock" that contains a div "leftNav" that
is floated left.  I need leftNav to be the same size as mainBlock . 
If I give leftNav a height of 100%, it kind of works in Firefox,
although it appears to push bottom of leftNav into the footer div. In
IE however, the height is not effected at all with a percentage value.

I read on some other posts that the html and body containing blocks
need their heights to be set in order to give the div some percentage
to go off of. But setting them to 100% still has no effect.  On a
similar note, I read in an Eric Meyer book that the containing block
always has to have it's height set, otherwise the nested block will
default to auto.  Setting mainBlock to 100% still has no effect on IE,
but in FF it pushs the footer div past the bottom of the viewport
causing a scroll.

Any ideas on how to implement this? 


his?
__
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] Website check please - problems on windows?

[Gunlaug Sørtun]

Luca Balboni wrote:


http://www.worldadventurer.net


It seems to work fine on Mac, but on windows IE6 seems to lose the 
white background of the main container,.


#container {_height: 0;} <-- note underscore!
...this is one way to add "HasLayout" to IE/win, and it's working on
your page. You have a small problem with visible square corners in top &
bottom image though. May need to color-trim or filter those, since
IE/win isn't good with transparency.

Also, the"who we are" menu on the top seem to stretch all the width 
of the page when "active".


#navigation ul li a {display: inline;}
...or delete existing "display: block;" on a:hover.

You also have the "enormous font-steps bug" on that page. Change
font-size on body from using 'em', to a suitable value in percentage to
fix that IE/win bug.

Looks like the  on top in #content and  on top in #news could do
with a defined margin-top. 20px looked right to me.

All tested in Firefox1.0, Opera8.0 and IE6.

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] 3 column layout problem

[cifroes]

David Laakso wrote:

Tried it... doesn't work in firefox or IE... in firefox the sidebar 
just  goes over my image. in IE my sidebar goes "nuts"... my test is 
simple:  put a big image in the center column, try to resize your 
window to  800x600 or something like that..




Thanks anyway :)



The maximum width of an 600 x 800 window is 780px(smaller if a sidebar is
place); consequently, your layout will break if the width of the image is
greater than the width of the center column at 800 screen resolution with
sidebar and/or side-chrome in place-- regardless of the layout you 
use. In

other words, ain't no way you can fit 20 pounds of potatoes in a 10 pound
sack.
Regards,
David



Yes, i know that.. but i can live with it if scrollbars appear and 
everything is in place, that's what i want to do. And yes I know it's 
not a good design to have horizontal scroll :)


I tried with oh-no-tables and it works as i want... but, it's tables...


Thanks again for your replies.

__
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] Website check please - problems on windows?

[Luca Balboni]

Hi all,

I am completing a website and I am not able to check it on Windows  
configurations.


It seems to work fine on Mac, but on windows IE6 seems to lose the  
white background of the main container,.


Also, the"who we are" menu on the top seem to stretch all the width  
of the page when "active".


Can anyone please confirm this?

The address is:
http://www.worldadventurer.net

Thanks,
Luca
__
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] def list :: pcIE fix?

[Cook, Graham R]

The problem is in your . You have put clear=all inside the tag. You
need to style it as 


Regards

Graham Cook

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of !!blue
Sent: Friday, 27 May 2005 8:10 AM
To: CSS Discuss
Subject: [css-d] def list :: pcIE fix?

Hi all,

I'm using a definition list to create a layout for a page created by a
designer here at work.  It's actually looking pretty good and I'm happy
about that. :)

I'm using CSS code a MaxDesign article[1].  My page[2] has two def lists
but the space between them is too large in WinIE but virtually perfect
everywhere else. The html and css[3] all validate. It could be my  maybe?

I've been looking at it for too long :p 

[1]
http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm
[2] http://test.slackbarshinger.com/pmmi308/mast2006.html
[3] http://test.slackbarshinger.com/pmmi308/style/style.css

thanks for reading,
Zulema
--
!!blue
w e b  d e s i g n e r
folio: http://zoblue.com
blog: http://blog.zoblue.com
browser: http://getfirefox.com
== I have gmail invites to get rid of, just email me directly and I'll
send you one. send me pleasant thoughts as payment :) ==
__
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] alt tag in CSS?

[jack fredricks]

in general, layout and decorative (by this i mean no real content)
images shouldnt have an alt tag (to be more precise, their alt tag
should be alt="" [no space]). Background images are pretty much always
decorative.

in answer to your ?...no, there is no css way to do this. 

On 5/27/05, Bruce Gilbert <[EMAIL PROTECTED]> wrote:
> I don't suppose there is a way to give an image an alt tag when you
> are calling the image as a background in CSS is there?  id="image"> or is the rule of thumb, if the image requires an
> alt tag, specify in the 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/

[css-d] alt tag in CSS?

[Bruce Gilbert]

I don't suppose there is a way to give an image an alt tag when you
are calling the image as a background in CSS is there?  or is the rule of thumb, if the image requires an
alt tag, specify in the html??

TIA
-- 
::Bruce::
__
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] Base font size

[Felix Miata]

jack fredricks wrote:

> Mike Stickel wrote:
 
> > html, body {
> > font: 91% "Lucida Grande", "Lucida Sans Unicode", geneva,
> > verdana, sans-serif; /* For IE/Win 1.1em is approx. 12px */
> > line-height: 1.2em;
> > }

> line-height should not have a unit. Change 1.2em to;
 
> line-height: 1.2;
 
> this is for IE only i think (it's one of those things I need to
> re-check up on, it's been pushed out of my mind by so much other
> useless stuff).
 
> this is due to an IE inheritance bug
 
Nah, it's the CSS spec, not IE only:
http://members.ij.net/mrmazda/auth/line-height.html

It isn't necessarily a problem, but it can be a hard one to debug
if it becomes a problem. There really is no benefit to using the
others (px or em).
-- 
"Through Him all things were made; without Him nothing was made
that has been made."John 1:3 NIV

 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-d] UL images not showing, sometimes

[Scott Haneda]

Adasdasdse 
Adasdasdse 
Adasdasdse 
 

ul.arrowed {
list-style-image: url('/images/misc/triangle.gif');
margin-bottom: .5em;
}
ul.arrowed li { padding: 0em 0em .7em 0em; }

the damn triangle only shows sometimes in Safari, I can not nail it.  It
seems to not be cache related, but pretty random.  I have tried "" and ''
and nothing, is there something wrong, or a preferred way?
-- 
-
Scott HanedaTel: 415.898.2602
 Novato, CA U.S.A.


__
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] float problem--repost

[Jeanne Prine]

Hi Kaspars,

Thanks very much for your reply, which was very
helpful. I first saw Doug Livingstone's code in
a book by someone else, but with no width included
for #outer. His code at www.redmelon.net/tstme/
3cols2/noborder.htm has width: auto which I tried 
just before I got your reply. As you saw, that didn't work--but your suggestion 
did. 

This is my first css layout, so I appreciate the
corrections and have replaced the incorrect classes with  and . I 
see your point about just using the code on www.redmelon.net and will clean
up my code with that model in mind.   

But I'm trying to make the same underlying structure work for both main and 
back page layouts (which are quite different visually), so that's why I needed 
to alter his column widths. I definitely want to keep
all 3 floating columns (and the header and footer),
just with minor variations. I'm still experimenting
and thinking things through but will soon be able
to move the structural code into a separate css file
and organize all the rest of the presentational code (the big mess). ;)

Regards,
Jeanne



Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
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] link style question

[jack fredricks]

just thought i'd add my $0.02;

the optimal psuedoclass order in your style sheet is; 

:link  
:visited
:focus
:hover
:active. 

LoVe..focus...HAte. L for Link, V for visited etc. 
I think there's some division as to whether focus belongs in the
middle, or somewhere else. I put it in the middle.

another cool thing is combining pseudo-classes in selectors. You dont
see it often (i imagine because of poor browser support) but you can
do this;

a:focus:hover. This means any anchor that has focus, and is has mouse hover.
__
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] Base font size

[jack fredricks]

line-height should not have a unit. Change 1.2em to;

line-height: 1.2;

this is for IE only i think (it's one of those things I need to
re-check up on, it's been pushed out of my mind by so much other
useless stuff).

this is due to an IE inheritance bug


> html, body {
> font: 91% "Lucida Grande", "Lucida Sans Unicode", geneva,
> verdana, sans-serif; /* For IE/Win 1.1em is approx. 12px */
> line-height: 1.2em;
> }
__
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] 3 column layout problem

[David Laakso]

On Thu, 26 May 2005 17:38:39 -0400, cifroes <[EMAIL PROTECTED]> wrote:

On Thu, 26 May 2005 15:50:34 -0400, cifroes <[EMAIL PROTECTED]> wrote:

I'm doing a 3column design like this:
http://glish.com/css/7.asp

[...]
You might take a look at 'Example 5' near the bottom of this page:

Regards,
David Laakso


Tried it... doesn't work in firefox or IE... in firefox the sidebar just  
goes over my image. in IE my sidebar goes "nuts"... my test is simple:  
put a big image in the center column, try to resize your window to  
800x600 or something like that..



Thanks anyway :)


The maximum width of an 600 x 800 window is 780px(smaller if a sidebar is
place); consequently, your layout will break if the width of the image is
greater than the width of the center column at 800 screen resolution with
sidebar and/or side-chrome in place-- regardless of the layout you use. In
other words, ain't no way you can fit 20 pounds of potatoes in a 10 pound
sack.
Regards,
David

--
http://www.dlaakso.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] Getting a series of tds to combine to a set width

[Andrew Mason]

Hi folks,

I'm having a heck of a time trying to figure out part of my layout.   
Here's a picture of how it should look:


http://www.pandamouth.org/bin/listing_correct.jpg

I'm having trouble getting the pound-quarterpound etc and "add to  
cart" columns of the product listings to horizontally center.  The  
"Add to Cart" lines up with the top weight attribute instead of  
centering itself.  This is because I floated right the "Add to cart"  
bit, which won't end up working I guess.  I've been finagling this  
layout for hours and can't find a way to get it to work.  The weight  
attribute/add to cart section needs to be about 308 px wide and flush  
right, just like in the example image.  You can see how it's behaving  
now here, using login / password: mitea / rlammm

http://66.246.100.85/index.php?main_page=index&cPath=1_9

I'm really at a loss... thanks in advance for any help you can provide.

Regards,

Andrew




__
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] Base font size

[David Laakso]

On Thu, 26 May 2005 17:30:10 -0400, Mike Davies  
<[EMAIL PROTECTED]> wrote:

Hi all,
I would like to know if it is possible to set the base font size using
css so that the text is rendered the same size by all browsers and is
still resizeable, ie not defined in pixels.

I understand that the default font size used by different browsers
varies. I usually set the font size in the body tag using ems but the
size as rendered by the browsers is different so the look of the page is
different. I generally use Opera to view my pages while I'm designing
then view in Firefox and IE to check. Usually the text is larger in both
the latter.

I don't want to set the size in pixels, so it is resizeable. How can I
ensure the same size in various browsers? Appreciate any comments.
Regards,
Mike
It may *not* be a good idea to set em on the body as it causes a font  
re-sizing bug in IE. There are many methods that can be used. One is to  
set percent on the body followed by em's on the selectors, or percent on  
the body and selectors as well. Some people use 100.01% on the body(.01 to  
cover an Opera rounding error), followed by em's or percent on the  
selectors.  And some feed percent on the body to IE; and pixels on the  
body to good browsers. Whatever method is used, it's not a good idea to  
use pixels for line-height. There is a wealth of info on the css-d wiki  
regarding font sizing. In the end it comes down to personal preference;  
and, more important, will what is set on the body zoom in IE and yield say  
a 200% content text zoom in good browsers(FF/Opera/Safari) without  
breaking the layout.

Regards,
David Laakso



--
http://www.dlaakso.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] Base font size

[Uwe Kaiser]

Mike Davies schrieb:


Hi all,
I would like to know if it is possible to set the base font size using
css so that the text is rendered the same size by all browsers and is
still resizeable, ie not defined in pixels.

I understand that the default font size used by different browsers
varies. I usually set the font size in the body tag using ems but the
size as rendered by the browsers is different so the look of the page is
different. I generally use Opera to view my pages while I'm designing
then view in Firefox and IE to check. Usually the text is larger in both
the latter.

I don't want to set the size in pixels, so it is resizeable. How can I
ensure the same size in various browsers? 



1) Opera generally seems to render a bit smaller than all the others.
2) The displayed font size depends on three things.
   a) physical monitor resolution
   b) browser settings
   c) browser bugs

3) http://css-discuss.incutio.com/?page=FontSize
   http://css-discuss.incutio.com/?page=UsingFontSize
   http://css-discuss.incutio.com/?page=ForceFontSize


regards,
Uwe Kaiser
--



__
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] Base font size

[Mike Stickel]

On May 26, 2005, at 3:30 PM, Mike Davies wrote:

Hi all,
I would like to know if it is possible to set the base font size using
css so that the text is rendered the same size by all browsers and is
still resizeable, ie not defined in pixels.

I don't want to set the size in pixels, so it is resizeable. How can I
ensure the same size in various browsers? Appreciate any comments.


Mike,
This is what I do and it seems to work for me. Keep in mind this  
topic is one of the topics that may get a few responses to "just  
check the wiki" [1][2], which you should do.


html, body {
font: 91% "Lucida Grande", "Lucida Sans Unicode", geneva,  
verdana, sans-serif; /* For IE/Win 1.1em is approx. 12px */

line-height: 1.2em;
}

html>body {
font-size: 12px;/* For modern browsers 1em = 12px */
}

This will allow you to set a percentage font size for IE and older  
browsers (which is resizable) at the same time set a base pixel size  
for the modern browsers (which allow font sizing with pixel defined  
fonts). That is, of course, unless I've done this backwards then I'm  
sure someone will mention it on the list.


[1] http://css-discuss.incutio.com/?page=UsingFontSize
[2] http://css-discuss.incutio.com/?page=UsingPercentages

Mike Stickel
Screenflicker Developments
www.screenflicker.com

p: 403-923-7667
e: [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] def list :: pcIE fix?

[!!blue]

Hi all,

I'm using a definition list to create a layout for a page created by a
designer here at work.  It's actually looking pretty good and I'm
happy about that. :)

I'm using CSS code a MaxDesign article[1].  My page[2] has two def
lists but the space between them is too large in WinIE but virtually
perfect everywhere else. The html and css[3] all validate. It could be
my  maybe?

I've been looking at it for too long :p 

[1] http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm
[2] http://test.slackbarshinger.com/pmmi308/mast2006.html
[3] http://test.slackbarshinger.com/pmmi308/style/style.css

thanks for reading,
Zulema
-- 
!!blue
w e b  d e s i g n e r 
folio: http://zoblue.com
blog: http://blog.zoblue.com
browser: http://getfirefox.com
== I have gmail invites to get rid of, just email me directly and I'll
send you one. send me pleasant thoughts as payment :) ==
__
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] 3 column layout problem

[cifroes]

luciash wrote:


cifroes wrote:



The layout i want is something like this: 3 column with a header, 
left and right column with fixed width and middle one without. 3 
columns should fill out the entire horizontal available space. And 
when the center column has big content the scrollbars of browser 
should appear and the right column should be correctly displayed "at 
the right" of the center column.





hi,
try http://www.ground.cz/luci/css/my3cols.html
there's set overflow: auto for every div *contained inside div with 
class="content"* which adds scrollbars when the content of div expands 
the width for some reason

it's exactly here in the css file (applies also for *all* pre tags):


Hi, thanks for the quick reply.

I tried putting a large image in the center column in that design. Right 
col and center column (and scrollbars) works nicely, as i wanted... the 
problem is that the left column has a strange behaviour "dancing around" 
when you resize the window in IE 6.0 and Firefox 1.0.4...


If I could fix that, maybe that's my solution...
__
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] 3 column layout problem

[cifroes]

David Laakso wrote:


On Thu, 26 May 2005 15:50:34 -0400, cifroes <[EMAIL PROTECTED]> wrote:


I'm doing a 3column design like this:
http://glish.com/css/7.asp


[...]

The layout i want is something like this: 3 column with a header, 
left  and right column with fixed width and middle one without. 3 
columns  should fill out the entire horizontal available space. And 
when the  center column has big content the scrollbars of browser 
should appear  and the right column should be correctly displayed "at 
the right" of the  center column.


You might take a look at 'Example 5' near the bottom of this page:

Regards,
David Laakso


Hi,

Tried it... doesn't work in firefox or IE... in firefox the sidebar just 
goes over my image. in IE my sidebar goes "nuts"... my test is simple: 
put a big image in the center column, try to resize your window to 
800x600 or something like that..



Thanks anyway :)

__
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] 3 column layout problem

[David Laakso]

On Thu, 26 May 2005 15:50:34 -0400, cifroes <[EMAIL PROTECTED]> wrote:

I'm doing a 3column design like this:
http://glish.com/css/7.asp

[...]
The layout i want is something like this: 3 column with a header, left  
and right column with fixed width and middle one without. 3 columns  
should fill out the entire horizontal available space. And when the  
center column has big content the scrollbars of browser should appear  
and the right column should be correctly displayed "at the right" of the  
center column.

You might take a look at 'Example 5' near the bottom of this page:

Regards,
David Laakso
--
http://www.dlaakso.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] Base font size

[Mike Davies]

Hi all,
I would like to know if it is possible to set the base font size using
css so that the text is rendered the same size by all browsers and is
still resizeable, ie not defined in pixels.

I understand that the default font size used by different browsers
varies. I usually set the font size in the body tag using ems but the
size as rendered by the browsers is different so the look of the page is
different. I generally use Opera to view my pages while I'm designing
then view in Firefox and IE to check. Usually the text is larger in both
the latter.

I don't want to set the size in pixels, so it is resizeable. How can I
ensure the same size in various browsers? Appreciate any comments.

Regards,
Mike

-- 
Mike Davies
Integra Web Design, Huntly, AB54 4XP
01466 700213www.integrawebdesign.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] IE6 crashing/Font Resizing issue

[Pringle, Ron]

> Pringle, Ron schrieb:
> > I have encountered a text resizing issue on my site using 
> Internet Explorer
> > 6 (XP and Win2K so far). When using "View / Text Size" and 
> changing font
> > sizes multiple times on the same page, Internet Explorer crashes. 
> 
> > http://tinyurl.com/d572t
> > 
> 
> Confirm crashing here.
> 
> #eventsearch { ... /*float: right;*/}
> 
> Seems to fix it here on a local copy. Maybe a start to look 
> at, maybe not.
> Good luck.
> 
> Ingo

Ingo-

Nice catch! That appears to have solved the problem. Of course it introduces
some visual issues I have to fix, but those I can deal with.

Well done, and thank you very much for the help!

Regards,
Ron
__
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] Vertical centering

[David Laakso]

On Thu, 26 May 2005 15:55:11 -0400, Thomas Livingston  
<[EMAIL PROTECTED]> wrote:




On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Downsides to this method?

This may be out of context,  as I'm unable to find the original post...
Well, anyway,  with that method-- if the window is too small for the  
content,  it is cut off without giving you a scroll bar to see it all.

Tom Livingston

Regards,
David Laakso
--
http://www.dlaakso.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] best 100% vertical height technique?

[Theodore Serbinski]

hey guys!

got a question. i'm working on a new site design. the design is 768px
wide and on the left and right borders i want to have a faded border
to give the page a little bit of depth. i want these borders to be a
100% of the page (not necessarilly just the window because of scroll
bars, etc...).

so i have only a sentence on this page, the borders should go from the
top of the browser window the bottome and if i have pages and pages of
text, the borders should still be going from the top to bottom as the
user scrolls. make sense?

anyone know the best method to accomplish this?

thanks!

ted
__
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] Vertical centering

[Bruno Fassino]

Thomas Livingston

> How about this one?
>
> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

This assumes that the dimensions of the box to be centered are known, so it
can be effectively used only in very specific cases. If the page content is
an unknown amount of text (and may be images) it's impossible to determine
in advance its height (not even using ems..)  It's fine for centering an
headline, a logo, or something like that, nothing more.
The method used by Uwe is more general, as few others. The problem is that
probably no one is foolproof and really cross browsers (depending on which
browsers we want to include.)

Bruno

__
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] 3 column layout problem

[luciash]

cifroes wrote:



The layout i want is something like this: 3 column with a header, left 
and right column with fixed width and middle one without. 3 columns 
should fill out the entire horizontal available space. And when the 
center column has big content the scrollbars of browser should appear 
and the right column should be correctly displayed "at the right" of 
the center column.





hi,
try http://www.ground.cz/luci/css/my3cols.html
there's set overflow: auto for every div *contained inside div with 
class="content"* which adds scrollbars when the content of div expands 
the width for some reason

it's exactly here in the css file (applies also for *all* pre tags):

div.content div, pre {overflow: auto;}


you can add there also p tags if you want (, div.content p)

luci
--
:. :.: ::: :
luciash d' being aka luci alias Lukas Masek

__
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] IE6 crashing/Font Resizing issue

[Ingo Chao]

Pringle, Ron schrieb:

I have encountered a text resizing issue on my site using Internet Explorer
6 (XP and Win2K so far). When using "View / Text Size" and changing font
sizes multiple times on the same page, Internet Explorer crashes. 



http://tinyurl.com/d572t



Confirm crashing here.

#eventsearch { ... /*float: right;*/}

Seems to fix it here on a local copy. Maybe a start to look at, maybe not.
Good luck.

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] Vertical centering

[Pactum web services]

- Original Message - 
From: "Thomas Livingston" <[EMAIL PROTECTED]>

To: "Bruno Fassino" <[EMAIL PROTECTED]>
Cc: ; "'Uwe Kaiser'" <[EMAIL PROTECTED]>
Sent: Thursday, May 26, 2005 1:55 PM
Subject: Re: [css-d] Vertical centering




On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html


Hm. That looks very interesting. The problem I see, however, is that it 
requires a specified height. I would think, however, there would be a way 
around this.


Thanks for the link.

tim

Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.pactumgroup.com/tutorials/
Web dev FAQs: http://www.pactumgroup.com/tutorials/faq.php
Techblog: http://www.pactumgroup.com/techblog
** 



__
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] 3 column layout problem

[Barbara Dozetos]

Is this something like what you're looking for?  I found this site on a 
CSS design gallery site recently.


http://www.bhpbilliton.com/bb/home/home.jsp

Maybe it will give you an idea or two.

Barb

cifroes wrote:

The layout i want is something like this: 3 column with a header, left 
and right column with fixed width and middle one without. 3 columns 
should fill out the entire horizontal available space. And when the 
center column has big content the scrollbars of browser should appear 
and the right column should be correctly displayed "at the right" of 
the center column.



Thanks in advance for your answers
__
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/




--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] Vertical centering

[Thomas Livingston]

On May 26, 2005, at 3:54 PM, Bruno Fassino wrote:


vertical centering


How about this one?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Downsides to this method?


Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com

---
www.browsehappy.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] 3 column layout problem

[cifroes]

Hi,

I'm doing a 3column design like this:
http://glish.com/css/7.asp

But i have a small problem. My right column has a banner and my center 
column is my "content" column. The problem is when i show big images in 
my center column. In 800x600 the images are very big to show and the 
design has a big problem: the right column appears "in front" of the 
image in my center column.


what i would like is that right column also moves to the right and 
doesn't overlap with the center column even when the center column is big...


I know why this happens... i'm doing absolute positioning so this is the 
normal behaviour, my question is how can i achieve the layout i'm 
looking for?



The layout i want is something like this: 3 column with a header, left 
and right column with fixed width and middle one without. 3 columns 
should fill out the entire horizontal available space. And when the 
center column has big content the scrollbars of browser should appear 
and the right column should be correctly displayed "at the right" of the 
center column.



Thanks in advance for your answers
__
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] IE6 crashing/Font Resizing issue

[David Laakso]

On Thu, 26 May 2005 12:03:58 -0400, Pringle, Ron <[EMAIL PROTECTED]>  
wrote:


I have encountered a text resizing issue on my site using Internet  
Explorer

6 (XP and Win2K so far). When using "View / Text Size" and changing font
sizes multiple times on the same page, Internet Explorer crashes. Other
browsers seem to be fine.

I don't know if this is an issue with my CSS or a problem with MSIE  
itself.

I've checked Microsoft's knowledgebase and haven't found any mention of
issues with text resizing.

I declare a font size of 100% on my body tag and then use ems throughout  
for

all font sizes.

http://tinyurl.com/d572t

Win/XPSP2 ie6.0
Crashes browser when attempting to scale fonts,  while attempting to set  
options for accessibility mode, and when attempting to scale fonts once   
in accessibility mode. I have no-clue what's causing it. An off-the-wall  
suggestion: try removing the inline styles, particularly the inline IE5  
conditional comments? BTW, the first letter, of the first paragraph, of  
some pages is not on the same baseline as the rest of the text.

Regards,
Ron

Best,
David Laakso
--
http://www.dlaakso.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] re: space between table header and first table row

[Bruce Gilbert]

>I have a table with a table header followed by table rows with
>data...pretty standard. I can't get rid of the space that occurs
>between the table header(th) and the first table row(tr).

>I tried this, but still getting a space. Any suggestions?

>table th
>background-color:#99cdff;
>margin:0;
>padding:0;
>border:none;
}

Here is a link to the page I am referring to:

http://206.211.80.55/Administration/index.php

login with username:administrator, password:dpsweb#55

another issue, I am having is the submit button wraps to the second
line in IE6. I want it to fit right side of the form as in firefox.
Any suggestions on that would be appreciated as well.

TIA
-- 
::Bruce::
__
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] link style question

[Barbara Dozetos]

This did it.  I needed the :link on the a selectors to keep some name> tags from styling weirdly.  Thanks for the extra set of eyes!


Barb

Margaret Martin wrote:


Barb:

I'm no expert, but maybe this is the problem:

#main a:link:hover, #oldmain a:link:hover {
   color: #33a544;
   }
   
You don't need the word "link" in the middle. Try this:


#main a:hover, #oldmain a:hover {
   color: #33a544;
   }

instead.

I won't pretend to understand the logic behind it. I just know that I write my
rules this way and I get the behavior you're looking for.


Margaret A. Martin

[EMAIL PROTECTED]
Design for a Better World
www.hitthenail.com
 




--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] Vertical centering

[Bruno Fassino]

Uwe Kaiser wrote:

> It is just an idea of how to center a container vertically.
>
> http://www.kriton.de/CSS/zentrieren/alle-zentriert.html

I read on your page that you tested in older browsers, and that's a good
thing!
I just had a quick look, the vertical centering method seems similar to this
one [1], is this correct?
As Ingo mentioned in a recent message, an attempt to use "centering in the
viewport" in a more complex page, with elements protruding from the centered
part, showed a lot of problems with different browsers (and unfortunately
this type of centering doesn't work in IE/Mac, unless it is put in Quirks
mode.)

Bruno


[1] 

__
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] Best CSS Editor?

[Alex Robinson]

 css editor stuff <<<


Alright folks, moderator asleep at the wheel (or something like that)

Seeing that pretty much the same ground that usually gets covered 
when this topic comes up, could we just give it a rest?


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


That noise you just heard was the off-topic klaxon sounding
__
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] link style question

[Larry Israel]

Barbara,

> ok -- I think I've done it all right, but I still don't get the hover
> effect on my visited links.  check this page:
> http://www.pcc.com/newsletter/ as an example.

I think all you need to do is remove ":link" from your selectors, like this:

#main a:hover, #oldmain a:hover {
color: #33a544;
}

And if you want the hover style to have the same font-weight in both (I'm
not sure if you do), you need to define it explicitly (since you made it
bold in a:visited):

#main a:hover, #oldmain a:hover {
color: #33a544;
font-weight: normal;
}

Larry
__
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] link style question

[Barbara Dozetos]

Tim -- I'm pretty sure I've got it that way.  Do you see it differently?
http://www.pcc.com/newsletter/



You need to make sure you write them in the correct sequence in order 
for the cascade to work properly. For most purposes, you want: link, 
visited, hover, active.


tim




--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] link style question

[Ingo Chao]

Barbara Dozetos schrieb:
ok -- I think I've done it all right, but I still don't get the hover 
effect on my visited links.  check this page: 
http://www.pcc.com/newsletter/ as an example.


"The :link pseudo-class applies for links that have not yet been 
visited. The :visited pseudo-class applies once the link has been 
visited by the user. ... The two states are mutually exclusive" 
(http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes)


Your rule seems to assume that :link means any a element:

#main a:visited, #oldmain a:visited {
color: #1a76bc;
}
#main a:link:hover, #oldmain a:link:hover {
color: #33a544;
}

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] can't get rid of spacing between table header and fir st tablerow

[Pringle, Ron]

> I have a table with a table header followed by table rows with
> data...pretty standard. I can't get rid of the space that occurs
> between the table header(th) and the first table row(tr).
> 
> I tried this, but still getting a space. Any suggestions?
> 
> table th
> background-color:#99cdff;
> margin:0;
> padding:0;
> border:none;
> }
> -- 
> ::Bruce::

Bruce-

Can we see an example page with the full css?

Also, in your above code, you're missing the initial {

table th {


Regards,
Ron
__
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] link style question

[Barbara Dozetos]

ok -- I think I've done it all right, but I still don't get the hover 
effect on my visited links.  check this page: 
http://www.pcc.com/newsletter/ as an example.


And please resist the urge to tell me how silly the table layout is.  
I'm in the process of a redesign of the site and am having to add new 
headers and footers to old table layout pages.  I hate it, but it's 
getting better in stages.


Barb

Barbara Dozetos wrote:


Hello all --

I'm having a brain fart, I think.

Trying to style links.

Does a:visited override a:hover?

In other words, how do make the hover style be the same on both 
visited and unvisited links?


Barb




--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] link style question

[jordan WOLLMAN]

Barbara,

A:Link, A:Visited, A:Hover and A:Active are all states attached to the "a"
element. You can style each individually, and each will be show it's
respective style according to the users action.

To accomplish what you're asking you could write something like this:

A:Link {color:#333;}
A:Visited {color:#3C4;}
A:Hover {color:#000;}

That will style links, visited links, and hover links differently.

Sincerely,

Jordan WOLLMAN // Ariamedia Corporation
Creative Director


__
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't get rid of spacing between table header and first table row

[Bruce Gilbert]

I have a table with a table header followed by table rows with
data...pretty standard. I can't get rid of the space that occurs
between the table header(th) and the first table row(tr).

I tried this, but still getting a space. Any suggestions?

table th
background-color:#99cdff;
margin:0;
padding:0;
border:none;
}
-- 
::Bruce::
__
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] link style question

[Barbara Dozetos]

My issue is making the hover style work on visited links.  I want a:link 
and a:visited to look different, but I want either to do the same thing 
in hover.  Is there such a selector as a:visited:hover?


Barb

Mike Stickel wrote:

No, a:visited does not override a:hover. To ensure the same style for  
visited and unvisited links try the following:


a:link, a:visited {
style properties here
}




--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] link style question

[Mike Stickel]

On May 26, 2005, at 11:49 AM, Barbara Dozetos wrote:


Does a:visited override a:hover?

In other words, how do make the hover style be the same on both  
visited and unvisited links?


No, a:visited does not override a:hover. To ensure the same style for  
visited and unvisited links try the following:


a:link, a:visited {
style properties here
}

By including a comma after the first element and including a second  
element after the comma will make sure that both elements use the  
same style properties. There really isn't a limit to how many  
elements you can have in a row but it would be advisable to keep them  
manageable.


HTH,

Mike Stickel
Screenflicker Developments
www.screenflicker.com

p: 403-923-7667
e: [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] Best CSS Editor?

[Terence Ordona]

There's the IE Web Developer Accessories

http://www.microsoft.com/windows/ie/previous/webaccess/webdevaccess.mspx

Works in WinIE 5.x and 6.x, it's mainly for DOM inspection, but you can
view items such as currentStyle and the applicable css properties.

> Are there any for IE?
>
> On 5/26/05, Chris Ovenden <[EMAIL PROTECTED]> wrote:
>>
>> Oh, and I second the use of Firefox' Web Developer toolbar. Edit CSS
>> is grand, plus I use the View Style Information and various Outline
>> options to figure out what's going on in quirky layouts. If only there
>> were a similar tool for IE.
> __
> 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] link style question

[Barbara Dozetos]

Hello all --

I'm having a brain fart, I think.

Trying to style links.

Does a:visited override a:hover?

In other words, how do make the hover style be the same on both visited 
and unvisited links?


Barb

--
Barbara Dozetos ~ Web Designer/Graphic Designer
Physician's Computer Company  *  (p)802-846-5532
1 Main St., #7*  (f)802-846-8178
Winooski, VT 05404*  [EMAIL PROTECTED]
www.pcc.com

Pediatric software just got smarter. Your practice just got healthier.

__
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] suckerfish drop down issue in ie

[Pringle, Ron]

> i am unable to get the dropdowns to work correctly in ie pc and mac.  
> when i rollover sunfishes, grunts or remoras... i am unable to get to 
> the second or third item in the list which drops down before the list 
> disappears.  this does not happen in other browsers. any ideas?
> 
> http://andrea.blast.com/dropdown6.html
> the styles are embedded in this page
> 
> thanks for any assistance!
> 
> andrea 

Andrea-

You use different classes on the first nav item than you do on the rest,
with different margins applied. I would look at those margins.

If you move your mouse quickly enough, sometimes you can select the second
menu item.

I think whats happening is that for whatever reason, those margins are
creating a gap in IE and when you mouse over that "gap" you're essentially
mousing out of the menu and it is disappearing before you have a chance to
mouse over the next menu item.

I'm sorry I don't have time to nail down the exact fix at the moment, but
will try later if you can't solve it (or someone else doesn't figure it out
for you).

Regards,
Ron
__
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] SOLVED textline partly overlaps float

[Ingo Chao]

Bruno Fassino schrieb:
> I think it's really a bug. It looks like a variant of this:
> 
...
> It's odd that Safari shares exactly the same problem!

Yes, thank you for finding the bug! And as Georg remembered, it's an 
very old one. Bugzilla keeps being a miracle to me, but I was unsure 
about Safari sharing the bug, odd indeed, but the technical info from 
Adam is very reasonable: its just easier to use one point in the line box.


https://bugzilla.mozilla.org/show_bug.cgi?id=41412
see the attachment, looks equal:
https://bugzilla.mozilla.org/attachment.cgi?id=180508

Adam Kuehn schrieb:

... To me, it contemplates that the tops of 
any floats will always correspond with the tops of any encountered line 
boxes, and simply doesn't address the case presented here in which the 
top of the float is between the tops of content line boxes. The left 
float in this instance cannot be "placed on that line, aligned with the 
top of the line box" because the vertical position of the float has 
already been determined in reference to a different line box (i.e. the 
line box generated by the right floats).  Moving the float as this 
paragraph describes would cause the floated box to move too high.


Ah. Thanks for clarifying this to me.

Ideally, of course, one would hope that the UA would determine that the 
entire inline box of the text does not fit, and would reflow that line 
of content so it does not overlap.  However, nothing I can find in the 
spec actually requires that behavior, and I'm guessing the Gecko and 
Safari algorithms simplify by only calculating the top of each of the 
two boxes.  Since the float top was below the inline box top, my 
speculation is that those browsers simply stop there and do not reflow 
that line.


No matter if this is a bug according to the spec or not, I /should/ be a 
bug, we do not expect this overlapping, and there is no easy workaround.


Can you leave your sample page up a for a little while?  This seems like 
something to raise with the CSS WG, both for CSS 2.1 and the CSS3 box 
module, and with your permission, I'll submit your page to the WWW-Style 
mailing list.  


Yes, I will leave it as-is.

Thanks to all who had a look. Very helpful.

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] Best CSS Editor?

[Pactum web services]

- Original Message - 
From: "Chris Ovenden" <[EMAIL PROTECTED]>

> For a css doc
>
> /* CSS Document */
>
>
> Now. I don't really know why it would make a differnce..

It won't. Those are just comments.

Hmm, have you checked? DW does have a few quirks.


A comment is just a comment. /*this is just standard CSS comment code*/ And 
that's all that Dreamweaver is inserting.


Now, I delete it too. I know that my CSS document is a CSS document, so I 
hardly need to keep the comment at the beginning telling me that. But if 
that comment caused crashes, any comment you put in your CSS would do the 
same.


tim


Tim Gallant
http://www.pactumgroup.com

Basic tutorials: http://www.pactumgroup.com/tutorials/
Web dev FAQs: http://www.pactumgroup.com/tutorials/faq.php
Techblog: http://www.pactumgroup.com/techblog
**



__
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] Vertical centering

[Uwe Kaiser]

Hi,

It is just an idea of how to center a container vertically.

Don' care about german text.

http://www.kriton.de/CSS/zentrieren/alle-zentriert.html


regards
Uwe Kaiser

__
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] FW: Still having a problem with scope

[Chris W. Parker]

Chris W. Parker <>
on Thursday, May 26, 2005 10:23 AM said:

> p.printer_friendly a {
> text-size: xx-small;
> background: red;
> }
> 
> Why???

Because you're not paying attention Chris! It should be 'font-size' duh!

And of course I realize this IMMEDIATELY after I hit send! Ugh.
__
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] Still having a problem with scope

[Chris W. Parker]

Hello,

This time it's on a different item (never got the other one solved, will
come back to it later).


 
   Printer friendly
 


The following css only affects the background!

p.printer_friendly a {
text-size: xx-small;
background: red;
}

Why???



Thanks,
Chris.
__
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] suckerfish drop down issue in ie

[Andrea Burton]

i am unable to get the dropdowns to work correctly in ie pc and mac.  
when i rollover sunfishes, grunts or remoras... i am unable to get to 
the second or third item in the list which drops down before the list 
disappears.  this does not happen in other browsers. any ideas?


http://andrea.blast.com/dropdown6.html
the styles are embedded in this page

thanks for any assistance!

andrea 


__
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] textline partly overlaps float (the mysteries of float)

[Adam Kuehn]

Ingo Chao wrote:

Hi, while I was zooming the text-size in FF, I saw that
one line of text partly overlaps the red float.

http://www.satzansatz.de/cssd/tmp/lineinfloat.html

I have the feeling that the line box may not overlap the float. Or 
is floating meant as the upper left (0,0) corner of the line box to 
be floated? Only parts of the line box overlap.


So, when FF and Safari agree with overlapping the float, is this a 
bug? Or is it expected behavior? And if so, why? What do you think?


I think this is undefined in the spec.

As you say, it is Rule 5 in the float spec [1] that controls how high 
the outer top of the left floated box is.  If you remove the bottom 
margin from your floats (which confuses the issue visually), this 
means the top of the left float will be precisely 4.5em from the top 
of the containing block.  You'll be able to see that in FF and 
Safari, the overlap is precisely one-half of a line in the flowed 
text paragraph at most text sizes (rounding prevents exact alignment 
in some cases, but you can still see the basic problem).


So what is supposed to happen to that over-lapped line box?  The only 
place I could find in the spec that described the behavior between 
floats and inline boxes [2] had this to say:


"... Any content in the current line before a floated box is reflowed 
in the first available line on the other side of the float. In other 
words, if inline boxes are placed on the line before a left float is 
encountered that fits in the remaining line box space, the left float 
is placed on that line, aligned with the top of the line box, and 
then the inline boxes already on the line are moved accordingly to 
the right of the float (the right being the other side of the left 
float) and vice versa for rtl and right floats."


This language is very unclear.  To me, it contemplates that the tops 
of any floats will always correspond with the tops of any encountered 
line boxes, and simply doesn't address the case presented here in 
which the top of the float is between the tops of content line boxes. 
The left float in this instance cannot be "placed on that line, 
aligned with the top of the line box" because the vertical position 
of the float has already been determined in reference to a different 
line box (i.e. the line box generated by the right floats).  Moving 
the float as this paragraph describes would cause the floated box to 
move too high.


Ideally, of course, one would hope that the UA would determine that 
the entire inline box of the text does not fit, and would reflow that 
line of content so it does not overlap.  However, nothing I can find 
in the spec actually requires that behavior, and I'm guessing the 
Gecko and Safari algorithms simplify by only calculating the top of 
each of the two boxes.  Since the float top was below the inline box 
top, my speculation is that those browsers simply stop there and do 
not reflow that line.


Can you leave your sample page up a for a little while?  This seems 
like something to raise with the CSS WG, both for CSS 2.1 and the 
CSS3 box module, and with your permission, I'll submit your page to 
the WWW-Style mailing list.  Meanwhile, Gecko and Safari are clearly 
not exhibiting optimum behavior, so submitting this to Bugzilla and 
Apple would also be appropriate, if you would like to do that.


[1] 
[2] 

--

-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] textline partly overlaps float (the mysteries of float)

[Bruno Fassino]

Ingo Chao wrote:

> Hi, while I was zooming the text-size in FF, I saw that
> one line of text partly overlaps the red float.
>
> http://www.satzansatz.de/cssd/tmp/lineinfloat.html
[...]
> So, when FF and Safari agree with overlapping the float, is
> this a bug?
> Or is it expected behavior? And if so, why? What do you think?

I think it's really a bug. It looks like a variant of this:

(btw, is possible to get the text in the float and the outside text to
really overlap for almost an entire line box.)

It's odd that Safari shares exactly the same problem!

Bruno

__
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] float not working

[matthijs abeelen]

Sure!
It's all a little overwelming in the beginning, I know.

However, just start with the first and most important question: what
do you want to achieve?
Basicly, there are 3 options:
1) fixed width: give the containers a certain width in px. say, 750px
container, 250px leftcol, 500px maincol. Enough examples for this, for
example www.alistapart.com (also many, many excellent articles!)
2) fluid width: give everything a % width, and % margins. Example: the
excellent demo, also for the float techniques used -
http://www.orderedlist.com/demos/fne/
3) elastic design. in which basically the layout resizes with the
increasing or decreasing text sizes. Must reads:
http://www.alistapart.com/articles/elastic/
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

Further resources: some large linklists, maybe a bit too much but
always handy to know:
http://www.alvit.de/vf/en/essential-bookmarks-for-webdesigners-and-web-developers.html
http://www.skyzyx.com/resources/
http://www.bobbyvandersluis.com/main/linkLibrary.php
http://www.andybudd.com/links/cssweb_standards/index.php

Hope this helps, feel free to ask more. It really helps if you specify
your question and what you want to accomplish as specific as possible.

Matthijs

On 5/26/05, Silbert, Debra <[EMAIL PROTECTED]> wrote:
> Thanks, Matt:
> 
> I'm a little new to this.  I want the left content to always allow for
> the widest text, no matter what the resolution.  I also want to be sure
> the center content is kept at a reasonably easy to read width -- too
> many words are harder to view.
> 
> I'm sure how px vs. em vs % impacts any of this and which gives more
> exacting results.  Can you recommend a good Web resource for me to
> study?
> 
> Thanks!
> 
> Debbie
__
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] why doesn't this work in gecko browsers

[!!blue]

change your code to this:

table.borders { /*used when creating a table w/ borders*/
border:1px solid #d3d3d3;
padding:10px;
}

table.borders td { /*used when creating a td with borders*/
padding: .25em;
border: 1px solid #d3d3d3;
}



  


  






you only need to apply class="border" to the table, the second style
will apply the border to any TD inside any TABLE with the
class="border" attribute.

having two classes with the same name on two different html tags
doesn't work (at least I don't think so) it's better to use Descendant
Selectors.  :o)

read more here: http://css.maxdesign.com.au/selectutorial/index.htm 

hope that helps,
Zulema
-- 
!!blue
w e b  d e s i g n e r 
folio: http://zoblue.com
blog: http://blog.zoblue.com
browser: http://getfirefox.com

On 5/25/05, Bruce Gilbert <[EMAIL PROTECTED]> wrote:
> I am trying to do a table border in CSS and my border shows up in IE
> (PC), but not Gecko.
> 
> table.borders{/*used when creating a table w/ borders*/
> border:1px solid #d3d3d3;
> border-collapse:collapse;
> padding:10px;
> }
> 
> table td.borders {/*used when creating a td with borders*/
> padding: .25em;
> border: 1px solid #d3d3d3;
> border-collapse:collapse;
> }
> 
> it's a nested table, so maybe that's the issue?
> 
> eg:
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> any ideas?
> 
> TIA
> --
> ::Bruce::
__
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] textline partly overlaps float (the mysteries of float)

[Gunlaug Sørtun]

Ingo Chao wrote:

[moved from wsg to cssd]

Hi, while I was zooming the text-size in FF, I saw that one line of 
text partly overlaps the red float.


http://www.satzansatz.de/cssd/tmp/lineinfloat.html

...
So, when FF and Safari agree with overlapping the float, is this a 
bug? Or is it expected behavior? And if so, why? What do you think?


Me thinks this looks very much like an old Gecko-bug which make text in
the flow invade the area floats occupy - always from above. That may
explain similar behavior in Safari (old relatives).
It is definitely a bug.

I haven't paid any real attention to that bug for a couple of years,
since it hasn't bothered me, but I think it is/was even mentioned in
some CSS-Errata on the W3C site. I've also seen it in other old
bug-listings (not on Moz-site).
Might be worth a search...

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/

[css-d] Creating Space or Minimum DIV heights?

[Frank McClung]

Page Ref: http://www.computerrecycling.us/ssl/quoteonly.htm

 

I'm trying to make sure that the #leftcol div is always a little longer than
the #ebay div so that there is no overlap with the #mcfooter image and the
Find us on Ebay image. Yet, I still need the #leftcol to be able to expand
to allow for various lengths of text. I've been inserting multiple    to create the space to for #mcfooter to clear
#ebay. Is there a better way to do this? Is it possible to set a minimum div
height and still allow it to expand?

 

- Frank

__
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] IE6 crashing/Font Resizing issue

[Pringle, Ron]

I have encountered a text resizing issue on my site using Internet Explorer
6 (XP and Win2K so far). When using "View / Text Size" and changing font
sizes multiple times on the same page, Internet Explorer crashes. Other
browsers seem to be fine.

I don't know if this is an issue with my CSS or a problem with MSIE itself.
I've checked Microsoft's knowledgebase and haven't found any mention of
issues with text resizing.

I declare a font size of 100% on my body tag and then use ems throughout for
all font sizes.

http://tinyurl.com/d572t


If anyone knows of problems IE has relating to css font sizing or specific
element font sizing, or any other insights into my problems, I'd appreciate
the info.

TIA

Regards,
Ron
__
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] textline partly overlaps float (the mysteries of float)

[Ingo Chao]

[moved from wsg to cssd]

Hi, while I was zooming the text-size in FF, I saw that
one line of text partly overlaps the red float.

http://www.satzansatz.de/cssd/tmp/lineinfloat.html

- FFnightly20050525 and Moz1.6 on WinXPSP2, overlap on text zoom.

- Philippe (thanks) noted that the problem can be seen with Safari and 
Camino and a recent FFMac build too (depending on the zoom level).


- Opera8/Win shows no overlap.

(Opera7.54 has problems with upfloating the left float as high as 
possible rule8>rule5, and IE6 is another story, I know. We expect that 
the red float may not be higher than the last blue float, as of float 
rule 5, the red  box cannot move up further).


I have the feeling that the line box may not overlap the float. Or is 
floating meant as the upper left (0,0) corner of the line box to be 
floated? Only parts of the line box overlap.


So, when FF and Safari agree with overlapping the float, is this a bug? 
Or is it expected behavior? And if so, why? What do you think?


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] sliding doors and bottom margin/padding?

[Jim Gay]

the answer seemed to be adding a border-top to my navigation container.
after I did that, the navigation and the content area were flush.

On May 25, 2005, at 11:23 AM, Duckworth, Nigel wrote:


Remove the whitespace from between the  e.g.:

.. and so on

or you can comment out the space:

..

-Nigel

-Original Message-
I'm using A List Apart's Sliding Doors technique for my navigation,
but I'm having trouble in ie6 where there is a gap below the  
navigation.
It works fine in Firefox and Safari. http://www.saturnflyer.com/ 
insinga/


Does anyone have experience with getting the content below a  
sliding doors nav to butt up against the bottom of the nav?

Thanks, I'm having trouble figuring this one out.



__
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] size of new window

[Josh Moont]

try looking at this article for creating Accessible Pop-up Links

http://www.alistapart.com/articles/popuplinks/

Josh
__
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] Firefox and IE discrepancies

[Ingo Chao]

Vicky Etherington schrieb:

... I'm still struggling with the overflow problem in FF when I
apply it.  I have applied clear:both rules to the navigation and the #main
div, but FF still throws the content over to the right when the overflow:
auto rule is applied 


Hi Vicky,
the clear in #main was meant to prevent the left main to jump to the 
right when the text-size is zoomed: the left main was hooked  by the 
left floats in the navigation.


http://www.azuremarketing.com/clients/workham04/web/. 


#nav ul { ...
margin-bottom:0; /*OP*/
}

#sidebar { ...
margin: 6px 0pt 6px 0; /* FF */
overflow: auto;
float: right;   /* IE*/
...
}

(as mentioned by Graham, you'll have to change the margin-left when you 
overflow this container; because overflow disconnects the container from 
the left floats. To align it in all browsers to the right, I have chosen 
float:right.)


--

The general problem with this vertical centered design I have mentioned 
is that it is undefined to me what should happen if the content gets 
taller than the horizon. With this technique, you have to assign a 
height for the horizon. Now text-zooming will break it.


When you rely on scrollbars for the "sidebar", this does not solve for 
"main". Currently, main overflows the horizon, and the following "Hotels 
and Venues enter here" is pushed out of the horizon (maybe you have to 
move this to the footer?).


When you want to have scrollbars at the content, the links in main will 
scroll up. In the end, this vertical centered layout has not enough room.


To answer your question, I need to know what should happen when
a) the content at the right side grows
b) the content at the left side grows

Scrollbars make the impression that the paper was to small for the 
scratch, IMHO, but I am not a designer.


---

{ In principle, you'll need a vertical centering solution that will work 
with an /unknown/ height of the box, so it can expand in height and 
stays centered when the content gets taller (like a table-cell). But the 
disadvantage of such an attempt would be that the pages are getting 
different heights at worst. I have played with Bruno Fassino's vertical 
centering method,

http://www.brunildo.org/test/vertmiddle.html
with
http://www.brunildo.org/test/shrink_center_4.html
but the more complex the page gets, browser do not play well anymore:
http://www.satzansatz.de/photocenter.html
(technique and all bug fixes by Bruno, all bugs by me) }
---

So I think that the vertical centering is not a layout for normal pages 
with varying content, but I'd like to hear other opinions or suggestions 
for your layout, on-list.


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] size of new window

[Felix Miata]

anthony croshaw wrote:
 
> Does anyone know of a way you can control the size of a new browser window
> if you open it with a link like this;
 
> 
 
> Not usre if you can do it in css if you have a serpearte css file for the
> new page?

Compliant CSS controls the viewport contents, not a UA window. But why
do you want to do what users hate? All modern user agents provide the
ability to force links that want new windows to open in a new tab in the
current window, or the current tab or window.
-- 
"Through Him all things were made; without Him nothing was made
that has been made."John 1:3 NIV

 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-d] Firefox and IE discrepancies

[Graham]

Your problem seems to be with the left margin of the sidebar style.

Try

#sidebar {
BORDER-TOP: #75949e 2px solid; MARGIN: 6px 0px 6px 44px; FONT:
12px/18px Verdana, Arial, Helvetica, sans-serif; OVERFLOW: auto; WIDTH:
480px; COLOR: #30150e; HEIGHT: 199px; BACKGROUND-COLOR: #fff; border:1px
solid blue;
}
* html #sidebar{margin-left:264px;}

Regards

Graham Cook

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Vicky Etherington
Sent: Thursday, 26 May 2005 9:31 PM
To: Ingo Chao
Cc: css-d@lists.css-discuss.org
Subject: RE: [css-d] Firefox and IE discrepancies

Ingo, I really appreciated your advice, and you pointed out that I need to
set the height of various divs which has helped my layout a lot for lower
resolutions, but I'm still struggling with the overflow problem in FF when I
apply it.  I have applied clear:both rules to the navigation and the #main
div, but FF still throws the content over to the right when the overflow:
auto rule is applied (it's fine without it, although it obviously cuts the
content off)

I have uploaded the same layout WITH the overflow set to auto at:
http://www.azuremarketing.com/clients/workham04/web/. It looks fine in IE,
but viewing it in Firefox will show the problem.

If anyone has any suggestions as to how I can fix it, that would be great.

Many thanks.

-Original Message-
From: Ingo Chao [mailto:[EMAIL PROTECTED]
Sent: 24 May 2005 16:49
To: Vicky Etherington
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Firefox and IE discrepancies


Vicky Etherington schrieb:
...
> I'm also aware that I could do with adding an overflow: auto rule as Opera
> throws the content out of the bottom, but this totally throws my layout in
> Firefox.  The whole of the content box moves out to the right, and I'm not
> sure why, or how I can fix it.
...
>
> The page is at: http://www.azuremarketing.com/clients/workham04/web/
>

The vertical centering technique you are using
  http://www.hicksdesign.co.uk/journal/vertical--horizontal-centering-2
will not allow the content to expand the #wrapper, since the given
height is needed to pull the construct into the center with negative
margining.
So, if you want to set overflow:auto in #wrapper, you'll get scrollbars.
Note that the FF problem is due to the missing clearing of the
navigation floats, and will occur when you zoom the text too. Add
clear:both to #main to fix this.

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/

__
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] size of new window

[Prabhath Sirisena]

Looks like a case for a pop-up window if you want to control the window size. 

Accessify has a nice tutorial [1] that explains it pretty well. Go
through the article and the comments too.

BTW, target attribute is not available in XHTML Strict. Sitepoint has
a workaround [2] by Kevin Yank.

Prabhath
http://nidahas.com

[1] http://www.accessify.com/tutorials/the-perfect-pop-up.asp 
[2] http://www.sitepoint.com/article/standards-compliant-world


On 5/26/05, anthony croshaw <[EMAIL PROTECTED]> wrote:
> Does anyone know of a way you can control the size of a new browser window
> if you open it with a link like this;
> 
> 
> 
> Not usre if you can do it in css if you have a serpearte css file for the
> new page?
> 
> Cheers
> 
> anthony
> 
> __
> 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] Firefox and IE discrepancies

[Vicky Etherington]

Ingo, I really appreciated your advice, and you pointed out that I need to
set the height of various divs which has helped my layout a lot for lower
resolutions, but I'm still struggling with the overflow problem in FF when I
apply it.  I have applied clear:both rules to the navigation and the #main
div, but FF still throws the content over to the right when the overflow:
auto rule is applied (it's fine without it, although it obviously cuts the
content off)

I have uploaded the same layout WITH the overflow set to auto at:
http://www.azuremarketing.com/clients/workham04/web/. It looks fine in IE,
but viewing it in Firefox will show the problem.

If anyone has any suggestions as to how I can fix it, that would be great.

Many thanks.

-Original Message-
From: Ingo Chao [mailto:[EMAIL PROTECTED]
Sent: 24 May 2005 16:49
To: Vicky Etherington
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Firefox and IE discrepancies


Vicky Etherington schrieb:
...
> I'm also aware that I could do with adding an overflow: auto rule as Opera
> throws the content out of the bottom, but this totally throws my layout in
> Firefox.  The whole of the content box moves out to the right, and I'm not
> sure why, or how I can fix it.
...
>
> The page is at: http://www.azuremarketing.com/clients/workham04/web/
>

The vertical centering technique you are using
  http://www.hicksdesign.co.uk/journal/vertical--horizontal-centering-2
will not allow the content to expand the #wrapper, since the given
height is needed to pull the construct into the center with negative
margining.
So, if you want to set overflow:auto in #wrapper, you'll get scrollbars.
Note that the FF problem is due to the missing clearing of the
navigation floats, and will occur when you zoom the text too. Add
clear:both to #main to fix this.

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/

[css-d] Re: Toggle visibility in Media=Print only...

[David Dorward]

On 5/25/05, BabaGanush <[EMAIL PROTECTED]> wrote:
> Can one dynamically toggle display of an element for the "media=print"
> stylesheet only?

The easiest way would probably be to change the element.className and
define a class in your print media style sheet rather then trying to
edit the style sheet with JS.

-- 
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] Best CSS Editor?

[Scott Hamm]

Are there any for IE?

On 5/26/05, Chris Ovenden <[EMAIL PROTECTED]> wrote:
> 
> Oh, and I second the use of Firefox' Web Developer toolbar. Edit CSS
> is grand, plus I use the View Style Information and various Outline
> options to figure out what's going on in quirky layouts. If only there
> were a similar tool for IE.
__
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] size of new window

[anthony croshaw]

Does anyone know of a way you can control the size of a new browser window
if you open it with a link like this;

 

Not usre if you can do it in css if you have a serpearte css file for the
new page?

Cheers

anthony

__
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] Web Accessibility Toolbar [was Best CSS Editor? ]

[Christian Heilmann]

> I use the Web Accessibility Toolbar for IE available at:
> 
> http://www.nils.org.au/ais/web/resources/toolbar/index.html
> 
> which provides several tools I use regularly to assist with CSS development.

But you cannot edit the CSS on the fly, that is what makes the webdev
toolbar so handy.

Aardvark is also a great Extension for CSS debugging:
http://www.karmatics.com/aardvark/


-- 
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] help - CSS styled divider in between items on a page not working properly

[Chris Ovenden]

On 5/26/05, Luca Balboni <[EMAIL PROTECTED]> wrote:
> Hi Peter,
> I was thinking not to use  as a divider because I am using an
> image as a background and for what I know IE and Opera show a border
> around the image. Is this correct?
> Is anyone aware of any workaround?
> Thanks,
> Luca

You can kill the borders on images using CSS:

img { border-width:0 }

Even better than using an HR - which is not strictly structural markup
- perhaps you can add a bottom border to the DIV or P which precedes
it; eg:


p.last { padding-bottom:24px; border-bottom:8px solid black; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio
nisl, placerat ut, semper dictum, facilisis sed, purus. Praesent sit
amet sem id tellus consequat molestie. Class aptent taciti
sociosqu.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed odio nisl, placerat ut, semper dictum, facilisis sed, purus.
Praesent sit amet sem id tellus consequat molestie. Class aptent
taciti sociosqu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio
nisl, placerat ut, semper dictum, facilisis sed, purus. Praesent sit
amet sem id tellus consequat molestie. Class aptent taciti
sociosqu.

You can do this kind of thing even though you're using an image for
your divider:

p.last { padding-bottom:24px; background-image:url(dividerpic.jpg);
background-position:bottom; background-repeat:no-repeat; }

Chris
__
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] Web Accessibility Toolbar [was Best CSS Editor? ]

[Hershel Robinson]

> Oh, and I second the use of Firefox' Web Developer toolbar. Edit CSS
> is grand, plus I use the View Style Information and various Outline
> options to figure out what's going on in quirky layouts. If only
> there were a similar tool for IE.

I use the Web Accessibility Toolbar for IE available at:

http://www.nils.org.au/ais/web/resources/toolbar/index.html

which provides several tools I use regularly to assist with CSS development.

HTH,
Hershel

__
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] Best CSS Editor?

[Chris Ovenden]

Oh, and I second the use of Firefox' Web Developer toolbar. Edit CSS
is grand, plus I use the View Style Information and various Outline
options to figure out what's going on in quirky layouts. If only there
were a similar tool for IE.

C
__
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] Best CSS Editor?

[Chris Ovenden]

On 5/26/05, Pactum web services <[EMAIL PROTECTED]> wrote:
> - Original Message -
> From: "Mickey Slater" <[EMAIL PROTECTED]>
> > Have you ever noticed that this problem mostly occurs when you are editing
> > a
> > CSS or JS file that you didn't create from scratch?
> >
> > That's because dreamweaver adds its own little tags to first line of the
> > file.
> >
> > For example. For a JS doc...
> >
> > // JavaScript Document
> >
> > For a css doc
> >
> > /* CSS Document */
> >
> >
> > Now. I don't really know why it would make a differnce..
> 
> It won't. Those are just comments.
> 
Hmm, have you checked? DW does have a few quirks.

I must say I use DW MX2004 to edit CSS all the time, mainly because it
has excellent code hints. I always delete that initial comment when DW
makes a new CSS file, but that doesn't mean it has no relevance to
crashing. (I haven't discerned any pattern to when DW crashes on me,
but I'll be alert to the possibility now.)

I also use JEdit quite a bit, and there is a plugin which gives quite
good CSS support (but no code hints).

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