Re: [WSG] IE vs MF ~ Image padding, bullets numbers missing
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: http://infohound.net/tidy/
(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] are underscores a problem
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 **
[WSG] Siteproblem... IE off course
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] Siteproblem... IE off course
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
**
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] mailto:[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 http://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
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: wsg@webstandardsgroup.org
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] mailto:[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 http://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] are underscores a problem
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 **
[WSG] image height and width question which is better CSS or inline
I have a question about which is the better way to approach adding a
height width to an image for accessibilty/standards.
img src=image.jpg height=25 width=45 /
or img src=image.jpg class=thisimage /
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] image height and width question which is better CSS or inline
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] mailto:[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 http://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.
img src=image.jpg height=25 width=45 /
or img src=image.jpg class=thisimage /
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
**
Re: [WSG] image height and width question which is better CSS or inline
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.
img src=image.jpg height=25 width=45 /
or img src=image.jpg class=thisimage /
and in the CSS have:
.thisimage{
height:25px;
width:45px;
}
or is either one o.k?
Major Tom says, neither:
img src=image.jpg height=25 width=45 alt=Astronaut title=
Major Tom took his protein pill and put his helmet on... /
(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
**
[WSG] Element Jump (IE) and Full Width Problems
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] mailto:[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 http://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] Element Jump (IE) and Full Width Problems problem1
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
**
