I'm having trouble with my page displaying a style (section) incorrectly in IE 6 (it's perfect in IE 5).
Here's the offending code:<STYLE type="text/css"><!--
body {font-family:Arial;}
#main{
margin:0 3em 0 3em;
border:1px solid navy;
padding:1px;
}
#main #section {
background:navy;
color:white;
font:bold 12pt Tahoma, Arial;
text-align:left;
padding-left:5px;
}
.
.
.
--></STYLE>
</HEAD>
<BODY>
<div id="main">
<div id="section">
Policy Section
</div>
other stuff
<div id="section">
Endorsement Section
</div>
other stuff
</div>
In an earlier post nkaisare warned: You may not reuse an id. Id is an unique identifier. Use class="section" or id="section1", id="section2" etc.I listen, but I don't always understand.
Would I change the styles#main {...}
#main #selection {...} or just reference them differently? I have only one <div id=main> in a document, section is used multiple times as a subdivision of main.
Is my original nesting of <div><div> </div></div> a problem?
I'm (obviously) struggling with CSS. I used example code from another site, and modified it to suite my need, but my need and the original code had differences I didn't (don't) understand.
Please help me sort it out.
Thank you,
moretaYou are re-using an id:
<div id="section">
Policy Section
</div>
other stuff
<div id="section">
Endorsement Section
</div>
Try it like this:
<STYLE type="text/css"><!--
body {font-family:Arial;}
#main{
margin:0 3em 0 3em;
border:1px solid navy;
padding:1px;
}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Arial;
text-align:left;
padding-left:5px;
}
.
.
.
--></STYLE>
</HEAD>
<BODY>
<div id="main">
<div class="section">
Policy Section
</div>
other stuff
<div class="section">
Endorsement Section
</div>
other stuff
</div>You can group together various tags by giving them the same class, but you can only assign a specific id once.
I'm still at school, there are about 10 people in my class 6B1, however I'm the only one with my specific ID lavalamp (that's not my real name by the way).
So if me and my class were div tags we'd look like this:
<div id="lavalamp" class="6B1"></div>
<div id="Adam" class="6B1"></div>
<div id="Dean" class="6B1"></div>
<div id="Phillip" class="6B1"></div>
etc.
So the problem in your script is that you have got two div tags with the same id.
What you should do is give them the same class:
class="section"
and in your style tag have this:
#main .section {I didn't really understand the code I borrowed.
I understand your examples.
Thank you! (I'll post back after I try it.)
pyro and lavalamp both used "." for the class tag. Is a rule-of-thumb that styles name beginning with "#" are ids and those beginning with "." are classes? (The "#" still confuses me.)
If section was a unique id of the id main#main #section {...}
If section is a reusable class of the id main #main.section {...}
Is this correct?
Again, THANK YOU!
moreta
P.S. I'm shattered to know that lavalamp uses a false identify. Pyro... I'm certain that you would never do such a thing!Yes . signifies a class and # an ID...
Hmm... How do I break this gentlely... No, Pyro is not my real name...#main {...}
.section {...}No change with above code: Works on IE 5, but not on IE 6.
#main {...}
#main.section {...}
<div id="main">
<div class="section">
</div>
</div>Above code doesn't work on IE 5 or 6. There must be something else going on.
It can't be a browser setting, because IE 6 is happy with a style #menu earlier in the program (below).#menu {
border:1px solid #000;
float:right;
background:#eee;
margin:-5px 18px 0px 0px;
font:9pt Ariel,san-serif;
padding: 4px;
}
<div id="menu">
</div>
<div id="main">
<div class="section">
.
.
.
I'm combing for a missed... anything. Maybe IE 6 is less forgiving than IE 5.
If you have suggestions, please share. In the meantime I'll be combing.
pyro -- I've recovered from the shock. After all, a pyro by any other name would... er, uh, well... you get the idea.
Thank you,
moretaCan we see your entire page? attach it rather than paste it if it's particularly long...It's a little over 200 lines... maybe too long to paste.
It's Friday afternoon, and I'm leaving the office. Taking a printout home with me (I can't access the development areas of our internet from home). Maybe something will jump off the page at me this weekend.
I appreciate the help... the forum reminds me that I'm not the only one trying to learn all this!
moretaThe attachment didn't come through on my last post.
moretaI found the trouble... a typo, I'm embarrassed to admit. Older versions of IE were more forgiving. It's obviously past time for me to make the acquaintance of a validation site (and hope that HTML validation works with CSS,too).
THANK YOU for explaining the differences between class and id use and syntax.
Thank you,
moreta
Here's the offending code:<STYLE type="text/css"><!--
body {font-family:Arial;}
#main{
margin:0 3em 0 3em;
border:1px solid navy;
padding:1px;
}
#main #section {
background:navy;
color:white;
font:bold 12pt Tahoma, Arial;
text-align:left;
padding-left:5px;
}
.
.
.
--></STYLE>
</HEAD>
<BODY>
<div id="main">
<div id="section">
Policy Section
</div>
other stuff
<div id="section">
Endorsement Section
</div>
other stuff
</div>
In an earlier post nkaisare warned: You may not reuse an id. Id is an unique identifier. Use class="section" or id="section1", id="section2" etc.I listen, but I don't always understand.
Would I change the styles#main {...}
#main #selection {...} or just reference them differently? I have only one <div id=main> in a document, section is used multiple times as a subdivision of main.
Is my original nesting of <div><div> </div></div> a problem?
I'm (obviously) struggling with CSS. I used example code from another site, and modified it to suite my need, but my need and the original code had differences I didn't (don't) understand.
Please help me sort it out. Thank you,
moretaYou are re-using an id:
<div id="section">
Policy Section
</div>
other stuff
<div id="section">
Endorsement Section
</div>
Try it like this:
<STYLE type="text/css"><!--
body {font-family:Arial;}
#main{
margin:0 3em 0 3em;
border:1px solid navy;
padding:1px;
}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Arial;
text-align:left;
padding-left:5px;
}
.
.
.
--></STYLE>
</HEAD>
<BODY>
<div id="main">
<div class="section">
Policy Section
</div>
other stuff
<div class="section">
Endorsement Section
</div>
other stuff
</div>You can group together various tags by giving them the same class, but you can only assign a specific id once.
I'm still at school, there are about 10 people in my class 6B1, however I'm the only one with my specific ID lavalamp (that's not my real name by the way).
So if me and my class were div tags we'd look like this:
<div id="lavalamp" class="6B1"></div>
<div id="Adam" class="6B1"></div>
<div id="Dean" class="6B1"></div>
<div id="Phillip" class="6B1"></div>
etc.
So the problem in your script is that you have got two div tags with the same id.
What you should do is give them the same class:
class="section"
and in your style tag have this:
#main .section {I didn't really understand the code I borrowed.
I understand your examples.
Thank you! (I'll post back after I try it.) pyro and lavalamp both used "." for the class tag. Is a rule-of-thumb that styles name beginning with "#" are ids and those beginning with "." are classes? (The "#" still confuses me.)
If section was a unique id of the id main#main #section {...}
If section is a reusable class of the id main #main.section {...}
Is this correct?
Again, THANK YOU!
moreta
P.S. I'm shattered to know that lavalamp uses a false identify. Pyro... I'm certain that you would never do such a thing!Yes . signifies a class and # an ID...
Hmm... How do I break this gentlely... No, Pyro is not my real name...
#main {...}.section {...}No change with above code: Works on IE 5, but not on IE 6.
#main {...}
#main.section {...}
<div id="main">
<div class="section">
</div>
</div>Above code doesn't work on IE 5 or 6. There must be something else going on.
It can't be a browser setting, because IE 6 is happy with a style #menu earlier in the program (below).#menu {
border:1px solid #000;
float:right;
background:#eee;
margin:-5px 18px 0px 0px;
font:9pt Ariel,san-serif;
padding: 4px;
}
<div id="menu">
</div>
<div id="main">
<div class="section">
.
.
.
I'm combing for a missed... anything. Maybe IE 6 is less forgiving than IE 5.
If you have suggestions, please share. In the meantime I'll be combing.
pyro -- I've recovered from the shock. After all, a pyro by any other name would... er, uh, well... you get the idea.
Thank you,
moretaCan we see your entire page? attach it rather than paste it if it's particularly long...It's a little over 200 lines... maybe too long to paste.
It's Friday afternoon, and I'm leaving the office. Taking a printout home with me (I can't access the development areas of our internet from home). Maybe something will jump off the page at me this weekend.
I appreciate the help... the forum reminds me that I'm not the only one trying to learn all this!
moretaThe attachment didn't come through on my last post.
moretaI found the trouble... a typo, I'm embarrassed to admit. Older versions of IE were more forgiving. It's obviously past time for me to make the acquaintance of a validation site (and hope that HTML validation works with CSS,too).
THANK YOU for explaining the differences between class and id use and syntax.
Thank you,
moreta