One site I am working on... www.forillarecords.com is not looking the way I want it to in FireFox. If you even just go to the site in FF and refresh the page the layout will change 1 out of 5 times. I don't get it. It looks PERFECT in Maxthon (or IE for that matter). What can I do to fix this? Problems: 1. The content isn't centered to the middle of the layout, it's a bit to the left in FF. In IE or Maxthon it's perfect. 2. The input box for the email list isn't positioned correctly, but again, in Maxthon or IE it's fine. I'm new here and have tons of info to share, I just have problems getting sites to look good in FF. Please help. Here is the code of my page... </head> <body> <div align="center"> <?php include("nav.html"); ?> <div id="main_body"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" ><div><img src="/images/topers.jpg" alt="roster" height="42" /></div> <div id="roster_back"> <table border="0" cellpadding="3" cellspacing="0"> <tr> <?php do { // horizontal looper version 3 ?> <td align="left" valign="top"><img style="padding-right:5px" src="images/artist_images/<?php echo $row_Lineup['Ico_Sm']; ?>" alt="view_artist.php?Artist_Name=<?php echo $row_Lineup['Artist_Name']; ?>" width="23" height="28" align="left" /><span class="small-text"><a id="link2" href="view_artist.php?Artist_Name=<?php echo $row_Lineup['Artist_Name']; ?>"><?php echo $row_Lineup['Artist_Name']; ?></a></span></td> <?php $row_Lineup = mysql_fetch_assoc($Lineup); if (!isset($nested_Lineup)) { $nested_Lineup= 1; } if (isset($row_Lineup) && is_array($row_Lineup) && $nested_Lineup++ % 2==0) { echo "</tr><tr>"; } } while ($row_Lineup); //end horizontal looper version 3 ?> </tr> </table> <div style="padding-top:5px"><img src="images/LINE2.jpg" height="11" /><br /> <img src="images/news.jpg" /></div> <?php do { ?> <div><strong><?php echo $row_news['Header']; ?></strong></div> <div style="padding-bottom:10px"><?php echo $row_news['Body_Short']; ?></div> <?php } while ($row_news = mysql_fetch_assoc($news)); ?></div> <div><img src="/images/btm2.gif" width="233" height="27" /></div> <div id="mail_list"> <div class="signup" align="left"> <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>"> <table border="0" cellpadding="0" cellspacing="000"> <tr> <td><input name="email" type="text" class="sign_up_box" id="email" value="<?php echo KT_escapeAttribute($row_rsMail_List['email']); ?>" size="32" /></td> </tr> <tr> <td><input name="KT_Insert1" type="submit" class="email_button" id="KT_Insert1" value="sign up" /> </td> </tr> </table> </form> </div> </div></td> <td align="center" valign="top" ><img src="/images/featured-parkay.jpg" alt="Lady Tay Chicago's Premiere R&B Artist" width="363" height="266" /><span style="padding-left:5px"><a href="http://www.myspace.com/forillarecords" target="_blank"><br /> <br /> <img src="/images//myspace.jpg" alt="www.myspace.com/forillarecords" width="343" height="54" border="0" /></a><br /> <img src="/images//more.jpg" alt="more coming soon" width="289" height="98" /></span></td> </tr> </table> </div> <div class="style1"> <h1><a href="http://www.pixelcommander.com"><img src="images/pixelcommander_stamp.png" alt="pixel commander design" height="36" border="0" /></a><br /> <a href="http://www.pixelcommander.com">website design : pixelcommander.com</a></h1> </div></div> </body> </html> Here is a part of my CSS file... #main_body { width: 610px; margin-left: 55px; font-family: Trebuchet MS; float: none; clear: both; } body { background-attachment: scroll; background-image: url(../images/pageback.jpg); background-repeat: repeat-y; background-position: center 170px; margin: 0px; padding: 0px; background-color: #000000; text-align: center; } #mail_list { background-image: url(../images/MAILLIST_Back.jpg); height: 133px; width: 226px; margin-top: 20px; padding-top: 0px; } .signup { padding-top: 50px; padding-left: 17px; margin: 0px; }
the problem is not the browser, it is your coding. Im sorry to say. Firefox abides by standards better than most other browsers. You are currently coding in html, you need to start coding in xhtml and css. that means don't use attributes in tags style them via css. so this: <table width="300px"> Code (markup): becomes <table style="width:300px;"> Code (markup): You do this to some extent, but not all of it. A good replacement for valign is <td style="positon:relative"><div style="position:absolute;top:0;">content here</div></td> Code (markup): instead of align=center use: <table style="margin:0 auto;"> Code (markup): Try all of that, then let me know...sorry for the bad news though.
i've already gotten rid of all the widths and use them in CSS and it's still the same. for some reason the margin isn't taking...
I use to face similar problem. Try doing what Veckd suggested. What's the web editor you're using? Trying avoid using frontpage as they create lot of unnecessary code. Firefox normally work well with CSS unlike IE5, IE6.
i use Dreamweaver for the majority of the work, i edit the code when needed in a text editor but that's pretty rare.
First of all. Your code is terrible You should be using Divs and CSS. However, put your main content in a div if it is not already, in your CSS set margin-left: auto; and margin-right: auto; for that div. You should use code tags for posting code on DP as well.
most of my clients want tables and i've never spent too much time in CSS. i'm more of a graphic designer that knows dreamweaver then a webdesigner... sux i know but this stuff has been working until the birth of firefox
i fixed it the ghetto way... i'm going to have to spend more time learning CSS better but i'm all about getting paid on this site, not standards (unfortunately) i used a table *GASP* then put some padding in it. it's good enough for me... at this hour of the night... on this particular site. i still have a problem with the email sign up box though
I have it working without using padding or anything like that But whatever floats your boat mate, good to see you're doing your part to make the internet a better place
LOL @ the mere prospect of someone paying you $2,500 for that. Don't you feel the slightest bit ashamed? Your clients might ask you to use tables and you should at least inform them that what they are requesting will not work for half of todays market. Good luck with your 'web design business' - god knows how far you'll get being stuck in the 90's!
lets see you come up with graphics like that little girl. thanks for trying to help me eveyone, like i said i need to study up on CSS a bit more but i have too much actual work to do to take any breaks at the moment. as for courtenay, have a GREAT night, i'll think about you when i wake up and drive to the studio to collect my cash. how long have you been an elitist for seeing as how you're only 18?
It's not called being an elitist, and even if it was - take a look in the mirror Mr. "I'm-going-to-get-$2500-by-producing-a-poor-product-for-someone-who-knows-no-better". It's day here, but have a good night!
title and keywords and metas are generated by the user. the site has a custom CMS that i built. thanks for the heads up on that though, i better get something in there before i give the CMS presentation tomorrow. untitled does look kind of silly. i always seem to do that stuff last for some reason
good lord - I usually expect DW code to look like garbage, but this is a train wreck above and beyond. Inlined properties, tables for no fathomable reason (here's a hint - table for a single column of TD's is a total /FAIL/ - even back when IE was it!), presentational classnames, H1 at the bottom of the page, double line-breaks for spacing between non-text elements, extra spans around anchors that are likely not needed (see small-text) inside boxes that have perfectly good ID's (you could probably just assign the class there), inlining php so the engine has to jump in/out of parse mode and has logic flow nigh impossible to make head nor tail of at a glance... (though that could be my total dislike for do-while and bad/non-existant indenting speaking) As I've said a good deal lately, the codebase for this has more of 1997 than 2007 about it... and my advice is chuck it and start over using SEMANTIC markup just for the content, then use CSS to actually add your presentation. and I'm NOT saying don't use tables like a lot of your more rabid zealots, I'm saying use them PROPERLY and in a non-wasteful fashion. Ok, was just doing a code audit - and I can see at least part of the problem - you are likely coding in quirksmode, since you are applying <div align="center"> - being IE is the only browser that pays any attention to that (incorrectly I might add) that's at least the first of your problems. This is probably closer to what your html/php should look like - though I'm certain there's a lot more reduction that should be done given the sheer volume of what appear to be presentational images inlined in the code (with no graceful degredation apart from alt tags either) <?php echo ' </head><body> <div id="wrapper"> '; include("nav.html"); echo ' <div id="main_body"> <table> <tr> <td> <img src="/images/topers.jpg" alt="roster" height="42" /> <div id="roster_back"> <table id="roster_back"> <tr> '; while ($row_Lineup) { // horizontal looper version 3 echo ' <td align="left" valign="top"> <img style="padding-right:5px" src="images/artist_images/', $row_Lineup['Ico_Sm'],'" alt="view_artist.php?Artist_Name=',$row_Lineup['Artist_Name'],'" width="23" height="28" align="left" /> <a id="link2" class="small-text" href="view_artist.php?Artist_Name=',$row_Lineup['Artist_Name'],'"> ',$row_Lineup['Artist_Name'],' </a> </td> '; $row_Lineup=mysql_fetch_assoc($Lineup); if (!isset($nested_Lineup)) $nested_Lineup= 1; if (isset($row_Lineup) && is_array($row_Lineup) && $nested_Lineup++ % 2==0) { echo "</tr><tr>"; } } echo ' </tr> </table> <div class="line2"> <img src="images/LINE2.jpg" height="11" /> <img src="images/news.jpg" /> </div> '; while ($row_news = mysql_fetch_assoc($news)) { echo ' <h2>',$row_news['Header'],'</h2> <div class="news_content">',$row_news['Body_Short'],'</div> '; } echo ' </div> <img src="/images/btm2.gif" width="233" height="27" /> <div id="mail_list"> <form method="post" id="form1" action="<?php echo KT_escapeAttribute(KT_getFullUri()); ?>"> <div class="signup"> <input name="email" type="text" value="',KT_escapeAttribute($row_rsMail_List['email']);,'" id="email" size="32" /> <input name="KT_Insert1" type="submit" id="KT_Insert1" value="sign up" /> </div> </form> </div> </td> <td id="sidebar"> <img src="/images/featured-parkay.jpg" alt="Lady Tay Chicago's Premiere R&B Artist" width="363" height="266" /> <a href="http://www.myspace.com/forillarecords" target="_blank"> <img src="/images//myspace.jpg" alt="www.myspace.com/forillarecords" width="343" height="54" /> </a> <img src="/images//more.jpg" alt="more coming soon" width="289" height="98" /> </td> </tr> </table> </div> <div id="footer"> <a href="http://www.pixelcommander.com"> <img src="images/pixelcommander_stamp.png" alt="pixel commander design" height="36" border="0" /> </a> <a href="http://www.pixelcommander.com">website design : pixelcommander.com</a> </div> </div> </body></html> '; ?> Code (markup): It is quite amusing to see a 'web developer' cursing browsers OTHER than IE, mind you I think FF is a pile of crap too, but not for the reasons you do... Given that 99%+ of the web is the other way around cursing M$ for not adhering to web standards... I bet some folks here thought that was a joke post... but then nobody is going to take you seriously the moment you say Maxthon anyways given it's IE with crap bolted onto it - meaning you don't get ANY of the security or protection from malware you do by not using IE. For too long though IE has allowed coders to deploy buggy, broken and just plain bloated code without so much as tossing a single error when it should be. Unclosed tags, improper nesting of block-level inside inline-level, allowing positioning code that makes no sense to function (why on earth would text-align effect a DIV or TABLE? Are those inline elements? No they are not!) If you code clean semantic HTML, separate your presentation (css) from your content (html), separate your presentational images (called from CSS) from your content images (called via the IMG tag), use a valid doctype, you can quickly and easily make pages that work cross-browser with little or no effort - and toss that overpriced steaming pile of crap known as Dreamweaver in the trash alongside frontpage, hotmetal, web design pro, and all those other STUPID POINTLESS WASTEFUL WYSIWYG's. In fact, if you are a graphics person, you'll be AMAZED at how simple and quick you'll be able to toss together effects in minutes that used to take you hours - especially given the code reductions. If I have the time later tonight I'll toss together an example template based on that page of yours to show what I mean... I'll full document as I go so you can see how this stuff should be done 'the modern way' Because the day you think there's nothing new to learn, is the day the world leaves you behind.... $2500 for that - damn, I could see maybe a grand, 1500 for the graphics, but the code anyone who knows modern HTML is gonna be demanding a refund.
Had a few spare moments, I'm now 99% certain this should be all the HTML that is needed for that main page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Forilla Artists - Home Page</title> <link href="screen.css" rel="stylesheet" type="text/css" /> </head><body> <div id="container"> <h1>Forilla Records<span></span></h1> <ul id="menu"> <li><a href="#">Home<span></span></li> <li><a href="#">Artists<span></span></li> <li><a href="#">The Lab<span></span></li> <li><a href="#">MP3 Downloads<span></span></li> <li><a href="#">Contact<span></span></li> </ul> <table id="middle"> <tr> <td id="sidebar"> <div class="artists_box"> <h2 class="artists_title">Forilla Artists - Home Page<span></span></h2> <ul> <li><a href="#" style="background-image:url(images/artists/chico.png);"> Chico </a></li> <li><a href="#" style="background-image:url(images/artists/elo.png);"> Elo </a></li> <li><a href="#" style="background-image:url(images/artists/gritti_nitti.png);"> Gritti Nitti </a></li> <li><a href="#" style="background-image:url(images/artists/karmah.png);"> Karmah </a></li> <li><a href="#" style="background-image:url(images/artists/chico.png);"> Lady Tay </a></li> </ul> <h2 class="news_title">News and Updates<span></span></h2> <p> Forilla Records is being upgraded, check back for more updates and free downloads. </p> </div> <form method="post" id="form1" action="<!--',KT_escapeAttribute(KT_getFullUri());,'-->"> <div class="signup"> <h2>Sign up for the Mailing List<span></span></h2> <input name="email" type="text" value="<!--',KT_escapeAttribute($row_rsMail_List['email']);,'-->" id="email" size="32" /> <input name="KT_Insert1" type="submit" id="KT_Insert1" value="sign up" /> </div> </form> </td> <td id="content"> <h2 class="featured_artist"> Featured Artist - Parkay - New Album Out Soon <img src="/images/featured-parkay.jpg" alt="Lady Tay Chicago's Premiere R&B Artist" width="363" height="266" /> </h2> <a href="http://www.myspace.com/forillarecords"> <img src="/images/myspace.jpg" alt="www.myspace.com/forillarecords" width="343" height="54" class="myspace_page" /> </a> <img src="/images/more.jpg" alt="more coming soon" width="289" height="98" class="more" /> </td> </tr> </table> <div id="footer"> <a href="http://www.pixelcommander.com"> <img src="images/pixelcommander_stamp.png" alt="pixel commander design" height="36" border="0" /> website design : pixelcommander.com </a> </div> </div> </body></html> Code (markup): Mind you, that's without the php automation. (I commented out a few, deleted a few others). Totals 2.5k where your original was 9+. I was going to delete the table for the columns as it really isn't 100% necessary, but it occured to me it would make placing the footer at the bottom easier Footers always look silly to me in the middle of my display. I was going to leave the artists images inlined, then I was going to make them purely css, then it occurred to me it's probably simpler to inline them as backgrounds... Why do that? Makes positioning them in relation to the text less of a headache (one less set of floats or goofy inline positioning, you'll see when I get to the CSS) I'll churn out the CSS for that after lunch and the afternoon 'rush'. (in other words when I have another 20 minutes to sit around with my thumb up my backside like I just did)