Firefox not showing background
01-08-2006, 10:53 PM
|
Firefox not showing background
|
Posts: 66
Location: Colorado (USA)
|
Hey,
I've been working on a new site, ( http://www.nplsolutions.com/SII/web/index.htm) and the background image(s) don't show up in firefox, but do in IE. I'm sure it's just something wrong with my code, but I haven't been able to find it. If anyone has any suggestions, that'd be awesome. Thanks.
Here's my code:
Layout.css
Code:
a:link {
color:black;
text-decoration:underline;
}
a:visited {
color:black;
text-decoration:underline;
}
a:hover {
color:black;
text-decoration:underline;
}
a:active {
color:black;
text-decoration:underline;
}
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #D9BE75;
}
h1 {
font-family: "Trebuchet MS";
font-size: 24px;
font-style: normal;
margin-top:18px;
margin-bottom:12px;
margin-left:20px;
margin-right:20px;
}
p {
margin-top:20px;
margin-bottom:20px;
margin-left:35px;
margin-right:35px;
font-family: "Trebuchet MS";
font-size: 14px;
}
hr {
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:20px;
background-color:#000000;
color:#000000;
height:1px;
border:none;
}
p.center{
text-align:center;
}
div.box {
display: block;
height: 19px;
background-image: url(images/box_divider.jpg);
background-repeat: no-repeat;
background-position: center center;
margin:0px;
}
#background {
width:100%;
margin:0px auto;
text-align:center;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center;
}
#background_bottom {
width:100%;
height:20px;
margin:0px auto;
text-align:center;
background-image: url(images/background_bottom.jpg);
background-repeat: no-repeat;
background-position: center;
}
#container {
width:770px;
margin:0px auto;
text-align:left;
}
#head {
margin:0px;
padding:0px;
float:left;
width:770px;
height:112px;
border:1px solid #000000;
background-color: #000000;
}
#photo {
float:left;
width:770px;
height:134px;
padding:0px;
margin:0px auto;
background-image:url(images/photo_bg.jpg);
background-repeat:repeat-x;
border:1px solid #000000;
}
#photo_image {
float:left;
width:195px;
height:134px;
padding-left:145px;
padding-right:305px;
}
#photo_text {
float:left;
width:122px;
height:134px;
}
#content {
float:left;
width:770px;
height:auto;
background-color:#FFFFFF;
border:1px solid #000000;
border-top:none;
z-index:10;
}
index.htm
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Steel Images Inc. - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background">
<div id="container">
<div id="head">
<div id="logo" style="float: left; width:187; height:112; z-index:3"><img src="images/logo.jpg" width="187" height="112"></div>
<div id="home" style="float: left; width:107; height:112; z-index:3">
<a href="#"><img src="images/home.jpg" name="home" width="107" height="112" border="0" id="home"></a>
</div>
<div id="products" style="float: left; width:149; height:112; z-index:3">
<a href="#"><img src="images/products.jpg" name="products" width="149" height="112" border="0" id="products"></a>
</div>
<div id="about" style="float: left; width:159; height:112; z-index:3">
<a href="#"><img src="images/about.jpg" name="about" width="159" height="112" border="0" id="about"></a>
</div>
<div id="cart" style="float: left; width:87; height:43; z-index:3">
<a href="#"><img src="images/cart.jpg" name="cart" width="87" height="43" border="0" id="cart"></a>
</div>
<div id="checkout" style="float: left; width:76; height:43; z-index:3">
<a href="#"><img src="images/checkout.jpg" name="checkout" width="76" height="43" border="0" id="checkout"></a>
</div>
<div id="contact" style="float: left; width:163; height:69; z-index:3">
<a href="#"><img src="images/contact.jpg" name="contact" width="163" height="69" border="0" id="contact"></a>
</div>
</div>
<div id="photo">
<div id="photo_image"><img src="images/photo_image.jpg" width="195" height="134"></div>
<div id="photo_text"><img src="images/photo_text.jpg" width="122" height="134"></div>
</div>
<div id="content">
<h1>Welcome!</h1>
<hr/>
<p align="justify">Our products are all manufactured in the United States and each are designed to fit perfectly in any home décor. All of our art made out of medium gague steel, and the image is laser cut and formed into art. The product is enhanced with rock, glass, and other materials to create beautiful gifts and home décor. The steel is hand brushed for a rich, textured brilliance. A solid metal hook in the back allows for easy wall hanging. Pieces are available in various sizes and finishes, and are suitable for both indoor and outdoor use.</p>
<div class="box"></div>
<p class="center">Please, take some time to browse our
<a href="#">products</a>
. We’re sure you’ll find something that you just love! </p>
<p class="center">
<a href="#">Home</a>
-
<a href="#">Products</a>
-
<a href="#">About Us</a>
-
<a href="#">Contact Us</a>
-
<a href="#">Sales Representatives</a>
</p>
</div>
</div>
</div>
<div id="background_bottom"></div>
</body>
</html>
I suppose the important things to look at are the background div and the background_bottom div. I hope I covered everything, but if you have any questions, feel free to ask.
Thanks,
Nicky |
|
|
|
|
01-08-2006, 11:54 PM
|
|
Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
|
Hey Nicky,
I took a look at the site and know what's going on. Actually Firefox is behaving the right way. You have several divs inside of the background div (header, photo, content) and you have float left on each of these divs.
When you float the div you remove it from the normal flow of the document. Since everything inside of the background div has been removed from it as far as the document flow is concerned the background div doesn't have any height. Well actually it does. It's the height of the background image. You can actually see it at the very top.
I have a couple of fixes and the choice of which to use depends on the rest of your site on what will be easiest for you.
The first fix you can do is specify a height on the background div. It looks like somewhere between 555px and 560px is about where it displays in IE. if you do this youll have tp specify a height on any page of your site that's a different height than this one.
The second fix is to remove the floats from the 3 divs I mentioned above. They will normally sit to the left. In fact all I needed to remove was the float on the content div to see your entire background image. However I did notice that removing the float on the content div did move the two divs above it down a little (i'm not sure why at the moment) and removing the float from all three kept the top two divs where they were, but seemed to move the content div down a little. I suspect both have relatively easy fixes. (at least I hope so)
You will either need to have some content inside the background div that's part of the document flow or specify a height for the background div.
Hope that helps.
|
|
|
|
|
01-09-2006, 07:21 PM
|
|
Posts: 66
Location: Colorado (USA)
|
Vangogh,
I took the float:left out of the 'head' and 'content' div's. (For some reason things got messed up if I took it out of the 'photo' div.) After doing that my h1 margin's got a little messed up in firefox, so I did a messy little hack by just setting the line-height to 72px, and setting the bottom-margin to -10px. It's not pretty, but at least it seems to work. I think that's about all the changes I made.
Here's my updated code:
Layout.css
Code:
a:link {
color:black;
text-decoration:underline;
}
a:visited {
color:black;
text-decoration:underline;
}
a:hover {
color:black;
text-decoration:underline;
}
a:active {
color:black;
text-decoration:underline;
}
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #D9BE75;
}
h1 {
font-family: "Trebuchet MS";
font-size: 24px;
font-style:normal;
margin-left:20px;
margin-right:20px;
/* Hack for cross-browser compatibility */
line-height: 72px;
margin-bottom:-10px;
}
p {
margin-top:20px;
margin-bottom:20px;
margin-left:35px;
margin-right:35px;
font-family: "Trebuchet MS";
font-size: 14px;
}
hr {
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:20px;
background-color:#000000;
color:#000000;
height:1px;
border:none;
}
p.center{
text-align:center;
}
div.box {
display: block;
height: 19px;
background-image: url(images/box_divider.jpg);
background-repeat: no-repeat;
background-position: center;
margin:0px;
}
#background {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center;
}
#background_bottom {
width:100%;
height:20px;
margin:0px auto;
text-align:center;
background-image: url(images/background_bottom.jpg);
background-repeat: no-repeat;
background-position: center;
}
#container {
width:770px;
margin:0px auto;
text-align:left;
}
#head {
margin:0px;
padding:0px;
width:770px;
height:112px;
border:1px solid #000000;
background-color: #000000;
}
#photo {
float:left;
width:770px;
height:134px;
padding:0px;
margin:0px auto;
background-image:url(images/photo_bg.jpg);
background-repeat:repeat-x;
border:1px solid #000000;
}
#photo_image {
float:left;
width:195px;
height:134px;
padding-left:145px;
padding-right:305px;
}
#photo_text {
float:left;
width:122px;
height:134px;
}
#content {
width:770px;
height:auto;
background-color:#FFFFFF;
border:1px solid #000000;
border-top:none;
}
Thanks for all the help.
Nicky
PS - I'm from Boulder too, what part are you from? |
|
|
|
|
01-09-2006, 08:52 PM
|
|
Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
|
Hey Nicky,
Glad you got it working. Just took a look and seems like the heading is a little off at the moment. maybe you're working on it now. The backgorund image is showing up nicely, but I'm seeing the 'contact' box under the rest of the heading nav. Might be the line-height.
I'm in North Boulder. I sent you a PM with more details.
|
|
|
|
|
01-09-2006, 09:46 PM
|
|
Posts: 66
Location: Colorado (USA)
|
You saw correctly. The navigation is driving me nuts. I had to get rid of the 'border' tags for all my images in order for it to validate correctly in XHTML, and that's when it all went downhill. I think I got the same result with my CSS, but for whatever reason that didn't fix it.
I've even tried putting the border tags back in, but that didn't help either. I also tried messing around with the positionings for the elements in the 'head' div, like making them realatively position, right floating, everything. Nothing seems to work though.
My idea now is to just take the whole navigation, and just slice it up with image maps. Would you (or anyone else) advise against that?
Thanks.
Nicky
Just for kicks:
Layout.css
Code:
a:link {
color:black;
text-decoration:underline;
border: 0px none;
}
a:visited {
color:black;
text-decoration:underline;
border: 0px none;
}
a:hover {
color:black;
text-decoration:underline;
border: 0px none;
}
a:active {
color:black;
text-decoration:underline;
border: 0px none;
}
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #D9BE75;
}
h1 {
font-family: "Trebuchet MS";
font-size: 24px;
font-style:normal;
margin-left:20px;
margin-right:20px;
/* Hack for cross-browser compatibility */
line-height: 72px;
margin-bottom:-10px;
}
p {
margin-top:20px;
margin-bottom:20px;
margin-left:35px;
margin-right:35px;
font-family: "Trebuchet MS";
font-size: 14px;
}
hr {
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:20px;
background-color:#000000;
color:#000000;
height:1px;
border:none;
}
img {
border: 0px none;
}
p.center{
text-align:center;
}
p.justify {
text-align:justify;
}
div.box {
display: block;
height: 19px;
background-image: url(images/box_divider.jpg);
background-repeat: no-repeat;
background-position: center;
margin:0px;
}
#background {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center;
}
#background_bottom {
width:100%;
height:20px;
margin:0px auto;
text-align:center;
background-image: url(images/background_bottom.jpg);
background-repeat: no-repeat;
background-position: center;
}
#container {
width:770px;
margin:0px auto;
text-align:left;
}
#head {
margin:0px;
padding:0px;
width:770px;
height:112px;
border:1px solid #000000;
background-color: #000000;
}
#logo {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#home {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#products {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#about {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#contact {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#cart {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#checkout {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#photo {
float:left;
width:770px;
height:134px;
padding:0px;
margin:0px auto;
background-image:url(images/photo_bg.jpg);
background-repeat:repeat-x;
border:1px solid #000000;
}
#photo_image {
float:left;
width:195px;
height:134px;
padding-left:145px;
padding-right:305px;
}
#photo_text {
float:left;
width:122px;
height:134px;
}
#content {
width:770px;
height:auto;
background-color:#FFFFFF;
border:1px solid #000000;
border-top:none;
}
index.htm
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Steel Images Inc. - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="container">
<div id="head">
<div id="logo" style="float: left; width:187; height:112; z-index:3">
<img src="http://www.webmaster-talk.com/images/logo.jpg" alt="Steel Images Inc. Logo" width="187" height="112" />
</div>
<div id="home">
<a href="#"><img src="http://www.webmaster-talk.com/images/home.jpg" alt="Home Button - Go to the Home Page" width="107" height="112"/>
</a>
</div>
<div id="products">
<a href="#"><img src="http://www.webmaster-talk.com/images/products.jpg" alt="Products Button - View all of our wonderful steel art" width="149" height="112"/>
</a>
</div>
<div id="about">
<a href="#">
<img src="http://www.webmaster-talk.com/images/about.jpg" alt="About Us Button - Learn about our company and our steel art" width="159" height="112"/>
</a>
</div>
<div id="cart">
<a href="#">
<img src="http://www.webmaster-talk.com/images/cart.jpg" alt="View Cart Button - View the steel art in your shopping cart" width="87" height="43"/>
</a>
</div>
<div id="checkout">
<a href="#"> <img src="http://www.webmaster-talk.com/images/checkout.jpg" alt="Checkout Button - Checkout and purchase the steel art in your shopping cart" width="81" height="43"/>
</a>
</div>
<div id="contact">
<a href="#"> <img src="http://www.webmaster-talk.com/images/contact.jpg" alt="Contact Button - Learn how to contact us about our steel art" width="168" height="69"/>
</a>
</div>
</div>
<div id="photo">
<div id="photo_image"><img src="http://www.webmaster-talk.com/images/photo_image.jpg" alt="Sample Steel Art - Koko Runner" width="195" height="134" /></div>
<div id="photo_text"><img src="http://www.webmaster-talk.com/images/photo_text.jpg" alt="Sample Steel Art Lable - Koko Runner" width="122" height="134" /></div>
</div>
<div id="content">
<h1>Welcome!</h1>
<hr/>
<p class="justify">Our products are all manufactured in the United States and each are designed to fit perfectly in any home décor. All of our art made out of medium gague steel, and the image is laser cut and formed into art. The product is enhanced with rock, glass, and other materials to create beautiful gifts and home décor. The steel is hand brushed for a rich, textured brilliance. A solid metal hook in the back allows for easy wall hanging. Pieces are available in various sizes and finishes, and are suitable for both indoor and outdoor use.</p>
<div class="box"></div>
<p class="center">Please, take some time to browse our
<a href="#">products</a>
. We're sure you'll find something that you just love! </p>
<p class="center">
<a href="#">Home</a>
-
<a href="#">Products</a>
-
<a href="#">About Us</a>
-
<a href="#">Contact Us</a>
-
<a href="#">Sales Representatives</a>
</p>
</div>
</div>
</div>
<div id="background_bottom"> </div>
</body>
</html>
EDIT: Woah, all the image locations are changed realative to webmaster-talk... weird.
Last edited by NPL Solutions : 01-09-2006 at 09:48 PM.
|
|
|
|
|
01-09-2006, 11:04 PM
|
|
Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
|
I'm not a big fan of image maps and never use them. I prefer to use text for my navigation for seo benefits. I don't think there's anything wrong with using them for your site if that will be easiest for you. However I think the problem with the navigation is pretty simple to fix.
The problem you're having now is in using the css borders. The border is adding an extra pixel all around which is why the images aren't fitting. You've set the container div to 770px and your image widths add up to 770px. The borders though are adding 2px more in width so it's not fitting. All you need to do is cut down one of the images by 2px in width and also remove 2px in height from all of the images (since the height is also off by the same 2px from the border). You could also set the head div to be 2px greater in height, which is probably easier.
Once you've removed the extra pixels from the images everything should line up again like it did before.
Last edited by vangogh : 01-09-2006 at 11:09 PM.
|
|
|
|
|
01-09-2006, 11:11 PM
|
|
Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
|
I just looked at the site again and it looks like you got the navigation working.
|
|
|
|
|
01-12-2006, 11:27 PM
|
|
Posts: 66
Location: Colorado (USA)
|
Hey,
Back again, with more of the same sort of probelms. Another descrepency between Firefox and IE. On this page (http://www.nplsolutions.com/SII/web/contact.htm), well, it should be pretty obvious looking at it, but the div with the form in it, doesn't align next to the div with the phone number, address, etc.
Here's my code, it keeps on getting longer and longer, so I appologize if there's a lot to go through. But the meaningful stuff is towards the bottom of both of the files.
layout.css
Code:
a:link {
color:black;
text-decoration:underline;
border: 0px none;
}
a:visited {
color:black;
text-decoration:underline;
border: 0px none;
}
a:hover {
color:black;
text-decoration:underline;
border: 0px none;
}
a:active {
color:black;
text-decoration:underline;
border: 0px none;
}
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #D9BE75;
font-family: "Trebuchet MS";
font-size: 14px;
}
h1 {
font-family: "Trebuchet MS";
font-size: 24px;
font-style:normal;
margin-left:20px;
margin-right:20px;
/* Hack for cross-browser compatibility */
line-height: 72px;
margin-bottom:-10px;
}
h2 {
font-family: "Trebuchet MS";
font-size: 18px;
font-style: normal;
}
p {
margin-top:20px;
margin-bottom:20px;
margin-left:35px;
margin-right:35px;
font-family: "Trebuchet MS";
font-size: 14px;
}
p.center{
text-align:center;
}
p.justify {
text-align:justify;
}
p.contact {
text-align:center;
}
p.title {
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
font-weight:bold;
}
hr {
margin-top:0px;
margin-bottom:0px;
margin-left:20px;
margin-right:20px;
background-color:#000000;
color:#000000;
height:1px;
border:none;
}
hr.no-margin {
margin:0px;
}
img {
border: 0px none;
}
img.float_left {
boder: 0px none;
float: left;
margin-left: 20px;
margin-right: 10px;;
margin-top: 20px;
margin-bottom: 5px;
}
form {
margin-top:20px;
}
label {
font-weight: bold;
width: 4em;
float: left;
text-align: right;
margin: 0 0 10px 0;
clear: both;
}
input {
margin-left:10px;
margin-bottom: 10px;
}
input.button {
margin-top:10px;
margin-left:70px;
}
textarea {
margin-left:10px;
}
div.box {
display: block;
height: 19px;
background-image: url(images/box_divider.jpg);
background-repeat: no-repeat;
background-position: center;
margin:0px;
}
#background {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center;
}
#background_bottom {
width:100%;
height:20px;
margin:0px auto;
text-align:center;
background-image: url(images/background_bottom.jpg);
background-repeat: no-repeat;
background-position: center;
}
#container {
width:770px;
margin:0px auto;
text-align:left;
}
#head {
margin:0px;
padding:0px;
width:770px;
height:116px;
border:1px solid #000000;
background-color: #000000;
}
#logo {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#home {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#products {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#about {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#contact {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#cart {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#checkout {
float:left;
background-color: #000000;
height:auto;
width:auto;
margin:0;
padding:0;
}
#photo {
float:left;
width:770px;
height:134px;
padding:0px;
margin:0px auto;
background-image:url(images/photo_bg.jpg);
background-repeat:repeat-x;
border:1px solid #000000;
}
#photo_image {
float:left;
width:195px;
height:134px;
padding-left:145px;
padding-right:305px;
}
#photo_text {
float:left;
width:122px;
height:134px;
}
#content {
width:770px;
height:auto;
background-color:#FFFFFF;
border:1px solid #000000;
border-top:none;
}
#contact-box-left {
float:left;
width:300px;
height:auto;
border: none;
margin-right:auto;
}
#contact-box-right {
width:340px;
height:auto;
}
contact.htm
HTML Code:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Steel Images Inc. - Contact</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="meta" -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceEndEditable -->
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="container">
<div id="head">
<div id="logo">
<img src="http://www.webmaster-talk.com/images/logo.jpg" alt="Steel Images Inc. Logo" width="187" height="112" />
</div>
<div id="home">
<a href="index.htm"><img src="http://www.webmaster-talk.com/images/home.jpg" alt="Home Button - Go to the Home Page" width="107" height="112" border="0"/>
</a>
</div>
<div id="products">
<a href="products.htm"><img src="http://www.webmaster-talk.com/images/products.jpg" alt="Products Button - View all of our wonderful steel art" width="149" height="112" border="0"/>
</a>
</div>
<div id="about">
<a href="about.htm"> <img src="http://www.webmaster-talk.com/images/about.jpg" alt="About Us Button - Learn about our company and our steel art" width="159" height="112" border="0"/>
</a>
</div>
<div id="cart">
<a href="cart.htm"> <img src="http://www.webmaster-talk.com/images/cart.jpg" alt="View Cart Button - View the steel art in your shopping cart" width="87" height="43" border="0"/>
</a>
</div>
<div id="checkout">
<a href="checkout.htm"> <img src="http://www.webmaster-talk.com/images/checkout.jpg" alt="Checkout Button - Checkout and purchase the steel art in your shopping cart" width="79" height="43" border="0"/>
</a>
</div>
<div id="contact">
<a href="contact.htm"> <img src="http://www.webmaster-talk.com/images/contact.jpg" alt="Contact Button - Learn how to contact us about our steel art" width="166" height="65" border="0"/>
</a>
</div>
</div>
<div id="photo">
<div id="photo_image"><img src="http://www.webmaster-talk.com/images/photo_image.jpg" alt="Sample Steel Art - Koko Runner" width="195" height="134" /></div>
<div id="photo_text"><img src="http://www.webmaster-talk.com/images/photo_text.jpg" alt="Sample Steel Art Lable - Koko Runner" width="122" height="134" /></div>
</div>
<div id="content">
<!-- InstanceBeginEditable name="content" -->
<h1>Contact Us</h1>
<hr/>
<div id="contact-box-left">
<p><b>Steel Images, Inc.</b><br/>
7038 South Patomac<br/>
Centennial, CO 80112</p>
<p><b>Toll-Free:</b> 1-800-344-8735<br/>
<b>Phone:</b> 303-790-0200<br/>
<b>Fax:</b> 303-790-4620</p>
<p>For technical questions regarding the website, please email our webmaster
at
<a href="mailto:webmaster@steelimagesinc.com">webmaster@steelimagesinc.com</a>.</p>
</div>
<div id="contact-box-right">
<p class="title">Online Contact Form</p>
<hr class="no-margin"/>
<form action="form.php" method="post" name="Online Contact Form">
<label for="name">Name</label>
<input name="name" id="name" type="text" size="40" maxlength="50" /><br/>
<label for="email">Email Address</label>
<input name="email" type="text" size="40" maxlength="100" id="email" /><br/>
<label for="message">Message</label>
<textarea name="message" cols="30" rows="10" id="message"></textarea><br/>
<input name="submit" type="button" value="Submit" class="button" />
</form>
</div>
<!-- InstanceEndEditable -->
<p class="center">
<a href="home.htm">Home</a>
-
<a href="products.htm">Products</a>
-
<a href="about.htm">About Us</a>
-
<a href="contact.htm">Contact Us</a>
-
<a href="#" target="_blank">Sales Representatives</a>
</p>
</div>
</div>
</div>
<div id="background_bottom"> </div>
</body>
<!-- InstanceEnd --></html>
Thanks again. |
|
|
|
|
01-13-2006, 12:19 AM
|
|
Posts: 8,831
Name: Steven Bradley
Location: Boulder, Colorado
| |
