I have a webpage that I am using CSS and I can't get an image to line up properly in Firefox 3.0.7 What I want is a graphic menu bar on the left side, a top bar, a main content below the top bar, and a right bar with a picture in it. I have it all set up and in IE 7.0.6 it works perfectly, in Firefox the image is at the bottom of the page. I want it to be at the top. Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Some of my favorite links</title>
<style type="text/css">
body
a#anchor1 {
display: block;
width: 150px;
height: 37px;
margin: 0px;
text-decoration: none;
background-image: url(images/homebtn.gif);
}
a:hover {
background-position: 0px -37px;
} a#anchor2 {
display: block;
width: 150px;
height: 37px;
margin: 0px;
text-decoration: none;
background-image: url(images/tattoobtn.gif);
}
a#anchor3 {
display: block;
width: 150px;
height: 37px;
margin: 0px;
text-decoration: none;
background-image: url(images/artbtn.gif);
}
a#anchor4 {
display: block;
width: 150px;
height: 37px;
margin: 0px;
text-decoration: none;
background-image: url(images/clawbtn.gif);
}
a#anchor5 {
display: block;
width: 150px;
height: 37px;
margin: 0px;
text-decoration: none;
background-image: url(images/eventbtn.gif);
}
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; max-height: 100%; }
#framecontentLeft, #framecontentRight{
position: absolute; top: 0; left: 0; width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#framecontentRight{
left: auto;
right: 0; width: 400px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
float:right;
}
#framecontentTop{
position: absolute;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 400px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#maincontent{
position: fixed; top: 120px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 400px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 120px 400px 0 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%; width: 100%; }
* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}
</style>
</head>
<body style="color: rgb(0, 0, 0); background-color: black;"
alink="#000099" link="#000099" vlink="#990099">
<h1>
<div id="framecontentLeft">
<div class="innertube">
<div><img src="images/dragonhead.gif"
style="width: 150px; height: 196px;"
alt="Dr. Claw Oriental-japanese art"></div>
<div style="height: 37px;"><a href="index.html"
id="anchor1"> </a>
</div>
<div><img src="images/greyribbonsm.gif"
style="width: 150px; height: 5px;"
alt="psycho city tattoo- lancaster palmdale california"></div>
<div style="height: 37px;"><a href="tattoo.html"
id="anchor2"> </a>
</div>
<div><img src="images/greyribbonsm.gif"
style="width: 150px; height: 5px;" alt="Japanese artwork"></div>
<div style="height: 37px;"><a href="artwork.html"
id="anchor3"> </a>
</div>
<div><img src="images/greyribbonsm.gif"
style="width: 150px; height: 5px;" alt="exotic tattoo"></div>
<div style="height: 37px;"><a href="drclaw.html"
id="anchor4"> </a>
</div>
<div><img src="images/greyribbonsm.gif"
style="width: 150px; height: 5px;" alt="clawtattoos.com"></div>
<div style="height: 37px;"><a href="events.html"
id="anchor5"> </a>
</div>
<div style="height: 120px;" alt=""><img
src="images/nameribbon.gif" style="width: 150px; height: 180px;"
alt="">
</div>
</div>
</div>
</h1>
<div id="framecontentRight">
<h3><img src="images/background.jpg"></h3>
</div>
<div style="top: 0px; height: 55px;" id="framecontentTop">
<div class="innertube">
<div style="text-align: center;">
<h1>CLAWTATTOOS.COM</h1>
</div>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h3><a href="[URL unfurl="true"]http://www.psychocitytattoo.com">Psycho[/URL]
City</a><br>
This is where I did the majority of my training under Mike Pike, Jo Jo
Akermann and Shad, a.k.a. Hori Tsuki Kage <br>
<a href="[URL unfurl="true"]http://www.tattoobyshad.com">Shad's[/URL] (Hori Tsuki
Kage)
Web Page</a><br>
A good site with large oriental pieces<br>
<a href="[URL unfurl="true"]http://www.ignitiontattoo.com">Ignition[/URL] Tattoos</a><br>
A shop that produces some great, more traditional, artwork<br>
<a href="[URL unfurl="true"]http://www.inkimpact.com">Ink[/URL] Impact Studios Web
Page</a><br>
A studio I like to hang out when I am in Belguim.<br>
<a href="[URL unfurl="true"]http://www.outlawirons.com">Outlaw[/URL] Irons Web
Page</a><br>
One of the better places for Tattoo Machines and parts<br>
<a href="[URL unfurl="true"]http://www.royaltattoo.com">Royal[/URL] Tattoos Web Page</a><br>
Another Studio I like to hang out at when I am in Denmark<br>
<a href="[URL unfurl="true"]http://www.strangeworldtattoo.com">Strange[/URL] World
Tattoos
Web Page</a><br>
Another Studio I like to hang out at when I am in Canada<br>
<a href="[URL unfurl="true"]http://www.myspace.com/drclaw69">My[/URL] Myspace Web
Page</a><br>
Just my hang out<br>
</h3>
<p>
</p>
<div style="text-align: center;"><a
href="mailto:test@test.com">Drop Dr. Claw a note</a>
</div>
</div>
</div>
</body>
</html>