Cross Browser Problems

Mr Mediocrity · 12-01-2005, 03:58 AM

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!

_Aerospace_Eng_ · 12-01-2005, 04:18 AM

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

Mr Mediocrity · 12-01-2005, 04:39 AM

I have tried that. It doesn't seem to affect how IE displays it.

_Aerospace_Eng_ · 12-01-2005, 05:23 AM

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>

Mr Mediocrity · 12-01-2005, 05:51 AM

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.

_Aerospace_Eng_ · 12-01-2005, 05:54 AM

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;}

Mr Mediocrity · 12-01-2005, 05:59 AM

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.

Mr Mediocrity · 12-01-2005, 08:37 AM

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>

_Aerospace_Eng_ · 12-01-2005, 08:43 AM

I had the <div class="clear"> div in there for a reason. Add this just before your footer

Code:

<div class="clear">&nbsp;</div>

Mr Mediocrity · 12-01-2005, 09:29 AM

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?

_Aerospace_Eng_ · 12-01-2005, 09:34 AM

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.