Re: [WSG] Element Jump (IE) and Full Width Problems problem1

[Ingo Chao]

Nathan Rutman schrieb:

http://www.solvepoint.com/design/sp4.2/


1) (IE ONLY) When the page loads, the menu items are in the upper-left 
corner of the screen until used the first time, then they jump into 
place.  I thought they needed "layout" and so assigned height attributes 
to all items involved.  


Good idea. Give layout to

#pageContainer { position:relative; ... _height:0; }

WFM on a local copy.

As a rule of thumb:

Never use position:relative on a container of floats (or worse, relative 
positioned elements:
li.menuItem { overflow: visible; float: left; position: relative; width: 
150px; } )
without adding layout. You have managed to take this block completely 
out of the flow.


happy hacking.

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
**

[WSG] Element Jump (IE) and Full Width Problems

[Nathan Rutman]

Hey guys,

I'm trying to build a header for a new design.

Page:
http://www.solvepoint.com/design/sp4.2/
CSS:
http://www.solvepoint.com/design/sp4.2/css/sp-screen.css
IE CSS:
http://www.solvepoint.com/design/sp4.2/css/sp-screen-ie.css

The navigation is based on Suckerfish:
http://www.alistapart.com/articles/dropdowns/

I'm experiencing two problems:
1) (IE ONLY) When the page loads, the menu items are in the upper-left 
corner of the screen until used the first time, then they jump into 
place.  I thought they needed "layout" and so assigned height attributes 
to all items involved.  Unfortunately that didn't work.
2) I can't seem to get #pageContainer to stretch to 100%.  I've assigned 
"min-height: 100%" to the html and body elements.  I don't know what 
else it will take.


Additionally:
3) Suckerfish floats all of its items to get the inline appearance.  
Currently I have to use non-floated content ("Other Content") to get 
FireFox to display the background image on the containing DIV.  Is there 
anyway to display a background image behind floated elements?


Thanks for any help,
Nate

--
*Nathan Rutman* ([EMAIL PROTECTED] )
Corporate Communications Designer

*Solvepoint Corporation*
882 South Matlack Street, Suite 110
West Chester, PA 19382
800.388.1850 x1208
484.356.0990 (fax)
www.solvepoint.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] image height and width question which is better CSS or inline

[David Laakso]

Bruce Gilbert wrote:


I have a question about which is the better way to approach adding a
height width to an image for accessibilty/standards.



or 

and in the CSS have:

.thisimage{
height:25px;
width:45px;
}

or is either one o.k?

 


Major Tom says, neither:
   
(but then what does he know...?)
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] image height and width question which is better CSS or inline

[Nathan Rutman]

A few thoughts:

1) If you were to use CSS to specify size for the image, I don't think 
you'd want to use a class, unless it was one of many images that fits 
that style (i.e. a photo gallery thumbnail where 10-20 instances might 
appear on one page).  If you're just talking about one image, an ID 
would be more properly suited.


2) The goal of CSS is to separate content and the presentation of that 
content.  The benefit of CSS is that if you would update the image you 
could change one easy-to-find definition in the style sheet instead of 
hunting through HTML tag soup.


3) Unless you are resizing the image on the fly (the image is 300x200 
and you want to display it at 150x100 - not a best practice anyway), you 
lose nothing if you specify a style to a browser that can't interpret.  
The image will, by default, display at 100%.  The only reason I see for 
specifying height and width attributes in the IMG tag is if you are not 
displaying the image at 100% and are expecting hits from browsers that 
wouldn't recognize that basic style (Netscape 3?).


4) Specifying height and width on images by default was a trend made 
popular in the late 90's, where slow-to-render table-based layouts were 
used (which relied heavily on images "pushing" the cells around to the 
correct size/location) and everyone was using dialup access.  The 
problem was that the small placeholder used by the browser would shift 
content around when the image was loaded at its proper size.  With 
today's Internet, where a large client base is using broadband and 
developers are utilizing near-instantaneous CSS-positioned elements, 
there might not be much of a need to specify the image dimensions.  I'm 
not sure it's necessary in most cases.  No matter where you define the 
height/width, that is one more step you'd have to take if you ever 
updated the image in the future with one that isn't the same dimensions.


Hope that helps,
Nate

*Nathan Rutman* ([EMAIL PROTECTED] )
Corporate Communications Designer

*Solvepoint Corporation*
882 South Matlack Street, Suite 110
West Chester, PA 19382
800.388.1850 x1208
484.356.0990 (fax)
www.solvepoint.com 



Bruce Gilbert wrote:


I have a question about which is the better way to approach adding a
height width to an image for accessibilty/standards.



or 

and in the CSS have:

.thisimage{
height:25px;
width:45px;
}

or is either one o.k?

TIA

 



**
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] image height and width question which is better CSS or inline

[Bruce Gilbert]

I have a question about which is the better way to approach adding a
height width to an image for accessibilty/standards.



or 

and in the CSS have:

.thisimage{
height:25px;
width:45px;
}

or is either one o.k?

TIA

-- 
::Bruce::
**
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]

On Jul 8, 2005, at 1:37 AM, Chris Taylor wrote:
I've been using the dash and period in ID names a lot recently  
(part of
an unobtrusive DOM scripting set of functions I've been developing)  
and

not found any problems yet in any of the Win browsers. Whether IDs
formatted like this "functionName.-fe-4r-6s-ef-s5-ef.2000" will  
work in

older browsers or different operating systems I'm kind of crossing my
fingers about!


By "not found any problems" I assume you mean that these IDs are only  
referenced by your script, and not the CSS. JS only requires that IDs  
are strings. Trying to assign styles to your elements via CSS would  
be problematic, since each period would be interpreted as a class  
name indicator, and your middle classname starts with a hyphen (an  
illegal start). But if you are only accessing the info via JS, then  
it should be fine.




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


Some people believe so. I do. The problem that you'll run into is  
that IDs and class names are case sensitive with an XHTML doctype  
(and always case sensitive when accessed via the DOM), and so using  
compound words can result in particularly difficult bugs to find  
(e.g., what that backGroundDIV or BackGroundDiv or backgroundDiv  
or...?). Best to avoid compound words, I think (e.g., replace with  
bgContent).


--

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] Siteproblem... IE off course

[Siteman DA - Bent Inge]

Using:
.groenn {
background: #3c0 url(a000.gif) no-repeat 0 0;
_height: 0; /* hasLayout trigger */
_margin-right: -3px; /* corr jog */
_margin-left: -3px; /* corr jog */
}

... as suggested by Georg in the previos mail, solved most of the problem, 
so it's not too bad now, but still not perfect.


However, U're right... The problem is just articles in the center column, 
otherwise it looks good. (The text is just bogus and got nothing to do with 
the design, so the language shouldn't be a problem :-)


It's still missing 1px on every side though.

I've tried to use other values on the negative margins too, but that gives 
no effect...


Best regards,
Ben @ siteman

- Original Message - 
From: "Nathan Rutman" <[EMAIL PROTECTED]>

To: 
Sent: Friday, July 08, 2005 2:43 PM
Subject: Re: [WSG] Siteproblem... IE off course


What "big problems" are there in IE?  I'm looking at it in IE6 and the 
only difference I see from FF 1.04 is the box in the center labeled 
"Testartikkel" starts in green 1/2 down the box instead of the whole 
height (I'm an English-only speaker though, so I feel kinda lost when I 
look at the site anyway).  Are there other differences occurring?


-Nate

*Nathan Rutman* ([EMAIL PROTECTED] )
Corporate Communications Designer

*Solvepoint Corporation*
882 South Matlack Street, Suite 110
West Chester, PA 19382
800.388.1850 x1208
484.356.0990 (fax)
www.solvepoint.com 



Gunlaug Sørtun wrote:


Siteman DA - Bent Inge wrote:

Page: http://modulvegger.prosjektweb.net Sheet: 
http://modulvegger.prosjektweb.net/sitestyle.css


Looks right in Firefox and Opera, but I've got big problems with the 
intended look in IE.



No surprise there... :-)

You'll have to play with the 'hasLayout' property and 3px margin-jog in
IE/win.

Something like:
.groenn {
background: #3c0 url(a000.gif) no-repeat 0 0;
_height: 0; /* hasLayout trigger */
_margin-right: -3px; /* corr jog */
_margin-left: -3px; /* corr jog */
}
...is the closest IE6 can get with that layout.

Similar solutions (hacks) may be needed elsewhere in that page, but I
don't have time to look further into it.

regards
Georg



**
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] Siteproblem... IE off course

[Nathan Rutman]

What "big problems" are there in IE?  I'm looking at it in IE6 and the 
only difference I see from FF 1.04 is the box in the center labeled 
"Testartikkel" starts in green 1/2 down the box instead of the whole 
height (I'm an English-only speaker though, so I feel kinda lost when I 
look at the site anyway).  Are there other differences occurring?


-Nate

*Nathan Rutman* ([EMAIL PROTECTED] )
Corporate Communications Designer

*Solvepoint Corporation*
882 South Matlack Street, Suite 110
West Chester, PA 19382
800.388.1850 x1208
484.356.0990 (fax)
www.solvepoint.com 



Gunlaug Sørtun wrote:


Siteman DA - Bent Inge wrote:

Page: http://modulvegger.prosjektweb.net Sheet: 
http://modulvegger.prosjektweb.net/sitestyle.css


Looks right in Firefox and Opera, but I've got big problems with the 
intended look in IE.



No surprise there... :-)

You'll have to play with the 'hasLayout' property and 3px margin-jog in
IE/win.

Something like:
.groenn {
background: #3c0 url(a000.gif) no-repeat 0 0;
_height: 0; /* hasLayout trigger */
_margin-right: -3px; /* corr jog */
_margin-left: -3px; /* corr jog */
}
...is the closest IE6 can get with that layout.

Similar solutions (hacks) may be needed elsewhere in that page, but I
don't have time to look further into it.

regards
Georg



**
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] Siteproblem... IE off course

[Gunlaug Sørtun]

Siteman DA - Bent Inge wrote:
Page: http://modulvegger.prosjektweb.net Sheet: 
http://modulvegger.prosjektweb.net/sitestyle.css


Looks right in Firefox and Opera, but I've got big problems with the 
intended look in IE.


No surprise there... :-)

You'll have to play with the 'hasLayout' property and 3px margin-jog in
IE/win.

Something like:
.groenn {
background: #3c0 url(a000.gif) no-repeat 0 0;
_height: 0; /* hasLayout trigger */
_margin-right: -3px; /* corr jog */
_margin-left: -3px; /* corr jog */
}
...is the closest IE6 can get with that layout.

Similar solutions (hacks) may be needed elsewhere in that page, but I
don't have time to look further into it.

regards
Georg
--
http://www.gunlaug.no
**
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] Siteproblem... IE off course

[Siteman DA - Bent Inge]

Hi!

Page: http://modulvegger.prosjektweb.net
Sheet: http://modulvegger.prosjektweb.net/sitestyle.css

Looks right in Firefox and Opera, but I've got big problems with the 
intended look in IE.


Anybody out there who's had the same problem before? I guess the problem is 
too close columns, i usually don't do this but this is how the client wants 
it :-)


For reference - since the stylesheet has norwegian names and comments - 
here's some translations:

#kol1 = left column
#kol2 = right column
#innhold = content

Hope somebody can help me out, I'd hate to use tables for this layout, even 
though, at this point, that seems like the last resort...


Best regards,
Ben @ siteman

Siteman DA
Teknologiveien 22
2815 Gjøvik

Tlf. 61 13 16 58
Mob. 990 29 871
[EMAIL PROTECTED]
www.siteman.no 


**
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

[Chris Taylor]

I've been using the dash and period in ID names a lot recently (part of
an unobtrusive DOM scripting set of functions I've been developing) and
not found any problems yet in any of the Win browsers. Whether IDs
formatted like this "functionName.-fe-4r-6s-ef-s5-ef.2000" will work in
older browsers or different operating systems I'm kind of crossing my
fingers about!

Chris

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Peter J. Farrell
Sent: 08 July 2005 01:25
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] are underscores a problem

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
**

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

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