[css-d] Putting IE6 out to pasture

[Martyn Merrett]

Hi folks,

Thought you'd be interested in this.
Could this *finally* be the end of IE6 and our CSS woes?

http://weblog.200ok.com.au/2009/03/putting-ie6-out-to-pasture.html

~Mx
http://www.mxdx.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Martyn Merrett wrote:

> Thought you'd be interested in this. Could this *finally* be the end 
> of IE6 and our CSS woes?

Yes, in time IE6 will disappear - the sooner the better, but the
suggested 'options for "not supporting" ie6' are time-consuming and
don't provide quick relief for designers/developers.

This is quick and painless...

...and can leave IE6 with no styles or with minimal styling in no time,
almost regardless of how one organizes ones site and CSS.

I prefer the "minimal styles" route - as shown for my article, but will
probably follow the "no change" route site-wide and for client work
until IE7 disappears too.
IE7 for the most part falls into the same "bug-category" as IE6, and is
in need of the same fixes as its predecessor(s), or variants thereof,
anyway - at least the way I work :-)

More on the issue...



Stay updated: 

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
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] double borders. A different story in IE?

[Jon Wickström]

Hi,

I'm trying to style a horizontal menu with double borders on the active LI menu 
item. There is some use of nested floating, as I want to use blocks for the LI 
to get them an even width. IE (7, haven't even tried 6) just gets it plain 
wrong (from my point of view). The double border seems to work differently in 
IE compared to all other browsers I've tried (FF, Opera, Chrome). IE renders 
the "middle" line in a double border transparent. All other browsers use the 
elements bg-color. IE also shows som strange stuff with the alignment. The 
borders overlap the parent elements borders. Some kind of collapsing borders in 
IE?!?! Is this really the case or is my CSS/HTML just broken in IE? One huch I 
have is that IE is using it's own box model, not the standard compliant? I 
vaguely remember something about IE not including the borders inside the box.

The look I'm after is a "double border" with the inner border the same color as 
the parent bg, and the outer the element bg. This I get in all sane browsers by 
specifying the parent bg as the border color and the border style "double". 
This gives me a separated border with the element bg color. In the example I 
use red, not the parent backgroundborder color, to see the border clearly.

The green border is just for your viewing pleasure. It is a div used for markup 
to center the menu. If anybody has a cleaner centering-solution, I'd bee happy 
to look at it.

For a test-case see:
http://www.ekebodagis.fi/ekebo/test.html

Regards,
   Jon Wickström
__
css-discuss [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Virgilio Quilario]

>> Thought you'd be interested in this. Could this *finally* be the end
>> of IE6 and our CSS woes?
>
> Yes, in time IE6 will disappear - the sooner the better, but the
> suggested 'options for "not supporting" ie6' are time-consuming and
> don't provide quick relief for designers/developers.
>
> This is quick and painless...
> 
> ...and can leave IE6 with no styles or with minimal styling in no time,
> almost regardless of how one organizes ones site and CSS.
>
> I prefer the "minimal styles" route - as shown for my article, but will
> probably follow the "no change" route site-wide and for client work
> until IE7 disappears too.
> IE7 for the most part falls into the same "bug-category" as IE6, and is
> in need of the same fixes as its predecessor(s), or variants thereof,
> anyway - at least the way I work :-)
>
> More on the issue...
> 
> 
>
> Stay updated: 
>
> regards
>        Georg
> --
> http://www.gunlaug.no

nice articles.
working on css to deal with ie6 is really time consuming.
not to mention the troubles of getting ie6 browser for testing.

virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[Virgilio Quilario]

> Here's the problem:
> - building a horizontal tabbed navigation bar with these conditions:
>
> 1. equal width of tabs
> 2. centered to the width of the body
> 3. preserve centering when adding/subtracting tabs [dynamically generated 
> links/tabs]
>
> All menus based upon the  type of lists use a float:left or right 
> approach. You can center a list if it's enclosed in a div with a fixed width. 
> However, as mentioned above, this is not a solution to my problem since the 
> tabs are dynamically generated.
>
> The tabs can be centered eliminating the float, but, you loose the equal 
> width condition.
>
> Any ideas would be greatly appreciated. Needs to work in IE6 and all normal 
> browsers.

dynamically generated you mean using javascript?
if so, use javascript to center it everytime a tab is added or deleted.
specifically, use it to set css left to 50% and margin to negative
half of width.

Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
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] External Links

[Virgilio Quilario]

> I'm wanting to add indicators for links that leave our site.  A little
> Googling included this info from MaxDesign:
> 
>
> I noticed the 2005 date of the article and just wondered if the info
> presented is still considered a good method or is there something
> better now?
>
> I'd be open to any good examples you folks have of nice external link
> style treatments.
>
> Chris A.

hi Chris,

here's a css solution for indicating external links.
no need to add html tags, just put on the css.
http://www.bestwebbuzz.com/highlighting-different-types-of-link-part-1.html

Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
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] ADMIN: Putting IE6 out to pasture

[Eric A. Meyer]

At 10:51 AM +0100 4/2/09, Martyn Merrett wrote:

>Could this *finally* be the end of IE6 and our CSS woes?
>
>http://weblog.200ok.com.au/2009/03/putting-ie6-out-to-pasture.html

css-d isn't the right place to argue about which browsers one 
should or shouldn't support/test in/care about, which too often 
borders on being a religious discussion.
css-d is the right place to work out solutions to CSS problems in 
browsers, and work out the limitations in CSS support in browsers, 
and by "browsers" I mean any browser that has some level of CSS 
support.
So let's not debate the linked article here, please.  Thank you.

-- 
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Virgilio Quilario wrote:

> working on css to deal with ie6 is really time consuming. not to
> mention the troubles of getting ie6 browser for testing.

Both TredoSoft "multiple versions of IE"...

...and IETester...

...work well enough for comfort in a windows PC environment.

Various VM-Ware should make the above work well enough in Linux and
Mac-OS environments, for testing purposes.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[Bill Brown]

AG wrote:
> Here's the problem: - building a horizontal tabbed navigation bar
[snipped]
> Any ideas would be greatly appreciated. Needs to work in IE6 and all
> normal browsers.

Something like this?

~~~ [CSS]
 
 ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
 ul.tabs {
   text-align: center;
 }
 ul.tabs li {
   display: inline-block;
   vertical-align: bottom;
 }
 ul.tabs a {
   display: block;
   overflow: hidden;
   padding: 2px 5px;
   white-space: nowrap;
   width: 100px;
 }
 
 
~~~ [/CSS]

~~~ [HTML]
 HomeAbout UsContact Us is a really long link
~~~ [/HTML]

Hope it helps.
--Bill

-- 

__
css-discuss [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Martyn Merrett]

Eric sent a message out earlier not to discuss/debate this further on this list.
Apologies for any inconvenience and lets keep our IE6 thoughts to ourselves, eh?

Ta,

~Mx
http://www.mxdx.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[AG]

Thanks Geoffrey for your reply. The solution you suggest will not work since 
the container div or ul are of auto widths. If they would be fixed... would be 
nice and no problem with centering. As I said, adding or eliminating links from 
the list condition needs a flexible container.



--- On Wed, 4/1/09, Geoffrey Hoffman  wrote:

From: Geoffrey Hoffman 
Subject: Re: [css-d] center float:left



Did you try something like:

UL or enclosing DIV ~ display:inline; margin-left:auto; margin-right:auto; 
text-align:center;
LI's ~ display:inline; white-space:no-wrap;
A's ~ display:block; width:###px; 




  
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[AG]

Bill, thanks for your reply. In your suggestion, it appears to me that if you 
don't float the li, all links will stack up in the center of the container.


Here's the css and html that I'm using:

#container    {
    text-align: center;
    } 

ul#nav    {
    list-style-type: none;
    font-size: 1.2em;
    }
ul#nav li    {
    display: inline;
    margin-left: 5px;/* to space the tabs */
    float: left;
    width: 7em;
    }
ul#nav li a:link, ul#nav li a:visited    {
    text-decoration: none;
    display: block;
    word-wrap: break-word;/* IE only for that long link name */
    padding: 10px;
    width: 7em;
    }
ul#nav li a:hover    {
    }
 



  
    link 1
    link 2
    link 3
    link 4
    link 5
    link 6
  




--- On Thu, 4/2/09, Bill Brown  wrote:

From: Bill Brown 
Subject: Re: [css-d] center float:left
Something like this?

~~~ [CSS]
     
     ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
     ul.tabs {
       text-align: center;
     }
     ul.tabs li {
       display: inline-block;
       vertical-align: bottom;
     }
     ul.tabs a {
       display: block;
       overflow: hidden;
       padding: 2px 5px;
       white-space: nowrap;
       width: 100px;
     }
     
     
~~~ [/CSS]

~~~ [HTML]
     HomeAbout UsContact Us is a really long link
~~~ [/HTML]

Hope it helps.
--Bill

-- 




  
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[Jon Wickström]

> Here's the problem:
> - building a horizontal tabbed navigation bar with these conditions:
>
> 1. equal width of tabs
> 2. centered to the width of the body
> 3. preserve centering when adding/subtracting tabs 
> [dynamically generated links/tabs]

Sorry to drop in in the middle, but I'm too new on the list to have seen the 
start of the thread.

To me this sounds like a "centered horizontal menu"-problem. See:
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
I use a variation of it in my layout.

Regards,
   Jon Wickström
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[Bill Brown]

AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me
> that if you don't float the li, all links will stack up in the center
> of the container.

My apologies, I thought that was what you were looking for . ;-)
Maybe something like this is better?

 
 ul,li{list-style:none;margin:0;padding:0;}
 ul.tabs {
   background:#707070;
   margin: 0 auto;
   text-align: left;
   width: 35em;
 }
 ul.tabs li {
   background:#808080;
   display: inline-block;
   vertical-align: bottom;
   width: 7em;
 }
 ul.tabs a {
   background:#909090;
   color: #fff;
   display: block;
   overflow: hidden;
   padding: 2px 5px;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
 }
 ul.tabs a:hover {
   background:#c0c0c0;
   color: #000;
 }
 
 

 Link 1Link 2Link 3Link 4Link 5Link 6


-- 

__
css-discuss [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Christopher R]

I've run into a problem first off the  links on this page 
http://www.thecreativesheep.ca/site/indexpage9.html don't work in IE 6 or IE 7 
but work in FireFox also on that same page how does one get rid of all the 
extra space at the bottom of the page ? And on this page 
http://www.thecreativesheep.ca/site/animationpage2.html I'm trying to figure 
how to fix those HTML errors ?

__
css-discuss [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Ian Young]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Christopher R
> Sent: 02 April 2009 15:24
> To: CSS-D
> Subject: [css-d] CSS Problem with  tags on IE 6\7
> 
I'm trying to
> figure how to fix those HTML errors ?
> 

Not a CSS issue, but if you Google SWFobject you will find out how to
configure flash that validates.

Cheers

Ian

__
css-discuss [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Martyn Merrett wrote:
> Eric sent a message out earlier not to discuss/debate this further on
>  this list. Apologies for any inconvenience and lets keep our IE6 
> thoughts to ourselves, eh?

We're not discussing/debating the article that initiated this thread.
At least I am discussing how to handle, fix, workaround problems caused
by/in IE6, no matter what one thinks about it.

So far that has been in accordance with the policy on css-d, and unless
the policy has been changed lately I see nothing wrong in presenting
both problems and solutions targeted at a specific browser. That's what
nearly all threads on css-d are about anyway.

I have no real problems with IE6, so I will of course limit my responses
to solutions, and tips about how to check what works and what doesn't.
If that's wrong on css-d, then EAM should clarify things a bit more.
Otherwise we just end this thread because there's really nothing more to
say here anyway, and continue with "business as usual".

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[mx . cssdee]

No facility to check at the moment but I've noticed whitespaces between  
HREF= and "/location.htm".
Might be that?

HTML:

Gallery
Animation
Blog


~Mx

On Apr 2, 2009 3:23pm, Christopher R  wrote:
> I've run into a problem first off the links on this page  
> http://www.thecreativesheep.ca/site/indexpage9.html don't work in IE 6 or  
> IE 7 but work in FireFox also on that same page how does one get rid of  
> all the extra space at the bottom of the page ? And on this page  
> http://www.thecreativesheep.ca/site/animationpage2.html I'm trying to  
> figure how to fix those HTML errors ?



> __

> css-discuss [cs...@lists.css-discuss.org]

> 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 [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Michael Grosch]

Ok, I have to admit that I've been lurking in stealth mode on this  
list for a few weeks. Now it's time to start posting ;-)

Let's see...

The links seem to work fine in my IEs. What exactly doesn't work in  
your IEs?

The extra space at the bottom of the page is IMHO caused by the  
"height" and "bottom" combination on "#soloflash".

The HTML error is caused by the self closing "" tag in line 480.


Please try to get rid of those empty DIVs and SPANs.


Cheers from Germany,

Michael
__
css-discuss [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Yazmin Media]

I'm working on a CSS rollover solution here:

http://www.slrgear.com/articles/is_1iswp/test.htm

My problem is that my hover image is not appearing when I hover over the
rollover. The HTML file, the original image and the rollover image are all
in the same directory. The file validates.

Would someone mind taking a look at the code and seeing what could possibly
be the problem?

Thanks!
Yazmin
__
css-discuss [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Wade Smart]

Yazmin Media wrote:
> I'm working on a CSS rollover solution here:
> 
> http://www.slrgear.com/articles/is_1iswp/test.htm
> 
> My problem is that my hover image is not appearing when I hover over the
> rollover. The HTML file, the original image and the rollover image are all
> in the same directory. The file validates.
> 
> Would someone mind taking a look at the code and seeing what could possibly
> be the problem?
> 
> Thanks!
> Yazmin

20090402 1326 GMT-6

I think there are too many things in your css.
You have in .rollover your background url
but when the mouse moves to the image it disappears.

Try the following:

a { background: url ("/image/location.jpg");}
a:hover( background: url("/image/location2.jpg");}

-- 
Registered Linux User: #480675
Linux since June 2005
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[AG]

The links are dynamically generated, and probably a scripted solution would be 
possible. However, I'm trying to find a CSS solution first.

Another solution would be to simply enclose the  tags inside a div, 
text-align center and style the  to look like tabs. Since these tabs will 
also have drop down menus [with Suckerfish], I've not experimented with this 
approach yet.
Thanks for your reply Virgil.


--- On Thu, 4/2/09, Virgilio Quilario  wrote:

From: Virgilio Quilario 
Subject: Re: [css-d] center float:left

dynamically generated you mean using javascript?
if so, use javascript to center it everytime a tab is added or deleted.
specifically, use it to set css left to 50% and margin to negative
half of width.

Virgil
http://www.jampmark.com



  
__
css-discuss [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Yazmin Media]

Thanks Wade. When I try that though, I get no hover action at all:

http://www.slrgear.com/articles/is_1iswp/test3.htm

Yazmin

On Thu, Apr 2, 2009 at 2:48 PM, Wade Smart  wrote:

>
> I think there are too many things in your css.
> You have in .rollover your background url
> but when the mouse moves to the image it disappears.
>
> Try the following:
>
> a { background: url ("/image/location.jpg");}
> a:hover( background: url("/image/location2.jpg");}
>
> --
> Registered Linux User: #480675
> Linux since June 2005
>
>
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[AG]

Now this solution, still stacks-up links one under another in IE6.

--- On Thu, 4/2/09, Bill Brown  wrote:

From: Bill Brown 
Subject: Re: [css-d] center float:left
To: "AG" 
Cc: css-d@lists.css-discuss.org
Date: Thursday, April 2, 2009, 9:37 AM

AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me
> that if you don't float the li, all links will stack up in the center
> of the container.

My apologies, I thought that was what you were looking for . ;-)
Maybe something like this is better?

    
    ul,li{list-style:none;margin:0;padding:0;}
    ul.tabs {
      background:#707070;
      margin: 0 auto;
      text-align: left;
      width: 35em;
    }
    ul.tabs li {
      background:#808080;
      display: inline-block;
      vertical-align: bottom;
      width: 7em;
    }
    ul.tabs a {
      background:#909090;
      color: #fff;
      display: block;
      overflow: hidden;
      padding: 2px 5px;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
    }
    ul.tabs a:hover {
      background:#c0c0c0;
      color: #000;
    }
    
    

    Link 1Link 2Link 3Link 4Link 5Link 6


-- 



  
__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[AG]

Now this is interesting! 

Not only addresses all my conditions, but is a new approach to the list menu 
construct.
Kudos to Matthew James Taylor for coming up with a novel solution, and thank 
you Jon for bringing this link up.

AG.

--- On Thu, 4/2/09, Jon Wickström  wrote:

From: Jon Wickström 
Subject: Re: [css-d] center float:left
To: css-d@lists.css-discuss.org
Date: Thursday, April 2, 2009, 7:23 AM

> Here's the problem:
> - building a horizontal tabbed navigation bar with these conditions:
>
> 1. equal width of tabs
> 2. centered to the width of the body
> 3. preserve centering when adding/subtracting tabs 
> [dynamically generated links/tabs]

Sorry to drop in in the middle, but I'm too new on the list to have seen the 
start of the thread.

To me this sounds like a "centered horizontal menu"-problem. See:
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
I use a variation of it in my layout.

Regards,
   Jon Wickström
__
css-discuss [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Ian Young]

> Subject: [css-d] CSS Image Rollover Problem
> 
> I'm working on a CSS rollover solution here:
> 
> http://www.slrgear.com/articles/is_1iswp/test.htm
> 
> My problem is that my hover image is not appearing when I hover over
> the
> rollover. The HTML file, the original image and the rollover image are
> all
> in the same directory. The file validates.
> 

In the CSS you have

.rollover a:hover img
{
visibility:hidden;
}

Not sure why. There is your reason for image disappearing on hover.

Cheers

Ian

__
css-discuss [cs...@lists.css-discuss.org]
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] center float:left

[Gunlaug Sørtun]

AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me 
> that if you don't float the li, all links will stack up in the center
>  of the container.

Not so. Inline-block lines up inline - in line, and the whole menu can
then be centered within body or whatever element you want it centered
in. No need to adjust/modify source-code - it's all CSS.

I have used a solution similar to what BB suggests, for years, and apart
from that Gecko only recently implemented proper 'inline-block' support
- older versions needed a 'display: -moz-inline-box;' workaround, and
that old IE/win needed a 'hasLayout' trigger to simulate 'inline-block',
the centered line-up is working perfectly across browser-land.
See link below.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Holly Bergevin]

From: Yazmin Media 

>http://www.slrgear.com/articles/is_1iswp/test3.htm

Re: Rollover not working.

On that page, you have an image displayed in the HTML, and then you have 
background images that you are hoping will display as rollovers? 

Try this:

Delete the image in the HTML and modify your selector in your CSS - 

a {
background: url(canon70-200f4L_70_shkFc.gif) no-repeat;
display: block;
height: 460px;
width: 500px;
}

I don't know if this will do what you want, but it seems to, in FF anyway.

~holly 
 
   
__
css-discuss [cs...@lists.css-discuss.org]
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 Image Rollover Problem

[Martyn Merrett]

Hi Yazmin,

Try this - tested in FF3 and IE7 on XP.
http://resource.mxdx.co.uk/ww/yazmintest.htm

~Mx
http://www.mxdx.co.uk
__
css-discuss [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Christopher R]

I don't have location.htm on my page unless I'm overlooking it I don't have it.


On Thu, Apr 2, 2009 at 1:10 PM mx.css...@googlemail.com wrote:
>No facility to check at the moment but I've noticed whitespaces between  
> HREF= and "/location.htm".
> Might be that?
> 
> HTML:
> 
> Gallery
> Animation
> Blog
> 
> 
> ~Mx
> 
> On Apr 2, 2009 3:23pm, Christopher R  wrote:
> > I've run into a problem first off the links on this page  
> > http://www.thecreativesheep.ca/site/indexpage9.html don't work in IE 6 or  
> > IE 7 but work in FireFox also on that same page how does one get rid of  
> > all the extra space at the bottom of the page ? And on this page  
> > http://www.thecreativesheep.ca/site/animationpage2.html I'm trying to  
> > figure how to fix those HTML errors ?
> 
> 
> 
> > __
> 
> > css-discuss [cs...@lists.css-discuss.org]
> 
> > 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 [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Christopher R]

The  links don't work in IE 6 and 7 but in FireFox they work.  Update: I 
have fixed the extra space by
reducing the size of the height in pixels and so far it's fixed.  I still have 
the problem with the  links and IE 6 and IE 7 and what do you mean
the self closing  tag on line 480 ??


On Thu, Apr 2, 2009 at 2:08 PM "Michael Grosch"  wrote:
>Ok, I have to admit that I've been lurking in stealth mode on this  
> list for a few weeks. Now it's time to start posting ;-)
> 
> Let's see...
> 
> The links seem to work fine in my IEs. What exactly doesn't work in  
> your IEs?
> 
> The extra space at the bottom of the page is IMHO caused by the  
> "height" and "bottom" combination on "#soloflash".
> 
> The HTML error is caused by the self closing "" tag in line 480.
> 
> 
> Please try to get rid of those empty DIVs and SPANs.
> 
> 
> Cheers from Germany,
> 
> Michael
> __
> css-discuss [cs...@lists.css-discuss.org]
> 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 [cs...@lists.css-discuss.org]
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 Problem with tags on IE 6\7

[Christopher R]

I have the same code on another page and it validates fine ?!

On Thu, Apr 2, 2009 at 12:59 PM "Ian Young"  wrote:
>
> 
> > -Original Message-
> > From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> > boun...@lists.css-discuss.org] On Behalf Of Christopher R
> > Sent: 02 April 2009 15:24
> > To: CSS-D
> > Subject: [css-d] CSS Problem with  tags on IE 6\7
> > 
> I'm trying to
> > figure how to fix those HTML errors ?
> > 
> 
> Not a CSS issue, but if you Google SWFobject you will find out how to
> configure flash that validates.
> 
> Cheers
> 
> Ian
> 
> __
> css-discuss [cs...@lists.css-discuss.org]
> 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 [cs...@lists.css-discuss.org]
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] Putting IE6 out to pasture

[Melbeach]

From: "Martyn Merrett" 
> Thought you'd be interested in this.
> Could this *finally* be the end of IE6 and our CSS woes?
> http://weblog.200ok.com.au/2009/03/putting-ie6-out-to-pasture.html

I'm still seeing 17% IE6 use. And last weekend I figured out why. Was helping 
my friend's dad with his computer. I went to Windows Update and got the old 
"This is not a valid Windows license" message. So I ask to see his xp cd and 
he hands me this old bootleg looking thing. Guy's 80 years old, using a 
bootleg xp copy. He gives me his anti-Bill Gates speech. Then it hit me. 
There's probably millions of these cd's out there - meaning millions of people 
stuck on IE6 until they decide to shell out the cash for a legit Windows copy. 
So I don't see IE6 disappearing for a long, long time. Sorry.
-melbeach 

__
css-discuss [cs...@lists.css-discuss.org]
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] Weird nav menu problem in IE6

[Luc]

 Hello list,  

 I'm experimenting with a horizontal nav:

 http://www.dzinelabs.com/sandbox/New_site_layout/liquidnav1.html

 Css embedded.

 But in IE6 i'm encountering several problems, probably all related to
 one thing:

 When hovering over the nav, sometimes the logo image disappears, the
 text on the page shifts, the nav tabs shift,...

 And after hovering everything seems to be ok, except the shifting of
 the nav tabs.

 I thought it had to do with my hover styles and tried to isolate them
 but to no avail. I also thought a HasLayout problem but the zoom:1
 doesn't seem to work.

 I implemented the method explained here:

 
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

 with a slightly adjusted version of this:

 http://matthewjamestaylor.com/centered-menus/

 But the strange thing is that on my original menu i seem to have the
 same problem:

 http://www.dzinelabs.com/sandbox/New_site_layout/liquid.html (css
 embedded)

 What could be the culprit?
 
-- 
Best regards,
 Luc
 http://www.dzinelabs.com
 

Using the best e-mail client: The Bat! version 4.1.5 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"The best computer is a man, and it's the only one that can be
mass-produced by unskilled labour." - Wernher Von Braun.



__
css-discuss [cs...@lists.css-discuss.org]
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/