absolute / relative Netscape vs. IE

absolute / relative Netscape vs. IE (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

bdaul -> absolute / relative Netscape vs. IE (9/20/2004 2:28:38)
http://www.human-landscaping.com/EMM/aboutbook.html The above page has a problem with the FOOTER...under IE...looks great...under NS/Mozilla...it is not at the end of the table. I have the feeling this is an easy one...but I can't think of how to make sure it is always after the table regardless of browser... THANKS

Donkey -> RE: absolute / relative Netscape vs. IE (9/20/2004 3:30:46)
I think the problem is the absolutely positioned footer div. I would suggest making a container div .container{ position:relative; height:100%; width:100%; } Then put everything except the footer inside the container div. Then make the footer position relative, width 100% and float left. Also I don't think you need to state the height for the footer.

c1sissy -> RE: absolute / relative Netscape vs. IE (9/20/2004 14:35:39)
if you are floating though, you do need to specify the width.

d a v e -> RE: absolute / relative Netscape vs. IE (9/20/2004 15:46:51)
if you're just sitting down though you're probably ok without ;) i get a horizontal scrollbar in opera 7.54 1024x768

c1sissy -> RE: absolute / relative Netscape vs. IE (9/21/2004 10:16:36)
quote: if you're just sitting down though you're probably ok without ;) [sm=lol.gif] Peter, when I get caught up on my classes, I am going to take a look at what you have. I ran into a problem with an ap page. The content in the right ap column was overlapping the footer. I have rectified the situation (btw this was in the larger screen resolutions, original layout worked in smaller res, but not in the larger one) From how it is explained to me, this is a problem with ap pages. The footer doesn't seem to position correctly. And since with ap pages you are removing content from the flow of the document, and that part of the document where the ap column was sort of disappears according to the rest of the code, its diffiuclt to position the footer. ?making sense?

Donkey -> RE: absolute / relative Netscape vs. IE (9/21/2004 12:11:17)
quote: ?making sense? Yes it is now that my dim brain has worked out that ap means absolutely positioned. For a few minutes I thought it was something I'd never heard of and didn't want to show my ignorance (although that should probably be taken for granted). The main problem I've found with ap divs is that if you change the text size in the browser everything goes pear shaped, footer halfway up the page etc. I find it best to use relative postioning and floated elements, utilising the normal flow of the page. If you have a 2, 3 or 4 column layout for your content and you want a header at the top across all columns and a footer at the bottom across all columns; I find using the container div works best. With everything except the header and footer inside the container. Then the footer will allways be below the longest column.

bdaul -> RE: absolute / relative Netscape vs. IE (9/22/2004 3:30:58)
http://www.human-landscaping.com/EMM/aboutbook.html I tried to follow the directions that Donkey offered. Looking at the above with NS/Mozilla...the footer bar shows up...under IE...it isn't there. What did I do wrong? Thanks again, --bill

Donkey -> RE: absolute / relative Netscape vs. IE (9/22/2004 6:13:01)

Try changing this code

.container{ 
position:relative;
height:100%;
width:100%; }

div#footer  { font-style: ; 
font-weight: ; 
font-size: 12px; 
position: relative; 
top: 5200px; 
left: 80px; 
width: 800px; 
height: 400px;   
z-index: 2; 
}

To this

#container{ 
position:relative;
height:100%;
width:100%; }/*in your html you called this as an id but in your css it was a class*/

#footer  { 
font-size: 12px; 
position: relative; 
left: 80px; 
width: 800px; 
z-index: 2; 
float: left;
}

You might need to specify {top: 5px;} or so for IE only on the footer to put it more or less in the same position as viewed in Moz and Opera.
if you put it into the footer code as{t\op: 5px;} it will only be picked up by IE which ignores the slash, the other browsers see it and won't recognise it as top.

bdaul -> RE: absolute / relative Netscape vs. IE (9/22/2004 20:56:16)
http://www.human-landscaping.com/EMM/authors.html Donkey, I tried...honest...check the above link out. I added your suggested code. The footer banner is not after the main text...I am sorry if I am making stupid mistakes...I am learning. Thanks, --bill

c1sissy -> RE: absolute / relative Netscape vs. IE (9/22/2004 21:01:19)
quote: I am sorry if I am making stupid mistakes...I am learning. Bill, there are no stupid mistakes!!! We need to make mistakes to learn, if we didn't then we would not learn how to work things out. Maybe you should take a step back, relax and then come back to it again. When we are learning, sometimes we get brain overload as I call it, and when that happens, we can't see the mistakes or even something that should be there that we overlooked. ?making sense to you? Run your stuff through the validators, just to make sure you don't have a coding error that you are missing, sometimes its just that one little thing that throws it off. Keep at it, you will figure it out!

caz -> RE: absolute / relative Netscape vs. IE (9/23/2004 7:49:37)
quote: Run your stuff through the validators, just to make sure you don't have a coding error that you are missing, sometimes its just that one little thing that throws it off. Using the Firefox Web developer tool:- 1. .container{ position:relative; height:100%; width:100%; This is still a class in your CSS, not a div. 2 From the CSS validator - "Line: 9 Context : #footer Invalid number : toponly 0 can be a length. You must put an unit after your number : 500 " Relates to: #footer { font-size: 12px; position: relative; left: 80px; width: 800px; z-index: 2; float: left; top: 500; } 3 I don't see you closing the #container around the table in your source: </tr> </table> <DIV id=footer> <a class="foot" href="index.html">HOME</a> \|...etc.,etc .../PRIVACY</a></DIV> </body> </html> In addition your html doesn't validate either - it seems to be the script that is causing the problems there. Stll learning too, but I hope that this helps you. [:D] Cheers Carol

c1sissy -> RE: absolute / relative Netscape vs. IE (9/23/2004 7:57:01)
quote: Stll learning too The great thing about the css forum, is that we are all learning and willing to help others. You guys all do a great job of it [;)]

Page: [1]

0.0625