1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

firefox messes up all my sites, i borderline hate that broswer

Discussion in 'CSS' started by pixelcommander, Aug 6, 2007.

  1. #1
    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&amp;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>
    SEMrush
    <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;
    }
     
    pixelcommander, Aug 6, 2007 IP
    SEMrush
  2. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    veckd, Aug 6, 2007 IP
  3. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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...
     
    pixelcommander, Aug 6, 2007 IP
  4. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ill try the examples though, thanks
     
    pixelcommander, Aug 6, 2007 IP
  5. caj

    caj Active Member

    Messages:
    748
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    75
    #5
    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.
     
    caj, Aug 6, 2007 IP
  6. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    i use Dreamweaver for the majority of the work, i edit the code when needed in a text editor but that's pretty rare.
     
    pixelcommander, Aug 6, 2007 IP
  7. Courtenay

    Courtenay Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Courtenay, Aug 6, 2007 IP
  8. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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
     
    pixelcommander, Aug 6, 2007 IP
  9. Courtenay

    Courtenay Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #9
    It sucks in Opera too so deal with it and move on.
     
    Courtenay, Aug 6, 2007 IP
  10. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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
     
    pixelcommander, Aug 6, 2007 IP
  11. Courtenay

    Courtenay Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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 :rolleyes:
     
    Courtenay, Aug 6, 2007 IP
  12. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    ahhh yes, about that comment... it's fixed. time to collect my $2,500 and move on... you are right.
     
    pixelcommander, Aug 6, 2007 IP
  13. Courtenay

    Courtenay Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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!
     
    Courtenay, Aug 6, 2007 IP
  14. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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?
     
    pixelcommander, Aug 6, 2007 IP
  15. Courtenay

    Courtenay Peon

    Messages:
    63
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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!
     
    Courtenay, Aug 6, 2007 IP
    pixelcommander likes this.
  16. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    :) ok, i will
     
    pixelcommander, Aug 6, 2007 IP
  17. MrOrange

    MrOrange Peon

    Messages:
    117
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #17
    It's missing a page title too. :)
     
    MrOrange, Aug 6, 2007 IP
  18. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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
     
    pixelcommander, Aug 6, 2007 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,148
    Likes Received:
    1,704
    Best Answers:
    239
    Trophy Points:
    515
    #19
    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&amp;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.
     
    deathshadow, Aug 7, 2007 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,148
    Likes Received:
    1,704
    Best Answers:
    239
    Trophy Points:
    515
    #20
    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&amp;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)
     
    deathshadow, Aug 7, 2007 IP