Forum Moderators: not2easy
I have created a page that should show a white box on a green background with all of the content for the page inside the white box.
What I have done is create a DIV that is called "InnerBox" to be the white box where the content will go.
Another DIV called "Header" is nested inside InnerBox and should be the top of the white box.
Then there is a DIV called "Main" which is also nested inside the InnerBox DIV. It should display immediately after the Header DIV.
Finally there is a "Footer" DIV which appears immediately after the Main DIV and is nested inside the InnerBox DIV.
Now, this works very nicely in IE6 but when viewed in Netscape or Opera it looks very different.
Can anyone tell me:
a) why it is happening?
b) how to fix it so it doesn't happen?
Thanks for any help you can give!
Here is the code....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS That doesn't work in NN or Opera but does in IE</TITLE>
<STYLE>
/* FORMATTING & LAYOUT */
#InnerBox {
background-color: #FFFFFF;
border-style: outset;
}
#Header {
position: fixed;
height: 15%;
margin-bottom:0px;
}
#Footer {
position: fixed;
height: 100px;
}
#Main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 50px;
}
/* GENERAL STYLES */
body {
margin: 2% 2% 2% 2%; /* T-R-B-L */
padding: 0; /* used for Opera - prevents border */
}
.normal {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
font-weight: normal;
text-align: justify;
text-decoration: none;
margin-left: 5px;
margin-right: 10px;
}
.notop {
margin-top:0px;
}
.SubHeading {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
text-align: justify;
text-decoration: none;
margin-left: 10px;
}
.SmIt {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
font-style: italic;
margin-left: 10px;
}
.Little {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
}
.Question {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
font-style: italic;
text-align: justify;
}
.Question:first-letter {
font-size: 120%;
font-weight: bold;
color: red;
}
.Answer {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
text-align: justify;
}
.Answer:first-letter {
font-size: 120%;
font-weight: bold;
color: blue;
}
/* LISTS */
UL {
list-style-type: square;
list-style: outside;
margin-right: 50px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
font-weight: normal;
text-decoration: none;
}
/* IMAGES */
IMG.TitlePic {
float: right;
}
/* LINKS & ANCHORS */
A {
font-weight: bold;
text-decoration: none;
}
</STYLE>
</HEAD>
<BODY BGCOLOR="#034d0c">
<DIV ID="InnerBox">
<DIV ID="Header" style="text-align:right;">
<IMG src="images/logo1.png" alt="PageLogo" height="97" width="366">
</DIV>
<DIV ID="Main">
<P class="normal">
This is where the text goes. This is just a paragraph to show where the text goes.
It goes here. Wow! Here is some more text. Yay! What a great way to display
information! This is just a few words. Hooray!
</P>
<P class="normal">
Here is another paragraph. As you can see, it is not all that much more
interesting than the first paragraph.
</P>
<UL>
<LI>Here is a list item. <BR><BR> </LI>
<LI> Here is another list item <BR><BR></LI>
<P class="normal">
Here is a <P> tag nested inside a list!
</P>
<LI>Here is the last item on the list!</LI>
</UL>
<HR width="100%" STYLE="color:green;">
</DIV>
<DIV ID="footer">
<P><!-- spacer --></P>
<TABLE align=center border=1 cellpadding=5 rules=groups>
<TR>
<TH class="little">
Jump to:
</TH>
<TD class="little">
Here is a link box!
Links could go in here!
</TD>
</TR>
</TABLE>
<P><!--spacer--></P>
</DIV>
</DIV>
</BODY>
</HTML>
<STYLE>
/* FORMATTING & LAYOUT */
#InnerBox {
background-color: #FFFFFF;
border-style: outset;
}
.Header {
position: fixed;
height: 15%;
margin-bottom:0px;
}
.Footer {
position: fixed;
margin-top:10px;
height: 100px;
}
.Main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 50px;
}
header, footer and main should have . in front not #
Can you explain why I should use a "dot" instead of a "hash"?
I figured that the DIV tags are describing items that relate to the structure of the document rather than classes of objects.
Given that scenario, I figured a DIV used in such a context should have an "ID" instead of "class"... maybe that's wrong?
If I change to a dot I think I will have to declare the DIVs using the class attribute rather than the ID attribute. If I do that, I probably won't be able to look them up with JS, in case I want to do soemthing with them.
So if I should be using class instead of ID then I will change them over.
1. Formating and Layout
2. General styles
The first "formatting and layout" definitions are for actual objects which can be ref'd by their ID. They only occur once in the page, and they are self-descriptive names...
The "general styles" is for everything else, paragraphs and images and stuff where they are "classes" meant to be re-used on multiple items that I want to have similar attributes. They are not connected with layout particularly.
a dot is if you are going to use the class more than once per page, a # is for if it is a unique item, occuring only once on the page.
I have a question then; why use the # sign at all? Couldn't the . be used all the time, or does that not validate?
Drop the position:fixed; and that should solve your problem.
As a former "IE lover" of MANY years standing, I was suitably appalled and then humbled to discover (when I actually started trying to make pages which displayed properly AND validated in ALL browsers) that IE is the renegade, NOT the rest of them.
Sucks - but it's true....
I have a question then; why use the # sign at all? Couldn't the . be used all the time, or does that not validate?
because there are many times you want to access something as a unique entity, for example, all Javascript getElementById requires that the element to be gotten by its id is present and unique on the page.
other examples are if you give the body tag an id, you can toggle certain behaviors in the css through that id, like
#index .navBar #home {
display:none;
}
Using # also forces you to keep track of what you are actually doing, for example the nav cell is only happening one place, the content only one, but headers, paragraphs, links etc, happen all over.
If you never need to trigger, and are sure you will never need to trigger, any kind of behavior, then you can of course never use #, but there's really no point, it just gives you a bit more control over the layout and its possibilities.
<div class=navbar id=topbar>...</div>
.
.
.
<div class=navbar id=bottombar>...</div>
You might, for example, use alternate style sheets to produce different skins to your page. In the first style, the navbar would be at the top and bottom of the page. Here you would not declare anything in either #topbar or #bottombar.
In the alternate style, you would have a single navbar on the left (or maybe right). You would achive this by styling .navbar in the way you wanted, and then include "display:none" in #bottombar to avoid displaying a (redundatnt in this case) duplicate navigation bar.
This is a perfect example of why you should do your testing in a compliant browser and then tweak for IE.
position:fixed; is not supported properly in IE. So when you were using position fixed it was having no effect in IE but when you tried it in NS or Opera position:fixed; did work and your layout was not what you expected.
This is another common case of someone using a css property without knowing why they are using it. Its best to know why you are doing something or you will end up beating your head against the wall when your pages aren't behaving as you'd expect ;).
A few more things...
You do not need to declare the font-family,weight,style,decoration etc. in every class you define. Instead define the font-family in your body{} and change the rest as they are needed. For example, why use font-weight:normal or text-decoration:none, when those are the default properties for most elements? They are called cascading style sheets for a reason :)
One more tip, your paragraph 'spacer' is unnecessary. Either give a top and bottom margin to your table or top and bottom padding to your footer div.
