Re: [css-d] p:first-line :: opera9preview ::~dL

[Ingo Chao]

David Laakso wrote:
> Ingo,
> Your fix closed gap beneath the top 4 spaces. Open space remains under 
> under “Were there Uncles like in our house?”

Not at my end? Mysterious.

Anyway, let's wait for 9TP2 and propose a toast to Dylan Thomas in his 
own words.

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

Re: [css-d] Myspace

[D Ross]

This guy used to have an amazing myspace page but it appears they  
deleted it for some reason...I saw it before they did and was in awe  
that he could make all that table junk look like what he had it to. I  
checked out his code and he had used display: none and replaced table  
cells with divs and just replaced the content into the divs.

Here's his site and about halfway down is a screenshot of what it  
looked like.

http://www.timbenzinger.com/




>
>
> I spent like 20 min on my page one night when i was bored, before i  
> got
> frustrated with it.  You can't do anything good with it because 90% of
> the tag-soup contains font tags and so forth that end up just
> over-riding your css.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Myspace

[David Ross]

It's inline css, well the css that's within the actual tags is inline
css.the other css is put into the head section...so, there's no link to
a css file..it's all in the actual page. Inline css takes precedence over
all other css styles so you can overrride their styles with your own.

On 12/22/05, Scott Haneda <[EMAIL PROTECTED]> wrote:
>
> Ok, I have been wondering this for some time, and as much as I dislike the
> myspace generation, I need to know some technical aspects.
>
> I have seen maybe 2 pages where someone has done a really nice job laying
> out the page.  In the code, I see this:
> table table table table { css here };
>
> Can someone tell me what this is all about, or point me to a link, I do
> not
> get that one bit.
>
> Second, seems you have to shove all css into the body of the page, meaning
> to me, procedurally, the css, loads after the body and html tags, so you
> would think it should not even work.  Is this even valid, or just am area
> the browsers decide to patch up for the user.  ie:
> 
> Mess of old html code
> body {
> foo: foo;
> }
> --
> -
> Scott HanedaTel: 415.898.2602
>  Novato, CA U.S.A.
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> 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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] p:first-line :: opera9preview ::~dL

[David Laakso]

Ingo Chao wrote:

> David Laakso wrote:
>
>> In this prose, in Opera9, there are 5 p:first-line(s) of 5 and 6 
>> words followed by a. Each has an extra line of space beneath it 
>> as though there is a missing line of text. Now what I'll do? 
>> 
>
>
> What about
>
> br:before {content:""; display: block;} ?
> It looks like as if the additional line break of the firstline-pseudo 
> element was placed before the br, so this empty content:"" before 
> seems to collapse with the firstline.
> Without the display:block, only with the empty content, the breaks 
> collapse in Philippe's testcase.
> Don't know if that's the way to go. Safari and Fx do not react on 
> br:before here.
> Ingo
>
Ingo,
Your fix closed gap beneath the top 4 spaces. Open space remains under 
under “Were there Uncles like in our house?”
Caused page background-color to stop at top of the 3 col author information.
S, I hid author information and h3 from Opera.
@media screen and (min-width: 0px){ br:before {content:""; display: 
block; background-color: #EBE7DE; } #header-minor, #l-side, #main, 
#middle, #r-side, #wrapper, #container, #footer { display: none; } 
#content {padding-bottom: 100px; } }
Me thinks that is fine until such time Opera fixes the bug-- they 
respond quickly to bugs.And Philippe has filed a report. No big deal on 
my end living with it a little whacked in Opera for the time being.
Thanks so much.
David






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

Re: [css-d] Myspace

[Scott Haneda]

on 12/21/05 10:48 PM, Brian Cummiskey at [EMAIL PROTECTED] wrote:

> The only thing i regret, is that i didn't create myspace.  What did it
> sell for, $200 million or something like that?  But, that's off topic.

And here I am still hung up on the million dollar home page :-)
Thanks for the info everyone, looks like I wont be trying to make it pretty
for fun, if I have to bastardize my css to the points mentioned, just seems
not worth it.
-- 
-
Scott HanedaTel: 415.898.2602
 Novato, CA U.S.A.


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

Re: [css-d] Myspace

[Brian Cummiskey]

Scott Haneda wrote:
> Ok, I have been wondering this for some time, and as much as I dislike the
> myspace generation, I need to know some technical aspects.

Hey wait, that's me :P


> I have seen maybe 2 pages where someone has done a really nice job laying
> out the page.  In the code, I see this:
> table table table table { css here };

This effects the 4th table nested in.  The mark-up on myspace is 
pathetic at best.  Frontpage could probably make cleaner code.  I even 
rant about it in my profile: http://www.myspace.com/pissedoffsol

and you can see my code to get my blocks to have that border:

table, td { background-color:transparent; border:none; border-width:0;}
table table table {border:3px solid; border-color:33; 
background-color:ff; }
table table{border:0px}
table table table table{border:0px}


the 3rd table in is the holder, and the 4th is the data/text in that block.


I spent like 20 min on my page one night when i was bored, before i got 
frustrated with it.  You can't do anything good with it because 90% of 
the tag-soup contains font tags and so forth that end up just 
over-riding your css.

Another kicker, is that you can't use #333.  it will eat the # sign, and 
doesn't know what to do with the 3-character short hand.  so you have to 
feed it background-color: 33;
It also doesn't like taking multiple parameters, such as border: 1px 
solid #333;  You have to split out the color.  see my code above.. it's 
like that for a reason.


The only thing i regret, is that i didn't create myspace.  What did it 
sell for, $200 million or something like that?  But, that's off topic.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] p:first-line :: opera9preview ::~dL

[Ingo Chao]

David Laakso wrote:
> In this prose, in Opera9, there are 5 p:first-line(s) of 5 and 6 words 
> followed by a. Each has an extra line of space beneath it as 
> though there is a missing line of text. Now what I'll do?
> 

Thanks for the story, David.



What about

br:before {content:""; display: block;} ?

It looks like as if the additional line break of the firstline-pseudo 
element was placed before the br, so this empty content:"" before seems 
to collapse with the firstline.

Without the display:block, only with the empty content, the breaks 
collapse in Philippe's testcase.

Don't know if that's the way to go. Safari and Fx do not react on 
br:before here.

Ingo


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

Re: [css-d] p:first-line :: opera9preview ::~dL

[David Laakso]

Philippe Wittenbergh wrote:

>
> On 22 Dec 2005, at 1:26 pm, David Laakso wrote:
>
>> In this prose, in Opera9, there are 5 p:first-line(s) of 5 and 6 words
>> followed by a. Each has an extra line of space beneath it as
>> though there is a missing line of text. Now what I'll do?
>> 
>> aside: And yes, I am sleeping with the enemy (ie italic bug).
>> Thanks.
>
>
> I've filed a bug report with Opera about that, a few weeks ago...
> It bites me on two sites.
>
> Here is the file I attached to the bug report:
> 
> And look at the-line breaks, even when the :first-line is not  
> applied. Interesting 'cascade'.

Dylan Thomas had the right idea. His last words were: "I've had 18 
straight whiskeys, I think this is a record."

>
>
> Philippe
> ---
> Philippe Wittenbergh
> 
>
>
>
Thanks.
David
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Myspace

[Christian Montoya]

On 12/22/05, Scott Haneda <[EMAIL PROTECTED]> wrote:
> Ok, I have been wondering this for some time, and as much as I dislike the
> myspace generation, I need to know some technical aspects.
>
> I have seen maybe 2 pages where someone has done a really nice job laying
> out the page.  In the code, I see this:
> table table table table { css here };
>
> Can someone tell me what this is all about, or point me to a link, I do not
> get that one bit.
>

Myspace = nested table madness. So:

table table table table { css here }

is styling the actual myspace content, which is the great-grandchild
table of the main, outside table.

> Second, seems you have to shove all css into the body of the page, meaning
> to me, procedurally, the css, loads after the body and html tags, so you
> would think it should not even work.  Is this even valid, or just am area
> the browsers decide to patch up for the user.  ie:
> 
> Mess of old html code
> body {
> foo: foo;
> }

This is becase myspace does not use standards compliant html. There's
no doctype, and even if there was it would be html, not xhtml. in this
tag-soup html, you can put stuff anywhere in the page and browsers
will do a whole lot of error-prevention while parsing this tag soup
and just make everything work. It's a mess but it works... you can put
css in the body and it works just fine. I think myspace doesn't allow
css styling in the head so it's the only way.

I think even with an html 4 doctype this would still be possible, but
I'm not sure.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Myspace

[Scott Haneda]

Ok, I have been wondering this for some time, and as much as I dislike the
myspace generation, I need to know some technical aspects.

I have seen maybe 2 pages where someone has done a really nice job laying
out the page.  In the code, I see this:
table table table table { css here };

Can someone tell me what this is all about, or point me to a link, I do not
get that one bit.

Second, seems you have to shove all css into the body of the page, meaning
to me, procedurally, the css, loads after the body and html tags, so you
would think it should not even work.  Is this even valid, or just am area
the browsers decide to patch up for the user.  ie:

Mess of old html code
body {
foo: foo;
}
-- 
-
Scott HanedaTel: 415.898.2602
 Novato, CA U.S.A.


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

[css-d] Does Safari support adjacent sibling selector?

[Christian Montoya]

I'm working on an explanation of why some browsers, like Safari, don't
support the CSS in the CSS maze[1]. I know Safari has a problem with
this line:

#d1:hover+#d2 { z-index:3; }

but I'm not sure if it's the adjacent sibling selector, or that I'm
changing the z-index on a hover to an adjacent sibling, that is the
problem. Any ideas?

[1] http://cssmaze.christianmontoya.com/ - works in Gecko browsers and
Opera 9 preview. Any others? Let me know please.

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] p:first-line :: opera9preview ::~dL

[Philippe Wittenbergh]

On 22 Dec 2005, at 1:26 pm, David Laakso wrote:

> In this prose, in Opera9, there are 5 p:first-line(s) of 5 and 6 words
> followed by a. Each has an extra line of space beneath it as
> though there is a missing line of text. Now what I'll do?
> 
> aside: And yes, I am sleeping with the enemy (ie italic bug).
> Thanks.

I've filed a bug report with Opera about that, a few weeks ago...
It bites me on two sites.

Here is the file I attached to the bug report:

And look at the-line breaks, even when the :first-line is not  
applied. Interesting 'cascade'.


Philippe
---
Philippe Wittenbergh



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

[css-d] Getting links to left align...resolved!

[Iorhael]

Regarding my last post about bottom links not aligning on one of my 
sitesplease ignore...I had missed a fix that Holly suggestedI have made 
that now and everythink looks good. Here's the fix in case anyone has a similar 
problem:

#nav ul {
   clear: both;
   list-style-type: none;
   text-align: left;
   margin-left: 10px;
   padding: 0; /* << add this <<< */
} 

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

Re: [css-d] Challenging layout - can this be done?

[Gunlaug Sørtun]

Updated version, in case some would like to give older Opera a chance.



Opera 9prev1 doesn't need the extra "fix", but it isn't bothered by it
either. Short term workaround.

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

[css-d] p:first-line :: opera9preview ::~dL

[David Laakso]

In this prose, in Opera9, there are 5 p:first-line(s) of 5 and 6 words 
followed by a. Each has an extra line of space beneath it as 
though there is a missing line of text. Now what I'll do?

aside: And yes, I am sleeping with the enemy (ie italic bug).
Thanks.
~dL

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

Re: [css-d] Challenging layout - can this be done?

[Gunlaug Sørtun]

Tom Dell'Aringa wrote:
> http://www.pixelmech.com/rev/tile.html

Not sure if I got it right, but...

...was the only thing I could think of.
Maybe you can change it into something useful.

IE/win needs a bit of help on the basics (hover all), but the other
browsers should be fine.

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

Re: [css-d] Box Model

[Richard Grevers]

On 12/22/05, bill scheider <[EMAIL PROTECTED]> wrote:
> At the risk of sounding as ignorant as I often feel when trying to figure
> this stuff out: the box model responses have addressed rendering in IE6 very
> well. What I'm confused about beyond that, is -- after the correct and
> complete doctype AND removal of any XML declaration -- are there strategies
> that can be helpful for the box model in earlier versions of IE?

Yes - you can avoid box model problems simply by avoiding borders and
padding on elements which have width. Use margin instead. This may
involve using a few  more levels of nesting than you would otherwise.

For example, we have a container for mixed content:

#sidebar {float: right; width: 250px; margin: 10px; border: 1px solid
#f00; padding: 6px 4px;}

In standards-compliant browsers, this will be 10px wider than in quirks mode IE.
but let's strip #sidebar just to positioning and size information:
#sidebar {float: right; width: 250px; margin: 10px;}

.sidebar_inner{border: 1px solid #f00; padding: 6px 4px; margin:0;}

then


  

sidebar_inner is simply as wide as it can be within the constraints of
its parent. This will display the same on all browsers.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Getting links to left align in FF

[Iorhael]

I posted about this site last night, but thanks to Holly and others I 've 
gotten most everything straightened out...the problem I have still having not 
being able to get the bottom links to align left on pages 1 and 2 in Firefox (I 
have centered them for page 3). Holly, I realize that this most likely not due 
to needing a clear condition after all since it occurs on the page 1 as well as 
the thumbs page (page 2). Though just  to be on the safe side, I did add a 
division class of clear for the bottom links on both pages. The links look fine 
in Opera and IE. I am stumped on this.

Here are the page links:

http://www.drk-writing.com/debscards/

(click the Flowers link at the bottom to get to page 2)

Here's the imported stylesheet:

#container {
   background-color: #ABE2C4;
   margin: 25px auto 25px auto;
   padding: 25px;
   width: 625px;
}

#content {   
   text-align: left;
   width: 550px;
   margin: 20px auto 20px auto;
   padding: 25px;
   border: 1px solid #0A7944;
}

#contentcenter {   
   text-align: center;
   width: 550px;
   margin: 20px;
   padding: 25px;
   border: 1px solid #0A7944;
}


/*Deb's Cards Header*/

#header {
   margin-left: -15px;
}  


/*First line and first letter*/

p:first-line {
   font-variant: small-caps;
   font-style: italic;
   font-weight: bold;
   text-transform: capitalize;
} 

.firstltr:first-letter {
   float: left;
   font-family: Georgia, 'Times New Roman', serif;
   font-size: 50px;
   font-weight: bold;
   padding: 5px 5px;
   margin-right: 5px;
   background:  url(general/batiktile.gif) repeat;
   border: 1px solid #590F81;
   color:  #DBC8F5;
}


/*home page card images*/

.imageone {
   float: left;
   border: 3px solid #590F81;
   margin: 15px 15px 15px 0;
}   

.imageone:hover {
   float: left;
   border: 3px solid #DBC8F5;
   margin: 15px 15px 15px 0;
}   

.imagetwo {
   float: right;
   border: 2px solid #590F81;
   margin: 0 0 12px 12px;
}  

.imagetwo:hover {
   float: right;
   border: 2px solid #DBC8F5;
   margin: 0 0 15px 15px;
}  


/*mother's day card zoom*/

.zoom {
 margin: 10px 0px 10px 0;
 border: 3px solid #590F81;
 display: block;
 width: 96px; /* show only thumbnail */
 height: 75px;
 background: url(images/cards/flowers/mothersday.jpg) no-repeat top left;
 }

.zoom:hover {
 margin: 10px 0px 10px 0;
border: 2px solid #590F81;
 width: 300px; /* adjusting size to zoomed photo */
 height: 236px;
 background-position: 0 225px; /* move the image so only the big one shows */
}


/*card thumbnails*/

.thumbnail {
   float: left;
   width: 82px;
   border: 1px solid #590F81;
   margin: 0 10px 35px 0;
   padding: 4px;
   text-align: center;
   font-family: 'Comic Sans MS', sans-serif;
   font-size: 12px;
   color: #000;
} 

.clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 1px;
}


/*links and copyright - page 1*/ 

#nav ul {
   clear: both;
   list-style-type: none;
   text-align: left;
   margin-left: 10px; 
}  

#nav li {
   display: inline;
   padding: 0 10px 0 10px;
   border-right: 1px solid #590F81;
}  

#nav li.last  {
   border-right: none;
}  

#nav li a:link, #nav li a:visited {

   text-align: left;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   font-style: italic;
   font-variant: small-caps;
   text-transform: capitalize;
   color: #590F81;
} 

#nav li a:visited {
   color: #590F81;
   text-decoration: underline;
}   

#nav li a:hover {
   color: #0A7944;
   text-decoration: underline;
} 
 

#copyright {
   text-align: left; 
   margin: 0 0 0 20px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #590F81;
} 

#nav ul.center {
   clear: both;
   list-style-type: none;
   text-align: center;
   margin-left: 10px;
} 

#copyrightcenter {
   text-align: center; 
   margin: 0 0 0 20px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #590F81;
} 
  

/*form page*/

form {
   margin: 0;
   border: 1px solid #fff;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: #590F81;
   color: #fff;
   line-height: 150%;
   width: 100%;
}

legend {
   font-family: Georgia, 'Times New Roman', serif;
   font-style: italic;
   font-size: 14px;
   background-color: #590F81;
   color: #fff; 
}   

fieldset {
   margin: 20px;
   padding: 10px;
   border: 1px solid #DBC8F5;
}

input, textarea, select {
   background-color: #DBC8F5;
   text-align: right;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}

input:focus, textarea:focus, select:focus {
   background-color: #ABE2C4;
   color: #590F81;
}

input[type=submit], input[type=reset] {
   margin: 15px;
   padding: 3px;
   width: 5em;
   text-align: center;
   border: 1px solid #000;
}

p.formleft {
   color: #fff;
   text-align: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: normal;
} 


p.formright {
   color: #fff;
  

Re: [css-d] Safari renders a horizontal dropdown block off by one...(repost)

[Jeff Ross]

On Wed, 21 Dec 2005, Roger Roelofs wrote:


Jeff,

On Dec 20, 2005, at 2:33 PM, Jeff Ross wrote:


 I posted this last night but I mistakenly posted as a reply and didn't
 start a new thread.  Apologies for that, and it won't happen again.

 I have an odd off-by-one problem with Safari 1.3.1 in this page:

  http://cvs.new.wykids.org/


I see the problem you are describing.  I don't have a specific fix for you. 
My first suggestion would be to validate your html.  Your current code isn't, 
and invalid code causes browsers to fall back into 'tag-soup' rendering which 
varies from browser to browser.  If you take the time to fix your validation 
errors, the browsers may come more into line with each other.  I highly 
recommend the 'Web Developer Toolbar' for gecko based browsers 
(mozilla/firefox/flock) as a simple way to check this, as well as lots of 
other debugging tools.


hth
Roger,

Roger Roelofs
"Remember, if you?re headed in the wrong direction,
 God allows U-turns!"
  ~ Allison Gappa Bottke



Excuse me?

http://jigsaw.w3.org/css-validator/validator?uri=http://cvs.new.wykids.org/

Which validator are you using that it fails with?

Thanks for the tip about the web developer tools.

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

Re: [css-d] Box Model

[Holly Bergevin]

From: "bill scheider" <[EMAIL PROTECTED]>

>are there strategies
>that can be helpful for the box model in earlier versions of IE?

Ian has given you some suggestions that will work. Probably the simplest way to 
deal with the IE5s however is just to write two of the same property rules with 
different values, the first for IE5.x/Win and the second for all other 
browsers. The second rule should have an escape placed within the property 
name, before a letter that is not one of the first six of the alphabet (a-f). 
The escape will prevent the IE5.x browsers from reading the redefinition of the 
property. This can be done right in a main style sheet with no hiding other 
than the escape. An example follows - 

#wrapper {
width: 778px;
w\idth: 760px;
padding: 0 8px;
border: 1px solid #036;
}

The "wrapper" will be 778px in all browsers. The IE5s will still place the 
border and padding inside the stated width, but the "inside" will be bigger to 
start with, the same width as other browsers (and IE6 in standards mode) that 
place the padding and border on the outside of the stated content width.

"Double definitions" for box issues are the only way to resolve descrepencies 
between the IE5.x/Win broken box model, and the W3C box model if you are using 
width-defined boxes with padding and/or borders. Where you put your "hacked" 
definitions is up to you, whether in the regular style sheet as shown, filtered 
as Ian suggested, or in a separate style sheet called from a Conditional 
Comment.

Note: If you have height-defined elements with border and/or padding, the same 
problem occurs with the IE5.x/Win browsers. The solution method is the same.

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

Re: [css-d] clearing a float without using a float

[Philippe Wittenbergh]

On 22 Dec 2005, at 10:08 am, Roger Roelofs wrote:

> As Zoe said, you need a new 'block formatting context'  All of the
> following will do that
>
> float: left;
> position: absolute;
> display: table;
>
> But, all of these cause the container to 'shrink-wrap'  Floating
> .inside seems the most typical approach, but other approaches may be
> better in your circumstances.  There are always trade-offs...

Aditionally:

* display:inline-block (not Gecko)
* the overflow property (other than visible, the default).
* display:table-cell (weak in Safari)

Each have strengths and weaknesses.

for IE win, you can also use 'hasLayout' winIE property (setting a  
width/height on the container).


Philippe
---
Philippe Wittenbergh



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

Re: [css-d] breaking up thumbnails into separate rows

[Holly Bergevin]

From: "Iorhael" <[EMAIL PROTECTED]>
> I started out setting the clear up as a
>class, and then thought I'd try a division when that didn't work...but
>forget to change the html tag. It looks great now in FF :)

I'd actually recommend setting it up as a class instead of an ID, since then 
you can use it more than once per page if needed. Class attributes can be used 
on divs.

>Now the only thing left is that the bottom links still aren't left aligning 
>in FF...

#nav ul {
   clear: both;
   list-style-type: none;
   text-align: left;
   margin-left: 10px;
   padding: 0; /* << add this <<< */
}

>http://www.drk-writing.com/debscards/debscards2.htm

Regards,

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

Re: [css-d] Box Model

[Ian Anderson]

bill scheider wrote:

> This has been completely answered in regards to IE6. Does it also apply to
> earlier versions of IE? Thanks for any further help or suggestions.

Versions of IE for Windows prior to 6.0 use the incorrect box model 
regardless of DOCTYPE, where margins, border and padding are considered 
to be part of box width.

In the past, I have used Tantek Celik's mid-pass filter[1] to supply a 
separate style sheet that will be seen only by IE 5.5 or lower.

e.g.

/* Import the style sheet for IE5.x Windows */
@media tty {
  i{content:"\";/*" "*/}} @import 'ie5.css'; /*";}
}/* */

I put this import statement in a css file that is itself imported into a 
screen.css, linked from the HTML:

HTML
  - link to screen.css using media=screen
   - import main.css
 - import ie5.css using mid-pass filter
  - link to print.css using media=print

This is to prevent the ie5 information leaking into the print styles, 
for example.

In ie5.css, I put the alternate calculated width values for elements 
affected by box model differences - that is, elements with specific 
width, margin and/or padding specified.

This should be imported after the rules are set with the correct values, 
so that IE5.x amends the widths to its own needs. If necessary, you can 
use the !important keyword in the ie5 rules to push the revised values 
through if you have any cascade issues.

Bear in mind that you can avoid setting separate styles for IE5 by never 
putting margin, padding or border on elements with width specified; you 
can use an inner DIV for whitespace and an outer DIV for width. It's 
less preferable from a semantic perspective, but easier to build and 
maintain in some ways. I think Dan Cederholm and Tantek Celik have both 
recommended this option in the past.

Also of note: I have a feeling that conditional comments may be 
preferable to the mid-pass filter, going forward.
Hope this helps

Cheers

Ian

[1] http://www.tantek.com/CSS/Examples/midpass.html

-- 
_
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net BETA - Online code library
File, manage and re-use your code snippets online
http://snippetz.net

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

[css-d] [css-discuss] Site check: Peekaboo?

[Jonathan Berry]

http://www.haroldstevens.com/redesign/contact.html
We are having a problem with one of our sites wherein the left nav shifts
either on load or refresh (i.e. if you cannot get it immediately then
refresh and you will see the probelm). This is only in IE and looks like it
might be an instance of the Peekaboo bug. But we already have code in place
to handle that. Can you check it for us? Thanks in advance.
--
Jonathan Berry, M.A.
IT Consultant
619.306.1712(m)
[EMAIL PROTECTED]
www.mindarc.com

---

This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged.
This information is confidential information and is intended only for
the use of the individual or entity named above. If the reader of this
message is not the intended recipient, you are hereby notified that any
dissemination, distribution or copying of this communication is strictly
prohibited.

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

Re: [css-d] breaking up thumbnails into separate rows

[Iorhael]

> ...which shows an ID selector for the clearer. However, you have -
> class="clear" - on the div in your HTML. Either change the selector to
> indicate a class, or change the class attribute to an ID attribute in your
> HTML. That should get things working.

ooops! Thanks for catching that! I started out setting the clear up as a
class, and then thought I'd try a division when that didn't work...but
forget to change the html tag. It looks great now in FF :) Thanks again :)
(After going round and round awhile trying to fix something, I have a
tendency to miss these dumb little things that I should catch right off.)

Now the only thing left is that the bottom links still aren't left aligning 
in FF...they look fine in the others. I would think the clear id and the 
clear declaration set here would set that straight, but its not :(

#nav ul {
   clear: both;
   list-style-type: none;
   text-align: left;
   margin-left: 10px;
}

http://www.drk-writing.com/debscards/debscards2.htm

Debbie

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

Re: [css-d] Box Model

[bill scheider]

At the risk of sounding as ignorant as I often feel when trying to figure
this stuff out: the box model responses have addressed rendering in IE6 very
well. What I'm confused about beyond that, is -- after the correct and
complete doctype AND removal of any XML declaration -- are there strategies
that can be helpful for the box model in earlier versions of IE?

To quote Tod in his original question: "I was wondering if there is just one
simple tried and true style sheet method that can always be applied to at
least start out on the right foot that I can build upon which would remove
any browser computability issues.  At least then I could be comfortable in
knowing the problem is me and not the browser, thus removing one variable
from the debugging process."

This has been completely answered in regards to IE6. Does it also apply to
earlier versions of IE? Thanks for any further help or suggestions.

Bill



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

Re: [css-d] clearing a float without using a float

[Roger Roelofs]

CJ,

On Dec 21, 2005, at 1:10 PM, CJ Larson wrote:

> In one of my site layouts, I have the navigation floated to the left 
> and
> gave the content area a margin-left to give the float room to breathe.
> On my content area, I have  tags clearing left by default since I
> float several things on various pages.  Where this creates a problem is
> when the  element is supposed to show horizontally in the same area
> as the menu.
>
> Zoe helped Jennifer with an issue like this earlier this week, but the
> recommended solution was to float the content area.  What might be
> another solution if floating the content div isn't desirable?
>
> My (cut down) page:
> http://sltclan.com/images/cj/default.html
>
> Notice that the "please select a layout" paragraph is below the bottom
> of the left menu because of the "clear: left" I set in layout5.css.
> (The problem doesn't occur in IE.)

As Zoe said, you need a new 'block formatting context'  All of the 
following will do that

float: left;
position: absolute;
display: table;

But, all of these cause the container to 'shrink-wrap'  Floating 
.inside seems the most typical approach, but other approaches may be 
better in your circumstances.  There are always trade-offs...

Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] breaking up thumbnails into separate rows

[Holly Bergevin]

From: "Iorhael" <[EMAIL PROTECTED]>

>Well, I moved the div tag but its still not working :(...*tearing hair out 
>here*g! (I fixed the doctype too.)
>
>http://www.drk-writing.com/debscards/debscards2.htm

I aplolgize for not specifically checking your your style sheet. You have -
 
#clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 1px;
}

which shows an ID selector for the clearer. However, you have - class="clear" - 
on the div in your HTML. Either change the selector to indicate a class, or 
change the class attribute to an ID attribute in your HTML. That should get 
things working.

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

Re: [css-d] breaking up thumbnails into separate rows

[Iorhael]

> The selector/properties (style sheet stuff) are fine, the location of the 
> div is not. You'll need to move it above the closing div tag that is right 
> above it, following the closing div tag that is next to the words "Thank 
> You" -

Well, I moved the div tag but its still not working :(...*tearing hair out 
here*g! (I fixed the doctype too.)

http://www.drk-writing.com/debscards/debscards2.htm

Debbie 

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

Re: [css-d] breaking up thumbnails into separate rows

[Holly Bergevin]

From: "Iorhael" <[EMAIL PROTECTED]>

>I fixed the height and margins of the 
>thumbnails...(that was a "duh" for me on the height...yet it looked fine in 
>all the other browsers so I just thought it was mess-up in FF)

As was explained by another (Georg, I think), your incomplete doctype has all 
browsers functioning in quirks mode. IE does what you wanted on those 
thumbnails, as well as causing the content div to clear the floats, but it's 
behavior is wrong. In quirks mode, Opera, and apparently Netscape, imitate IE's 
misbehavior.

Firefox, however, is displaying more closely to what the specifications say 
should happen, and therefore looking wrong to you.

With a complete doctype (you've been given a reference to the wiki already, and 
I've posted several references today in another thread about the box model), IE 
would still look "right" (and be wrong) but the other browsers would probably 
look more like FF in their rendering of your page.

To reiterate previous suggestions - 
Start with a complete doctype, code to the standards, not to a browser's 
display (or Dreamweaver'), check and make your pages work in 
Firefox/Opera/Safari, fix display differences in IE after the other ones are 
doing what you want, use the markup and CSS validators along the way as tools, 
to check that you aren't making errors that could further complicate 
cross-browser display, learn what the specifications say "should" happen with 
the code you write.

Cheers,

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

Re: [css-d] breaking up thumbnails into separate rows

[Holly Bergevin]

From: "Iorhael" <[EMAIL PROTECTED]>

>I added the .clear rule but it doesn't seem to be doing the trick in FF :( 
>Can you let me know if I've got it the right place? Here's the link:
>
>http://www.drk-writing.com/debscards/debscards2.htm
>
>And here's the clear div id that I added to my stylesheet:
>
>#clear {
>  clear: both;
>  height: 0;
>  line-height: 0;
>  font-size: 1px;
>}

The selector/properties (style sheet stuff) are fine, the location of the div 
is not. You'll need to move it above the closing div tag that is right above 
it, following the closing div tag that is next to the words "Thank You" - 

[snipped code]
  Thank You< /div >
< div class="clear" >& nbsp;< /div >
< /div >

< div id="nav" >
[more snipped code]

That should work for you,

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

[css-d] Challenging layout - can this be done?

[Tom Dell'Aringa]

I've had an idea for an online game which requires a isometric grid in HTML. 
(Note: Sure, I can do this in flash - I don't want to for varied reasons.) 
Building the grid was fairly simple, except for the problem of every grid 
column after the first being overlapped by the next column by half. This makes 
clicking on items on that grid item problematic since only half the grid 
section (div) is exposed. To see my rough example, look here:
 
 http://www.pixelmech.com/rev/tile.html
 
 Each column has a containing div to set the row, and a class sets the 
background tile. I played around with Javascript moving each tile up in the 
z-index when clicked, etc...really didn't have much luck with it.
 
 Maybe I'm asking for something that is not possible, but is there a way to 
build an html iso grid like this, with each tile selectable? The obvious 
problem is the overlapping divs. I can't think of a way around this. I played 
around with possibly using an old fashioned image map, but for what I want to 
do that would not really be a good solution.
 
 Interested in any suggestions or comments.
 
 Thanks!
 
 Tom

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

Re: [css-d] breaking up thumbnails into separate rows

[Iorhael]

> You'll also need a clearing element, perhaps a div, between the close of 
> the last thumbnail div, and the closing div tag (content?) that comes 
> right before the nav div code.


Thanks for this Holly! I fixed the height and margins of the 
thumbnails...(that was a "duh" for me on the height...yet it looked fine in 
all the other browsers so I just thought it was mess-up in FF)

I added the .clear rule but it doesn't seem to be doing the trick in FF :( 
Can you let me know if I've got it the right place? Here's the link:

http://www.drk-writing.com/debscards/debscards2.htm

And here's the clear div id that I added to my stylesheet:

#clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 1px;
}

Thanks!

Debbie 

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

Re: [css-d] Styling numbered lists

[David Hucklesby]

Hi Geoff,

You wrote:
> I am looking to style an ordered list with colored blocks with a
> number inside.

You've had some good suggestions already. Here's another I have used.
Only works if your numbers are single digits (1 -9) though:

HTML
 
1 some text here
2 some more text that can span longer than one line
 

CSS

  ol { list-style: none; padding-left: 2em; text-indent: -1em;}

  li:first-letter { float: left; font-size: ??; color: white; background: 
orange; line-height: 1.0; ...}

Problem:
Does not degrade well with CSS off. The sequence number appears twice.
You could use UL for better degradation, perhaps?

Works in IE 5.5+ and other browsers I have tried. (Not IE 5.01 Win though).

Cordially, David
-- 
David Hucklesby, on 12/21/2005

--



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

Re: [css-d] site check: ekstasis.net

[David Hucklesby]

>> Site check please: http://ekstasis.net/

"A flash movie should be visable here. Please update your flashplayer."

Apart from the bad spelling, I have the latest Flash player. Thank you.
I just choose not to activate it, since, as in your case, the distraction of an 
animation annoys me intensely. It adds *nothing* to the meaning or value of the 
page.

A friend suggested that's because I do not watch television, so it perhaps it's 
just me.

Cordially,
David
-- 
David Hucklesby, on 12/21/2005

--



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

Re: [css-d] Site Check Internet Explorer

[David Hucklesby]

Re: 

David Laakso wrote:

> I think you've got a typographic nightmare on that page, and that it is
> in fact extremly difficult to read.

Hmm. Personally, I don't have a problem at all in any browser. I have a 15" 
laptop running at 1400 x 1050, font at 96 dpi. Not really relevant, but some 
think that age is a factor - I will be 70 in two weeks.

BTW - For once I did not recognize this as a Word Press site. Nice work in 
creating a unique look. I like it.

Cordially,
David
-- 
David Hucklesby, on 12/21/2005

--



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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Pringle, Ron]

 
> if IE and Opera agree, and Firefox renders differently, then
> > there's a good chance that doctype is missing, thus all 
> browsers are in
> > *old quirks mode*.
> 
> I am not totally sure what you mean by doctype...unless you 
> are talking 
> about what goes at the top of the html page...someone else 
> referred to 
> that...but I haven't gotten to fixing it yet. If its 
> something other than 
> that, could you let me know where I would add it?

> Debbie 

Debbie-

I didn't catch the beginning of this thread so I haven't looked at your page
specifically, but you can visit the WIKI to learn more about doctypes, here:

http://css-discuss.incutio.com/?page=RenderingMode

Basically, the doctype declaration lets the browser know what standard you
are using on your page. Most browsers also use the doctype to switch between
rendering modes. If you don't set the correct doctype, you can end up
causing problems with your layout that won't exist if you'd used the correct
doctype.

Its very important to learn about doctypes, as your doctype is the first
thing that will determine how your page looks in each browser.

The best layman's explanation of doctypes from that page on the WIKI is:

http://www.quirksmode.org/css/quirksmode.html

Hope that helps get you started.

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

Re: [css-d] wrapping a list around an image -- me too! [SEC=UNCLASSIFIED / NO CAVEATS]

[Richard Grevers]

On 12/21/05, MacGillivray, Susan <[EMAIL PROTECTED]> wrote:
> Hi all
>
> I am dealing with the exact problem Ari experienced on an Australian
> Government website.  Unfortunately I can not provide a URL as the site
> is in development.
>
> The issue seems to be with the floats we are applying to images in the
> content area of the site and only if a list follows the floated image.
> We have not applied any styling to basic 'content area' lists but what
> is happening is that the text aligns correctly where the paragraphs
> should be but the bullet points seem to have a negative margin effect,
> sliding them to butt-up beside the image, instead of acknowledging the
> image margins.
>
> I don't want to have to class the lists as that seems the wrong approach
> when dealing with the 'content' area of the site.
>
How about floating your caption as child of the first
li? or as the only content of an extra initial li?

--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text shifting to the left in Opera and Firefox

[Iorhael]

To allI just want to thank everyone who has jumped in to help me with my 
three site problems. I see I still have *tons* to learn and have to start 
working things around Firefox now and have some things to fix up or add to 
my FF browser. I may not get to all of it before we head out of town for 
Christmas but I'll have plenty to work on when I get back!

---

if IE and Opera agree, and Firefox renders differently, then
> there's a good chance that doctype is missing, thus all browsers are in
> *old quirks mode*.

I am not totally sure what you mean by doctype...unless you are talking 
about what goes at the top of the html page...someone else referred to 
that...but I haven't gotten to fixing it yet. If its something other than 
that, could you let me know where I would add it?

Thanks!

Debbie 

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

Re: [css-d] Site check please

[David Laakso]

Catherine Post wrote:

>Hi Everyone,
>
>Can someone please help me - I did my portfolio site in Dreamweaver and
>tried to do the CSS properly; but now, a potential customer tells me that
>she cannot "get into" the site at all. She seems to see a files list, but
>cannot access the site. (The URL is in my signature)
>
>Help! Can someone please tell me where I went wrong here? Thanks ever so
>much.
>
>Sincerely
>
>Catherine Post
>Illustration * Graphics * Web Design
>http://www.catherinepost.com
>(916) 739 - 8839
>  
>
I got into it, except in ie(sr high-- js off). You did not ask if I 
could read it(or zoom it cross-browser).
Regards,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quick Personal Site Check

[David Laakso]

[EMAIL PROTECTED] wrote:

>http://www.christianziebarth.com/
> 
>Just need this checked for the usual cross-browser issues and if anything 
>jumps out at anybody where the CSS can be handled better go ahead and point it 
>out. It's working pretty good for me in NS/FF/IE for PC. I have a client site 
>coming soon that will need to be checked in a more in-depth manner. Thanks!
> 
>Christian
>  
>
It is working pretty good for me, too.
Some very subjective personal opinions:
1/  I am @1280. I disabled background images when viewing the site as 
your background image was just too busy and overwhelming, making it 
extremely difficult to concentrate on the content text.. Incidentally, 
you'll need to add something like:
body, html {background-color: #FFF;}
Not every os/browser has a white default background. I use fuchsia in 
Opera, for example(and fuchia does not improve your site).
2/ I much prefer the pages that do not have the scroll box.
3/ There is no link back to the home page from your resume.
4/ I get short page shift going back and forth from long to short pages.
5/ You've got the fonts set in pixels; consequently, I was not able to 
zoom them in the 'evil one.'
Regards,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Really small fonts on IE

[David Laakso]

Scott Haneda wrote:

>Are there any known issues I can be made aware of that would make fonts on
>IE Windows unreadably small?  I have a site that gets a good deal of
>traffic, 2 users have reported this, and I can not replicate it.
>
>Setting the font size to anything other than default in IE does in fact make
>the fonts too small to read.  However, this does not happen in Safari or FF.
>
>I am using em units, and just set them to stuff like .85 for my main copy,
>etc.
>
>I do not have a specific 1.0 em set anywhere, so the body {} and *html {}
>have no explicit font size set, could that be the issue?  Maybe I need a
>*html { font-size: 1.0 em; } ?
>  
>
A uri would help. Otherwise it's guessing game-- like maybe those 2 ie 
users have their machine default set at small and you are sending them, 
as you put it "stuff like .85 for my main copy."
Set font-size: 100.01%; or font-size: medium;  on the body.
Do not declare a font-size for the *content text;* or set it to: 
font-size: 100%;  font-size: 1em; or, font-size: medium;
Regards,
~dL


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

Re: [css-d] External CSS caching

[Al Sparber]

From: "CJ Larson" <[EMAIL PROTECTED]>

>>   -  use @import url("stylesheet.css"); rather than LINK in the 
>> header
>> (which may look dynamic to the browser?)
>
> One thing I find annoying about this method is that when I save a 
> page
> that uses @import as "web page complete", the browser doesn't save 
> the
> CSS files.  When I go to view the page later, there's no styling.


Use Opera to save your pages. 

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

Re: [css-d] breaking up thumbnails into separate rows

[Holly Bergevin]

From: "Iorhael" <[EMAIL PROTECTED]>

> It looks fine in IE, 
>Opera, and Netscape now but not in Firefox.
>
>http://www.drk-writing.com/debscards/debscards2.htm
>
>http://www.drk-writing.com/debscards/debscardsbasic.css
>
>http://www.drk-writing.com/debscards/debscardsimport.css

Try removing the height property from .thumbnail to get the div border to 
enclose all of the div, rather than having the text stick out of it (the proper 
behavior, based on your code).

You'll also need a clearing element, perhaps a div, between the close of the 
last thumbnail div, and the closing div tag (content?) that comes right before 
the nav div code.

You can make the clearer small by setting several properties - 

.clearer {
height: 0;
linke-height: 0;
font-size: 1px;
clear: both;
)

If you want more room between the thumbnail row and the following heading, 
increase the bottom margin on the thumnail divs.

I hope that helps,

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

Re: [css-d] Box Model

[Pringle, Ron]

Adam wrote:

> Amazing what a little legwork can do.  Linked from our own Wiki, Eric 
> Meyer has a page with an extensive Doctype chart.  It seems that with 
> HTML 4.01 you still need the full URL to avoid quirks mode, 
> deductions from the Microsoft pages notwithstanding.

Just to clarify, according to Eric's chart[0], in IE6, an HTML 4.01
TRANSITIONAL doctype needs the full URL, but an HTML 4.01 STRICT doctype
does not.

Regards,
Ron

[0] http://www.meyerweb.com/eric/dom/dtype/dtype-grid.html
[1] related WIKI page discussing rendering modes:
http://css-discuss.incutio.com/?page=RenderingMode
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Box Model

[Uwe Kaiser]

On 21.12.2005 18:40, Adam Kuehn wrote:
> Holly Bergevin wrote:
> 
>>(The MSDN page does not mention HTML4.01, the current W3C 
>>recommendation, but I have found that, for box model issues at 
>>least, as long as there is a complete doctype, IE6 will be in standards mode.)
> 
> 
> Well, the page you cite does say, "Standards-compliant mode is also 
> switched on when you specify a version of HTML that is not listed in 
> the table, such as HTML 1.0 or HTML 3.22."  Version 4.01 is not 
> listed in the table, so therefore I would deduce that 4.01 always 
> triggers standards-compliant mode, regardless of URL.  I have not 
> tested this deduction in practice, however, and would be interested 
> to hear the results.
> 

For those, who want to know it more exactly
< http://www.kriton.de/CSS/doctype.html >

As I wrote on the page, newer versions of browsers may differ.
That means, especially Safari and Opera might switch to a
*real* standards-compliant mode in newer versions, while older
versions keep in almost-standards mode. Even Henri Sivonen will
not give us an answer.

A bit more topical, but not up-to-date (Opera 8/9 is missing):
< http://hsivonen.iki.fi/doctype/ >



The minimum to switch browsers to Compat1 in (X)HTML is:





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

Re: [css-d] Box Model

[Adam Kuehn]

I wrote:
>"Standards-compliant mode is also
>switched on when you specify a version of HTML that is not listed in
>the table, such as HTML 1.0 or HTML 3.22."  Version 4.01 is not
>listed in the table, so therefore I would deduce that 4.01 always
>triggers standards-compliant mode, regardless of URL.  I have not
>tested this deduction in practice, however, and would be interested
>to hear the results.

Amazing what a little legwork can do.  Linked from our own Wiki, Eric 
Meyer has a page with an extensive Doctype chart.  It seems that with 
HTML 4.01 you still need the full URL to avoid quirks mode, 
deductions from the Microsoft pages notwithstanding.

QED.



-Adam Kuehn 

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

Re: [css-d] External CSS caching

[CJ Larson]

>   -  use @import url("stylesheet.css"); rather than LINK in the header
> (which may look dynamic to the browser?)

One thing I find annoying about this method is that when I save a page
that uses @import as "web page complete", the browser doesn't save the
CSS files.  When I go to view the page later, there's no styling.



> I'm trying to determine the best way to deal with this issue, and
would love
> to hear opinions.

I'd like to hear the opinions as well.  :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing a float without using a float

[CJ Larson]

In one of my site layouts, I have the navigation floated to the left and
gave the content area a margin-left to give the float room to breathe.
On my content area, I have  tags clearing left by default since I
float several things on various pages.  Where this creates a problem is
when the  element is supposed to show horizontally in the same area
as the menu.

Zoe helped Jennifer with an issue like this earlier this week, but the
recommended solution was to float the content area.  What might be
another solution if floating the content div isn't desirable?

My (cut down) page:
http://sltclan.com/images/cj/default.html

Notice that the "please select a layout" paragraph is below the bottom
of the left menu because of the "clear: left" I set in layout5.css.
(The problem doesn't occur in IE.)

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

[css-d] External CSS caching

[Troy Brophy]

Normally, the fact that the browser caches the external style sheet benefits
the user. But while working on a large, commercial site, the problem of
browsers recalling old external CSS from their cache has come up. 

 

If the external style sheet has changed, and the browser uses a cached
version, the user will likely see some display problems.

 

It seems that some of the bigger sites out there use various methods for
dealing with this issue:

 

  -  rename the CSS docs with a version number, or in a versioned directory
after each change

  -  use @import url("stylesheet.css"); rather than LINK in the header
(which may look dynamic to the browser?)
  -  a combination of these two

 

I'm trying to determine the best way to deal with this issue, and would love
to hear opinions.

 

Thanks,

Troy

 

 

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Zoe M. Gillenwater]

Iorhael wrote:

> Or do the others tend to fall in place once the page/site is set up 
> according to FF?


This has been my experience, yes, with only a couple adjustments made 
for IE sometimes.  But as Georg said, make sure you are in standards 
rendering mode.  Opera, FF, and Safari usually display things the same.

http://css-discuss.incutio.com/?page=RenderingMode

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Box Model

[Adam Kuehn]

Holly Bergevin wrote:
>(The MSDN page does not mention HTML4.01, the current W3C 
>recommendation, but I have found that, for box model issues at 
>least, as long as there is a complete doctype, IE6 will be in standards mode.)

Well, the page you cite does say, "Standards-compliant mode is also 
switched on when you specify a version of HTML that is not listed in 
the table, such as HTML 1.0 or HTML 3.22."  Version 4.01 is not 
listed in the table, so therefore I would deduce that 4.01 always 
triggers standards-compliant mode, regardless of URL.  I have not 
tested this deduction in practice, however, and would be interested 
to hear the results.

Whatever the results of that test, however, it should not alter your 
conclusion, which I reproduce for emphasis:

>So, if you'll write /complete/ doctypes, of the type currently 
>recommended by the W3C for HTML4.01 or XHTML1.0, and if [there is 
>nothing - not even whitespace] preceding the doctype, then IE6 will 
>render in "standards-compliant" mode.



-Adam Kuehn 

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

Re: [css-d] Box Model

[Nick Fitzsimons]

> So, if you'll write /complete/ doctypes, of the type currently recommended
> by the W3C[2] for HTML4.01 or XHTML1.0, and if you'll heed the information
> regarding the xml declaration or other things preceding the doctype, then
> IE6 will render in "standards-compliant" mode, at least as far as the Box
> Model [3,4] is concerned.
>

One thing I've found useful on many occasions is to create a bookmarklet
(or favelet, if you prefer) with the following code as the URL:

javascript:alert(document.compatMode)

and stick it on my Links toolbar. Whatever site you're on, click the link
and it will display "BackCompat" for quirks mode, and "CSS1Compat" if the
page is in standards mode (assuming JavaScript is enabled in the browser).

This also works in Firefox (but probably not in Opera).

Regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] more confusion over containing floats

[Gunlaug Sørtun]

ron zisman wrote:
> hey listees,
> 
> http://www.ricochet.org/flippingpixels/movies/index.html
> 
> i understand that by floating the lists, they are taken out of the 
> flow... so as there is no content, the container collapses. is this 
> kosher?

Yes.

> is there a better way?

There are many variations that can be applied for visual trimming.
They, or all the reliable ones at least, are all based on the same,
basic, handling of floats.

> i had thought that i might use the .wrapper for borders or other 
> styling but no chance in the current incarnation.

You can achieve all that, and more...

> floats and my brain seem totally incompatible. thanks for looking.

Nothing wrong with your brain :-)
It just ain't on the right track yet - floating.

My advice: have another read through the specs...

...and create a dozen, small, test-cases of whatever it is that you
don't get. Then you'll also have a base that you are somewhat familiar
with, on which we can discuss all the details.

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

Re: [css-d] CSS3 user-select vs current options

[CJ Larson]

> PS I realize the solution may not be CSS related (apologies to the
> group), but the problem is ;-)

To me, it doesn't seem like it should be.  Selecting text is something
you *do*, not something that *displays*, which to me means that
selecting text is "behavior" and therefore falls in the realm of JS.

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

Re: [css-d] Box Model

[Holly Bergevin]

Tod, 

Georg has provided you with some good information, and I agree with him that in 
order to help you, we'll need to see the page.

From: "CJ Larson" <[EMAIL PROTECTED]>

>[If I got that wrong, I'm sure someone will correct me!]  :D

Okay - I sure would like to put this misconception to rest.

According to Microsoft[1], if I am reading correctly (and ignoring HTML 
versions before HTML4), IE6 is in quirks rendering mode (they call it 
"compatibiliity-mode") ONLY when there is no "URL" present in HTML4 
Transitional and Frameset doctypes (in other words when the doctype is 
incomplete and there is no system identifier). (The MSDN page does not mention 
HTML4.01, the current W3C recommendation, but I have found that, for box model 
issues at least, as long as there is a complete doctype, IE6 will be in 
standards mode.)

We also know that IE6 is in quirks mode when an xml declaration, or anything 
for that matter, precedes the doctype, regardless of how complete the doctype 
is.

So, if you'll write /complete/ doctypes, of the type currently recommended by 
the W3C[2] for HTML4.01 or XHTML1.0, and if you'll heed the information 
regarding the xml declaration or other things preceding the doctype, then IE6 
will render in "standards-compliant" mode, at least as far as the Box Model 
[3,4] is concerned.

This has been a public service(?) announcement.

~holly 

[1] 
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
[2] http://www.w3.org/QA/2002/04/valid-dtd-list.html
[3] http://www.communitymx.com/abstract.cfm?cid=E0989953B6F20B41
[4] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE
 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS3 user-select vs current options

[Stephen Cunliffe]

Hi all,

In CSS3, I can use:

 user-select: none;

To stop users from selecting text on a page.  Since we're not "there" 
yet, I was wondering if anyone has a unique solution (CSS based or 
otherwise) for various browsers?

In Mozilla/Firefox, I can use:

-moz-user-select: none; /* Works great */

In Explorer, I can use JS, and set an event handler for "onselectstart", 
and cancel the action...

But, in Opera (and possibly others) I'm stuck.  Any Ideas?

The only thing I can think of, is rather "hacky", using JS to cancel any 
sort of "onfocus" events...


PS I realize the solution may not be CSS related (apologies to the 
group), but the problem is ;-)

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

Re: [css-d] One more...server descrepancies

[[EMAIL PROTECTED]]

My guess is that your friend is not getting a complete upload to her 
server.  Perhaps sometimes a css file doesn't load?

When you see the problem, check to see if the files are all there.
-- 
Joel Goldstick
www.columbuswebmakers.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] more confusion over containing floats

[ron zisman]

hey listees,

http://www.ricochet.org/flippingpixels/movies/index.html

On the above page i have a number of definition lists floated across 
the page. the client (my kid) wants the pictures to align vertically 
and horizontially. my thinking (or lack thereof) was to float the lists 
in a container, then stack containers. I posted a page last week that 
had floated elements in a container, and with a clearing element, i 
think i got the container to contain the floats. while what i have is 
functional, and seems to play ok across browser land, i don't 
understand what is happening. i have wrapped three lists in a 
container(.wrapper), and stacked the containers. .wrapper has a fixed 
width, which the floats respect. yet, when i put a border on the 
wrapper (blue), it appears to collapse between groups. i understand 
that by floating the lists, they are taken out of the flow... so as 
there is no content, the container collapses. is this kosher? is there 
a better way? i had thought that i might use the .wrapper for borders 
or other styling but no chance in the current incarnation. floats 
and my brain seem totally incompatible. thanks for looking.

ron

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

Re: [css-d] Styling numbered lists

[[EMAIL PROTECTED]]

Geoff Krajeski wrote:
> I am looking to style an ordered list with colored blocks with a number
> inside.  How can I get an orange block with a white number inside
> without turning the list item text white as well?
> 
I made a very crude example of what you are looking for at the link 
below.  I used a 20px x 20px image as the background image for the  
tags.  Then I spanned the li text.

Here is the code:


li {background: url("redbox.jpg") no-repeat;
list-style-position: inside;
margin: 2px 0;
padding: 0 0 0 2px;
color: white;
font-weight: bold;
}
li span {color: red;
padding: 0 0 0 2px;}



This is the first item in my list
This is the second item in my list
This is the third

http://columbuswebmakers.com/Workbench/OLTest.html

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

Re: [css-d] wrapping a list around an image -- me too! [SEC=UNCLASSIFIED / NO CAVEATS]

[Christian Montoya]

On 12/21/05, MacGillivray, Susan <[EMAIL PROTECTED]> wrote:
> Hi all
>
> I am dealing with the exact problem Ari experienced on an Australian
> Government website.  Unfortunately I can not provide a URL as the site
> is in development.
>
> The issue seems to be with the floats we are applying to images in the
> content area of the site and only if a list follows the floated image.
> We have not applied any styling to basic 'content area' lists but what
> is happening is that the text aligns correctly where the paragraphs
> should be but the bullet points seem to have a negative margin effect,
> sliding them to butt-up beside the image, instead of acknowledging the
> image margins.
>
> I don't want to have to class the lists as that seems the wrong approach
> when dealing with the 'content' area of the site.
>
> Any advice appreciated.

I'm pretty sure this is typical UL behavior. UL's align the text and
have the bullets off the left. I usually give UL's at least 1.5 em
left-margin for this reason.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Cursor look in FF/Moz vs. IE/Opera (Al Sparber)

[Dominique Clawson]

Thanks Al,

That did it!

I had redesigned the menu/dropdowns with CSS (according to Project VII
tutorial), but it did not look exactly as the original design, and my
client was NOT happy.

Thank you so much for your help.
Regards,

Dominique


___
From: "Dominique Clawson" <[EMAIL PROTECTED]>
To: 
Sent: Tuesday, December 20, 2005 10:27 PM
Subject: [css-d] Cursor look in FF/Moz vs. IE/Opera



Hello,

I'm working on a website (started by someone else). She created 
dropdown/rollover menus with Dreamweaver and ImageReady. The cursor on 
the dropdown menus has the "I" look, (like when you're ready to enter 
text), which the client does not like; he wants a hand cursor.

I added a "cursor: pointer; cursor: hand;" in the css, and that fixed 
the problem for MSIE and Opera.

FF & Mozilla now show a hand, on the top link, "I" on the sublinks, 
and the regular arrow in the empty spaces after the links

Website: http://bytemedesign.broomfield.biz/test/learn.html, css: 
http://bytemedesign.broomfield.biz/test/rfts.css.

Anyone has any ideas? Thank you very much.
--

Those Macromedia menus are based on Netscape code from 1996. You could 
fix the cursor if you really wanted to by wrapping the menu (it's all 
in the script) in a div and then using a descendant selector:


mmLoadMenus();


Then this rule:

#popup div {cursor: pointer;}

The reason, in case anyone is wondering, why not style the , is 
because there are no real links. The menu is comprised of DIVs and old 
NN4 Layer tags.

-- 
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".

--



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

Re: [css-d] Browser Check: Mac especially (NTKN)

[Reese]

At 19:25 20-12-05, Jono wrote:

 >> http://inkworkswell.com/clients/testing/index.html
 >
 >A quick check in Firefox 1.5, Safari 2.0.2, IE 5.2.3 shows it as expected,
 >except that IE/Mac is not displaying the 191px x 250px filler image in the
 >center area.

That's odd, especially since it is the same image being linked to
from three separate locations. The div containing the filler image
on the left was copied en toto, renamed, and the left: classifier
tweaked for proper offset at center and right.

Reese
--
Ink Works
http://www.inkworkswell.com

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

[css-d] Developing for OmniWeb: what is the consensus?

[Reese]

The client reports:

 "The right side margin disappears in OmniWeb 5.1.2 running on
  Mac OS X 10.3.9."

I've done some sleuthing and my impression is that OmniWeb does much
better at rendering CSS since they began using the Safari engine, but
that it still has significant issues. Is this generally correct? What
can be or is normally said to clients who observe that pages which
look fine in all the other browsers typically don't look quite right
in OmniWeb?

Reese
--
Ink Works
http://www.inkworkswell.com


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

[css-d] IE problem

[Andrew Mason]

Hi folks,

I recently redesigned my site, and for some reason my two main  
columns aren't aligning properly in IE.  Anyone know a good fix for  
this?  The problem is in two places:
http://policytree.org/
and
http://policytree.org/tree.php?root=924

I can't figure it out; any help would be greatly appreciated!

Also, on that second link, I'd like to make the image iframe resize  
automatically when the user resizes their browser window.  I've  
played with percentages, but couldn't get something that looked okay  
in a smaller browser window and worked across different browsers.  If  
anyone has any ideas, like whatever google maps does, I'd love to  
hear them.

Thanks,

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Pringle, Ron]

> > Always build for FF first, then go back and tweak for IE if 
> you need to. 
> > It takes much less time and effort this way.
> 
> A general question on building for Firefoxmy pages 
> usually look similar 
> in Opera, IE, and Netscape...but radically different in 
> FirefoxSo I've 
> been going more by what displays in Opera and IE. If I use 
> Firefox as the 
> starting point, won't they look out of kilter in the other 
> three? Or do the 
> others tend to fall in place once the page/site is set up 
> according to FF?
> 
> Debbie

Debbie-

The idea is to code to standards, not to any browser. It just so happens
that Firefox, in my opinion at least, does the best job rendering css to the
W3C standards.

By building and testing your code in Firefox first, you can reasonably
ensure you're coding to standards. As Zoe suggested, constantly checking in
other browsers during the development process is recommended as well. Minor
inconsistencies between the browsers are to be expected, and its your choice
whether those are acceptable or need to be fixed.

Any problems you come across that you cannot fix yourself is what this list,
archives and WIKI are for, so feel free to check the WIKI and past message
posts first. If your questions aren't answered there, post a question to the
list (hopefully with a URL highlighting the issue) and the gracious members
here will help you as best they can.

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Gunlaug Sørtun]

Iorhael wrote:
> ... Most of my pages look the fine in IE and Opera and bad in Firefox
>  so I have been avoiding it.

Note: if IE and Opera agree, and Firefox renders differently, then
there's a good chance that doctype is missing, thus all browsers are in
*old quirks mode*. Opera will automatically render close to what IE does
then, while Firefox will render closer to the old Netscape way.

Opera and Firefox will agree on almost everything when served valid
standard compliant source-code and CSS. IE6 may need a few tweaks.

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Iorhael]

> Always build for FF first, then go back and tweak for IE if you need to. 
> It takes much less time and effort this way.

A general question on building for Firefoxmy pages usually look similar 
in Opera, IE, and Netscape...but radically different in FirefoxSo I've 
been going more by what displays in Opera and IE. If I use Firefox as the 
starting point, won't they look out of kilter in the other three? Or do the 
others tend to fall in place once the page/site is set up according to FF?

Debbie

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

Re: [css-d] Box Model

[Gunlaug Sørtun]

Tod wrote:
> I'm on the upside of the learning curve trying to create what seems 
> to be a fairly complex navigation drop down menu.  If it looks ok in 
> IE, it looks bad in Firefox.  If it looks good in Firefox, it looks 
> bad in IE (I'm using the latest versions of both).
> 
> If I understand correctly, the problem is in part a disparity in the 
> way different browsers interpret the CSS(2) box model.  I also get 
> the impression that there are a LOT of ways to deal with this.

Cures for box model problems depends on doctype among other things. We
need to see your creation with at least some dummy-content, before
recommending a safe solution.

If DTD = XHTML, then one, recommended, way to deal with box model
problems in IE6 is to delete the http://www.w3.org/International/articles/serving-xhtml/>

Regardless of DTD and what not:
- Keep your styles in a state where layout appears as you want it in
Firefox.

- Get a "second opinion" from Opera (and other good browsers) just to
make sure. Reliable cross-browser solutions should never rely on what
any, single, browser renders, since none of them are entirely flawless.

- Prepare some extra styles and tweaks for IE/win, and keep those
separate so only IE/win up to and including IE6 can see/understand them.

That's the way most of us are dealing with all kinds of differences
between IE/win and the other browsers.

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

Re: [css-d] Box Model

[CJ Larson]

> I was wondering if there is just one simple tried and true style sheet
> method that can always be applied to at least start out on the right
> foot that I can build upon which would remove any browser
computability
> issues.  At least then I could be comfortable in knowing the problem
is
> me and not the browser, thus removing one variable from the debugging
> process.


If I understand you right, that method is a strict doctype.  :)  That
will get IE6 to use the w3c version of the box model instead of its
non-standard version, and you can feed older versions of IE different
widths through either conditional comments or hacks.

afaik that's basically the best method, but the good news is that simply
having a strict doctype and coding for the w3c model will show the same
model on all browsers other then pre-IE6 for windows (which not many
people use).

[If I got that wrong, I'm sure someone will correct me!]  :D
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text shifting to the left in Opera and Firefox

[Zoe M. Gillenwater]

Iorhael wrote:

>> 1. Make sure you have the DOM Inspector installed in your copy of FF, 
>> and if not, reinstall FF and select Custom installation to get it.
>
>
> I had not heard of this before...how would I check to see if this is 
> installed?


It would be listed in your Tools menu.

>
> > Always build for
>
>> FF first, then go back and tweak for IE if you need to.  It takes 
>> much less time and effort this way.
>
>
> So you are saying to design all pages according to Firefox? 
> Unfortunately, IE is what comes up in Dreamweaver when checking a page.


What do you mean by this?  Do you mean IE is the only browser you have 
in your Preview in Browser list?  You can add as many browsers as you 
want to that list.  I have FF set as my primary browser and IE as my 
secondary (with about ten other browsers in there as well) and preview 
constantly in these two when I am building a page.  Previews of the 
other browsers happen less frequently but still not at the very end.

Don't rely on Dreamweaver's rendering of your page, nor any of its 
checker things.  Use the Preview in Browser function to see how your 
page will really look.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Iorhael]

> 1. Make sure you have the DOM Inspector installed in your copy of FF, and 
> if not, reinstall FF and select Custom installation to get it.

I had not heard of this before...how would I check to see if this is 
installed?

Always build for
> FF first, then go back and tweak for IE if you need to.  It takes much 
> less time and effort this way.

So you are saying to design all pages according to Firefox? Unfortunately, 
IE is what comes up in Dreamweaver when checking a page. Most of my pages 
look the fine in IE and Opera and bad in Firefox so I have been avoiding it.

I'll will give this a try alittle later.

Debbie 

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

Re: [css-d] One more...server descrepancies

[Iorhael]

> I don't see any discrepancies between the two.  Is this happening in a 
> particular browser?  I looked with FF 1.5.  Or did you perhaps fix it?

Zoe, I didn't fix this but I had just sent my friend some updates so 
apparently it "fixed itself" when she uploaded those...it did that once 
before but then I sent over another update of the stylesheet that was minor 
it went wacko again. What I don't understand is that the updates I am making 
to the stylesheet are minor and have nothing even to do with the elements 
that are being affected...so its real Russian roulette...

Unfortunately, now though something else on that site has gone out of 
whack...the titles, arrows, and images in all the Fan Art pages for the site 
have aligned left, and the arrows are not even centered under the title. 
(The arrows are one of the few things that I have left in tables...I tried 
making them inline but that didn't make a difference in the alignment 
problem.)

Anyway, when I saw that the problem I posted about originally was fixed I 
posted another message to let everyone know it was resolved. But since then 
I discovered the second issue with the Fan Art pages.

Here is the link to the first one of those pages and my stylesheet.

http://www.northwesternesse.com/FanArt/lt_sharpe.htm

http://www.northwesternesse.com/FanArt/nwefanart.css

Debbie

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

Re: [css-d] breaking up thumbnails into separate rows

[Iorhael]

> Maybe need to let us see whole stylsheet?
> Ian

Okay, I had to remove a couple of the thumbnails that were too wide...here's 
the finished version of the page and the stylesheets. It looks fine in IE, 
Opera, and Netscape now but not in Firefox.

http://www.drk-writing.com/debscards/debscards2.htm

http://www.drk-writing.com/debscards/debscardsbasic.css

http://www.drk-writing.com/debscards/debscardsimport.css

Debbie 

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

[css-d] Box Model

[Tod]

I'm on the upside of the learning curve trying to create what seems to 
be a fairly complex navigation drop down menu.  If it looks ok in IE, it 
looks bad in Firefox.  If it looks good in Firefox, it looks bad in IE 
(I'm using the latest versions of both).

If I understand correctly, the problem is in part a disparity in the way 
different browsers interpret the CSS(2) box model.  I also get the 
impression that there are a LOT of ways to deal with this.

I was wondering if there is just one simple tried and true style sheet 
method that can always be applied to at least start out on the right 
foot that I can build upon which would remove any browser computability 
issues.  At least then I could be comfortable in knowing the problem is 
me and not the browser, thus removing one variable from the debugging 
process.

I'll make my content available to anybody interested in helping me out, 
or needs a good chuckle.  Its just embarrassingly ugly.


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

Re: [css-d] Wrapper background not displaying in IE 6 win

[Mike]

At 08:12 AM 12/21/2005 , you wrote:
>Hi Mike,
>In your statement:
>
>#wrapper
>{margin-left: 7%;
>margin-right: 7%;
>background-color: ccffcc;
>padding-bottom: 40px}
>
>I don't see the # symbol before the color declaration, If I'm not mistaken
>IE need this when declaring a hex value color. Bob


That was it, Bob.

This was not picked up by  CSSCheck: 
http://www.htmlhelp.com/tools/csscheck/ and I kept missing it.

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

Re: [css-d] Problem in WinXP SP2 (Correct E-mail)

[Roger Roelofs]

On Dec 21, 2005, at 8:09 AM, shlomi asaf wrote:

> infact- i have problem caching my site images
> what is the reason for the images loading everytime users enter my  
> website?
>
> i can declare something or orgenize my html in a way that will make my
> images load from the cache and not everytime the user enter my site?
>
> On 11/23/05, Nick Fitzsimons <[EMAIL PROTECTED]> wrote:
>>
>>> Hello,
>>>
>>> I am having problems in hover of image in the IE6 Windows XP SP2.
>>>
>>> It is blinking when the event happens to hover.
>>>
>>> What the reason happens this?
>>>
>>
>> It's difficult to say without an actual page to look at, but, like  
>> most
>> developers, you presumably have IE set to "Check for newer  
>> versions of
>> stored pages" (i.e. use the cache or not) on "every visit to the  
>> page".
>> This causes problems for IE as, rather than using cached versions  
>> of CSS
>> background images, it goes back to the server every time and  
>> refetches it.
>>
>> Change your browser setting to check "Automatically" (Tools menu >
>> Internet Options dialog > General tab > Temporary Internet Files  
>> fieldset
>>> Settings... button) and see if that fixes it. If so, you can  
>>> relax, as
>> this is the default setting, meaning 99% of visitors won't see the
>> flicker.

To quote Zoe from a few weeks ago
> If you want the flicker to vanish even with this setting on, you can
> modify your site's htaccess file to kill the flicker:
> http://www.jcornelius.com/articles/solving-ie-image-flicker/

Roger,

Roger Roelofs
[EMAIL PROTECTED]



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

Re: [css-d] One more...server descrepancies

[Zoe M. Gillenwater]

Iorhael wrote:

>I have a site that I maintain but that is uploaded on someone else's server (I 
>have to send her updates...she doesn't have ftp uploading capabilities). When 
>I upload it onto my server, everything looks fine but when she puts it on hers 
>for some reason, some of the styles don't seem to be applying (particularly in 
>the footer and on the Past Events page). Does anyone know how we could remedy 
>this situation?
>
>Here's the site on my server:
>
>http://www.drk-writing.com/northwesternesse/
>
>Here it is on her server (see the thumbnails on the Past Events page, and the 
>footer)
>
>http://www.northwesternesse.com
>
>  
>

I don't see any discrepancies between the two.  Is this happening in a 
particular browser?  I looked with FF 1.5.  Or did you perhaps fix it?

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Zoe M. Gillenwater]

Iorhael wrote:

>I have made up this site to display my computer graphics in my portfolio. 
>However, I am having a problem with the text shifting to the left in Opera and 
>Firefox (yet it looks fine in IE). Does anyone have an idea of how I might 
>prevent this from happening? Here's the link and stylesheet.
>
>http://www.drk-writing.com/artwork/
>
>http://www.drk-writing.com/artwork/artwork.css
>
>  
>

Debbie,

Any time you see one thing in FF and Opera and another in IE, you can 
safely bet that IE is the one that is doing it wrong.  Always build for 
FF first, then go back and tweak for IE if you need to.  It takes much 
less time and effort this way.

In your case, I was able to quickly see what was going on by using the 
DOM Inspector of FF, which let me outline your content div and see that 
it was sitting against the left side of the window.  Looking at its CSS 
rules, I saw that it didn't have equal width margins set on the left and 
right, and this is what is needed to center a block, like a div.  If you 
wanted to center the text within the div, you would use text-align: 
center on that div.  When IE6 is in quirks mode (as it is because you 
have not used a complete doctype on your page), it will incorrectly 
center a block using text-align center on the parent element.

I suggest you do the following:

1. Make sure you have the DOM Inspector installed in your copy of FF, 
and if not, reinstall FF and select Custom installation to get it.

2. Learn how to use the DOM Inspector:
http://www.codestore.net/store.nsf/unid/BLOG-20050228
http://www.clagnut.com/blog/340/

3. Replace the doctype on your page with this one:
http://www.w3.org/TR/html4/loose.dtd";>

4. Add this rule to body:
padding: 0; /* for Opera */

5. Add these rules to #content:
margin: 0 auto;

6. If you want to shift #content an extra 100px to the right to 
accommodate the background border, add these rules:
position: relative;
left: 100px;

That should get you started. :-)

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] Text shifting to the left in Opera and Firefox

[Zoe M. Gillenwater]

Iorhael wrote:

>I have made up this site to display my computer graphics in my portfolio. 
>However, I am having a problem with the text shifting to the left in Opera and 
>Firefox (yet it looks fine in IE). Does anyone have an idea of how I might 
>prevent this from happening? Here's the link and stylesheet.
>
>http://www.drk-writing.com/artwork/
>
>http://www.drk-writing.com/artwork/artwork.css
>
>  
>

Debbie,

Any time you see one thing in FF and Opera and another in IE, you can 
safely bet that IE is the one that is doing it wrong.  Always build for 
FF first, then go back and tweak for IE if you need to.  It takes much 
less time and effort this way.

In your case, I was able to quickly see what was going on by using the 
DOM Inspector of FF, which let me outline your content div and see that 
it was sitting against the left side of the window.  Looking at its CSS 
rules, I saw that it didn't have equal width margins set on the left and 
right, and this is what is needed to center a block, like a div.  If you 
wanted to center the text within the div, you would use text-align: 
center on that div.  When IE6 is in quirks mode (as it is because you 
have not used a complete doctype on your page), it will incorrectly 
center a block using text-align center on the parent element.

I suggest you do the following:

1. Make sure you have the DOM Inspector installed in your copy of FF, 
and if not, reinstall FF and select Custom installation to get it.

2. Learn how to use the DOM Inspector:
http://www.codestore.net/store.nsf/unid/BLOG-20050228
http://www.clagnut.com/blog/340/

3. Replace the doctype on your page with this one:
http://www.w3.org/TR/html4/loose.dtd";>

4. Add this rule to body:
padding: 0; /* for Opera */

5. Add these rules to #content:
margin: 0 auto;

6. If you want to shift #content an extra 100px to the right to 
accommodate the background border, add these rules:
position: relative;
left: 100px;

That should get you started. :-)

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] css print help

[Greg Morphis]

I removed all padding off of hours and added a height/fontsize to all
container divs and have come up with
http://home.alltel.net/omen/schedule.htm
It still has the row pushed down.. Can you suggest something else to try?

Thanks!

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

Re: [css-d] Problem in WinXP SP2 (Correct E-mail)

[shlomi asaf]

infact- i have problem caching my site images
what is the reason for the images loading everytime users enter my website?

i can declare something or orgenize my html in a way that will make my
images load from the cache and not everytime the user enter my site?


On 11/23/05, Nick Fitzsimons <[EMAIL PROTECTED]> wrote:
>
> > Hello,
> >
> > I am having problems in hover of image in the IE6 Windows XP SP2.
> >
> > It is blinking when the event happens to hover.
> >
> > What the reason happens this?
> >
>
> It's difficult to say without an actual page to look at, but, like most
> developers, you presumably have IE set to "Check for newer versions of
> stored pages" (i.e. use the cache or not) on "every visit to the page".
> This causes problems for IE as, rather than using cached versions of CSS
> background images, it goes back to the server every time and refetches it.
>
> Change your browser setting to check "Automatically" (Tools menu >
> Internet Options dialog > General tab > Temporary Internet Files fieldset
> > Settings... button) and see if that fixes it. If so, you can relax, as
> this is the default setting, meaning 99% of visitors won't see the
> flicker.
>
> HTH,
>
> Nick.
> --
> Nick Fitzsimons
> http://www.nickfitz.co.uk/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> 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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Wrapper background not displaying in IE 6 win

[Mike]

Greetings,
The wrapper background will not display in IE6 WIn for this page:

http://mbreiding.us/fl_rt/all.html

It looks fine in FF 1.7

The CSS is in the page header.

Any solutions?

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

Re: [css-d] Headings sometimes not working in Firefox

[Zoe M. Gillenwater]

Larry Wilcox wrote:

>I have the h4 tag set in the css file for 18px but it doesn't show that big
>in Firefox.
>
>Could this have anything to do with an absolutely positioned div?
>  
>

No, it probably has to do with another rule elsewhere in your sheet 
overriding the value of 18px.  We can't tell without a page to look at.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

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

Re: [css-d] breaking up thumbnails into separate rows

[Ian Young]

Maybe need to let us see whole stylsheet?

Ian

-Original Message-
From: Iorhael [mailto:[EMAIL PROTECTED]
Sent: 21 December 2005 12:37
To: Matt Fitzwater; [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] breaking up thumbnails into separate rows


Matt and Ian, thank you both for your comments and suggestions! I thought
I'd post to both of you together to reduce list clutter. Thank you both for
writing me directly, so that I didn't have to wait for my digest to come
tomorrow to see your replies :)

Matt, I did indeed forget about needing a width declaration when using
floatbut I think the thing that did it was adding a clear: both to the
headers. That split the thumbnail rows just fine :) I am still a bit fuzzy
on when I need to use clear

Ian, you actually caught something that was incorrect as well...I actually
wanted to put all four categories of card thumbnails between their own
division tags, but I had missed some! Actually now that the problem is
resolved, I may see if removing those makes any difference...I probably
don't need them now that I have added clear: both to the h3 tags in the
stylesheet.

Unfortunately this page is still messed up in Firefox (as mine often
are)I have to make some changes to the thumbnails but when I get that
done, I'll post the latest version to see if I can get the Firefox issues
worked out.

Debbie





Debbie
- Original Message -
From: "Matt Fitzwater" <[EMAIL PROTECTED]>
To: "Iorhael" <[EMAIL PROTECTED]>
Cc: 
Sent: Wednesday, December 21, 2005 3:47 AM
Subject: Re: [css-d] breaking up thumbnails into separate rows


> You need to declare a width: on .thumbnail.
> after that you will probally need to add a clear:both on your h3 as well
> good luck
>
>
> Iorhael wrote:
>
>>I am setting up a very simple website for my portfolio that started out as
>>a class project for an online CSS class. I set up thumbnails on this page
>>according to how we'd been taught in class but I would like them to be on
>>a separate row for each header category listed. I have put the thumbnails
>>for each category between their own division tags but that does not seem
>>to be working. The page looks the worst on Firefox. I am really stumped on
>>this...can someone help me out?
>>
>>http://www.drk-writing.com/debscards/debscards2.htm
>>
>>Here's the CSS code I'm using for the thumbnails:
>>
>>.thumbnail {
>>   float: left;
>>   height: 75px;
>>   border: 1px solid #590F81;
>>   margin: 0 12px 12px 0;
>>   padding: 5px;
>>   text-align: center;
>>   font-family: 'Comic Sans MS', sans-serif;
>>   font-size: 12px;
>>   color: #000;
>>}
>>Thank you!
>>
>>Debbie
>>
>>
>>
>>__
>>css-discuss [EMAIL PROTECTED]
>>http://www.css-discuss.org/mailman/listinfo/css-d
>>List wiki/FAQ -- http://css-discuss.incutio.com/
>>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>.
>>
>>


--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.2/208 - Release Date: 20/12/2005

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.2/208 - Release Date: 20/12/2005


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

Re: [css-d] breaking up thumbnails into separate rows

[Iorhael]

Matt and Ian, thank you both for your comments and suggestions! I thought 
I'd post to both of you together to reduce list clutter. Thank you both for 
writing me directly, so that I didn't have to wait for my digest to come 
tomorrow to see your replies :)

Matt, I did indeed forget about needing a width declaration when using 
floatbut I think the thing that did it was adding a clear: both to the 
headers. That split the thumbnail rows just fine :) I am still a bit fuzzy 
on when I need to use clear

Ian, you actually caught something that was incorrect as well...I actually 
wanted to put all four categories of card thumbnails between their own 
division tags, but I had missed some! Actually now that the problem is 
resolved, I may see if removing those makes any difference...I probably 
don't need them now that I have added clear: both to the h3 tags in the 
stylesheet.

Unfortunately this page is still messed up in Firefox (as mine often 
are)I have to make some changes to the thumbnails but when I get that 
done, I'll post the latest version to see if I can get the Firefox issues 
worked out.

Debbie





Debbie
- Original Message - 
From: "Matt Fitzwater" <[EMAIL PROTECTED]>
To: "Iorhael" <[EMAIL PROTECTED]>
Cc: 
Sent: Wednesday, December 21, 2005 3:47 AM
Subject: Re: [css-d] breaking up thumbnails into separate rows


> You need to declare a width: on .thumbnail.
> after that you will probally need to add a clear:both on your h3 as well
> good luck
>
>
> Iorhael wrote:
>
>>I am setting up a very simple website for my portfolio that started out as 
>>a class project for an online CSS class. I set up thumbnails on this page 
>>according to how we'd been taught in class but I would like them to be on 
>>a separate row for each header category listed. I have put the thumbnails 
>>for each category between their own division tags but that does not seem 
>>to be working. The page looks the worst on Firefox. I am really stumped on 
>>this...can someone help me out?
>>
>>http://www.drk-writing.com/debscards/debscards2.htm
>>
>>Here's the CSS code I'm using for the thumbnails:
>>
>>.thumbnail {
>>   float: left;
>>   height: 75px;
>>   border: 1px solid #590F81;
>>   margin: 0 12px 12px 0;
>>   padding: 5px;
>>   text-align: center;
>>   font-family: 'Comic Sans MS', sans-serif;
>>   font-size: 12px;
>>   color: #000;
>>}
>>Thank you!
>>
>>Debbie
>>
>>
>>
>>__
>>css-discuss [EMAIL PROTECTED]
>>http://www.css-discuss.org/mailman/listinfo/css-d
>>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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Based Forms

[Gilles DEMARTY]

> Hi all,

Hi tryst,

> I need to create a form on my website, and was wondering if 's
> are used to lay out 's still, or is it best to use CSS?


You should check first the wiki page related to this topic :

http://css-discuss.incutio.com/?page=FormElements

Does it answers your need, or have i miss the point ? in that case,
can you reformulate your needs ?

by the way,  are mostly used to display data, and not to lay
out. Other uses should be avoided.

sincerely.

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

Re: [css-d] mozilla bug >> absolute position+bottom:0 doesnt refresh when container div height is changing

[Ingo Chao]

shlomi asaf wrote:
> Link to example: http://www.shlomiasaf.com/footer_tst.html
> 
> hi, i have a problem in MOZ. i place a div in a absolute position, in the
> bottom:0px.
> when i change the height of the container div, the bottom div doesnt move,  
> ...


I can reproduce the problem in Fx1.0.7, but it seems to be fixed in Fx1.5

Ingo

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

[css-d] CSS Based Forms

[trystano]

Hi all,

I need to create a form on my website, and was wondering if 's 
are used to lay out 's still, or is it best to use CSS?

Also, if anyone has some good examples of 's being done in CSS so 
that i can have a look and get the ball rolling, that would be great! :)

Thanks

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

Re: [css-d] breaking up thumbnails into separate rows

[Matt Fitzwater]

You need to declare a width: on .thumbnail.
after that you will probally need to add a clear:both on your h3 as well
good luck


Iorhael wrote:

>I am setting up a very simple website for my portfolio that started out as a 
>class project for an online CSS class. I set up thumbnails on this page 
>according to how we'd been taught in class but I would like them to be on a 
>separate row for each header category listed. I have put the thumbnails for 
>each category between their own division tags but that does not seem to be 
>working. The page looks the worst on Firefox. I am really stumped on 
>this...can someone help me out?
>
>http://www.drk-writing.com/debscards/debscards2.htm
>
>Here's the CSS code I'm using for the thumbnails:
>
>.thumbnail {
>   float: left;
>   height: 75px;
>   border: 1px solid #590F81;
>   margin: 0 12px 12px 0;
>   padding: 5px;
>   text-align: center;
>   font-family: 'Comic Sans MS', sans-serif;
>   font-size: 12px;
>   color: #000;
>} 
>
>Thank you!
>
>Debbie
>
>
>
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari renders a horizontal dropdown block off by one...(repost)

[Roger Roelofs]

Jeff,

On Dec 20, 2005, at 2:33 PM, Jeff Ross wrote:

> I posted this last night but I mistakenly posted as a reply and didn't
> start a new thread.  Apologies for that, and it won't happen again.
>
> I have an odd off-by-one problem with Safari 1.3.1 in this page:
>
>  http://cvs.new.wykids.org/

I see the problem you are describing.  I don't have a specific fix for 
you.  My first suggestion would be to validate your html.  Your current 
code isn't, and invalid code causes browsers to fall back into 
'tag-soup' rendering which varies from browser to browser.  If you take 
the time to fix your validation errors, the browsers may come more into 
line with each other.  I highly recommend the 'Web Developer Toolbar' 
for gecko based browsers (mozilla/firefox/flock) as a simple way to 
check this, as well as lots of other debugging tools.

hth
Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] EmulatingFixedPositoning and The Gilder-Pixy Method

[Ingo Chao]

Bert Mahoney wrote:

> ... When I'm in IE 6.0 PC and rollover the main navigation graphics the  
> scrollbar on the right side of the page moves over about 50px for  
> each enter and exit on the graphic until the window becomes so small  
> you can no longer see the content that scrolls. ...


> http://tinyurl.com/7orap
> http://tinyurl.com/8668y


This funny bug is new to me, so I simplified your page for a test case:
http://www.satzansatz.de/cssd/tmp/compaction.html

Hope it helps debugging.

Ingo

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

[css-d] mozilla bug >> absolute position+bottom:0 doesnt refresh when container div height is changing

[shlomi asaf]

Link to example: http://www.shlomiasaf.com/footer_tst.html

hi, i have a problem in MOZ. i place a div in a absolute position, in the
bottom:0px.
when i change the height of the container div, the bottom div doesnt move,
he knows the bottom position cuse he has a clear:both BR before him.

does some knows to solve this problem in moz? how to render in moz div
places on changes?

Thanks a lot.
Shlomi.A
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Form display too wide in Mozilla, OK in IE6!

[Steve Thomas]

Thanks! That fixed it.

Steve


Ingo Chao wrote:

> Stephen Thomas wrote:
>
>> ...  while everything works really nicely in IE6, in Mozilla 
>> (Firefox) some
>> of the forms - those containing some explanatory text - display too 
>> wide,
>> overwriting the right-hand column. ...
>>
>> You can see the page at http://www.adelaide.edu.au/library/
>
>
> The div#Scholar is absolutely positioned. You need to define an 
> containing block where this a.p. box relates to.
>
> It's parent div (with an inline style of height:30em) can establish 
> such a containing block when position:relative is added.
>
>
> Ingo
>

-- 
Stephen Thomas,
Senior Systems Analyst,
Adelaide University Library
ADELAIDE UNIVERSITY SA 5005
AUSTRALIA
Tel: +61 8 8303 5190  Fax: +61 8 8303 4369
Email: [EMAIL PROTECTED]
URL: http://staff.library.adelaide.edu.au/~sthomas/


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

Re: [css-d] and styling of td's

[Jesper Brunholm]

David Hucklesby wrote:

> There's this from the W3C specification[1] that may shed some light:
> 
> The following properties apply to column and column-group elements:
[cut]

Thank you for that one, I don't know why I hadn't tried the CSS rec, but 
it clarifies a bit.

It seems clear, however, that there will be no chance of using col for 
my purpose, so I'll leave the matter here.


Best regards

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

Re: [css-d] Form display too wide in Mozilla, OK in IE6!

[Ingo Chao]

Stephen Thomas wrote:
> ...  while everything works really nicely in IE6, in Mozilla (Firefox) some
> of the forms - those containing some explanatory text - display too wide,
> overwriting the right-hand column. ...
> 
> You can see the page at http://www.adelaide.edu.au/library/

The div#Scholar is absolutely positioned. You need to define an 
containing block where this a.p. box relates to.

It's parent div (with an inline style of height:30em) can establish such 
a containing block when position:relative is added.


Ingo

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