Re: [WSG] Site looks fine when previewing in IE, but messy in IE online
I believe I got it. You guys helped out a lot, especially Hugh. Can you guys test again to make sure. It looks great on Mac in Safari and IE5.2.3. Can you test on PC please? http://sonze.com/isl/temp/ Thank you, Shane Helm * 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] Site looks fine when previewing in IE, but messy in IE online
Looks good in Firefox .9. In IE 6 the For more information contact: column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having a rush of blood to my head. I have validated my html code css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * web-arts: the art craft of web design http://www.web-arts.biz * 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] Site looks fine when previewing in IE, but messy in IE online
Looks good in Firefox .9. In IE 6 the For more information contact: column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having a rush of blood to my head. I have validated my html code css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * web-arts: the art craft of web design http://www.web-arts.biz * 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] Site looks fine when previewing in IE, but messy in IE online
Looks good in Firefox .9. In IE 6 the For more information contact: column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having a rush of blood to my head. I have validated my html code css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * web-arts: the art craft of web design http://www.web-arts.biz * 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] Site looks fine when previewing in IE, but messy in IE online
Shane,
It looks fine in all of the Mac browsers I've tried it on... IE 5.2.3,
Opera 7.5, Firefox, Safari. Are you having problems with PC versions of
IE?
I notice from the CSS that you are not specifically using inheritance
for your elements. For example, in the right hand column you have used
spans to designate the font sizes.
A better way to handle your CSS, if you wish to give different
attributes to different elements, is to use their context to apply
them.
For example (in truncated form),
#right p
{ font-size: 0.9em;
margin: 0 0 1em 0;
}
#right dl
{ margin-top: 1em;
}
#right dt
{ font-size: 1.2em;
font-weight: bold;
}
#right dd
{ font-size: 0.9em;
margin: 0 0 0 0;
}
(Use the dt for the name, Jonny Totten, and dd for the address details.)
Use a span named qualifications or something like that for the
smaller CRS type. (This gives it some semantic meaning.)
One benefit of doing things this way is that you can apply all of your
padding and margins to the type and image elements, which avoids some
of the nasty IE PC bugs.
http://www.positioniseverything.net/explorer.html
It looks superb. Your navigation, however, dependent as it is on Flash,
will not please those concerned with the accessibility of websites.
(That said, there seems to be no completely cross-platform/browser way
of achieving semantically correct cascading navigation.)
-Hugh Todd
Here is a link to the html page:
http://sonze.com/isl/temp/
Here is a link to the css page:
http://sonze.com/isl/temp/css/int.css
*
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] Site looks fine when previewing in IE, but messy in IE online
Thanks Hugh. Thanks for saying it looks superb.
I guess I'm too dependent on the Flash cool factor. I have changes
somewhat. I steer clients away from total Flash sites. Especially
after the length of time it took me to make
http://www.johngrammatis.com/
So a good rule of thumb is use margins on text and images instead of
CSS boxes?
I haven't tested on PC. I need to by a cheap PC to test on.
So it looks fine in Mac IE 5.2.3. That's strange. I have IE 5.2,
didn't know there was a newer version. So I just downloaded it and
well it looks great. Your right. I guess though for accessibility, I
still need to correct the problem for IE 5.2. But now that I installed
IE 5.2.3 , I can't open IE 5.2 because it forces it 5.2.3 to open.
Frustrations man, frustrations... :)
Sorry. I am so new. I'm not sure what you mean by inheritance for my
elements. Are spans bad?
Thanks for your help. I'll add the new classes and hopefully that will
help.
Have a great day!
Shane Helm
On Jun 22, 2004, at 1:45 AM, Hugh Todd wrote:
Shane,
It looks fine in all of the Mac browsers I've tried it on... IE 5.2.3,
Opera 7.5, Firefox, Safari. Are you having problems with PC versions
of IE?
I notice from the CSS that you are not specifically using inheritance
for your elements. For example, in the right hand column you have used
spans to designate the font sizes.
A better way to handle your CSS, if you wish to give different
attributes to different elements, is to use their context to apply
them.
For example (in truncated form),
#right p
{ font-size: 0.9em;
margin: 0 0 1em 0;
}
#right dl
{ margin-top: 1em;
}
#right dt
{ font-size: 1.2em;
font-weight: bold;
}
#right dd
{ font-size: 0.9em;
margin: 0 0 0 0;
}
(Use the dt for the name, Jonny Totten, and dd for the address
details.)
Use a span named qualifications or something like that for the
smaller CRS type. (This gives it some semantic meaning.)
One benefit of doing things this way is that you can apply all of your
padding and margins to the type and image elements, which avoids some
of the nasty IE PC bugs.
http://www.positioniseverything.net/explorer.html
It looks superb. Your navigation, however, dependent as it is on
Flash, will not please those concerned with the accessibility of
websites. (That said, there seems to be no completely
cross-platform/browser way of achieving semantically correct cascading
navigation.)
-Hugh Todd
Here is a link to the html page:
http://sonze.com/isl/temp/
Here is a link to the css page:
http://sonze.com/isl/temp/css/int.css
*
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] Site looks fine when previewing in IE, but messy in IE online
Thanks Jeff. Shane Helm On Jun 22, 2004, at 12:49 AM, Jeff Davies wrote: Looks good in Firefox .9. In IE 6 the For more information contact: column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having a rush of blood to my head. I have validated my html code css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * web-arts: the art craft of web design http://www.web-arts.biz * 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] Site looks fine when previewing in IE, but messy in IE online
Shane, you said,
Sorry. I am so new. I'm not sure what you mean by inheritance for my
elements. Are spans bad?
Your aim should be to create HTML that is clean and independent of your
particular style sheet. I say *aim*, because it's a difficult goal to
reach entirely.
This is where inheritance becomes your friend. By dividing your pages
into boxes with your divs, you are making it easier to target specific
elements without the need to rely on classes and spans.
So, for example, you may have five main boxes on your page. Each of
them is unique, so can be given an id (#). You know this already.
Now you can choose to make any or all of the elements *within* each id
behave either the same or differently from your master elements (if you
have them) - by which I mean any top-level styles you may have applied
to the body, h's, etc.
Thus you may set up your basic font parameters in the body like this:
body
{ background: #fff;
font-family: verdana, arial, sans-serif;
font-size: 76%;
color: #666;
line-height: 1.2em;
}
the p in your #main box like this:
#main p
{ font-size: 1.2em;
margin: 1em 1.5em 0 1.5em;
}
and the p in your right hand div like this:
#contactinfo p
{ font-size: 1em;
margin: 0;
}
(Note, these examples are illustrative only.)
In this way you sidestep the need to apply specific classes to
elements, which lock you in to ongoing maintenance and a reliance on
your particular stylesheet.
Looking at your code I saw that, in the right hand column, you had
applied a class to the contact name. To avoid this, (and because it
makes semantic sense) I suggested that you use a dl instead. The
contact name becomes the dt, and the address details become the dd. In
this way you are able to apply styles as I suggested, without the use
of special classes.
The only place where I could not work out a way to avoid applying a
span was with the qualification after your contact's name. But to do
that, better to put it into your main (external) stylesheet and give it
a semantic name, like .qualification. This tells you what the style
*means* rather than what it does.
All the best! You're going well!
-Hugh Todd
PS A cheap PC with Win 2000 or WinXP on it sounds like a great idea.
Someone has put together a package that installs IE5, 5.5 6 on the
same machine -- an invaluable service. (Only works on the OSs I
mention.)
*
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] Site looks fine when previewing in IE, but messy in IE online
Wow Hugh. It's great that you took the time to help me and grant me
encouragement. I greatly appreciate it.
This makes all the sense in the world. The one thing is I was confused
about was dl, dt, dd. I found some info online to learn up on it.
I really can't thank you enough.
Shane Helm
On Jun 22, 2004, at 5:44 PM, Hugh Todd wrote:
Shane, you said,
Sorry. I am so new. I'm not sure what you mean by inheritance for
my elements. Are spans bad?
Your aim should be to create HTML that is clean and independent of
your particular style sheet. I say *aim*, because it's a difficult
goal to reach entirely.
This is where inheritance becomes your friend. By dividing your
pages into boxes with your divs, you are making it easier to target
specific elements without the need to rely on classes and spans.
So, for example, you may have five main boxes on your page. Each of
them is unique, so can be given an id (#). You know this already.
Now you can choose to make any or all of the elements *within* each id
behave either the same or differently from your master elements (if
you have them) - by which I mean any top-level styles you may have
applied to the body, h's, etc.
Thus you may set up your basic font parameters in the body like this:
body
{ background: #fff;
font-family: verdana, arial, sans-serif;
font-size: 76%;
color: #666;
line-height: 1.2em;
}
the p in your #main box like this:
#main p
{ font-size: 1.2em;
margin: 1em 1.5em 0 1.5em;
}
and the p in your right hand div like this:
#contactinfo p
{ font-size: 1em;
margin: 0;
}
(Note, these examples are illustrative only.)
In this way you sidestep the need to apply specific classes to
elements, which lock you in to ongoing maintenance and a reliance on
your particular stylesheet.
Looking at your code I saw that, in the right hand column, you had
applied a class to the contact name. To avoid this, (and because it
makes semantic sense) I suggested that you use a dl instead. The
contact name becomes the dt, and the address details become the dd. In
this way you are able to apply styles as I suggested, without the use
of special classes.
The only place where I could not work out a way to avoid applying a
span was with the qualification after your contact's name. But to do
that, better to put it into your main (external) stylesheet and give
it a semantic name, like .qualification. This tells you what the
style *means* rather than what it does.
All the best! You're going well!
-Hugh Todd
PS A cheap PC with Win 2000 or WinXP on it sounds like a great idea.
Someone has put together a package that installs IE5, 5.5 6 on the
same machine -- an invaluable service. (Only works on the OSs I
mention.)
*
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
*
