Zymic Webmaster Forums > Link Works In Ie But Not In Ff

Full Version: Link Works In Ie But Not In Ff

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Drake14

Dec 16 2007, 08:29 PM

I made a website and the "Home" link works in IE but not in FF. anyone know why?

I made the website with CSS and HTML.

CSS Code

CODE

body {

font-family: Times New Roman;

font-size: 14px;

color: #000000;

background-color: #FFFFFF;

}

li {

list-style-type: circle;

line-height: 100%;

list-style-image:;

}

h1 {

font-family: Times New Roman;

font-size: 32px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Times New Roman;

font-size: 18px;

font-weight: bold;

color: #000000;

}

a:link {

color: #000000;

text-decoration: none;

font-weight: bold;

}

li :link {

color: #000000;

text-decoration: underline;

font-weight: bold;

}

a:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}

li a:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #000000;

padding-bottom: 5px;

font-weight: bold;

text-decoration: none;

}

li a:hover {

display: block;

color: #000000;

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: 000000;

}

a:active {

color: #000000;

font-weight: bold;

}

#content {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: 25px -25px;
background-attachment: fixed;
position: absolute;
top: 0px;
left: 0px;

width: 1000;

height: 570;

margin: 0px;

margin-top: 0px;

border-left: 1px solid #000000;

}

#home {
position: absolute;
top: 275px;
left: 444px;

width: 10;

height: 10;

margin: 0px;

margin-top: 0px;

}

#welcome {
position: absolute;
top: 54px;
left: 460px;

width: 100;

height: 10;

margin: 0px;

margin-top: 0px;

}

#text {
position: absolute;
top: 70px;
left: 383px;
background: #cfcfc7;

width: 225;

height: 156;

overflow: scroll;

margin: 0px;

margin-top: 0px;

}

#about {
position: absolute;
top: 275px;
left: 365px;

width: 225;

height: 156;

margin: 0px;

margin-top: 0px;

}

HTML Code

CODE

<html>
<head>

<title>i-pod</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="content">
</div>

<div id="home">
<a href="index.html">Home</a>
</div>

<div id="welcome">
Welcome!
</div>

<div id="text">
Welcome to this i-pod website that i made. It's pretty simple, just made with a little HTML and CSS code. It's pretty easy to make websites like this. The i-pod image you see as a background is taken from the Yahoo! image search and edited with Photoshop. Enjoy this pretty cool template!
<br>
<br>
Be sure to check out the <a href="about.html">"About"</a> section for a biography on me!
<br>
<br>
-Chris
</div>

<div id="about">
<a href="about.html">About</a>
</div>

Tyler James

Dec 16 2007, 09:05 PM

You can not and should not use 2 <div>s the same.
as in ...

CODE

#home {
position: absolute;
top: 275px;
left: 444px;
width: 10;
height: 10;
margin: 0px;
margin-top: 0px;
}

#about {
position: absolute;
top: 275px;
left: 365px;
width: 225;
height: 156;
margin: 0px;
margin-top: 0px;

}

A quick fix

CODE

body {

font-family: Times New Roman;

font-size: 14px;

color: #000000;

background-color: #FFFFFF;

}

li {

list-style-type: circle;

line-height: 100%;

list-style-image:;

}

h1 {

font-family: Times New Roman;

font-size: 32px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Times New Roman;

font-size: 18px;

font-weight: bold;

color: #000000;

}

a:link {

color: #000000;

text-decoration: none;

font-weight: bold;

}

li :link {

color: #000000;

text-decoration: underline;

font-weight: bold;

}

a:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}

li a:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #000000;

padding-bottom: 5px;

font-weight: bold;

text-decoration: none;

}

li a:hover {

display: block;

color: #000000;

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: 000000;

}

a:active {

color: #000000;

font-weight: bold;

}

#content {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: 25px -25px;
background-attachment: fixed;
position: absolute;
top: 0px;
left: 0px;

width: 1000;

height: 570;

margin: 0px;

margin-top: 0px;

border-left: 1px solid #000000;

}

#menu {
position: absolute;
top: 275px;
left: 444px;

height: 10;
margin: 0px;
margin-top: 0px;

}

#welcome {
position: absolute;
top: 54px;
left: 460px;
width: 100;
height: 10;
margin: 0px;
margin-top: 0px;

}

#text {
position: absolute;
top: 70px;
left: 383px;
background: #cfcfc7;

width: 225;

height: 156;

overflow: scroll;

margin: 0px;

margin-top: 0px;

}

and

CODE

<html>
<head>

<title>i-pod</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="content">
</div>

<div id="menu">
<a href="index.html">Home</a> <a href="about.html">About</a>
</div>

<div id="welcome">
Welcome!
</div>

<div id="text">
Welcome to this i-pod website that i made. It's pretty simple, just made with a little HTML and CSS code. It's pretty easy to make websites like this. The i-pod image you see as a background is taken from the Yahoo! image search and edited with Photoshop. Enjoy this pretty cool template!
<br>
<br>
Be sure to check out the <a href="about.html">"About"</a> section for a biography on me!
<br>
<br>
-Chris
</div>

but your code is in a mess

You should rewrite it I could give you a hand if you want.

CODE

/nophun

IamShipon1988

Dec 17 2007, 05:44 AM

It seems in your CSS, you made the width for the #home function as 10. Try making it a little wider (100px). Normally when you give it a length, you have to define what sort of units. Width and height are normally defined using PIXELS (or its abbreviated term px). You should define these units in your code.

Colin

Dec 17 2007, 03:25 PM

Also, use Dreamweaver / Validate your code and make sure its valid...Then if your links still don't work then ask people

iamandy

Dec 17 2007, 05:34 PM

should use paste bin aswell to paste code on forums..

Colin

Dec 17 2007, 06:37 PM

Not necessarily, if its ALOT of code then yes but for this I wouldn't waste my time

Cmain

Dec 17 2007, 08:27 PM

QUOTE(Colin @ Dec 17 2007, 01:37 PM)

Not necessarily, if its ALOT of code then yes but for this I wouldn't waste my time

It is alright when one person in a topic posts that amount of code but when you start to get multiple people posting blocks of code it gets messy.

IamShipon1988

Dec 17 2007, 10:58 PM

Yes its true. Especially when people quote the previous post and write only one line that does not, in anyway, relate to it.

iamandy

Dec 17 2007, 11:43 PM

i'd use paste bin fo'sho if it was more than 5 lines long

Colin

Dec 18 2007, 01:08 AM

Is it possible for Zymic to add syntax highlighting? ...while we are talking about this lol

iamandy

Dec 18 2007, 06:56 PM

http://pastesite.alex-elliott.co.uk/beta/

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.