|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today! |
|
#1
October 10th, 2005, 01:07 AM
|
|||
|
|||
|
Page is Distorted in Firefox
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 fit 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. The page is optimized for 1024 x 768 resolution because the large majority of my visitors use that screen resolution.
URL You guys probably get this question a lot, but does anyone know how I can fix the code so that it will display properly in Firefox?
|
|
#2
October 10th, 2005, 10:34 AM
|
||||
|
||||
|
Css
Hi hikkifan, welcome to the forums. One of the great things about CSS is that it can be used to write fluid layout that looks good in all browsers on all OS-s at all resolutions. (Granted , it's not always easily achieved) You said the page was "optimized" for 1024 x 768, but you should realize that in it's current form it is "only" viewable at that resolution. The main reason is the ubiquitous use of position: absolute. This style positions elements in a "set" position relative to their containing elements and can be useful. IMHO you shouldn't over-use it. A popular way to design is to design for Firefox (it's standards compliant) first and then tweak for other browsers. Although valid pages aren't necessarily well designed, it's a good start. Try running your pages through http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/
|
|
#3
October 10th, 2005, 04:51 PM
|
|||
|
|||
|
Thanks for the suggestion. I'll definately do that. One question, though. Instead of using absolute positioning, what would be the better way of positioning the elements?
|
|
#4
October 12th, 2005, 02:59 AM
|
|||
|
|||
|
Page looks good in Firefox now :P Perhaps you already fixed it.
Hover effect in Firefox I see that you alt="YaddaYadda" for all images, if you like to display the same "hover" effect in Firefox add title="YaddaYadda". Prevent yourself from getting lost in the CSS To further set you on, in my personal opinion, the correct path I'd like to suggest making a separate CSS file. Sifting through your code briefly it looks like you add the CSS code directly into the page itself (or maybe you @import it, can't tell). That works fine now but might get you into trouble later on when your CSS code is 3 feet long :P. Linking to your css file, include between <head></head> Code:
<link href="cssfile.css" rel="stylesheet" type="text/css"> Saves you a lot of scrolling if your page grows :P Sorry to say, but I don't have any suggestions on the absolute positioning thing, I always use <table> or <div> for my layouts, I feel more in control that way as people open pages in all kinds of resolutions and window sizes and I like the page to look the same for 'most' instances.
|
|
#5
October 12th, 2005, 07:38 AM
|
||||
|
||||
|
Quote:
Quote:
|
|
#6
October 13th, 2005, 02:38 AM
|
|||
|
|||
|
Quote:
But I like searching for the missing </td> or "/" in notepad!! Especially when the code is tabbed like a foot and a half to the right :P Never looked into that option as I always make a index page with the layout and then include files with content where I want it to be...but I should perhaps not fight evolution and look into that, got any good links?
|
|
| Viewing: Dev Articles Community Forums > Web Design > Web Development > Page is Distorted in Firefox |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
