Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Firefox and XHTML/CSS

Status
Not open for further replies.
albusperciva

albusperciva

Technical User
Sep 12, 2007
8
US
Hello,

I can render my website fine in IE, but when I go to Firefox I have a problem with my header. It places my header slightly above the window viewing area. Any help or suggestions will be greatly appreciated!

These is what I have for the header code:

#header {
text-align:center;
font-weight: bold;
font-size: 18pt; }
 
Sort by date Sort by votes
That code does not give us enough to help you. Can you post a link to your site or failing that, post the html and css that point to the problem. What you posted refers only to text and will not surely render the same in every browser.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Here is the HTML code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns=" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="Runescape"/>
<meta name="Description" content="Website devoted to Runescape"/>
<link rel="stylesheet" type="text/css" href="runescape.css" title="stylesheet"/>

<title>Albusperciva's Runescape Fansite</title>
</head>

<body>

<!-- LOGO -->
<img src="images/logo.jpg" alt="Logo for Albusperciva's Fansite" class="logo" />

<!-- NAVIGATION BAR -->
<div id="wrapper"></div> <!-- This is used with "push" to force my footer to the bottom of each page -->

<ul class="navbar">
<li><a href="index.html">Home Page</a></li>
<li><a href="aboutrunescape.html">About Runescape</a></li>
<li><a href="mycharacter.html">My Character</a></li>
<li><a href="aboutme.html">About Me</a></li>
</ul>

<table border="1" class="link">
<tr>
<td><strong>Other Runescape Sites:</strong></td>
</tr>
<tr>
<td><a href=" RuneScape</a></td>
</tr>
<tr>
<td><a href=" </tr>
<tr>
<td><a href=" Realm</a></td>
</tr>
<tr>
<td><a href=" Realm</a></td>
</tr>
<tr>
<td><a href=" </tr>
<tr>
<td><a href=" </tr>
</table>

<!-- HEADER -->
<div id="header">Albusperciva's Runescape Fansite</div>
<br/>
<hr/>

<!-- CONTENT -->
<p>Welcome to the World of Runescape!</p>

<p>This website is designed to introduce the world to the Massive Multiplayer Online Role-Playing Game (MMORPG) called Runescape. I also lists a lot of other Runescape sites out there to help you further.</p>

<p>Runescape, created by Jagex, is based in the medieval times. This game brings players from across the world together to interact and play in the same place. Runescape can be used to create new friends, socialize, cooperate with players, compete against others, relax, or for any other reason. This page is for a basic introduction to the game. To see more information about Runescape, navigate to the 'About Runescape' page.</p>

<p>In the game of Runescape, you can choose to become one of three different types. These types are melee, mage, or range. Each type has its' own advantages. Melee is stronger against range, but weaker against mage. Mage is stronger against melee, but weaker against range and range is stronger against mage, but weaker against melee. This creates a kind of combat triangle. It's up to you to choose which type you would like to focus on. You can, however, be a mixture of any type and be equally good at all. Combat is the basic idea behind runescape. Using combat you can, run around killing various monsters, duel other players, or update your armor/weapons.</p>

<p>There are many other things to do in Runescape. These will be detailed in the 'About Runescape' page.</p>

<p>The following is a small sample of a few things you can do in Runescape:</p>

<object type="video/x-ms-wmv" data="runescape_collab.wmv" style="width:625px; height:550px;"><param name="src" value="runescape_collab.wmv" /><param name="autoStart" value="0" />
</object>

<p>This video shows my character cutting a ruby, using a spell called high alchemy, mining coal, smelting a mithril bar, using an Achievement Cape emote, praying at an altar, cutting down a willow tree, making a fire, fighting a monster called an ice warrior, and teleporting to a city called Falador.</p>

<!-- FOOTER -->
<hr/>
<div id="push"></div>

<div id="footer">
<p><a href="index.html">Home Page</a> | <a href="aboutrunescape.html">About Runescape</a> | <a href="mycharacter.html">My Character</a> | <a href="aboutme.html">About Me</a></p>
<br/>
<p>This website was designed by Derrick Ihnen.</p>
</div>


</body>
</html>


Here is the CSS code:

/* Style Sheet for Albusperciva's Runescape Fansite */

body {
background: #00CCFF;
color: black;
font-family: Helvetica, Arial, "Times New Roman";
padding-left: 11em; }

ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 9em;
left: 1em;
width: 8em; }

ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid blue; }

ul.navbar a {
text-decoration: none; }

a:link {
color: blue; }

a:visited {
color: purple; }

img.logo {
padding: 0;
margin: 0;
position: absolute;
top: 1em;
left: 1em;
width: 8em; }

table.link {
padding: 0;
margin: 0;
position: absolute;
top: 21em;
left: 1em;
width: 8em; }

/* Used with #push to force my footer to the bottom of each page */
#wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -1em; /*auto needs to be the negative of the height for #push and #footer */}

#header {
text-align:center;
font-weight: bold;
font-size: 18pt; }

#push {
height: 1em; }

#footer {
height: 1em; }
 
Upvote 0 Downvote
Perhaps it's the negative margin on "#wrapper" that's doing it?

I think you should remove the table, learn about "floating" elements, and get rid of those absolutely positioned elements. They're doing you no favours!

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
The negative value in #wrapper was the problem. I got some help with a sticky footer and they had told I needed that negative value, but apparently I don't because it works fine in IE and Firefox now. As to absolutely positioned elements, how would I get them where they are without that? Keep in mind that those elements need to be on each of my pages if that has any affect. Thank you for your help!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
770
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
745
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
597
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top