Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Browser Problems

    My site located http://mediocre.atspace.com/new/ here displays just how I want it in Firefox, but in IE the width of the menu cell becomes very large for some reason.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <link rel="stylesheet" type="text/css" href="site.css"/>
    <title>Mediocre Mediocrity</title>
    </head>
    <body>
    <table>
    <tr>
    <td colspan="2">
    <img class="header" src="header.gif" alt="Header Image"/>
    </td>
    </tr>
    <tr>
    <td>
    <div class="menutext">
    <div class="menuheading">Navigation</div>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="index.html">Home</a><br/>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="about.html">About</a><br/>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="links.html">Links</a><br/>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="affiliation.html">Affiliation</a>
    <br/><br/>
    <div class="menuheading">Creations</div>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="games.html">Games</a><br/>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="game_maker.html">Game Maker</a><br/>
    <img src="bullet.gif" alt="bullet"/>&nbsp;<a class="menulink" href="game_maker.html">WIPs</a>
    <br/><br/>
    <a href="http://gamemakergames.com/toplist/in.php?id=601"/>
    <img class="menubanner" src="http://gamemakergames.com/toplist/button.php?id=601"
    alt="Vote 4 me at GMG Topsites!"/>
    </div>
    </td>
    <td valign="top">
    <h1>Latest News and Updates...</h1>
    <h2>New Site!</h2>
    <h3>@ 10:34 p.m. 30/11/2005</h3>
    <div class="content">I've completed a new design of the site, hope you like it.</div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    CSS
    Code:
    body {
      background-color: #000000;
      text-align: center;
      color: #ffffff;
      font-family: verdana;
      font-size: 12px;}
    
    .menutext {
      white-space: nowrap;
      width: 115px;
      height: 100%;
      text-align: left;
      margin-left: 10px;
      padding-top: 10px;
      line-height: 130%;}
    
    .menuheading {font-weight: bold;}
    
    .menubanner { 
      border: none;
      line-height: 130%;
      margin-left: 10%;
      margin-right: 10%;
      white-space: nowrap;}
    
    td {border:2px solid #26d3ff;}
    
    table {
      width: 570px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      vertical-align:top}
    
    a.link,a.menulink {color: #ffffff;
      text-decoration: none}
    
    a.menulink:hover {color: #26d3ff;
      text-decoration: underline;
      margin-left: 5px}
    
    h1 {
      color: #ffffff;
      font-size: 115%;
      font-weight: bold;
      text-align: center;}
    
    h2 {color: #ffffff;
      font-size: 105%;
      font-weight: bold;
      line-height: 40%;
      margin-left: 30px;}
    
    h3 {color: #ffffff;
      font-size: 105%;
      font-style: italic;
      line-height: 40%;
      margin-left: 30px;}
    
    .content {margin-left: 10px;}
    This is really frustrating me so if anyone has a solution, that'd be greatly appreciated!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try setting a width to the menu, though You don't need a table at all for this. http://bonrouge.com/2c-hf-fixed.php

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried that. It doesn't seem to affect how IE displays it.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The main issue was the percent margins on the image in your left column. I went ahead and did some cleaning up for you. This is how it should be done, without a table.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    body {
      background-color: #000000;
      text-align: center;
      color: #ffffff;
      font-family: verdana;
      font-size: 12px;
      margin:0;
      padding:0;
      height:100%;}
    
    a img {
      border:0;}
    
    .menutext {
      width: 125px;
      height: 400px;
      text-align: center;
      padding:10px;
      line-height: 130%;
      float:left;
      border:2px solid #26D3FF;}
    
    .menuheading {
      font-weight: bold;
      text-align:left;}
    
    .menubanner { 
      border: none;
      line-height: 130%;}
    
    #container {
      width: 570px;
      background-repeat:repeat-y;
      background-position:0 145px;
      text-align: left;
      margin:10px auto 10px auto;}
    
    #header {
      border:2px solid #26D3FF;
      margin-bottom:10px;}
    
    .menu {
      margin:0;
      padding:0;
      list-style:none;
      text-align:left;}
    
    a, a:link {
    text-decoration:none;
    color:#FFF;
    }
    
    .menu li {
      padding-left:15px;
      background-image:url(bullet.gif);
      background-repeat:no-repeat;
      background-position:left center;}
      
    .menu li a:hover {color: #26d3ff;
      text-decoration: underline;
      margin-left: 5px}
    
    h1 {font-size: 115%;
      font-weight: bold;
      text-align: center;}
    
    h2 {font-size: 105%;
      font-weight: bold;
      line-height: 40%;
      margin-left: 30px;}
    
    h3 {font-size: 105%;
      font-style: italic;
      line-height: 40%;
      margin-left: 30px;}
    
    #content {
      float:left;
      border:2px solid #26d3FF;
      padding:10px;
      height: 400px;
      margin-left:10px;
      width:387px;
      overflow:auto;}
    * html #content {
      display:inline;}
      
    .clear {
      clear:both;}
    </style>
    <title>Mediocre Mediocrity</title>
    </head>
    <body>
    <div id="container">
    	<div id="header"><img class="header" src="header.gif" alt="Header Image"/></div>
    	<div class="menutext">
    		<div class="menuheading">Navigation</div>
    		<ul class="menu">
    			<li><a href="index.html">Home</a></li>
    			<li><a href="about.html">About</a></li>
    			<li><a href="links.html">Links</a></li>
    			<li><a href="affiliation.html">Affiliation</a></li>
    		</ul>
    		<div class="menuheading">Creations</div>
    		<ul class="menu">
    			<li><a href="games.html">Games</a></li>
    			<li><a href="game_maker.html">Game Maker</a></li>
    			<li><a href="game_maker.html">WIPs</a></li>
    		</ul>
    		<a href="http://gamemakergames.com/toplist/in.php?id=601">
    		<img src="http://gamemakergames.com/toplist/button.php?id=601" alt="Vote 4 me at GMG Topsites!"/></a>
    	</div>
    	<div id="content">
    		<h1>Latest News and Updates...</h1>
    		<h2>New Site!</h2>
    		<h3>@ 10:34 p.m. 30/11/2005</h3>
    		<div>I've completed a new design of the site, hope you like it.</div>
    	</div>
    	<div class="clear">&nbsp;</div>
    </div>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 12-01-2005 at 06:26 AM.

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, just what I wanted!

    There is still one problem though. It now works fine in IE but when I hover a link in Firefox, a weird flash happens.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm, what version of Firefox? I think this was a reported bug with an overflow:auto; div and links that change their padding on a:hover, change this
    Code:
    .menu li a:hover {color: #26d3ff;
      text-decoration: underline;
      margin-left: 5px}
    to this
    Code:
    .menu li a:hover {color: #26d3ff;
      text-decoration: underline;}

  • #7
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! You've been a great help. I posted in other places but they weren't too interested in helping or they would give solutions without looking at what I had done myself.

  • #8
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now I'm wanting to add an affiates box to the bottom of the site. This time round, it's in the right position in IE but not Firefox. Anyway so it looks the same in both IE and FF? If I get it to work in FF, it then becomes out of place in IE.

    CSS

    Code:
    body {
      background-color: #000000;
      text-align: center;
      color: #ffffff;
      font-family: verdana;
      font-size: 12px;
      margin:0;
      padding:0;
      height:100%;}
    
    a img {
      border:0;}
    
    .menutext {
      width: 125px;
      height: 400px;
      text-align: center;
      padding:10px;
      line-height: 130%;
      float:left;
      border:2px solid #26D3FF;}
    
    .menuheading {
      font-weight: bold;
      text-align:left;}
    
    .menubanner { 
      border: none;
      line-height: 130%;}
    
    #container {
      width: 570px;
      background-repeat:repeat-y;
      background-position:0 145px;
      text-align: left;
      margin:10px auto 10px auto;}
    
    #header {
      border:2px solid #26D3FF;
      margin-bottom:10px;}
    
    #footer {
      border: 2px solid #26D3FF;
      text-align: center;}
    
    .menu {
      margin:0;
      padding:0;
      list-style:none;
      text-align:left;}
    
    a, a:link {
    text-decoration:none;
    color:#FFF;}
    
    .menu li {
      padding-left:15px;
      background-image:url(images/bullet.gif);
      background-repeat:no-repeat;
      background-position:left center;}
      
    .menu li a:hover {color: #26d3ff;
      text-decoration: underline;}
    
    h1 {font-size: 115%;
      font-weight: bold;
      text-align: center;}
    
    h2 {font-size: 105%;
      font-weight: bold;
      line-height: 40%;
      margin-left: 30px;}
    
    h3 {font-size: 105%;
      font-style: italic;
      line-height: 40%;
      margin-left: 30px;}
    
    #content {
      float:left;
      border:2px solid #26d3FF;
      padding:10px;
      height: 400px;
      margin-left:10px;
      width:387px;
      overflow:auto;}
    * html #content {
      display:inline;}
      
    .clear {
      clear:both;}
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <link rel="stylesheet" type="text/css" href="site.css"/>
    <title>Mediocre Mediocrity</title>
    </head>
    <body>
    <div id="container">
    	<div id="header"><img class="header" src="images/header.gif" alt="Header Image"/></div>
    	<div class="menutext">
    		<div class="menuheading">Navigation</div>
    		<ul class="menu">
    			<li><a href="index.html">Home</a></li>
    			<li><a href="about.html">About</a></li>
    			<li><a href="links.html">Links</a></li>
    			<li><a href="affiliation.html">Affiliation</a></li>
    		</ul>
    		<br />
    		<div class="menuheading">Creations</div>
    		<ul class="menu">
    			<li><a href="games.html">Games</a></li>
    			<li><a href="game_maker.html">Game Maker</a></li>
    			<li><a href="game_maker.html">WIPs</a></li>
    		</ul>
    		<br />
    		<a href="http://gamemakergames.com/toplist/in.php?id=601">
    		<img src="http://gamemakergames.com/toplist/button.php?id=601" alt="Vote 4 me at GMG Topsites!"/></a>
    		<br/>
    		<a href="http://mediocre.uni.cc/">
    		<img src="images/affiliate.gif" alt="Mediocre Mediocrity"/></a>
    		<br />
    		<br />
    		<a href="http://validator.w3.org/check?uri=referer">
    		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" /></a>
    		 <a href="http://jigsaw.w3.org/css-validator/">
    		<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
     </a>
    	</div>
    	<div id="content">
    		<h1>Latest News and Updates...</h1>
    		<h2>New Site!</h2>
    		<h3>@ 10:34 p.m. 30/11/2005</h3>
    		<div>I've completed a new design of the site, hope you like it.</div>
    	</div>
    	<div id="footer">
    		<a href="http://theorganization.64digits.com/">
    		<img src="images/affiliate1.png" alt="The Organization"/>
    		</a>&nbsp;
    		<a href="http://64digits.com/">
    		<img src="images/affiliate2.jpg" alt="Sixty-Four Digits"/>
    		</a>&nbsp;
    		<a href="http://daverave.majorwebhost.net/">
    		<img src="images/affiliate3.gif" alt="daverave"/>
    		</a>&nbsp;
    		<a href="http://home.timeweb.net.au/dominic/">
    		<img src="images/affiliate4.gif" alt="Fire Phoenix Software"/>
    		</a>&nbsp;
    	</div>
    </div>
    </body>
    </html>

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I had the <div class="clear"> div in there for a reason. Add this just before your footer
    Code:
    <div class="clear">&nbsp;</div>

  • #10
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again! I have one more question but is not vital as I won't be putting it into my webpage. However, how would you go about instead of using the overflow, just allow the content table to stretch in height and also automatically make the menu the same height?
    Last edited by Mr Mediocrity; 12-01-2005 at 10:32 AM.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    When it comes to a tableless layout this isn't easy. There are numerous ways. One way would be to use a background image. http://www.alistapart.com/articles/fauxcolumns/
    The other way would be to use some javascript to get the height of the taller div and then change the height to match it.


  •  

    Posting Permissions

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