[css-d] formatting problem

[Tri-State AdVantage]

> I cannot get this page to read correctly in Firefox.
> http://www.hcam.net/posts.html
> I got it to work correctly in Explorer by putting a wide border on
> the right
> hand side of the photo so that the discription is pushed below the
> photo.

"You mention a wide 'border' but what I see is a 750px right hand
'margin' on the image. This is apparent in IE8/7/6. Perhaps you could
describe the effect that you want to achieve or show us a screenshot
of the design?"
I was using a wide margin (not border, sorry) to push the text below the
photo. It worked for IE but not FF.


"I'm always suspicious any time someone says that it works in IE but
not in Firefox. Firefox (and every other major non-IE browser) has
superior CSS rendering capabilities so if it doesn't work in Firefox
there's a good chance that you are doing something wrong."

"I would recommend always making your site work in the non-IE browser
of your choice and *then* do what is required to make IE get in line.
Firefox has some great developer tools like firebug etc. so that is my
choice but you could equally use the latest versions of Opera, Chrome
or Safari. In most cases you will find that if you do things right
your site will render correctly and similarly in all these browsers
and you won't have to change anything."

I have always worked under the pretense that if it works in IE 6 then it
should work in the other browsers. My thinking being that the newer browsers
have superior rendering capabilities and are better at reading CSS. I will
have to rethink my approach.
Thank you for your comments.
Kris


__
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] A simple question - h1 before p

[MEM]

> No, but you could apply the reverse:
> 
> h1 + p { padding-top: 3em; }
> 
> So instead of "any h1 that precedes a p" you're styling "any p that
> immediately follows an h1." (Note, this doesn't work for IE6. And for
> it to work properly in IE7, you'll want to make sure that you never
> have a comment between the  and the . See
>  tysection>
> for more about this.)
> 
> Erik


Thanks Erik. 
Unfortunately I cannot use a rule that cannot be applied on IE6 since 40% of my 
country users still use it. Can you imagine this?

Anyway, I now know another concept on css: Adjacent Sibling Selector. And I 
believe there is a Child and a Parent selector too.

I will investigate when the need arrive.

Thanks a lot,
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] A simple question - h1 before p

[Brian Hazelton]

MEM wrote:
> Hello,
>
> Without .js, is there a way to establish a rule in CSS that says:
>
> All h1 that are followed by a p will have a padding-bottom of X. 
>
> Is this possible?
>
>
>
> Thanks a lot,
> 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/
>
>   
There is no way to do that without modifying the code a little bit. What 
you could do is define a class for the h1 elements and define the bottom 
padding as zero. Then in the html all you have to do is add that class 
to any h1 which has a paragraph after it.
Brian Hazelton
http://veridian-systems.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] A simple question - h1 before p

[Erik Vorhes]

On Wed, Jul 8, 2009 at 3:20 PM, MEM wrote:
>
> All h1 that are followed by a p will have a padding-bottom of X.
>
> Is this possible?


No, but you could apply the reverse:

h1 + p { padding-top: 3em; }

So instead of "any h1 that precedes a p" you're styling "any p that
immediately follows an h1." (Note, this doesn't work for IE6. And for
it to work properly in IE7, you'll want to make sure that you never
have a comment between the  and the . See

for more about this.)

Erik
__
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] firefox problem

[Bob Rosenberg]

At 15:55 +0100 on 07/08/2009, David Dorward wrote about Re: [css-d] 
firefox problem:

>The second thing to deal with is the syntax errors:
>
>http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hcam.net%2Fposts.html&charset=%28detect+automatically%29&doctype=Inline&group=0
>
>Once you've dealt with the machine detectable errors, then start
>worrying about browsers rendering things other than as you expect.

They are NOT syntax errors per-sa but harmless Markup from his 
WebDesign program. They can be automatically eliminated from the copy 
uploaded to the Web Site (while leaving them in the master copy on 
his computer) by having the WebDesign program create a clean copy for 
manual uploading or having it clean the copy it uploads itself. This 
is the same type of crud that Office creates when it outputs HTML so 
that the HTML can be round-trip read back into Office as if it were a 
.DOC not a .HTM/.HTML format file.

There are no REAL (ie: HTML statement) syntax errors there only non-HTML tags.
-- 

Bob Rosenberg
RockMUG Webmaster
webmas...@rockmug.org
www.RockMUG.org
__
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] A simple question - h1 before p

[MEM]

Hello,

Without .js, is there a way to establish a rule in CSS that says:

All h1 that are followed by a p will have a padding-bottom of X. 

Is this possible?



Thanks a lot,
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] Same Height Columns

[MEM]

> Using images for the borders may work in FF/3.0.11. And might provide a
> more stable layout in which the columns are of more consistent width.
> Checked in IE 6/7/8 and Mac browsers. Please see:
> 

Thanks a million once again,
I will keep it. (but, until it breaks, I will use the other one :D).


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] @media tv

[scott.heckel]

> Was't there a device made by Microsoft that allowed to use a standard
tv to browse the web?

MSN tv formerly Web TV.  http://msntv.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] @media tv

[Conyers, Dwayne]

Philippe Wittenbergh wrote:

> Was't there a device made by Microsoft 
> that allowed to use a standard tv to 
> browse the web? 

It is Microsoft Web TV (http://www.webtv.com/pc/) which is still out there but 
don't know what the user base would be.  Try MSDN and/or Technet for an SDK for 
this device.


-- 
I made magic once.  Now, the sofa is gone.
http://blog.dwacon.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] @media tv

[Philippe Wittenbergh]

On Jul 8, 2009, at 8:59 PM, Ingo Chao wrote:

> Are there devices out there that actually use this media type?

Was't there a device made by Microsoft that allowed to use a standard  
tv to browse the web? I think it used @media tv. It is/was mostly used  
by pensioners in Florida, iirc the joke that was doing the rounds.

Philippe
---
Philippe Wittenbergh
http://l-c-n.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] firefox problem

[David Dorward]

2009/7/7 Tri-State AdVantage :
> I cannot get this page to read correctly in Firefox.
> http://www.hcam.net/posts.html

The obvious first thing to fix is the Doctype. HTML 4.01 Transitional
with no URL triggers Quirks Mode, which introduces all sorts of
inconsistencies between browsers, especially when it comes to CSS and
error recovery.

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Transitional is for legacy documents anyway, switch to:

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

The second thing to deal with is the syntax errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hcam.net%2Fposts.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Once you've dealt with the machine detectable errors, then start
worrying about browsers rendering things other than as you expect.

-- 
David Dorward 
__
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] @media tv

[Ingo Chao]

Are there devices out there that actually use this media type?

Thanks,

Ingo
__
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] Preventing images/text from wrapping when window is narrowed

[Tim Snadden]

On 8/07/2009, at 12:49 PM, Anne E. Shroeder wrote:

> A client handed over to me a site that had just awful code (the  
> original
> http://www.inspiredcre8tions.com/red/) and I cleaned it up, made it  
> more
> semantic and validated it http://www.language-works.com/RED/indexNEW.htm
> but she is griping because now the images and the footer wrap under  
> if you
> narrow the browser window.   I'm not sure I understand the rationale  
> for
> wanting this, since it causes a horizontal scroll, but anyhow, the  
> client
> wants it.  I've searched around but am not finding yet any good  
> answers.
>
> A difference between the original version and this one is that she  
> wanted
> absolute positioning for the top banner (and the code placed at the  
> bottom
> of the page for SEO).
>
> Any pointers much appreciated.
>
> Anne


The quick fix is #banner { width: 600px;  } if that's what you're after.

However, I think that the way the top section is put together is a bit  
unusual. The markup and CSS could be simplified. e.g. What is the  
point of #logo? It just wraps a link and image. Why is #banner set to  
be positioned absolutely? Why use a background image where background  
colour would do? etc. Just my 2c! You may just want to fix it with the  
rule above and move on.

__
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] Preventing images/text from wrapping when window is narrowed

[David Laakso]

Anne E. Shroeder wrote:
> A client handed over to me a site that had just awful code (the original 
> http://www.inspiredcre8tions.com/red/) and I cleaned it up, made it more 
> semantic and validated it http://www.language-works.com/RED/indexNEW.htm 
> but she is griping because now the images and the footer wrap under if you 
> narrow the browser window.   I'm not sure I understand the rationale for 
> wanting this, since it causes a horizontal scroll, but anyhow, the client 
> wants it.  I've searched around but am not finding yet any good answers.
>
> A difference between the original version and this one is that she wanted 
> absolute positioning for the top banner (and the code placed at the bottom 
> of the page for SEO).
>
> Any pointers much appreciated.
>
> Anne
>
>   



#contentArea { border: 1px solid red; min-width: 800px; }


And for her users who do not share her sense of humor:
body {font-family:/*Verdana, Arial, Helvetica,*/"Helvetica Neue", Arial, 
sans-serif; font-size:/*11*/16px;}



   


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