Firefox and IE Differences

rmb · 09-26-2008, 08:37 AM

Hi.

I am not a professional graphic designer or web-programmer, whatever I know I have tought myself, and had some help from some friends.

I use macromedia fireworks to design the header, then import into Dreamweaver 8 for the content.

I am having some technical issues on my website (www.stereofx.net) which are caused by the attached style sheets which were created to make the site look right in firefox (or make it look identical in firefox as it is in Internet Explorer)

Have a look at the site in both Internet Explorer and Firefox and you will see it looks better in Internet Explorer (that is how I intended it to look)

The Problems I've been having for over 1 year:

1. In Firefox on all the pages except for the Home page - The Header has got spaces in between the links causing it to look out of proportion, which looks terrible. Now, the Home page is ok because there is a style sheet attached to it (which a friend created to prevent that from happening) but the other pages don't have that style sheet attached (reset.css) - How do I attach that style sheet to those pages? Or what else can I do to prevent that?

2. In Firefox, the site is alligned to the left, and I can't get it to be centre-alligned. I have tried to add this as a property in the same style sheet, but doesn't work. How can I centre - allign the site in firefox?

3. In Internet Explorer on the links in green - when the mouse rolls over they do not change colour, but in Firefox they do????

Oh, Please ignore the 'MP3 page' it looks terrible, I'm working on fixing that problem right now, if I don't come right I may have some more questions...

Thank you...

tfk11 · 09-26-2008, 09:28 AM

1: Rather than attaching new stylesheets just append any new styles to an existing stylesheet. Then you don't have to add an additional stylesheet link to every page. Copy the contents of the stylesheet with the fix into one that is already linked by all pages as the styles are needed on all pages.

2: Add the following style to line 144 of your page in dreamweaver (unfortunatly this is not in a stylesheet).

margin:0 auto;

Again this should be moved into a style sheet that is linked by all pages as it too is site wide. Some effort should be made to avoid using inline styles, especially for styles that apply to more than one page.

3: your markup surrounding the links looks ok... but the page is really quite a mess... who knows what could be wrong... adding the following style should force it to work.

p.style3 a:hover { color:#006600 }

and be sure to add it to a global style sheet rather than inline on a single page.

rmb · 09-26-2008, 12:19 PM

Thanks. I'm gonna try all that now, and I am going to try clean up the mess a bit too.
Much appreciated!

09-26-2008, 08:37 AM	#1 (permalink)
rmb Registered User Join Date: Jul 2008 Posts: 44 OS: Windows XP Pro Service Pack 2	Firefox and IE Differences Hi. I am not a professional graphic designer or web-programmer, whatever I know I have tought myself, and had some help from some friends. I use macromedia fireworks to design the header, then import into Dreamweaver 8 for the content. I am having some technical issues on my website (www.stereofx.net) which are caused by the attached style sheets which were created to make the site look right in firefox (or make it look identical in firefox as it is in Internet Explorer) Have a look at the site in both Internet Explorer and Firefox and you will see it looks better in Internet Explorer (that is how I intended it to look) The Problems I've been having for over 1 year: 1. In Firefox on all the pages except for the Home page - The Header has got spaces in between the links causing it to look out of proportion, which looks terrible. Now, the Home page is ok because there is a style sheet attached to it (which a friend created to prevent that from happening) but the other pages don't have that style sheet attached (reset.css) - How do I attach that style sheet to those pages? Or what else can I do to prevent that? 2. In Firefox, the site is alligned to the left, and I can't get it to be centre-alligned. I have tried to add this as a property in the same style sheet, but doesn't work. How can I centre - allign the site in firefox? 3. In Internet Explorer on the links in green - when the mouse rolls over they do not change colour, but in Firefox they do???? Oh, Please ignore the 'MP3 page' it looks terrible, I'm working on fixing that problem right now, if I don't come right I may have some more questions... Thank you...

09-26-2008, 09:28 AM	#2 (permalink)
tfk11 Registered User Join Date: Jun 2007 Location: BC, Canada Posts: 3 OS: Windows XP Pro SP2	Re: Firefox and IE Differences 1: Rather than attaching new stylesheets just append any new styles to an existing stylesheet. Then you don't have to add an additional stylesheet link to every page. Copy the contents of the stylesheet with the fix into one that is already linked by all pages as the styles are needed on all pages. 2: Add the following style to line 144 of your page in dreamweaver (unfortunatly this is not in a stylesheet). margin:0 auto; Again this should be moved into a style sheet that is linked by all pages as it too is site wide. Some effort should be made to avoid using inline styles, especially for styles that apply to more than one page. 3: your markup surrounding the links looks ok... but the page is really quite a mess... who knows what could be wrong... adding the following style should force it to work. p.style3 a:hover { color:#006600 } and be sure to add it to a global style sheet rather than inline on a single page.

09-26-2008, 12:19 PM	#3 (permalink)
rmb Registered User Join Date: Jul 2008 Posts: 44 OS: Windows XP Pro Service Pack 2	Re: Firefox and IE Differences Thanks. I'm gonna try all that now, and I am going to try clean up the mess a bit too. Much appreciated!