Re: [css-d] Hidding text behind a graphic

[Melianor]

Christian Kirchhoff wrote:
> http://www.mezzoblue.com/tests/revised-image-replacement/

This is a good ressource to look at since the examples have been tested 
as well! Also one can learn a few more CSS possiblities.

regards, Jens

__
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 LI dimension with XHTML

[Melianor]

[EMAIL PROTECTED] wrote:
>  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
>  
>  
> http://www.w3.org/1999/xhtml";>
>  />Test
> 
>  
>  * {border: 0;margin: 0;padding: 0; }  body {font-family: 
> Verdana, Helvetica, Sans-Serif;font-size: .75em; }#menu {
> background-color: #0f0;width: 900px; }  #menu ul { padding: 2px; 
> position: relative; text-align: left; }
>  #menu ul li { display: inline; background-color: #000; 
> list-style: none; width: 150px;
>  height: 80px;; }
>  #menu ul li a { color: #aaa; font-weight: bold; line-height: 
> 2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
>  height: 100%; }
>  #menu ul li a:hover { color: #fff; text-decoration: none; }
>  #menu ul li a:active { background-color: #a6e2a6; text-decoration: 
> none; }
>  #menu ul li.selected a { background-color: #FFF; color: #000; } 
> 
> 
>   Home Pagehref="#">New Product   Specialshref="#">My Account   Contact Us   
> 
> 

To get it working on FF2, IE7, IE6, Safari add the following to
#menu ul li a {
background-color: #000;
...
...
}
To optimize the code you can remove:
#menu ul li a {
width: 100%; //remove
height: 100%; //remove
...
...
}

Also remove ALL the spaces between the li elements so that the spaces 
between the li elements in the browser display of IE7, FF2, FF3, Safari 
will disappear!

Like David said i would not put fixed width and height on the li 
elements, since you can sort that out via the padding of the a element.

regards, Jens


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

[Melianor]

Lee Bettridge wrote:
> Hello,
>  
> 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.
>  
> Thanks.
> __
> 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/

div.test {
min-height:100px;
height:auto !important;
height:500px;
}

Across IE7, FF 2,3, Opera and Safari this will trigger min-height just 
fine. IE6 will just play along with the height that has been given 
through the height attribute and will expand further, once the content 
reaches the height.

regards, Jens
__
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] Unwanted space at top of the page

[Melianor]

David Laakso wrote:
> Fichot Sébastien wrote:
>> Le 9 juin 08 à 21:06, David Laakso a écrit :
>>
>>> Sébastien wrote:
 URL : http://tinyurl.com/3fdd35


 Each comment on Code / Design is welcome.

 Cheers,

 S.F.


>>>
>>> O.K. You asked:
>>>
>>>
>>> Oh. Now I get it (took me 5 minutes and looking at it in 3 browsers).
>>> You have to crawl on top of the screen, then /really/ squint to find 
>>> the menu.
>>> Then you click a menu item to bring up the content.
>>> Really bright and advance users will get all of the above immediately.
>>> Morons like me will assume it just another unreadable,  unusable, and 
>>> broken Web site...
>>>
>>>
>>>
>>> -- 
>>> http://chelseacreekstudio.com/
>>>
>>
>> Thank you for your comment David. This is the first prototype for this 
>> website. Designs goes like this, you have to re-make it many times to 
>> obtain something really interesting.
>>> took me 5 minutes : I were saving and resaving CSS and HTML files, 
>> this may be in due.
>>
>> Cheers, and thank you for your comment.
>>
>> S.F.
>>
> I am well aware of how design goes. Most sites are remade many times. 
> Obtaining something interesting ain't easy. Making something interesting 
> /and/ easy to grasp is even more difficult.
> 
> I meant it literally took me 5 minutes to understand how to find the 
> content. Granted I am not the brightest star in the sky. The delay was 
> due in part to the menu being a little difficult to read (for me). And 
> that the page is not intuitive.  I had /no clue/ that I had to "click" 
> something to bring up the content.  Most users expect to land on a site 
> with the primary content on the screen. Let's play "hide and seek" /or/  
> "can you find the content" on my Web site does not cut it in my book.  
> Nothing to do with saving and re-saving CSS and HTML files, afaik.
> 

I agree here with David. The contrast of background against text is a 
bit low. Try running some Accessibility test that checks the contrast of 
  text against background and you will see low scores. To alot of 
people, not beiing able to find the "text" alias content fast, can be 
hampering and will lead them away. I dont even mean the choice of your 
colors, but more the hues you use.

With your design, maybe having to click is not optimal. Since you 
already use Javascript you can keep the click optional and just trigger 
it, when no JS is there. Otherwise simply slide content into place when 
you mouse over, for example.

Also i noticed that when you turn of JS completly all one will see is 
all your content in one long run. Why not make the use of JS unobtrusive 
and seperate it so nicely like you already do with CSS/HTML? Makes your 
site alot more accessible to more people. I like the JS effects alot 
between.

regards, Jens
__
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] What is the best way to do a curved corner fluid box

[Melianor]

Carol Swinehart wrote:
> I need to put a curved corner fluid box on a fluid page.  The box 
> will enlarge vertical and horizontally but needs to stay 551px above 
> the bottom of the page.
> 
> Any suggestions for techniques are most appreciated.
> 
> Carol
> 

Hi,

The only clean way to do this at the moment does hamper a bit if you 
want your markup to remain strictly semantic.

If you need 4 rounded corners, you cascade 4 div elements within each 
other and each div a background image, which is then positioned into 
each needed corner. The innermost div will have the actual content and 
needs some padding. The width should also be applied to the innermost 
element, since its the actual once containing any real content.

--
Example:







Content goes here




--

To make it stay away from the bottom at a fixed measure you could wrap 
it into 1 more div, position that one absolutly and keep it left and 
with a negative height of 551px.

regards, Jens
__
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] Menu Positioning Question

[Melianor]

Sohail Aboobaker wrote:
> ---
> 
> 
> 
>Home
>Contact us
>Sitemap
>
>  
> 
>
>
>Languages:
> English
> Dutch
> French
> Italian
>Spanish
>
>
> 
> 
> While this html gives us the flexibility to place and display the individual
> menus independent of each other, it does not cater for the usecase where we
> have to place both of these menus horizontally aligned with the same
> background shades. Is this doable with this html or do we need to change the
> html?

Hi,

Float the ... to the left. Concerning the 
background shade, it depends what kind of image background that is. What 
exactly do you mean by background shades. Image example would be helpful.

If it is a a gradient background it should be very well doable. Simple 
full color is no problem at all. Should the Menu2 divs have a shaded 
border it can be done too with some slicing of the shades.

an example of what kind of image will be used in the backgroudn would be 
helpful.

regards, Jens
__
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] relative or absolute urls?

[Melianor]

- Relative URLs with absolute document paths are the best common practice.
- Absolute URLs can get tricky and tedious to exchange, especially
when you develop the site on a different domain.
- Relative URLs with relative document path are actually quite a bad
way, since in some cases you might need to change the location of a
file.

regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a floating list.

[Melianor]

Hi, sorry i see now what you are trying to do, by wanting to center
the list itself as well.

http://www.w3.org/TR/html4/loose.dtd";>



Untitled Document

.mpl {
float:left;
display: block;
text-align:center;
font-size:0.9em;
padding-right:1em;
}
.mpl strong {
font-size:1.3em;
display:block;
}
.last {
padding:0;
}




Center |
Center

1 - 14$6.62
15 - 49$5.00
50 - 199$3.76
200+$3.38





I added some code to the listing actually, just margin: 0 auto and a
border to see how far the list reaches out. This displays centered in
IE7,IE6,FF,Safari,Opera.

-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a floating list.

[Melianor]

Hi John,

This will not work that way. Your approach is correct in some ways,
but no in others.

This should be working code, working on IE 7 downwards, Opera, FF, Safari,









1 - 14$6.62
15 - 49$5.00
50 - 199$3.76
200+$3.38






The list might look shifted a bit, since the default margins and
paddings of lists look a bit different in FF, IE and such. I just
added the border, so that you can see that the content container is
actually centered ;)

regards, Jens


-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] AlphaImageLoader

[Melianor]

It will certainly crash in N4, since CSS is used, that was not
supported back then. When you do not use conditional comments, like in
your example and resort to css hacks to solve such quirks, you would
use @import for the css, so that it will not be regarded by N4.

I wonder though, why N4 does not seem to disregard the conditional
comments. Maybe some others have more insight here. N4 has never been
a requirement yet.

Besides using BrowserCam, you can still install N4 seperatly on your
machine if you are using a Microsoft OS based development machine for
your site. Downloads are still available for that version.

regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] AlphaImageLoader

[Melianor]

Hi Kirsten,

You are missing some important attributes in
AlphaImageLoader.Basically you need to add the enabled attribute and
the sizingMethod.

Here is a working exampl:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,
src='/images/frontend/dropmenu/servicesBg.png');

Here is the link to the Microsoft definition for the AlphaImageLoader:
http://msdn2.microsoft.com/en-us/library/ms532969.aspx

regards, Jens




-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Space Grudge Match: br vs css

[Melianor]

Different solution:
Content and style the p element accordingly to achieve the
spacing with different margins/paddings for top and bottom. You save
code and the whole thing becomes more clear to read aswell.

Inside the p element feel free to use . br is a line break,
nothing else. Its not something you would use for spacing in HTML.
Agreed, that in Word processors, one will often use line breaks for
spacing, BUT this works just fine, since those documents are
interpreted mostly by just one program, or if not, than different
spacing will not matter.

With many user agents to consider, a different interpretation of 
can break your layout if you are unlucky.

I think the only place where one should use  at all, is inside
h1-h6 and p, or in other words, where a linebreak is needed to set a
semantic meaning!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

css-d@lists.css-discuss.org

[Melianor]

The clearing div, should if possible not contain any letter, or HTML
element at all, but some browsers, specifically IE 6 and lower will
try to apply, default line-height, font-size and so on, although there
is no content present, meaning that the clearing div will then occupy
some space and so leave gaps between various elements, where none
should be.

Another way to circumvent this, is to simply play "" comment
tags inside the clearing div. Also be sure to add some CSS attributes
to the clearing div, like line-height: 0; height: 1px; and others
that will override possible default styles for content.

regards, Jens

-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Div Element Sizing

[Melianor]

Hi Chris,

You should give neither html or body width and height. They will
always expand as far as the content flows. So better put width/height
to the element inside html, body.

The problem you will encounter though, is that height: 100% will not
always work as intended. Some browsers will still only expand the
warpping div to the end of the content and not further.

There are workarounds to do this with CSS, but frankly in this case
(!!) it would be easier to have a table with width/height 100% and
apply a padding within the table to get some spacing for the contained
elements.

height: 100% is quite a problem with many browsers and will be
interpreted differently

Suggestion





... content 




I see myself cringe at even suggestion a table at all for layout, so
anybody with a better idea, please step forward.

regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ie6 pushing down everything

[Melianor]

On 5/21/07, Rosemary Probert <[EMAIL PROTECTED]> wrote:

> Does this mean it's a good idea to add display:block to all floated
> images?  Are there any drawbacks?

I have used this on various occasions with inline elements, like span,
a for example, to be able to make navigations that would normally be
built form images, to built from text with background images. This
should be compatible right down to IE 5.0 and otherwise compatible
with current browsers like IE6,7, Firefox, Opera and Safari.

BUT, consider one thing, only try standard attributes of elements, if
you really need too. There are alot of ways to solve layout problems.

regards, Jens

>
> 

Correct.


>
> Kind regards,
>
> Rosemary
>
>


-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] ie6 pushing down everything

[Melianor]

Hi Jeff,

1. Images are not block elements, so applying float to them will
trigger funny experiences with some browsers. So either add display:
block to the css or build a wrapper div around the images.

2. Your clearing div is causing the space problem, since IE will
reserve some space inside that div, due to default line-height,
font-size and so on and even some default height, added by the
browser.

So reduce those to 0 or 1px, or something similiar or you can also add
a "" comment inside the div to counter the problem. So that IE
will know, hey there is really no content inside this div, so i don't
need to set any default values.

regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Separate styles for IE6

[Melianor]

Hi, if IE 7 only works for IE7, nothing else. If you want IE7 and
below use 


regards, Jens

On 5/6/07, Silk-Works <[EMAIL PROTECTED]> wrote:
> Hi there,
>
> I am having a problem with rendering in IE6. (has this been mentioned on
> this list before?)
>
> www.jones-morris.co.uk 
>
> I have created the site in FF, with fixed width and fixed header and
> navigation.
>
> I IE6 the position of the content is bumped down much further than I want
> with top: 175px in the css.
>
> I have installed multiple IE from http://tredosoft.com/Multiple_IE and the
> version of IE6 appears to be IE7, but trying to feed a separate stylesheet
> using;
>
> 
> 
> Welcome to Trystan Jones-Morris Climbing Guide
> 
> 
> 
>
> for 6 or 7 doesn't seem to work for me.
>
> Anyone out there help?
>
> Please...
>
> Regards,
>
> James.
>
>
>
> FatboyJim,
> Justplainsimple Websites
> Beddgelert, Caernarfon, Gwynedd, LL55 4YB.
> Tel: 01766 890 891
>   http://www.fatboyjim.com
>  
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating Divs Over Flash

[Melianor]

The only thing to consider here is that the embedding of the Flash
contains the parameter .
Otherwise the absolute HTML elements, that you want to lay over the
flash, will be hidden behind it. This works back to IE 5 and than all
the way upwards and other browsers like, Opera, Firefox, Safari.

Example: http://www.caseanywhere.com/index.php

See the submenu that pops up when hovering the main navigation. Those
divs are absolute positioned and the big animation below is Flash.

regards, Jens
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] using id AND class?

[Melianor]

Actually the one version that works across all browsers, is to simply call


div.home {
instead of
div#holder.home {

If you want to access the #holder
call div#holder, otherwise just div.home

regards, Jens

On 4/27/07, james shannon <[EMAIL PROTECTED]> wrote:
> It should validate fine; it's a perfectly legal construction.
>
> One good reason for using it is to add specificity. div.home might be
> defined elsewhere, and div#holder.home is far more specific and thus
> will override it (thought I'd use other methods).
>
> Also useful when you have lots of pages and need to keep things
> separate. There's probably a 
> elsewhere on the site.
>
>
>
> I use something similar in that I have a container div that can have
> two different display settings: advanced and basic. So I define a
> bunch of stuff like:
>
> div#question.basic .advanced_options {display:none;}
> div#question.advanced .subquestion {color: red;}
> etc.
>
>
> james
>
>
> On Apr 27, 2007, at 2:33 AM, Austin Harris wrote:
>
> > Morning all,
> >
> > I am doing some work on a site that I haven't built and have found
> > something slightly strange...
> >
> > basis of html;
> >
> > 
> >
> > blah blah
> >
> > 
> >
> > css;
> >
> > div#holder.home {
> > styles...
> > }
> >
> > Strangely this does work across all the browsers I have (briefly)
> > tested on yet does cause validation errors.
> >
> > I can't see any issues as to why taking out the #holder from the
> > css will make any difference but was really more wondering why
> > someone would have done this in the first place...
> >
> > Austin
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7 information -- http://css-discuss.incutio.com/?page=IE7
> > 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
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/