PDA

Click to See Complete Forum and Search --> : Page Doesn't Display Correctly in Firefox

hikkifan
10-10-2005, 09:21 AM
I'm redesigning my website and this is my first attempt at using CSS. I've always used the old table layout format, but CSS fits best for the look I was going for better. I'm still getting the hang of it. Anyway, I've positioned all of my elements and the page looks perfect in Internet Explorer (1024 x 768 resolution), but is completely distorted in Firefox. All the pics lay on top of each other in Firefox. Here's a link to the page.

http://www.nicole-scherzinger.net/layout/layout.html

Does anyone know how I can fix the code so that it will display properly in Firefox? Am I missing something in the code or did I use something incorrectly? :confused:
The Little Guy
10-10-2005, 09:34 AM
first off in you css, you have 2 <style> and </style> tags remove the middle set.

Combine the two body properties, and try that, see if that helps
The Little Guy
10-10-2005, 09:37 AM
you should also remove the <span style="......">

put that style also in the css, and not the HTML
The Little Guy
10-10-2005, 09:46 AM
add

alt=" " to your "image" and "area shape" tags

for the h1 do something like this

#h1

there are many errors on the page, do those, then go here
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nicole-scherzinger.net%2Flayout%2Flayout.html
drhowarddrfine
10-10-2005, 10:01 AM
If it works in IE but not Firefox then something is wrong. Always get it working in FF first. Then hack it for IEs quirks and bugs. And always validate as Little Guy said.
hikkifan
10-11-2005, 12:22 AM
I rewrote the code using Firefox as the standard as was suggested. The page now works properly in both FF and IE. Now, I'm having another problem. The page works fine at a screen resolution of 1024 x 768, but when the browser window in minimized or the screen resolution is smaller, all the elements move and overlap making the site unusable to those with lower than 1024 x 768 resolution. Although, most of my site's visitors use that resolution, I'd still like it to be accessible by those who don't. Is there an easy way to fix this?

The link again is: http://www.nicole-scherzinger.net/layout/layout.html
David Harrison
10-11-2005, 12:31 AM
If you fancy having another bash at your layout, perhaps this will help.
meerkat95
10-11-2005, 06:18 AM
Hi,
I'm a novice website builder who's recently discovered Firefox. I have the same old problem of having created a site using IE which now distorts in FF. Please can you tell me how to build for FF? Which programme do I need to use? The site I'm working on is www.newstagers.co.uk - at the moment only the index page. I know the rest all needs completely updating. I've used a table to create my layout which in IE is fine, but FF puts borders on it and resizes it slightly. Please can you offer any advice for correcting this? Thanks a lot.
drhowarddrfine
10-11-2005, 11:08 AM
meerkat,
You should start your own thread. Validate your code. You have 216 html errors though most are easy to fix. You don't have a doctype. You don't even have the <html> tag. Your border sizes need units on them.

You code for FF by using the W3C standards. You should never code to make it work in IE first because IE is the most screwed up browser around. If it works in FF then you know you've got your code right. Then you adjust it for IEs quirks and bugs.
hikkifan
10-11-2005, 04:39 PM
I actually figured it out. I was aligning certain elements from the right instead of the left. When I fixed that the elements stayed in position when the screen was minimized or the resolution was smaller. It doesn't look perfect in 800x600, but it definately usable.

Thanks for the advice of coding for Fire Fox instead of IE. Like you said was I started using FF as the model, I was able to adjust the code for IE. That was probably the best advised I've received for this issue.