 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
 Posted: Wed Jan 30, 2008 8:24 am Site works in IE but not in FF |
 |
|
|
My site works in internet explorer but not in firefox. can anyone tell me what's wrong?
here's my HTML and CSS code
HTML:
| Code: |
<html>
<head>
<title>InsaneGFX - Templates. Coding. Life.</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 align="center">
<div id="top">
</div>
<div id="bottom">
</div>
<div id="nav">
<a href="index.html">Home</a> |
<a href="special.html">Special Offers!</a> |
<a href="about.html">About</a> |
<a href="services.html">Services</a> |
<a href="contact.html">Contact</a>
</div>
<div id="text">
<center>
<h1><u>Welcome to InsaneGFX.com</h1></u>
</center>
Here at InsaneGFX.com, we design simple, clean layouts for anything you may need, be it personal websites, advertising, information, or business, it will be created to your standards to best fit you and your target audiance. For pricing and other information, please view the <a href="services.html">Services</a> page!
<br>
<br>
<b>The site is currently undergoing maintanance. Please be patient.</b>
</div>
</div> |
CSS:
| Code: |
/* Generic Selectors */
body {
font-family: Arial;
font-size: 14px;
background-color: #000000; <!--#c0c0c0;!-->
width: 100%;
}
p {
width: 80%;
}
li {
list-style-type: circle;
line-height: 150%;
}
h1 {
font-family: Arial narrow;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Arial narrow;
font-size: 16px;
font-weight: bold;
color: #000000;
}
/**************** Pseudo classes ****************/
a:link {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFE600;
padding-bottom: 0px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: #FFFFFF;
padding-bottom: 0px;
font-weight: bold;
}
a:active {
color: #FFFFFF;
font-weight: bold;
}
/************************* ID's *************************/
#top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
position: relative;
width: 765px;
height: 250px;
margin: 0;
font-weight: normal;
}
#bottom {
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
position: relative;
width: 800px;
height: 420px;
margin-top: -128px;
margin-left: 35px;
}
#nav {
position: absolute;
width: 420px;
height: 235px;
margin-top: -418px;
margin-left: -210px;
}
#text {
position: absolute;
overflow: auto;
padding: 20px;
margin-top: -400px;
margin-left: -350px;
width: 700px;
} |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Wed Jan 30, 2008 8:32 am re |
|
|
|
looks like you have the wrong coding for the css file.
Try
| Code: |
| <link rel="stylesheet" type="text/css" href="whatever it is.css"> |
hope this helps |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Wed Jan 30, 2008 8:35 am re |
|
|
|
I see you have just worded the link.css differently.
The other thing I noticed is that you have no style for your center div. Dont know if it matters, I am no expert. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Wed Jan 30, 2008 12:22 pm |
|
|
|
I tried to work with this code but realised without the images it was not possible to see how you wanted the website to look so can only help in general terms.
The code just needs a bit of tidying up and it should hopefully be easier to debug. Try to use as little styling as possible to get what you want done.
A few things:
- you've used absolute positioning without actually specifying a position using 'top' etc. Remove the positioning in this case as it seems to affect FF but not IE
- you've got things like <div align="center"> and <center> but you're also using CSS. Just use CSS to move things around and avoid using HTML
- you could replace the <u> in the <h1> with text-decoration: underline in the stylesheet (this isn't a big deal) but you ought, ideally, to move the </u> tag the other side of your </h1> tag to help your HTML be more "well-formed"
- remove the relative positioning from #top unless you're going to use it. Right now it's not doing anything.
- try removing all the margins and just trying to get a basic layout going first. I do not think you will need any of those negative margins.
Sorry this is all not very specific. If you can show us the page, with images, or describe what you are trying to do a bit more it will make it easier to help. |
|
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
| Posted: Wed Jan 30, 2008 6:35 pm |
|
|
|
http://www.insanegfx.zxq.net is the website.
(it may or may not work, the host is having some problems right now)
but thats how it looks. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Thu Jan 31, 2008 4:53 am |
|
|
|
Don't know where everything is suppose to go but here's a way to line everything up.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>InsaneGFX - Templates. Coding. Life.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: Arial;
font-size: 14px;
background-color: #000000;
color:#fff;
}
p {
width: 80%;
}
h1 {
font-family: Arial narrow;
font-size: 18px;
font-weight: bold;
color: #000000;
text-decoration:underline;
}
h2 {
font-family: Arial narrow;
font-size: 16px;
font-weight: bold;
color: #000000;
}
/**************** Pseudo classes ****************/
a:link {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}
a:hover {
color: #FFE600;
padding-bottom: 0px;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: #FFFFFF;
font-weight: bold;
}
/************************* ID's *************************/
#container {
width:800px;
margin:0 auto;
}
#top {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
width: 765px;
height: 250px;
margin: 0 auto;
}
#bottom {
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
width: 800px;
height: 420px;
}
#nav {
height: 30px;
text-align:center;
}
#text {
overflow: auto;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
<div id="nav">
<a href="index.html">Home</a> |
<a href="special.html">Special Offers!</a> |
<a href="about.html">About</a> |
<a href="services.html">Services</a> |
<a href="contact.html">Contact</a>
</div>
<div id="text">
<h1>Welcome to InsaneGFX.com</h1>
<p>Here at InsaneGFX.com, we design simple, clean layouts for anything you may need, be it personal websites, advertising, information, or business, it will be created to your standards to best fit you and your target audiance. For pricing and other information, please view the <a href="services.html">Services</a> page!</p>
<p><b>The site is currently undergoing maintanance. Please be patient.</b></p>
</div>
</div>
</body>
</html> |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
