SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One of those IE <-> FF issues

    Hi All,

    I had a template made a while back and I'm using it in my site. However, when viewed with Firefox it looks 'correct' in that the buttons on the left hand side are all together. With IE they all spread apart with quite a large gap between buttons. I'm hoping someone can give me some clues as to how I can 'fix' it for IE users. Here's the URL:

    http://www.whirlwindtraffic.com/template/

    ..and here's the source code including CSS from that page:

    Code:
    <html>
    <head>
    <title>WhirlwindTraffic.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style  TYPE="text/css">
        <!--
        BODY {
    	Background-color: #656C84;
    	background-image:  url(images/back.gif);
    	background-repeat:repeat-x; 
    	background-position:top;
    }
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	}
    	
    /* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */
    	
    #menu6 {
    	width: 170px;
    	margin: 10px;
    	}
    	
    #menu6 li a {
      	height: 32px;
      	voice-family: "\"}\""; 
      	voice-family: inherit;
      	height: 24px;
    	text-decoration: none;
    	}
    	
    	
    #menu6 li a:link, #menu6 li a:visited {
    	color: #000000;
    	display: block;
    	background:  url(images/menu.gif);
    	padding: 8px 0 0 10px;
    	}
    	
    #menu6 li a:hover, #menu6 li a:active {
    	color: #FFFFFF;
    	background:  url(images/menu.gif) 0 -32px;
    	padding: 8px 0 0 10px;
    	}
        -->
        </style>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="783" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
      <tr> 
        <td valign="top"><img src="images/index_01.jpg" width="783" height="168"></td>
      </tr>
      <tr> 
        <td height="18" background="images/index_02.jpg">
          <table width="783" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td width="222" valign="top" align="left"> 
                <table width="81%" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr> 
                    <td> 
                      <div id="menu6"> 
                        <ul>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com" >Home</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/register.php" >Signup!</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/login.php">Members</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/faq.php">Faqs</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/contact.php">Contact 
                            Us</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/privacy.php">Privacy 
                            Policy</a></font></b></font></li>
                          <li><font size="2"><b><font face="Arial, Helvetica, sans-serif"><a href="http://www.whirlwindtraffic.com/terms.php">Terms 
                            of Service</a></font></b></font></li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
              <td width="21" valign="top">&nbsp;</td>
              <td width="519" valign="top"> 
                <div align="center"> 
                  <p><font face="Arial, Helvetica, sans-serif" color="#FF0000" size="5"><b>Why 
                    should you join WhirlwindTraffic out of 1000 or more exchanges?</b></font> 
                  </p>
                  <p align="left"><br>
                    <font face="Arial, Helvetica, sans-serif"><b>Whirlwind Traffic 
                    is a progressive and innovative traffic exchange.</b> What does 
                    that mean for you? It means that we are constantly tweaking and 
                    improving with one single aim in mind - to deliver more quality 
                    traffic to your web sites and help you to build your own network 
                    . </font></p>
                </div>
                <div align="center">
                  <p align="left"><font face="Arial, Helvetica, sans-serif">We do 
                    this through our unique programs such as the random referral mascot 
                    and by giving all of our members generous credit bonuses for visiting 
                    regularly. It is too easy to waste time on poorly supported programs. 
                    I guarantee your time won't be wasted at Whirlwind Traffic.<br>
                    <br>
                    <b>Here are just a few of our features:</b><br>
                    <br>
                    </font></p>
                  <p align="left"><font face="Arial, Helvetica, sans-serif"><img src="images/arrow.jpg" width="18" height="17"> 
                    Bonus credits for regular surfers. Our bonus credit system is 
                    second to none. We love to reward our loyal members!<br>
                    <br>
                    <img src="images/arrow.jpg" width="18" height="17"> Whirly, the 
                    random referral robot. We send our random referral mascot out 
                    to all of the best exchanges to gather referrals for you.<br>
                    <br>
                    <img src="images/arrow.jpg" width="18" height="17"> Best value 
                    pro accounts in the business! Our pro accounts start at just $3.95 
                    per month.<br>
                    <br>
                    <img src="images/arrow.jpg" width="18" height="17"> Huge bonuses 
                    for all upgraded members. Our 'bonus vault' is choc full of newly 
                    released software, reports and products.<br>
                    </font></p>
                </div>
                <p><font face="Arial, Helvetica, sans-serif"><b>The way it works is 
                  simple.</b> You view members web sites and earn credits which can 
                  be applied to your web site. For each credit you earn, your web 
                  site is displayed. For more advanced users, Whirlwind Traffic is 
                  great for lead capture and branding yourself and/or your products 
                  and services.</font></p>
                <p><font face="Arial, Helvetica, sans-serif"><b>Membership is totally 
                  free</b> and you have the option of upgrading to a pro account and 
                  receiving many extra benefits including bonus monthly credits for 
                  your web sites. All members are eligible for our regular surfer 
                  bonuses.</font></p>
                <p align="center"><font face="Arial, Helvetica, sans-serif"><br>
                  <a href="#"><img src="images/join.jpg" width="253" height="94" border="0"></a></font></p>
                <div align="center"></div>
              </td>
              <td width="23">&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr> 
        <td valign="top"><img src="images/index_04.jpg" width="783" height="120"></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>
    Thanks!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Oh my, you're using the font tag, that's all unnecessary and i'm not sure if it's contributing to the IE issues:
    Code:
    <ul id="menu6">
        <li><a href="http://www.whirlwindtraffic.com">Home</a></li>
        <li><a href="http://www.whirlwindtraffic.com/register.php">Signup!</a></li>
        <li><a href="http://www.whirlwindtraffic.com/login.php">Members</a></li>
        <li><a href="http://www.whirlwindtraffic.com/faq.php">Faqs</a></li>
        <li><a href="http://www.whirlwindtraffic.com/contact.php">Contact Us</a></li>
        <li><a href="http://www.whirlwindtraffic.com/privacy.php">Privacy Policy</a></li>
        <li><a href="http://www.whirlwindtraffic.com/terms.php">Terms of Service</a></li>
    </ul>
    You can rid of the surrounding div and just style your menu items using the selectors:

    #menu6 - for the ul tag
    #menu6 li - for the li tags
    #menu6 li a - for the a tags

    I would give:
    the li tags width: 100&#37;
    the a tags width: 100%; and display: block

    I think it should fix the issues.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    Unfortunately this code isn't any good (edit: not yours, Mark - honest!), since it has several problems (lack of a complete and valid DOCTYPE, deprecated - as in obsolete - code such as FONT tags, and CSS hacks that can cause severe accessibility issues for screen readers.

    Hang on, and I'll see wht I can do with a re-write, ok? (Hmm, looks like Mark beat me to it. Oh well.)

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Ballarat, Vic. Australia
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Oh my, you're using the font tag, that's all unnecessary and i'm not sure if it's contributing to the IE issues:
    Code:
    <ul id="menu6">
        <li><a href="http://www.whirlwindtraffic.com">Home</a></li>
        <li><a href="http://www.whirlwindtraffic.com/register.php">Signup!</a></li>
        <li><a href="http://www.whirlwindtraffic.com/login.php">Members</a></li>
        <li><a href="http://www.whirlwindtraffic.com/faq.php">Faqs</a></li>
        <li><a href="http://www.whirlwindtraffic.com/contact.php">Contact Us</a></li>
        <li><a href="http://www.whirlwindtraffic.com/privacy.php">Privacy Policy</a></li>
        <li><a href="http://www.whirlwindtraffic.com/terms.php">Terms of Service</a></li>
    </ul>
    You can rid of the surrounding div and just style your menu items using the selectors:

    #menu6 - for the ul tag
    #menu6 li - for the li tags
    #menu6 li a - for the a tags

    I would give:
    the li tags width: 100%
    the a tags width: 100%; and display: block

    I think it should fix the issues.
    Thanks Mark. I whipped up a quick test and it fixes the issue I was having with IE. I'll set some font attributes in the CSS and rewrite it without the div.

    I'm an old PHP hack who is just coming to terms with CSS . I've really only been half-hearted with it so far but I can see that I really need to start embracing it (probably should have 4 or 5 years ago). I didn't write this CSS code but to be honest, if I had written it, it probably would have been worse

    I guess I'll be hanging around the CSS forum for a while.

    Dan: Yes, I hadn't even noticed the missing DOCTYPE ... though I'm pretty sure that the site itself has correct attributes. I run the odd page through the W3C validator from time to time. Mind you, when I 'fix' the errors it reports it's more a hack than a fix half the time ... particularly if it reports CSS errors as I really don't know enough about CSS yet to determine whether I'm fixing it or just kludging .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •