Re: [css-d] Fixed div and Anchors

[Nic Pulford]

Hi Georg,

It took some working out as it does not work with an anchor, you need a div
Then if the height of the header is 50px then the div style should be
margin-top: -50px; height: 50px; width: 1px; it then goes fine for right at
the top. By increasing both values you can bring the anchor point down a bit
which is good.

Thanks for that.

Nic



-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: 20 June 2008 18:24
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Fixed div and Anchors

Nic Pulford wrote:
> Some time ago, about a year I think, there was some discussion about
>  using fixed divs to fix a header at the top of the page and allow
> the main content to scroll under it, this requires a spacer at the
> top of the content to make the viewable start of the page below the
> header. The problem comes when the site uses anchors the browsers of
> course make sure the anchor is at the top of the page, which is under
> the header. Is there a good solution to making the anchor appear so
> you can see it.

I've solved the problem in one particular case [on CSS-D] by styling the
anchor with an invisible top-extension - 1px wide and as tall as the
fixed header + the part you want to see. That'll let the browsers align
the anchor at the top and keep the relevant content down where it's visible.
I can probably dig up my local demo-case again (one day) if necessary,
but it shouldn't be too hard to style an in-page anchor to achieve such
an offset effect.

(I prefer fixed footers and sidebars myself, so I don't run into the
problem.)

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

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

Re: [css-d] Page Check - my first fully CSS page multi column layout

[David Laakso]

Barrett wrote:
> Good to hear it works so far.
> Yeah the background color has been a paradox of just what you say and 
> the known "branding" of the site now for so many years.
>
>
>
>
> Barrett
>
>>> http://beta.handmade-paper.us/page/CPO/CTGY/mbt
>>>
>>>
>





The most beautiful thing we can experience is the mysterious. It is the 
source of all true art and science.
 -- Albert Einstein
  US (German-born) physicist (1879 - 1955)





-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Page Check - my first fully CSS page multi column layout

[Barrett]

Good to hear it works so far.
Yeah the background color has been a paradox of just what you say and  
the known "branding" of the site now for so many years.

I have contemplated seeing if someone could help me come up with some  
sort of javascript chunk where I could allow the user to change  
the .prod_iteration style to a couple preset colors like grey, black,  
or white.

Thanks,
Barrett
AOL/AIM handmadepaperus

On Jun 20, 2008, at 12:39 PM, David Laakso wrote:
> Barrett wrote:
>> http://beta.handmade-paper.us/page/CPO/CTGY/mbt
>>
>> See what you think - tear it up.
>>
>> Barrett
>>
>
>
> Seems fine to me in Mac Opera, FF, Camino, and Safari; and, in XP  
> IE/7 and IE/6.
>
> Holds decent font-scaling and folds well from a full to narrow  
> window cross-browser.
>
> FWIW, I deleted your background-image and background-color as they  
> made the text difficult for me to read; and, that color is picked- 
> up and has a very negative impact on each and every one of those  
> nice color swatches you are pushing...
>
> -- 
> http://chelseacreekstudio.com/
>

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

Re: [css-d] CSS Roll Over Problem Help

[Christopher]

So I have one  now with just a background image.  I have to create 
three other  ? And each one
being a :hover and a :active?



Alan K Baker wrote:
> Probably because you need to set the nav up as a 
>
> and declare #menu li a
>   #menu li a:hover
>   #menu li a:active
>
> Take a look at www.virtualtheatreorgans.com
> All of the nav tabs are inline rollovers using a combined 3 image .jpg
> CSS is at: www.virtualtheatreorgans.com/scripts/stylesheet.css
>
> Regards, 
>  
> Alan.
>  
> www.theatreorgans.co.uk
> www.virtualtheatreorgans.com
> Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
> Shopsmith 520 + bits
> Flatulus Antiquitus
>
>
>   - Original Message - 
>   From: Christopher 
>   To: css-d@lists.css-discuss.org 
>   Sent: Friday, June 20, 2008 12:22 PM
>   Subject: [css-d] CSS Roll Over Problem Help
>
>
>   Hi, I have my  called navigation then I have navigation:hover but 
>   this does not work ? I know I'm missing a step could it be a link cause 
>   the graphic needs to be one big graphic BUT specific areas on the 
>   graphic will have links to other pages NOT the whole graphic:
>
>   #menu a {
>  background: url("button.gif") 0 0 no-repeat;
>  ...
>  }
>   #menu a:hover {
>  background-position: -157px 0;
>  ...
>  }
>   #menu a:active {
>  background-position: -314px 0;
>  ...
>  }
>
>   ...with all 3 states in one big graphic.
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Roll Over Problem Help

[Alan K Baker]

Probably because you need to set the nav up as a 

and declare #menu li a
  #menu li a:hover
  #menu li a:active

Take a look at www.virtualtheatreorgans.com
All of the nav tabs are inline rollovers using a combined 3 image .jpg
CSS is at: www.virtualtheatreorgans.com/scripts/stylesheet.css

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


  - Original Message - 
  From: Christopher 
  To: css-d@lists.css-discuss.org 
  Sent: Friday, June 20, 2008 12:22 PM
  Subject: [css-d] CSS Roll Over Problem Help


  Hi, I have my  called navigation then I have navigation:hover but 
  this does not work ? I know I'm missing a step could it be a link cause 
  the graphic needs to be one big graphic BUT specific areas on the 
  graphic will have links to other pages NOT the whole graphic:

  #menu a {
 background: url("button.gif") 0 0 no-repeat;
 ...
 }
  #menu a:hover {
 background-position: -157px 0;
 ...
 }
  #menu a:active {
 background-position: -314px 0;
 ...
 }

  ...with all 3 states in one big graphic.

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

Re: [css-d] CSS Roll Over Effect - CONT'D

[Christopher]

So you gotta have three images in one image, but after Google sprites, 
if I have one image how do I tell CSS to load each image for as in hover 
etc using a background image (and using dreamweaver) if it's a image and 
not a tag ?



Ben Fider wrote:
> I think you are referring to CSS sprites:
>
> http://www.google.com/search?hl=en&q=css+sprites&btnG=Google+Search
>
> For example, see:
>
> http://businessweek.com/
>
> Top nav image file:
>
> http://images.businessweek.com/gen/nav/global_nav_20071220.gif
>
>
> On Thu, Jun 19, 2008 at 8:36 PM, Christopher <[EMAIL PROTECTED]> wrote:
>
>   
>> Hi, I have my  called navigation then I have navigation:hover but
>> this does not work ? I know I'm missing a step could it be a link cause
>> the graphic needs to be one big graphic BUT specific areas on the
>> graphic will have links to other pages NOT the whole graphic:
>>
>> #menu a {
>>   background: url("button.gif") 0 0 no-repeat;
>>   ...
>>   }
>> #menu a:hover {
>>   background-position: -157px 0;
>>   ...
>>   }
>> #menu a:active {
>>   background-position: -314px 0;
>>   ...
>>   }
>>
>> ...with all 3 states in one big graphic.
>>
>>
>> __
>> css-discuss [EMAIL PROTECTED]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] extra right padding/margin in IE6

[Matijs]

display: inline; on the divs for IE6... it sounds like the famous Double
Margin bug

On Thu, Jun 19, 2008 at 9:18 PM, Andrew Gaffney <[EMAIL PROTECTED]> wrote:

> David Hucklesby wrote:
> > On Wed, 18 Jun 2008 17:37:41 -0500, Andrew Gaffney wrote:
> >> I've got a weird issue with a site that I'm working on.
> >>
> >> URL: http://www.fathertime.com/dev/
> >> CSS: http://www.fathertime.com/dev/StyleSheet.css
> >>
> > [...]
> >> In IE6, it's a different story. The boxes extend 10px or so farther to
> the right than
> >> they're supposed to. You can see it on the right when you compare the
> "Your Account"
> >> box and the "Sponsored Ads" box. Both are supposed to be 162px.
> >>
> >
> > I'm not seeing this problem at my end. Admitted, I am using IE 6
> > as a "standalone." Did you fix it?
>
> Yes, it's been fixed already with help from other list members.
>
> > FWIW - the white text on light blue is hard to read. Especially
> > when "frozen" at 11px.
>
> I'll pass that on to the designer :P
>
> --
> Andrew Gaffney
> agaffney.org
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Roll Over Effect - CONT'D

[Ben Fider]

I think you are referring to CSS sprites:

http://www.google.com/search?hl=en&q=css+sprites&btnG=Google+Search

For example, see:

http://businessweek.com/

Top nav image file:

http://images.businessweek.com/gen/nav/global_nav_20071220.gif


On Thu, Jun 19, 2008 at 8:36 PM, Christopher <[EMAIL PROTECTED]> wrote:

> Hi, I have my  called navigation then I have navigation:hover but
> this does not work ? I know I'm missing a step could it be a link cause
> the graphic needs to be one big graphic BUT specific areas on the
> graphic will have links to other pages NOT the whole graphic:
>
> #menu a {
>   background: url("button.gif") 0 0 no-repeat;
>   ...
>   }
> #menu a:hover {
>   background-position: -157px 0;
>   ...
>   }
> #menu a:active {
>   background-position: -314px 0;
>   ...
>   }
>
> ...with all 3 states in one big graphic.
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multisite/language css

[David Hucklesby]

On Fri, 20 Jun 2008 12:12:05 +0100, Ant Tyler wrote:
> I'm starting to rework a number of sites for a client with an overly complex 
> set of css
> sheets, does anyone have any resource or pointers to correct practice for 
> this? 

I don't think there's a "correct practice" as such. Like any design
decision, it's usually a matter of compromise with sometimes
conflicting needs.

Having failed to answer your question, I offer this link to a program
that should help you eliminate rules that are unnecessary / unused:

  

Cordially,
David
--

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

Re: [css-d] CSS Roll Over Effect - CONT'D

[David Hucklesby]

On Thu, 19 Jun 2008 21:36:48 -0400, Christopher wrote:
> Hi, I have my  called navigation then I have navigation:hover but this 
> does not
> work ? I know I'm missing a step could it be a link cause the graphic needs 
> to be one
> big graphic BUT specific areas on the graphic will have links to other pages 
> NOT the
> whole graphic:
>
> #menu a {
> background: url("button.gif") 0 0 no-repeat;
> ...
> }
> #menu a:hover {
> background-position: -157px 0;
> ...

You don't say so, but I assume you are talking about Internet Explorer
here. The poor thing needs an extra "boost" to react on ":hover".

Try an added declaration to the hover rule that's *not* in the rule
for "a", like "float: none;" or "text-indent: 0;"

This article has more information:

 

Cordially,
David
--

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

Re: [css-d] Gap btwn header img and menu IE6; body bckgrnd img below footer everywhere but Mozilla

[Wardeh Harmon]

Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:

Add...

div#header {overflow: hidden;}

...to prevent "auto-expansion" in IE6.


Thank you. That worked perfectly.


2: the script at the bottom creates space below footer in all my
browsers - including Firefox. Suggest you include them in the div#footer
where they'll do no visual harm.

2: you have a mismatch of div-container start- and end-tags - see
validator...and this means several div-containers get closed too early -
including the div#wrapper.


Yes, you're right. I found and corrected that. Thank you so much.

 
3. see validator-report again. The source-code clearly isn't up to
standard - especially not any XHTML standard, and the many errors may
introduce even more cross-browser inconsistencies.


I see it is showing errors. I will keep looking into that. I would like for my 
site to validate.

Thank you again. You've been so helpful.

~Wardeh Harmon
Oregon, USA

Such Treasures ~ Where your treasure is, there your heart will be also.~ 
Matthew 6:21

GNOWFGLINS™ ~ Embracing "God's Natural, Organic, Whole Foods, Grown Locally, In 
Season"
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Fixed div and Anchors

[Gunlaug Sørtun]

Nic Pulford wrote:
> Some time ago, about a year I think, there was some discussion about
>  using fixed divs to fix a header at the top of the page and allow
> the main content to scroll under it, this requires a spacer at the
> top of the content to make the viewable start of the page below the
> header. The problem comes when the site uses anchors the browsers of
> course make sure the anchor is at the top of the page, which is under
> the header. Is there a good solution to making the anchor appear so
> you can see it.

I've solved the problem in one particular case [on CSS-D] by styling the
anchor with an invisible top-extension - 1px wide and as tall as the
fixed header + the part you want to see. That'll let the browsers align
the anchor at the top and keep the relevant content down where it's visible.
I can probably dig up my local demo-case again (one day) if necessary,
but it shouldn't be too hard to style an in-page anchor to achieve such
an offset effect.

(I prefer fixed footers and sidebars myself, so I don't run into the
problem.)

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

Re: [css-d] Page Check - my first fully CSS page multi column layout

[David Laakso]

Barrett wrote:
> http://beta.handmade-paper.us/page/CPO/CTGY/mbt
>
> See what you think - tear it up.
>
> Barrett
>   


Seems fine to me in Mac Opera, FF, Camino, and Safari; and, in XP IE/7 
and IE/6.

Holds decent font-scaling and folds well from a full to narrow window 
cross-browser.

FWIW, I deleted your background-image and background-color as they made 
the text difficult for me to read; and, that color is picked-up and has 
a very negative impact on each and every one of those nice color 
swatches you are pushing...

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Gap btwn header img and menu IE6; body bckgrnd img below footer everywhere but Mozilla

[Gunlaug Sørtun]

Wardeh Harmon wrote:

> http://suchtreasures.com/2008/06/19/thrift-store-report-10/

> Only in IE6, the header of my site is too tall and extends below the 
> header image separating the header image from the menu with a gap.

Add...

div#header {overflow: hidden;}

...to prevent "auto-expansion" in IE6.

> Also... in IE6, IE7, and Opera (the only other browsers I've tested 
> besides Mozilla) I have an issue with the background image I use to 
> make the sidebars go all the way to the footer. The image skips the 
> footer but then starts up again just after the footer.

2: the script at the bottom creates space below footer in all my
browsers - including Firefox. Suggest you include them in the div#footer
where they'll do no visual harm.

2: you have a mismatch of div-container start- and end-tags - see
validator...



...and this means several div-containers get closed too early -
including the div#wrapper.

3: see validator-report again. The source-code clearly isn't up to
standard - especially not any XHTML standard, and the many errors may
introduce even more cross-browser inconsistencies.

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

[css-d] Fixed div and Anchors

[Nic Pulford]

Some time ago, about a year I think, there was some discussion about using
fixed divs to fix a header at the top of the page and allow the main content
to scroll under it, this requires a spacer at the top of the content to make
the viewable start of the page below the header. The problem comes when the
site uses anchors the browsers of course make sure the anchor is at the top
of the page, which is under the header. Is there a good solution to making
the anchor appear so you can see it.

 

Regards

Nic

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

[css-d] Page Check - my first fully CSS page multi column layout

[Barrett]

Page Check - my first fully CSS page multi column layout
http://beta.handmade-paper.us/page/CPO/CTGY/mbt

See what you think - tear it up.
This page only as I have not verified other templates on the site.
Navbar is not done yet.
Page should be a fully fluid multi column layout - no tables.
The CSS is likely dangerous in my hands and I'm wide open for  
corrections on all the floats and clears etc.

I made extensive use of the CSSedit on this project and Golive for  
some syntax checking of other code etc.
The page validates with no error as 4.01 Transitional.

Thanks,
Barrett
AOL/AIM handmadepaperus

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

[css-d] Gap btwn header img and menu IE6; body bckgrnd img below footer everywhere but Mozilla

[Wardeh Harmon]

Only in IE6, the header of my site is too tall and extends below the header 
image separating the header image from the menu with a gap.

Also... in IE6, IE7, and Opera (the only other browsers I've tested besides 
Mozilla) I have an issue with the background image I use to make the sidebars 
go all the way to the footer. The image skips the footer but then starts up 
again just after the footer.

http://suchtreasures.com/2008/06/19/thrift-store-report-10/

I would appreciate any help you can offer. Please excuse the other issues of my 
beginner CSS skills, which I think I can solve with time (border on smileys, 
poor alignment of sidebar elements). I appreciate the stated guidelines for 
this list, which are encouraging to beginners like me.

~Wardeh Harmon
Oregon, USA


Such Treasures ~ Where your treasure is, there your heart will be also.~ 
Matthew 6:21

GNOWFGLINS™ ~ Embracing "God's Natural, Organic, Whole Foods, Grown Locally, In 
Season"
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] positioning inside table cell?

[Wellington Fan]

Bobby Jack wrote:
> --- On Thu, 6/19/08, Ingo Chao <[EMAIL PROTECTED]> wrote:
>
>   
>> CSS 2.1: 9.1.3 leaves position:relative on elements with
>> table-* undefined.
>> 
>
> That's 9.3.1, for those following along :)
>
> http://www.w3.org/TR/CSS21/visuren.html#choose-position
>   

Thank you, List! Once again proving: it never hurts to RTFM...

--
Wellington



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

Re: [css-d] Multiple float 'columns' and gutters

[Bruno Fassino]

On Fri, Jun 20, 2008 at 3:15 PM, Bobby Jack wrote:
> Hi all,
>
> I'm working with a design that aligns several (well, 2, 3, or 4) 'panels' in 
> a 2 'column' grid, a bit like:
>
> [1] [2]
> [3] [4]
>
[...]
>
> My immediate thought to fix this was to float the 4 panels to the left, 
> assign left and right margins (half the gutter width) to them, and introduce 
> an intermediate wrapper between the existing fixed-width box and the panels, 
> then set negative left/right margins on this new wrapper. Works like a treat 
> in Firefox, falls down horribly in IE.
>
> Anyone have any better solutions? I want to avoid CSS hacks to 'fix' IE, if 
> at all possible (but can ignore IE5). 'Real' examples at:
>
> http://www.fiveminuteargument.com/single-gutter-multiple-floats


Don't know if the following falls in the "CSS hacks" category that you
want to avoid, anyway you can make your method work in IE giving
hasLayout to your intermediate wrapper (try for example giving it
width:240px)  This seems sufficient for IE7. For IE6 and lower you
have to add display:inline to your floats to fix the margin doubling
(and this is a harmless fix even if sent to all browsers.)

Bruno


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

[css-d] CSS Roll Over Problem Help

[Christopher]

Hi, I have my  called navigation then I have navigation:hover but 
this does not work ? I know I'm missing a step could it be a link cause 
the graphic needs to be one big graphic BUT specific areas on the 
graphic will have links to other pages NOT the whole graphic:

#menu a {
   background: url("button.gif") 0 0 no-repeat;
   ...
   }
#menu a:hover {
   background-position: -157px 0;
   ...
   }
#menu a:active {
   background-position: -314px 0;
   ...
   }

...with all 3 states in one big graphic.


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

[css-d] Multiple float 'columns' and gutters

[Bobby Jack]

Hi all,

I'm working with a design that aligns several (well, 2, 3, or 4) 'panels' in a 
2 'column' grid, a bit like:

[1] [2]
[3] [4]

These are contained in a fixed-width box, and the mechanism currently used is 
to float 1 & 3 to the left, float 2 & 4 to the right, assign fixed widths, and 
leave the remaining width as the gutter. While this works, if anyone updates 
the panels by swapping their order, and forgets to reassign the class names, 
everything breaks down.

The challenge is to 'bulletproof' this design, whilst keeping all widths at 
their current values.

My immediate thought to fix this was to float the 4 panels to the left, assign 
left and right margins (half the gutter width) to them, and introduce an 
intermediate wrapper between the existing fixed-width box and the panels, then 
set negative left/right margins on this new wrapper. Works like a treat in 
Firefox, falls down horribly in IE.

Anyone have any better solutions? I want to avoid CSS hacks to 'fix' IE, if at 
all possible (but can ignore IE5). 'Real' examples at:

http://www.fiveminuteargument.com/single-gutter-multiple-floats

Cheers,

- Bobby


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

[css-d] Multisite/language css

[Ant Tyler]

I'm starting to rework a number of sites for a client with an overly complex
set of css sheets, does anyone have any resource or pointers to correct
practice for this? I'm thinking of combining serveral sheets into a main
sheet then a reset and local language mods sheets, all ideas welcome.
Ant

-- 
Ant Tyler
Creative Design Solutions
Web Design - Photography - Digital Imaging - Graphics
www.atyler.co.uk
www.antcom.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Check out cool sites I found on StumbleUpon

[sunlust]

Krys's avatar
http://www.stumbleupon.com/redirect.php?t=j&u=9246482&d=http%3A%2F%2Fwww.stumbleupon.com%2Fjoin.php%3Ffriend%3D2743910%26emailcode%3Dhaflog5t5i10l4p2b&l=1&c=haflog5t5i10l4p2b

Hi,


Krys is a member of StumbleUpon and would like to
send you an invitation. With StumbleUpon you can
discover websites, pictures and videos that match
your interests-and discover your friends'
Favorites.

It is free to join and only takes a minute to sign
up!

   Join StumbleUpon Now &
http://www.stumbleupon.com/redirect.php?t=j&u=9246482&d=http%3A%2F%2Fwww.stumbleupon.com%2Fjoin.php%3Ffriend%3D2743910%26emailcode%3Dhaflog5t5i10l4p2b&l=2&c=haflog5t5i10l4p2b
 



- Krys
About StumbleUpon
StumbleUpon is a toolbar that let you discover
website, pictures and videos recommended by your
friends and like-minded people.  



It's Free and Easy to download.
You have received this email because Krys
([EMAIL PROTECTED]) directly invited you to join
his/her community on StumbleUpon.



If you prefer not to receive any StumbleUpon
invitations by email:
click here
http://www.stumbleupon.com/redirect.php?t=j&u=9246482&d=http%3A%2F%2Fwww.stumbleupon.com%2Fnotifications.php%3Femailcode%3Dhaflog5t5i10l4p2b&l=4&c=haflog5t5i10l4p2b




We take your privacy very seriously.  To read our
privacy policy and see how we use the information
you give us, visit our website at
http://www.stumbleupon.com/privacy.html
http://www.stumbleupon.com/privacy.html 

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

Re: [css-d] (no subject)

[july stingna]

Hi Lee Bettridge:

you can use this IE hack:

element {
  min-height: 200px;
  height: auto !important;
  height: 200px;
}


Stingna Zhou
RainCity Studios Inc.
Designer
www.raincitystudios.com




>
> Lee Bettridge wrote:
>
> > Is there a way to set a min-height in IE6 so that an element can grow
> >  if the text size is increased, the method needs to be compatible
> > with IE7 and Firefox / Safari / Opera.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] positioning inside table cell?

[Bobby Jack]

--- On Thu, 6/19/08, Ingo Chao <[EMAIL PROTECTED]> wrote:

> CSS 2.1: 9.1.3 leaves position:relative on elements with
> table-* undefined.

That's 9.3.1, for those following along :)

http://www.w3.org/TR/CSS21/visuren.html#choose-position


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