Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE FF absolute footer div different

Status
Not open for further replies.
wendyp

wendyp

IS-IT--Management
Mar 4, 2003
51
US
Hi all - still working on my first CSS site. The posts here have been a big help, but I can't figure this out:

Style sheet:
Code: 
#footer {
        font-family: Arial; 
	color: #171718;
	font-size: 11px;
	font-weight:normal;
		}
#homepage {
    /* center main_div in firefox, nn, opera : */
    margin          : 0 auto 0 auto;
    width           : 815px;
    height	    : 820px;
    border          : none;
    position        : relative;
}
#footermenu {
    border          : medium solid #66FF33;
    position        : absolute;
    vertical-align  : top;
    top             : 690px;
    left            : 40px;
    width           : 390px;
    height          : 14px;
}

The border is around the footer for debugging purposes.
Notice how the footer of:


looks in FF and in IE - it looks as if the lower left hand corner of the box is at the same position in FF as the upper left hand corner of the box in IE.

If absolute doesn't mean absolute, what does?

Here's the relevant portion of the page in case you don't want to view source.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<div id="homepage" align="left">

.....


<div id="footermenu" align="center"><p id="footer">
<a href="<? echo $home; ?>">Home</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $contact; ?>">Contact</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $aboutus; ?>">About Us</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $links; ?>">Links</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $privacy; ?>">Privacy</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $administration; ?>">Admin</a></p>
</div>
</div>
</body>
</html>

Thanks for any insight you may be able to provide. This one seems like it should be simple, but it's driving me crazy.

/Wendy
 
Sort by date Sort by votes
Without even looking at your site, have you specifically set the padding and margins or are you going with the browser defaults (which ARE different)?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Thanks for the idea. I'll check that. I do not have them set explicitly.

I'll let you know if that works.

/Wendy
 
Upvote 0 Downvote
Also, lack of proper doctype (list is here) makes IE render the page in quirks mode which has a different box model than all the other browers.
 
Upvote 0 Downvote
OK, I've explicitly set the padding and margins, using the following:

Code: 
* { padding:0 0 0 0; margin:0 0 0 0; }
body,td,tr,select, input {
		font-family:Arial; 
		font-size: 11px; 
		color: #392643;
		line-height:14px;
		padding:0 0 0 0;
		margin:0 0 0 0;
}

Then I changed the DOCTYPE to:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

It is the first line in my file.

I've also noticed that the header box is doing the same thing.

Here is the css for the header menu:
Code: 
#topmenu {
	border: medium solid #66FF33;
    position: absolute;
	vertical-align: top;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
    top: 35px;
    left: 370px;
    width: 325px;
	height: 20px;
}

And from the page:
Code: 
<div id="topmenu" align="left"><p id="top">
<a href="<? echo $home; ?>"><b>Home</b></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $contact; ?>"><b>Contact</b></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $aboutus; ?>"><b>About Us</b></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="<? echo $location; ?>"><b>Location Info</b></a></p>
</div>

If anyone can point me somewhere for more information or has any ideas, I'd appreciate it.

Thanks,
/Wendy
 
Upvote 0 Downvote
You have a paragraph within your menus. Try setting margins (and padding) on those paragraphs to 0. It seems like you have a problem of collapsing margins.
 
Upvote 0 Downvote
Thanks for the idea. I changed the CSS to have margin 0 0 0 0; and padding 0 0 0 0; for the top and footer sections.

Then I went so far as to take out all the text from the header and footer, except:
Code: 
<div id="topmenu" align="left">top menu
</div>

<div id="footermenu" align="center">footer
</div>

So that should eliminate any conflict problems, but I'm still having the same issue.

This version is located @:
Any other ideas?

If not, I think my next step will be to strip all the text and graphics out and see if I can just get the boxes where I want them.

/Wendy
PS: I working on another new website (not having to retro-fit anything) and am making sure that text does not have to be positioned just-so over any graphics!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
623
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
171
pendle666
pendle666
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
134
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
122
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top