Re: [css-d] site test please

[Kanakaraj V]

In IE6/WinXp, in left side pan, bullets are aligned wrongly before grey box.

On Fri, Sep 11, 2009 at 3:33 AM, David Laakso
wrote:

> Daniel Hammond wrote:
> > David Laakso wrote:
> >
> >> Daniel Hammond wrote:
> >>> URL: http://www.northsidecreativeservices.org/design.htm
> >>> CSS: http://www.northsidecreativeservices.org/cs.css
> >>>
> >>> Could someone please test the above URL in IE6 and IE7? I heard
> >>> that  someone was looking at the site, and the top nav (blog,
> >>> design  services, banners & signs, production) was stacked
> >>> vertically rather  than in line horizontally. I tested it in IE8,
> >>> Chrome, Opera, Safari,  and FF (Mac and Win), and they all display
> >>> it correctly (in line  horizontally).
> >>>
> >>> browsershots.org wasn't working with this URL for some reason.
> >>>
> >>> Thanks,
> >>> Daniel Hammond
> >>>
> >>
> >>
> >> Try changing all instances in  #nav
> >> from:
> >> display: inline-block;
> >> to:
> >> display: inline;
> >
> > That fixed the initial problem, but it also messed with the height of
> > the nav. It appears that "line-height" no longer affects it. The nav
> > also no longer touches the top of the white area as it's supposed to.
> >
> > Daniel
> >
>
>
>
>
> On this end IE 6/7/8 are nearly identical.
>
> The only difference is IE 6 and IE 7 have aprox +1px white space above
> the border. Tweak the line-height:  use a unit-less (raw) number. 1.68
> not 1.68px, for example.
>
> This filter targets IE 6 and below
>* html {}
>
> This filter targets IE 7 only
>*:first-child+html {}
>
>
>
>
>
>
>
>
>
>
>
>
> __
> 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] warning

[David Laakso]

MEM wrote:
>
> @David:
> You were right, again. 
> The warnings were now gone. 
>
> *Quest: the true meaning of "warning"...*
> Is it because, somehow, the validator validates also potential problems on
> potential browser configurations, hence, calling those potential problems:
> warnings? 
>   






You put it well.

And enough is enough...

If in thoroughly checking the site cross os/browser, these potential 
"problems/warnings" do not adversely effect the site, then you are 
fairly safe in assuming that you may ignore them.
In plain English: if it works, don't fix it.












__
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] Warnings on same color in different contexts and a clear semantic approach reason

[MEM]

> IE does not contain float unless the container has a layout.
> 
> 
> > Technique is as follows:
> >
> > .clearfix:after {
> > content: '.';
> > display: block;
> > height: 0;
> > visibility: hidden;
> > clear: both;
> > }
> 
> Different methods are explained here:
> http://www.tjkdesign.com/articles/clearing-floats_and_block-
> formatting_conte
> xt.asp
> 


Sorry for this classic issue... :s

As it states here:
http://www.positioniseverything.net/easyclearing.html
I'm trying to apply the clear fix method to the parent of the element I
wanted to fix.

But IE-6 seems to ignore it, and the right column still drops.


The html:
http://www.nuvemk.com/rebelate/rebelatehome/home2.html

The main css:
http://www.nuvemk.com/rebelate/rebelatehome/css/home2.css

The ie specific css:
http://www.nuvemk.com/rebelate/rebelatehome/css/home2_ie.css

I see general misplacement of the "content" element on the page in IE6,
maybe it is related with the no-appliance of clearfix method ?


@David:
You were right, again. 
The warnings were now gone. 

*Quest: the true meaning of "warning"...*
Is it because, somehow, the validator validates also potential problems on
potential browser configurations, hence, calling those potential problems:
warnings? 
So, when we try to fix those miss-browser interpretations, the validator
will recognize that the potential problems are no longer there, and cease
the warnings display?



Regards,
Márcio





__
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] Warnings

[David Laakso]

MEM wrote:
>> Providing you have checked the page  thoroughly cross os/browser, it is
>> fairly safe to ignore such "warnings."
>>
>> 
>
> Hello David,
> :)
>
> I was trying to follow those steps: 
>
> 1) Solve warnings.
>   






Solve problems. Warnings on a local file will generally take care of 
themselves.



The uri you provided is:


The w3c validation service this this to say about your uri.
CSS

This document validates as CSS level 2.1 !
Markup

This document was successfully checked as XHTML 1.0 Transitional!








__
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] Warnings

[MEM]

> 
> 
> Providing you have checked the page  thoroughly cross os/browser, it is
> fairly safe to ignore such "warnings."
> 

Hello David,
:)

I was trying to follow those steps: 

1) Solve warnings.
2) Try to tread the float. I will probably take away the extra  elements
on the xhtml markup and use overflow.
3) Apply a clearfix (I'm hating myself, because I'm still not able to fully
study it).
4) Re-validate
5) test cross browser and see where it breaks.

So, according to your post, may I presume that the warnings are fairly
inoffensive, and that I can jump that step for now? But will they, when the
cross browser issues are solved, somehow, later on, disappear?


Regards,
Márcio





__
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] Warnings on same color in different contexts and a clear semantic approach reason

[Thierry Koblentz]

> On 12/09/2009, at 8:23 AM, MEM wrote:
> 
> >> 1)
> >> I see a "non semantic approach" if I may call that, by using empty
> >> 
> >> tags to apply a clear property. Something like:
> >>
> >> 
> >>
> >> And on the css have, something as:
> >> .clear
> >> {
> >>clear:both;
> >> }
> >>
> >>
> >> Is this technique valuable for some specific reason(s), or
> >> can we just apply "clear:both;" directly on the css paragraph parent
> >> element, instead of creating new empty html tags?
> 
> > Forget something important, sorry. :s
> >
> > The html:
> > http://www.nuvemk.com/rebelate/rebelatehome/home.html
> 
> The point of this is probably containing floats (google it). Normally
> an element like this is placed after floated content but inside the
> container that the developer wants to contain the floated content.
> 
> There are other ways of achieving this that don't require extra
> markup. The technique you use may depend on what else is happening on
> the page. Probably the simplest is setting 'overflow: auto'  or
> 'overflow: hidden' on the containing element. This won't work if you
> have content that extends beyond the container (with negative margins,
> positioning, width wider than container etc.). Other options include
> floating the container as well or using generated content and clearing
> that. IE doesn't understand this but it doesn't matter as IE contains
> floats anyway. 


IE does not contain float unless the container has a layout.


> Technique is as follows:
> 
> .clearfix:after {
>   content: '.';
>   display: block;
>   height: 0;
>   visibility: hidden;
>   clear: both;
> }

Different methods are explained here:
http://www.tjkdesign.com/articles/clearing-floats_and_block-formatting_conte
xt.asp


-- 
Regards,
Thierry | http://www.TJKDesign.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] Warnings

[David Laakso]

MEM wrote:
>>
>> 2) I'm getting the following warnings:
>> http://jigsaw.w3.org/css-
>>
>> "Same colors for color and background-color in two context (...)"
>>
>> 
>
> Márcio
>
>   




Providing you have checked the page  thoroughly cross os/browser, it is 
fairly safe to ignore such "warnings."















__
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] Warnings on same color in different contexts and a clear semantic approach reason

[Tim Snadden]

On 12/09/2009, at 8:23 AM, MEM wrote:

>> 1)
>> I see a "non semantic approach" if I may call that, by using empty  
>> 
>> tags to apply a clear property. Something like:
>>
>> 
>>
>> And on the css have, something as:
>> .clear
>> {
>>  clear:both;
>> }
>>
>>
>> Is this technique valuable for some specific reason(s), or
>> can we just apply "clear:both;" directly on the css paragraph parent
>> element, instead of creating new empty html tags?

> Forget something important, sorry. :s
>
> The html:
> http://www.nuvemk.com/rebelate/rebelatehome/home.html

The point of this is probably containing floats (google it). Normally  
an element like this is placed after floated content but inside the  
container that the developer wants to contain the floated content.

There are other ways of achieving this that don't require extra  
markup. The technique you use may depend on what else is happening on  
the page. Probably the simplest is setting 'overflow: auto'  or  
'overflow: hidden' on the containing element. This won't work if you  
have content that extends beyond the container (with negative margins,  
positioning, width wider than container etc.). Other options include  
floating the container as well or using generated content and clearing  
that. IE doesn't understand this but it doesn't matter as IE contains  
floats anyway. Technique is as follows:

.clearfix:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
}

Cheers, Tim

__
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] Warnings on same color in different contexts and a clear semantic approach reason

[MEM]

> Dear CSS gurus,
> 
> I miss you. :) Really. I've been struggling with PHP and MVC
> structures, and my brain isn't so elastic that allows me to focus on
> different subjects as those. Not that I consider myself a big help but,
> anyway, sorry for being away.
> 
> Now the css:
> 
> I'm trying to fix some css that has been passed to me, without writing
> all from the beginning, however, I have a few questions:
> 
> 1)
> I see a "non semantic approach" if I may call that, by using empty 
> tags to apply a clear property. Something like:
> 
> 
> 
> And on the css have, something as:
> .clear
> {
>   clear:both;
> }
> 
> 
> Is this technique valuable for some specific reason(s), or
> can we just apply "clear:both;" directly on the css paragraph parent
> element, instead of creating new empty html tags?
> 
> 
> 2) I'm getting the following warnings:
> http://jigsaw.w3.org/css-
> validator/validator?uri=http%3A%2F%2Fwww.nuvemk.com%2Frebelate%2Frebela
> tehome%2Fhome.html&profile=css21&usermedium=all&warning=1&lang=en
> 
> "Same colors for color and background-color in two context (...)"
> 
> However, this doesn't seem illogical, I mean, yes, for some elements we
> have white color properties, for other background-color properties. If
> they are not nested one on each other, why are we getting those
> warnings?
> 
> #mainMenu li a:link,li a:visited
> {
>   *color:#fff;*
>   text-decoration:none;
>   padding: 3px 10px 8px 10px;
>   margin-right:10px;
> }
> 
> And the boxes:
> 
> #box1
> {
>   float:left;
>   width:170px;
>   height:100px;
>   margin-right:10px;
>   *background-color:#fff;*
> }
> 
> 
> #box2
> {
>   float:left;
>   width:170px;
>   height:100px;
>   margin-right:10px;
>   *background-color:#fff;*
> }
> 
> 
> #box3
> {
>   float:left;
>   width:170px;
>   height:100px;
>   *background-color:#fff;*
> }
> 
> 
> 
> Thanks in advance,
> Márcio


Forget something important, sorry. :s

The html:
http://www.nuvemk.com/rebelate/rebelatehome/home.html

and the css:
http://www.nuvemk.com/rebelate/rebelatehome/css/home.css


thanks,
Márcio

__
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] main content appearing in side column

[Daniel Hammond]

David Laakso wrote:

> Daniel Hammond wrote:
>> URL: http://www.numcchildren.org/thezones/index.htm
>> CSS: http://www.numcchildren.org/children.css
>>
>> Does anyone have any idea why Safari (Mac/Win) and Chrome are  
>> putting  the main content in the side column on the right? View in  
>> FF, IE,  Opera to see correct layout.
>>
>> Thanks,
>> Daniel Hammond
>>
>
>
> #content {
> float: left; <- :: add, and safari/chrome will  
> cooperate ::
> }
>


That did it. Endless thanks.

-Daniel

__
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] Warnings on same color in different contexts and a clear semantic approach reason

[MEM]

Dear CSS gurus, 

I miss you. :) Really. I've been struggling with PHP and MVC structures, and
my brain isn't so elastic that allows me to focus on different subjects as
those. Not that I consider myself a big help but, anyway, sorry for being
away.

Now the css:

I'm trying to fix some css that has been passed to me, without writing all
from the beginning, however, I have a few questions:

1)
I see a "non semantic approach" if I may call that, by using empty  tags
to apply a clear property. Something like: 



And on the css have, something as:
.clear 
{
clear:both;
}


Is this technique valuable for some specific reason(s), or
can we just apply "clear:both;" directly on the css paragraph parent
element, instead of creating new empty html tags? 


2) I'm getting the following warnings:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nuvemk.com
%2Frebelate%2Frebelatehome%2Fhome.html&profile=css21&usermedium=all&warning=
1&lang=en

"Same colors for color and background-color in two context (...)"

However, this doesn't seem illogical, I mean, yes, for some elements we have
white color properties, for other background-color properties. If they are
not nested one on each other, why are we getting those warnings?

#mainMenu li a:link,li a:visited 
{
*color:#fff;*
text-decoration:none;
padding: 3px 10px 8px 10px;
margin-right:10px;
}

And the boxes:

#box1 
{
float:left;
width:170px;
height:100px;
margin-right:10px;
*background-color:#fff;*
}


#box2 
{
float:left;
width:170px;
height:100px;
margin-right:10px;
*background-color:#fff;*
}


#box3 
{
float:left;
width:170px;
height:100px;
*background-color:#fff;*
}



Thanks in advance,
Márcio

__
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] main content appearing in side column

[David Laakso]

Daniel Hammond wrote:
> URL: http://www.numcchildren.org/thezones/index.htm
> CSS: http://www.numcchildren.org/children.css
>
> Does anyone have any idea why Safari (Mac/Win) and Chrome are putting  
> the main content in the side column on the right? View in FF, IE,  
> Opera to see correct layout.
>
> Thanks,
> Daniel Hammond
>   





#content {
float: left; <- :: add, and safari/chrome will cooperate ::
}





















__
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] main content appearing in side column

[Val Dobson]

Check your code.  You've forgotten to close your container div - and
several other tags as well.

Val Dobson

2009/9/11 Daniel Hammond :
> URL: http://www.numcchildren.org/thezones/index.htm
> CSS: http://www.numcchildren.org/children.css
>
> Does anyone have any idea why Safari (Mac/Win) and Chrome are putting
> the main content in the side column on the right? View in FF, IE,
> Opera to see correct layout.
>
> Thanks,
> Daniel Hammond



-- 

www.oakleafcircle.org.uk
www.valdobson.co.uk
www.astrodiary.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] main content appearing in side column

[James White]

I guess I'll need to look at it on another machine to see what you're going
for. It doesn't seem to display properly in FF2 or IE7.
__
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] main content appearing in side column

[Daniel Hammond]

URL: http://www.numcchildren.org/thezones/index.htm
CSS: http://www.numcchildren.org/children.css

Does anyone have any idea why Safari (Mac/Win) and Chrome are putting  
the main content in the side column on the right? View in FF, IE,  
Opera to see correct layout.

Thanks,
Daniel Hammond
__
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/