PDA

View Full Version : IE6 vs. Firefox - image position error



lk19
Jan 21st, 2010, 07:47 PM
I'm having a really hard time figuring this one out...my logo is showing up where it should in IE6 but it is wrong in Firefox. Please see link below and let me know if I am missing something obvious.

http://cms.burlington.ca/Page5857.aspx

I'm fairly new to CSS and I'm completely stumped. Thanks in advance for any help you can provide.

SB65
Jan 21st, 2010, 08:37 PM
The logo is where it should be according to your code in Firefox, and it's wrong in IE6. I realise it isn't where you want it to be - but IE6 is notorious for it's poor implementation of css, and it has a number of bugs.

You are much better designing your pages and testing in Firefox, then when they're right in FF, have a look in IE7 and IE6 and apply any tweaks as necessary. If you build and test a website only in IE6, chances are it will be wrong in just about any other browser.

Here your fix is quite easy, however. Try adding clear:left to your css for #template-header.

lk19
Jan 21st, 2010, 09:40 PM
Thank you so much - that fixed the issue! You're a lifesaver.

I prefer Firefox unfortunately my workplace is an Explorer 6 environment (cringe) so I find myself making sure it looks okay in Explorer first.

I did notice one glitch in the Firefox version...in the white section that starts "Join us..." there is a white gap in the green section on the left-hand side...

and my template_menu is positioned where I want it in IE but too low in Firefox...any suggestions?

I have so much to learn...

Thanks again.

Excavator
Jan 21st, 2010, 09:50 PM
Hello lk19,
Some bottom padding here might do the trick -

#template_join_section {
width: 819px;
background: url(../images/templatemo_project_section_mid.jpg) repeat-y;
margin: 0;
padding: 20px 0 10px 48px;
text-align:center;
}

lk19
Jan 21st, 2010, 09:53 PM
Once again, another helpful post! Thank you so much...

In the meantime, I also fixed my menu issue.

Thanks again everyone!