Forums

poporacer

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<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\">&nbsp;</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\">&nbsp;</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\">&nbsp;</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\">&nbsp;</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\">&nbsp;</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=\"http://www.psychocitytattoo.com\">Psycho
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=\"http://www.tattoobyshad.com\">Shad's (Hori Tsuki
Kage)
Web Page</a><br>
A good site with large oriental pieces<br>
<a href=\"http://www.ignitiontattoo.com\">Ignition Tattoos</a><br>
A shop that produces some great, more traditional, artwork<br>
<a href=\"http://www.inkimpact.com\">Ink Impact Studios Web
Page</a><br>
A studio I like to hang out when I am in Belguim.<br>
<a href=\"http://www.outlawirons.com\">Outlaw Irons Web
Page</a><br>
One of the better places for Tattoo Machines and parts<br>
<a href=\"http://www.royaltattoo.com\">Royal Tattoos Web Page</a><br>
Another Studio I like to hang out at when I am in Denmark<br>
<a href=\"http://www.strangeworldtattoo.com\">Strange World
Tattoos
Web Page</a><br>
Another Studio I like to hang out at when I am in Canada<br>
<a href=\"http://www.myspace.com/drclaw69\">My Myspace Web
Page</a><br>
Just my hang out<br>
</h3>
<p>
</p>
<div style=\"text-align: center;\"><a
 href=\"mailto:drclaw@clawtattos.com\">Drop Dr. Claw a note</a>
</div>
</div>
</div>
</body>
</html>

Robskiwarrior

Gotta say dude - its a bit of a mess, if I correct one thing other things are gonna need fixing, might be better to start again... if I have some time a little later I will go over it... :)

poporacer

I can't think of a better way to accomplish what I want without the mess. I hope you get a chance to look at it! Thanks in advance

Robskiwarrior

"poporacer" said:
I can't think of a better way to accomplish what I want without the mess. I hope you get a chance to look at it! Thanks in advance

Do you have a mock up in Photoshop or anywhere an image that you are working from? :) Is the site live yet, would be easyer to see the pictures and stuff :)

poporacer

Yes- the webpage is clawtattoos.com/links.html .... I know this has a bunch of things in their, a bunch of it is to keep compatability with all browsers (as much as possible). Thanks for loooking at it!

Robskiwarrior

Ok dude.. I just spend the last 40mins digging through your code lol - and decided it best to scrap it all and write it so you can see how it should be writen...

I replicated what you had as much as possible...

Enjoy!

Website demo: click

Files: click

P.S. you owe me a pint. :P

poporacer

I figured it out! There was an extra bracket that was throwing the code off. I appreciate taking the time in looking at it!!! These things bug me and I keep looking and looking....this time I found it!!!

poporacer

Rob,

THANKS!!! Your code is WAY cleaner!!! However the menu bar in IE does not show properly :( There are gaps between the graphics.... Where do I send the pint???? It would be nice if your code would work....I will look at it and if you get a chance to look at it, I will send 2 pints!!!

Again, Thanks a billion!

Robskiwarrior

well tbh - its not the best way to lay out a menu - you should make the sprites include the spacer :) - I shall update...

*Fixed btw...

poporacer

Thanks!!! It looks great!!!
You are awesome

Robskiwarrior

nice - glad I could help :) now learn from the code I did and you can lay out the rest of your site like that :D ;)

treehouse : what would you like to learn today?

Forums

IE and Firefox image position