Hello, I'm having difficulty with a site we recently purchased. The problem is that it looks fantastic in IE but FireFox and other browsers are throwing the layout completely off. The url is: http://www.station.knurdz.com/index.php The files for the index.php and style.css are located at: http://www.knurdz.com/files.zip Check it in IE and you will see what I am trying to go for. I need someone who is experienced in CSS and DIV's who can make it look good in all browsers. PM me with a quote, or if you have any questions. I'm not asking for handouts here, and am willing to compensate for some assistance as I believe in the mantra that "time is money" and will do something in return. The problem seems to be in the CSS itself and coming from a severe lack of CSS experience this is something I just can't fix without help. I'd even be willing to try something if it looks exactly like the IE layout displays without CSS at all. Thanks for your time, and I greatly appreciate any help you can give us. I almost forgot to mention that I need to do another style for the page without the blocks after the login and search parts to fill with content in the container but keeping the footer / navmenu in tact.
Throwing the layout off completely? I'm comparing it in IE6 and FF2 and all I see is just very minor differences, such as some spacing issues in the login box, probably the inputs/labels are a few pixels off vertically, the size of the Game search input button on the far right, the games in "Today's Columns" are off by a few pixels horizontally in IE, the part that's really not looking right is the bottom though, as the content is being cut off and the links don't have a background. What IE/FF versions are you having problems with?
I'm using FireFox 2.0.0.4 In IE everything looks cake, but when I view it in FF the bottom footer bar floats over the bottom half of the video object and covers the "todays articles" top area... best way to see it is not maximizing the window and viewing the page in normal mode @ 1024x768 resolution... I know it's probably something simple... but CSS is not part of my background at all, and is very much over my head...
YOU ROCK MAN! Is there any way I can compensate you for your time? I'm definitely giving you some rep... those 2 lines... dude you have no idea how much time I wasted trying to fix this!
You should always check layouts in Firefox, Safari, or Opera before you check it out in IE, the reason being these are more standards compliant than IE. Firefox, Safari, Opera are like strict teachers that make you do more work in order to get a good grade (making you better by forcing you to code strictly), while IE is like that lazy lenient teacher that can let you get away with things. (bad comparison? ;p) Always make sure the page is valid so you know you didn't make any typos, or forgot a missing end tag, etc. Btw, your embed element needs a closing tag (this might have been why it screwed up FF) and your have 3 end div tags that shouldn't be closing somewhere around <!-- Bottom NAV/BANNER --> Also, you're using XHTML so your <br>'s should be <br />
Fixed the embeds, and the br's but I'm paranoid on touching the div's could you point me to which ones should be removed?
<!-- Bottom NAV/BANNER --> </div></div></div> <div id='container1'> Those 3 div end tags above container1. Don't be paranoid about touching anything, get Firebug for Firefox, hit f12 to open it, and click on the HTML tab and hit EDIT, then you can screw around with the markup (you can also add styles with style attribute), and the changes will not be permanent, so you have nothing to worry about. If you used a validator, you would see "Error Line 194 column 11: end tag for element "div" which is not open."
You should try to get rid of all these errors: http://validator.w3.org/check?uri=http://www.station.knurdz.com/index.php It may look overwhelming, but a large portion of these are just end tags that need to be converted since you're using XHTML, so <meta> would be <meta />, <img> would be <img />, and <input> would be <input />. If you want to see less errors, you should use XHTML Transitional, since you are using some deprecated elements such as <center>, <font>, and deprecated attributes such as name="" (only for form fields!), width="", etc.
Ok I made the changes you reccomended and everything looks fantastic but the only issue now is that IE displays some pixels above the "todays columns" area which is causing a black line to show up in the top left corner of the area and nudging the design a few pixels over... EDIT: NVM... I changed the doctype to the one you reccomended and it's perfect. Thank you so very very much! I'll fix these errors now. If the opportunity arises in the future where I can help you... believe me, one good turn deserves another!
http://205.209.146.76/knurdz.html Yours should look like this in the end, around 9 errors left (how about you get the rest done ).. and I realize you may be using a CMS since I notice your attributes have single quotes.