How do I fix span/div issues in Firefox (displays as wanted in IE) and adjust misalignment in Chrome?

Question

My personal webpages (at http://ralphemlynmorgan.com ) display as planned in IE, but the button labels are slightly offset in Chrome, and the page layout is totally wrong when viewed using Firefox. Any advice for simple changes to fix this (or how to achieve the designed element positioning in a way that works for all browsers) would be appreciated. ;) From html validator error messages I think it has something to do with 'p' not allowed inside span?

Answer 1

Misalignment in Firefox and Chrome is due to the absolute positioning of all image and button elements in a page. <span> is a inline element. In general we don't include any other elements inside <span> element.

Replace all <span> elements which has <p> element inside with <div> element and try removing absolute positioning.

Answer 2

Firstly, the <p> elements in the nav shouldn't have large margins. Change this through margin: 0 . And yes, <p> inside <span> is bad. Try to use <div> instead.

And change #centroid to position: absolute to fix the problems in Firefox.

Answer 3

为了更好地导航，您可以使用ul li，是的“将#centroid更改为位置：绝对可解决Firefox中的问题”。