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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE Centre Bug 1

Status
Not open for further replies.
TobyA

TobyA

MIS
Nov 7, 2002
164
GB
Dear Gurus,

I have been developing a site in Firefox, and all was looking promising, until I check it in IE6...


I've now looked at it in IE7 and it looks better, apart from a little section missing from the footer, and the page borders not quite reaching the bottom.

Is this the dreaded center bug in IE? How do centre the container div within the site wrapper div?

Sorry if this is an obvious question, I only do web design now and again....

Cheers,
Toby
 
Sort by date Sort by votes
id should be unique within the page, but you have a div and p with the same id. Spesifically:
Code: 
<div id="footer">
<p id="footer">Terms and conditions</p>
</div>

Which puts both browsers into quirks mode. Then, the style rules for the double footer:
Code: 
#footer {
		color: #FFFFFF;
		text-align: left;
		height: 30px;
		background: url('../images/footer.jpg') no-repeat;
}

p#footer {
		margin: 10px 0px 0px 10px;
}

So, the div gets:
Code: 
height: 30px;

Then the paragraph in the div gets
Code: 
height: 30px;
margin-top: 10px;

Which makes the total height of the paragraph 40px.
40>30, so overflow occurs. You don't give any rules about how it should handle overflow and each browser is in quirks mode, so it isn't a suprise that they don't look alike.

[plug=shameless]
[/plug]
 
Upvote 0 Downvote
Thanks a lot for the reply jstreich

I have simplified the footer now:-

Code: 
<div id="footer">
<p>Terms and conditions</p>
</div>

And the CSS:-

Code: 
#footer {
color: #FFFFFF;
text-align: left;
height: 30px;
background: url('../images/footer.jpg') no-padding: 0px 5px 0px 30px;
overflow:hidden;
}

However, I still have the same problem in IE6 with the container div not being centralised inside the sitewrapper div...

Thanks again,
Toby
 
Upvote 0 Downvote
I don't understand. I would expect your page to look the same in IE6 and FF and looking at it, it does. At least on my machine.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
this has the same sort of problems as I was having in my IE7 thread, Im hoping that vragabonds thoughts on the doctype sorts it.
 
Upvote 0 Downvote
Thx peasepud.

I have the following doctype...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">

I am not certain if this is correct, or appropriate for the content of my site. If anyone thinks this could be causing a problem please let me know.
 
Upvote 0 Downvote
If you add "overflow:hidden" to "#container", it all looks good again in IE6. This tells me that somewhere you've got content (or a combination of content + padding/margin) that is going over the 780px width - although at first glance I cannot find it.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for that Billy Ray, I'll try it later on.

Sometimes I think you're the only one who can teach me.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
88
pendle666
pendle666
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
128
ChrisHirst
ChrisHirst
GRIFFIJ
  • Locked
  • Question
Centre the contents of a DIV
Replies
3
Views
57
vacunita
vacunita
GRIFFIJ
  • Locked
  • Question
CSS Bug 1
2
Replies
23
Views
182
vacunita
vacunita
1DMF
  • Locked
  • Question
Stop IE showing tooltip for required form fields on hover 1
Replies
0
Views
46
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top