Strange Firefox Textarea Appearing?

Warptweet · August 20, 2007

Take a look at this screen shot:

On Internet Explorer, the website looks fine. Although, in fire fox, it strangely makes a "textarea" appear at the bottom, and the side bar navigation link named "Ninja Stars" is dragged sideways, forcing you to scroll to the right to see the text. I noticed that when I take away the "<li>" and "</li>" and simply put the text as a link itself, it doesnt do this. Although I like the <li> circle, it makes the link look more detailed in a way.

This is completely wrong, the textbox should not be there at all, and in firefox, everything is completely unaligned. www.warptweet.com/developzone is the link to this fault. Here is my source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<title>Home - Warptweet.com</title>
<link rel='stylesheet' href='style.css' type='text/css' />


</head>

<body>

<div id='container'>
<div id='header'>
	<h1>Home - Warptweet.com</h1>
</div>

<div id='nav-top'>
	<ul>
		<li><a href='?cmd=index'>Home</a></li>
		<li><a href='?cmd=flashportal'>Flash Portal</a></li>
		<li><a href='?cmd=contact'>Contact Us</a></li>
		<li><a href='?cmd=submit'>Submit Content</a></li>
	</ul>
</div>

<div id='faux'>

<div id='content'>
Welcome to the flash portal! Here is a list of all flash games in our database. You may also select a category to narrow the type of games you want to play. If desired, you may also use our search engine, which will also automatically suggest games to you as you type in your search queries.
</div>

<div id='right'>
	<center>
		<img src="images/fpnoicon.jpg" alt="Ninja Stars" />
	<ul>
		<li><a href='#'>Ninja Stars</a></li>
	</ul>
	</center>


</div>
</div>
</div>

</body>
</html>

Also, this page uses no tables, it's a very CSS based layout, so I suppose CSS may be neccessary. Here is my CSS source:

* {
margin: 0;
padding: 0;
}


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background: #F1F1F1;
}


#container {
margin: 10px auto;
width: 747px;
}


#header {
height: 97px;
background: url(http://www.warptweet.com/developzone/images/fpheader.jpg);
}


#faux {
margin-bottom: 10px;
overflow: auto;
width: 100%
}


#header h1 {
text-indent: -2000px;
}


/* TOP NAVIGATION */
#nav-top {
padding: 3px;
background: #6CAF2F;
}


#nav-top li {
display: inline;
margin-left: 15px;
}


#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}


/* RIGHT NAVIGATION */
#right {
background: #B2D95E;
padding: 10px;
min-width: 125px;
}


#right li {
display: block;
text-indent: 10px;
}


/* CONTENT */
#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
}


#content p {
margin-bottom: 15px;
}


A:link {
text-decoration: none; color: black;
}
A:visited {
text-decoration: none; color: black;
}
A:active {
text-decoration: none; color: black;
}
A:hover {
text-decoration: underline; color: black;
}

Any help on fixing this terrible problem would be greatly appreciated, thanks.

dbrimlow · August 20, 2007

Okay. This has been bothering me (and your other problem, as well) so I took a few minutes to fix your html and css. It now works fine in both FF and IE 6.

Remember this, if it works in IE but NOT in FF, then there is a problem with either improper html or improper css. If it works in FF but not IE, then you just need to tweak a few things and not actually fix them.

Both of your issues were relatively easy fixes.

Your problems were both in your html and your css.

First, the html changes (I added extra tabs in the content text code so it would not scroll too far in this post, you should remove them if you copy and paste the code:

<div id='faux'>

<!-- I changed <b> to <strong> since you are using xhtml, and I removed the two wasted <br />
tags, break tags AFTER text don't work the same across browsers, just adjust your css padding
or margin for the same effect -->

<div id='content'>
<strong> Will your game be remembered forever?</strong> The aim of Warptweet.com
is to become the largest database of flash games ever created to date, while keeping them safely
hosted on our servers for the decades to come. This way, todays modern games will be played and
enjoyed by all for the years that have yet to pass, allowing you or your group of flash game 
creators to have your games remembered, <strong>forever</strong>.
</div>

<div id='right'>
<!-- I put image into a link container - removed improper tag "<center>" -->
   <ul>
<li><img src="images/fpnoicon.jpg" alt="Ninja Stars" /></li>
<li><a href='#'>Ninja Stars</a></li>
   </ul>
  
  </div>
<!-- close id "faux"-->
</div>

Now for the css fixes:

/* changed overflow:auto to overflow:hidden */
#faux {
margin-bottom: 10px;
overflow: hidden;
width: 100%
}
/* If you list a:link, a:visited - you must ALSO list a:hover, a:active - in THAT order - LVHA = LoVe HAte */
#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}
/* created a:hover and a:active to work with above */
#nav-top li a:hover,
#nav-top li a:active {
color: black;
font-size: 120%;
text-decoration: underline;
}
/* This needs to be floated right to align properly */
#right {
background: #B2D95E;
padding: 10px;
min-width: 125px;
float:right;
}

/* set the bullet "list-style-type" for any list item */
#right li {
display: block;
list-style-type:none;
padding:0 10px
}
a:link, a:visited{
text-decoration: none; color: black;
}

a:hover, a:active{
text-decoration: underline; color: black;
}

You've been fighting too hard with this simple layout. In future, get it working correctly in FF before adjusting things for IE.

Cheers,

Dave

Warptweet · August 20, 2007

After tweaking just a bit, your code helped. Thanks =)

Sign In

Strange Firefox Textarea Appearing?

Recommended Posts

Warptweet

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Warptweet

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information