Re: [WSG] IE vs MF ~ Image padding, bullets & numbers missing

[David Laakso]

White Ash wrote:


Hello,

I cannot seem to reconcile the following problems.
 

White, you've got numerous errors on the html file that you'll want to 
correct before you do anything else. Tidy Online will correct most of 
them for you: 



(1) The sponsor placeholder images on the right have 2px bottom gap (which I
have specified) in Firefox.  In IE, there is more than 2px.
 

Seems inconsequential to me. Of greater concern is that you're using 
absolute font-sizing and the text can't be zoomed in IE. Now that's a 
problem.



(2) Similarly there is an extra slight gap between the logo above the navbar
and the actual navbar that doesn't exist if Firefox.
 


As above.


(3) The bullets and numbers in the lists show up just fine in Firefox.  In
IE, they are not to be seen.
 

To bring up the list gif's and numbers in IE & Opera you need a wider 
margin. Add this to the bottom of your style sheet:

For IE:
* html #content ul {   
   margin: .5em 10px .5em 30px;   
   }

  * html #content li {
   margin-left: 20px;   
   }

For Opera:
@media screen and (min-width: 0px){
#content ul {
   margin: .5em 10px .5em 30px!important;
   }

#content li {
   margin-left: 20px!important;
   }
}/*don't delete this brace*/  


Help anyone?

http://www.neln.org/dev/template.shtml

http://www.neln.org/dev/css/styles.css

Thanks as always,

White Ash


 


Regards,
David Laakso


--
David Laakso
http://www.dlaakso.com/


**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Strange IE behavious that doesn't make sense

[tee]

Hi Nathan, thanks for bringing up the question to Ingo, otherwise I might
just happily copy his code without asking why.

Now I am going back to read the article second time.

tee
> Nathan Rutman schrieb:
 Whenever a background is disappearing, try to give layout to the
>> parent of the element via the Holly hack.
>> 
>> What does that mean?  You want to give a height:0 to the parent
>> element?  I don't get it...
> 
> Holly Bergevin's hack is described in detail here:
> http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
> 
> The intention of this hack is not to give whatever height to the
> container, but to let the block gain "layout". "Layout" can only be
> described roughly as a IE-Win proprietary undocumented concept to
> establish a rectangular rendering entity that is responsible for drawing
> its own content.
> 
> Explorer's "dimensional" bugs are related to the presence or absence of
> "layout": http://www.positioniseverything.net/explorer.html
> 
> Note: I don't know if this hack fixes the bug in tee's page, it does on
> a local simplified copy, though.
> 
> You mentioned the dependence on some characters more or less, and I can
> confirm this. Sometimes these characters more or less shift the wrapping
> of the content just by some microns, i.e. lines do not end with
> italicised content, or the wrapping content next to a float leaves a
> single line blank near to the last "bottom line" of the float, and so
> on. Or a tight fitting of the related containers induces more problems
> like duplicated last characters.
> 
> Would be interesting to see your minimalized bug test page.
> 

> 

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Strange IE behavious that doesn't make sense

[tee]

Hi, Ingo, thank you very much. IT WORKS!

> Sense? We still speak of IE, don't we?

Well, the reason I thought it wasn't make sense was because I grouped all h3
together therefore the background image should either show or not, to all.
It just proves again, I have so much to learn.

tee
> Whenever a background is disappearing, try to give layout to the parent
> of the element via the Holly hack.
> 
> /* \*/
> * html #preamble,
> * html #supportingText,
> * html #explanation,
> * html #furtherExplanation,
> * html #schools {_height:0; }
> /* */
> 
> Ingo

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] IE vs MF ~ Image padding, bullets & numbers missing

[Bert Doorn]

G'day


(1) The sponsor placeholder images on the right have 2px bottom gap (which I
have specified) in Firefox.  In IE, there is more than 2px.


I suggest you make an attempt at standards compliant before 
(x)html before asking for help on this list. There were 65 
validation errors when I looked at the page.


However... Removing the whitespace between the div and the link 
probably will probably fix issue #1.  And as it's a list of 
sponsors so rather than using a div, I'd actually use a ul or ol 
(and keep all the content of each li on one line in the source).



(2) Similarly there is an extra slight gap between the logo above the navbar
and the actual navbar that doesn't exist if Firefox.


Could be the whitespace issue again, or margin/padding on one of 
the elements in that part of the layout.



(3) The bullets and numbers in the lists show up just fine in Firefox.  In
IE, they are not to be seen.


I'd say the use of list-style-image may be an issue, though I 
can't be sure.  May be better to use a background-image on the li 
instead and give them padding.



http://www.neln.org/dev/template.shtml
http://www.neln.org/dev/css/styles.css


But I still recommend fixing the 65 validation errors...

Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] are underscores a problem

[Peter J. Farrell]

Richard Czeiger wrote:

Does that mean the best way to go fro ID, Class Names, Variables, 
etc... is interCaps (also known as CamelCase or lowerCamelCase) ?


http://en.wikipedia.org/wiki/CamelCase

R


I've adopted lowerCamelCase for nearly everything of my programming 
guideline except when dealing with databases (in which I use all lower 
with typical underscores) and class names in Java.  As programmed other 
languages before CSS.  Plus lowerCamelCase makes it easier to read than 
a something named with a ton of underscores.


An example from today's work (non-CSS):
errorHandler.invalidPropertyName
vs
error_handler.invalid_property_name

Best,
.Peter

--
Peter J. Farrell :: Maestro Publishing

blog:: http://blog.maestropublishing.com
email   :: [EMAIL PROTECTED]

Create boilerplate beans!
Check out the Mach-II Bean Creator - free download.
http://blog.maestropublishing.com/mach-ii_beaner.htm

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] are underscores a problem

[Richard Czeiger]

Does that mean the best way to go fro ID, Class Names, Variables, etc... is 
interCaps (also known as CamelCase or lowerCamelCase) ?


http://en.wikipedia.org/wiki/CamelCase

R


- Original Message - 
From: "Ben Curtis" <[EMAIL PROTECTED]>

To: 
Sent: Friday, July 08, 2005 9:07 AM
Subject: Re: [WSG] are underscores a problem




That said, I was asked if we could modify some id and class names  to go 
from
nav1sub1 to nav1_sub1 . I told them my preference would be nav1- sub1. 
But
then I thought I should check to see if there would be any problems 
using an

underscore in an id or class. Is it one of the legal characters?



This topic came up a month ago. Read the archived thread for more info.

Underscores were illegal in CSS 2.0, but "legalized" in 2.1 since  every 
browser except Netscape 4 violated that rule. Since 2.1 is a  refinement 
of 2.0, 2.1 completely replaces 2.0 -- that is, there is  no such thing as 
conforming to CSS 2.0, like you could conform to  both HTML 4 and XHTML 1.


Hyphens are not forbidden, but are frowned on since they caused minor 
problems with some versions of Javascript interacting with IDs. I  don't 
remember the specifics.


If you need to support Netscape Navigator 4.x, do not put underscores  in 
your IDs or class names.


--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**





**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] are underscores a problem

[Ben Curtis]

That said, I was asked if we could modify some id and class names  
to go from
nav1sub1 to nav1_sub1 . I told them my preference would be nav1- 
sub1. But
then I thought I should check to see if there would be any problems  
using an

underscore in an id or class. Is it one of the legal characters?



This topic came up a month ago. Read the archived thread for more info.

Underscores were illegal in CSS 2.0, but "legalized" in 2.1 since  
every browser except Netscape 4 violated that rule. Since 2.1 is a  
refinement of 2.0, 2.1 completely replaces 2.0 -- that is, there is  
no such thing as conforming to CSS 2.0, like you could conform to  
both HTML 4 and XHTML 1.


Hyphens are not forbidden, but are frowned on since they caused minor  
problems with some versions of Javascript interacting with IDs. I  
don't remember the specifics.


If you need to support Netscape Navigator 4.x, do not put underscores  
in your IDs or class names.


--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] are underscores a problem

[Nick Gleitzman]

Drake, Ted C. wrote:

But then I thought I should check to see if there would be any 
problems using an

underscore in an id or class. Is it one of the legal characters?


Don't know about 'legal', but I have had problems with certain browsers 
in the past ignoring css rules applied to classes and/or ids with 
underscores in their names. Early version/s of Safari come to mind; 
there may be others - and the issue may have been fixed in later 
releases. If I sound vague, it's because I fixed the problem by never 
again using underscores in id/class names, so I haven't tested for it 
lately...


HTH
N
___
Omnivision. Websight.
http://www.omnivision.com.au/

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

[WSG] are underscores a problem

[Drake, Ted C.]

Hi All

First off: I hate underscores in names. I hate having to hit the shift key
and dash key at the same time and sometimes you can't tell that the darn
thing was there to begin with.

That said, I was asked if we could modify some id and class names to go from
nav1sub1 to nav1_sub1 . I told them my preference would be nav1-sub1. But
then I thought I should check to see if there would be any problems using an
underscore in an id or class. Is it one of the legal characters?

Thanks
Ted

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

[WSG] IE vs MF ~ Image padding, bullets & numbers missing

[White Ash]

Hello,

I cannot seem to reconcile the following problems.

(1) The sponsor placeholder images on the right have 2px bottom gap (which I
have specified) in Firefox.  In IE, there is more than 2px.
(2) Similarly there is an extra slight gap between the logo above the navbar
and the actual navbar that doesn't exist if Firefox.
(3) The bullets and numbers in the lists show up just fine in Firefox.  In
IE, they are not to be seen.

Help anyone?

http://www.neln.org/dev/template.shtml

http://www.neln.org/dev/css/styles.css

Thanks as always,

White Ash

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] problems with aligning of thumbnails

[Kenny Graham]

It may be because your img elements in the gallery section aren't
closed, and you're using strict XHTML.  Try changing the s to
s and see if that fixes anything.

On 7/6/05, Bruce Gilbert <[EMAIL PROTECTED]> wrote:
> I am *trying* to get my thumbnail images to align center to their
> respective backgrounds and also to change border color on mouseover
> and I am not able to accomplish either one at the moment.
> 
> The page in question is http://inspired-evolution.com/Graphics.php
> 
> and CSS can be found at http://inspired-evolution.com/Gilbert.css
> 
> pertinent CSS  is:
> 
> dl.gallery
> {
> border: 1px solid #33;
> background-color: #b0c4de;
> width: 175px;
> float:left;
> text-align:center;
> margin-left:3em;
> }
> 
> .gallery dt { font-weight: bold; font-color:#66;padding:0; margin:0}
> 
> .gallery dt img
> {
> border: 1px solid #66;
> width: 144px;
> height: 144px;
> 
> }
> 
> .gallery dt img.ams
> {
> border: 1px solid #66;
> width: 144px;
> height: 79px;
> 
> }
> 
> .gallery dt img a:link
> {
> border: 1px solid #66;
> }
> 
> .gallery dt img a:visited
> {
> border: 1px solid #66;
> }
> 
> .gallery dt img a:hover
> {
> border: 2px solid #33;
> }
> 
> .gallery dt img a:active
> {
> border: 1px solid #33;
> }
> 
> .gallery dd
> {
> margin: 0;
> padding: 0;
> }
> 
> any assistance is greatly appreciative!
> **
> The discussion list for  http://webstandardsgroup.org/
> 
>  See http://webstandardsgroup.org/mail/guidelines.cfm
>  for some hints on posting to the list & getting help
> **
> 
>
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Strange IE behavious that doesn't make sense

[Nathan Rutman]

Oh, that IS interesting!  And very helpful.  Thanks for sharing!

-Nate


Ingo Chao wrote:


Nathan Rutman schrieb:

 >> Whenever a background is disappearing, try to give layout to the 
parent of the element via the Holly hack.


What does that mean?  You want to give a height:0 to the parent 
element?  I don't get it...



Holly Bergevin's hack is described in detail here:
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

The intention of this hack is not to give whatever height to the 
container, but to let the block gain "layout". "Layout" can only be 
described roughly as a IE-Win proprietary undocumented concept to 
establish a rectangular rendering entity that is responsible for 
drawing its own content.


Explorer's "dimensional" bugs are related to the presence or absence 
of "layout": http://www.positioniseverything.net/explorer.html


Note: I don't know if this hack fixes the bug in tee's page, it does 
on a local simplified copy, though.


You mentioned the dependence on some characters more or less, and I 
can confirm this. Sometimes these characters more or less shift the 
wrapping of the content just by some microns, i.e. lines do not end 
with italicised content, or the wrapping content next to a float 
leaves a single line blank near to the last "bottom line" of the 
float, and so on. Or a tight fitting of the related containers induces 
more problems like duplicated last characters.


Would be interesting to see your minimalized bug test page.

Ingo
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**





**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] Strange IE behavious that doesn't make sense

[Ingo Chao]

Nathan Rutman schrieb:
 >> Whenever a background is disappearing, try to give layout to the 
parent of the element via the Holly hack.


What does that mean?  You want to give a height:0 to the parent 
element?  I don't get it...


Holly Bergevin's hack is described in detail here:
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

The intention of this hack is not to give whatever height to the 
container, but to let the block gain "layout". "Layout" can only be 
described roughly as a IE-Win proprietary undocumented concept to 
establish a rectangular rendering entity that is responsible for drawing 
its own content.


Explorer's "dimensional" bugs are related to the presence or absence of 
"layout": http://www.positioniseverything.net/explorer.html


Note: I don't know if this hack fixes the bug in tee's page, it does on 
a local simplified copy, though.


You mentioned the dependence on some characters more or less, and I can 
confirm this. Sometimes these characters more or less shift the wrapping 
of the content just by some microns, i.e. lines do not end with 
italicised content, or the wrapping content next to a float leaves a 
single line blank near to the last "bottom line" of the float, and so 
on. Or a tight fitting of the related containers induces more problems 
like duplicated last characters.


Would be interesting to see your minimalized bug test page.

Ingo
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**