HTML Help

lynnc · Joined: 06 Mar 2009 Posts: 10

I am new to web design and have been working on a webpage for my company. Below is the HTML and CSS coding. The problem that I am having is alignment of images and text varies so much with different browsers and screen resolutions. I know that the coding is sloppy and needs lots of work. Hopefully, by the time I get this thing right, I'll be decently versed in HTML and CSS. Parts of the CSS is just junk that I was experimenting with. Apparently the use of absolute positioning is not advised so I need an alternative to it. My intention was to have the images centered on the screen regardless of resolution but it is not happening the way it is now. Any help would be appreciated.

Thanks,

Lynn

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Enclosures</title>
<link rel="stylesheet" href="style1.css"
type="text/css">
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000"
link="#0000ee" vlink="#551a8b">
<table
style="text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td
style="width: 33%; text-align: center; background-color: yellow;"><span
class="link3"><a class="three" href="index.html">Home</a></span>
</td>
<td
style="width: 33%; text-align: center; background-color: yellow;"><span
class="link3"><a class="three"
href="About%20JCD.html">
About JCD</a></span>
</td>
<td
style="width: 33%; text-align: center; color: red; background-color: yellow;"><span
class="link3"><a class="three" href="contact.html">
Contact
JCD</a></span>
</td>
</tr>
</tbody>
</table>
<div style="position: absolute; top: 331px; left: 206px;">
<div style="text-align: center; color: white; height: 25px;">
<p style="background-color: transparent;"> JCD
Manufacturing, Inc. is UL508A Certified for enlosure
build.</p>
</div>
<span class="infotext1"></span></div>
<div
style="position: absolute; top: 520px; left: 378px; text-align: center;"><img
src="Images/NEMA%203R%20Enclosure.jpg"
style="width: 383px; height: 335px;" alt="Nema 3R Enclosure"
;="">
</div>
<div style="position: absolute; top: 415px;"><span
class="infotext1">
Large NEMA 3R enclosure,housing PLC andelectrical power monitoring
equipment. This enclosure is heated and air-conditioned.
Push buttons mounted on a swing-out panel provides operator
with easy access to vital control features.
</span></div>
<div
style="position: absolute; top: 965px; left: 378px; text-align: center;"><img
src="Images/Nema%2012%20Enclosure.jpg"
style="width: 383px; height: 335px;" alt="Nema 12 Enclosure"
;="">
</div>
<div style="position: absolute; top: 890px;"><span
class="infotext1">
Small NEMA 12 enclosure, housing communications equipment. A duplex
receptacle was added for convenience and future expansion.
</span></div>
</body>
</html>

CSS

body {background:black url(Images/bar1.gif); background-repeat:no-repeat; background-position:center 10px;}

table {position: absolute; top: 310px; left: .375in; width: 11in; border-color: blue; border-style: groove; border-width: 5px;}

table2 {position: absolute; top: 450px;}

.headline, .subtitle, .productline {font-face:"times new romans"; font-weight:bold}
.headline {font-size:40pt; color:red; position: absolute; top:400px; left:173px;}
.subtitle {font-size:25pt; color:white; position: absolute; top:480px; left:10px;}
.infotext {font-size:20pt; color:red; position: absolute; top:460px; left:10px;}
.infotext1 {font-size:20pt; color:red;}

li {list-style:"disc"; color:yellow; font-face:"times new romans"; font-weight:bold; font-size:20pt;}

.link1 {font-face:"times new romans"; font-size:20pt;}
a.one:link {text-decoration: none; color:pink;}
a.one:visited {text-decoration: none; color:pink;}
a.one:active {text-decoration: none}
a.one:hover {text-decoration: underline; color: red;}

.link2 {font-face:"times new romans"; font-size:40pt;}
a.two:link {text-decoration: none; color: white}
a.two:visited {text-decoration: none; color: white;}
a.two:active {text-decoration: none}
a.two:hover {text-decoration: underline; color: red;}

.link3 {font-face:"times new romans"; font-size:15pt;}
a.three:link {text-decoration: none; color:black;}
a.three:visited {text-decoration: none; color:black;}
a.three:active {text-decoration: none}
a.three:hover {text-decoration: underline; color: red; font-size:18pt;}

.link4 {font-face:"times new romans"; font-size:20pt;}
a.four:link {text-decoration: none; color:yellow;}
a.four:visited {text-decoration: none; color:yellow}
a.four:active {text-decoration: none}
a.four:hover {text-decoration: underline; color: red;}

.link5 {font-face:"times new romans"; font-size:15pt;}
a.five:link {text-decoration: none; color:blue;}
a.five:visited {text-decoration: none; color:blue;}
a.five:active {text-decoration: none}
a.five:hover {text-decoration: underline; color: red;}

object {position: absolute; top: 500px; left: 800px;}

sticks464 · Joined: 31 Dec 2006 Posts: 2311

To center the content you will need to set a width (either in pixels or percentages) on the main table and use auto margins to center.
Code: <table
style="text-align: left; margin: 0 auto; width: 80%;">

lynnc · Joined: 06 Mar 2009 Posts: 10

Forgive my ignorance here, but what are you referring to as the main table? The only table that I have is the nav bar.

sticks464 · Joined: 31 Dec 2006 Posts: 2311

I was in a hurry at work and misread your code. Here is an easier way to do the code you posted. Font sizing using pt is for printing and will not scale when changing resolutions or screen size, neither will inches for width. I used %'s and em's for sizing.

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Enclosures</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<div id="wrapper">
<table id="menu">
<tbody>
<tr>
<td><a class="three" href="index.html">Home</a></td>
<td><a class="three" href="About%20JCD.html">About JCD</a></td>
<td><a class="three" href="contact.html">Contact JCD</a></td>
</tr>
</tbody>
</table>

<h2>JCD Manufacturing, Inc. is UL508A Certified for enlosure build.</h2>

<p class="enclosure"><img src="Images/NEMA%203R%20Enclosure.jpg" width="383" height="335" alt="Nema 3R Enclosure"></p>

<p class="infotext">
Large NEMA 3R enclosure,housing PLC andelectrical power monitoring
equipment. This enclosure is heated and air-conditioned.
Push buttons mounted on a swing-out panel provides operator
with easy access to vital control features.
</p>

<p class="enclosure"><img src="Images/Nema%2012%20Enclosure.jpg" width="383" height="335" alt="Nema 12 Enclosure"></p>

<p class="infotext">
Small NEMA 12 enclosure, housing communications equipment. A duplex
receptacle was added for convenience and future expansion.
</p>

</div>
</body>
</html>

Code: * {margin:0; padding:0;}
body {background:#000 url(Images/bar1.gif) no-repeat center 10px; font-family:"Times New Roman", Times, serif; text-align:center;}

a {color:#0000ee;}
a:visited {color:#551a8b;}
a:active {color:#ee0000;}

#wrapper {width:80%; margin: 0 auto; text-align:left;}

table#menu {margin:310px 0 10px 0; width: 100%; border: 5px groove #0000b3;}

#menu td {width:33%; background:#FFFF00; text-align:center;}

#menu a, #menu a:visited {text-decoration:none; color:#000; font-size:1.8em; font-weight:bold;}

#menu a:hover {color:#FF0000; text-decoration:underline;}

h2 {color:#fff; text-align:center;}

.enclosure {text-align:center; margin:20px 0;}

.infotext {font-size:1.2em; color:red;}

lynnc · Joined: 06 Mar 2009 Posts: 10

Thanks Sticks!!! That code looks much cleaner. I haven't viewed it in a browser yet, but I'm sure it is just what I need. I plan on ordering a few books to help me learn this stuff but in the mean time I may be visiting this forum often.

lynnc · Joined: 06 Mar 2009 Posts: 10

Another question: If I wanted to move the images to the left and place the description (infotext) to the right vertical center of the image, how could I do it?

lynnc · Joined: 06 Mar 2009 Posts: 10

I am trying to get rid of as much absolute positioning as possible but I am having some trouble with the bulleted list on one of my pages. Could you tell me how best to handle this? Also, I noticed that when I change the size of the browser window, the text wraps and the menu bar shifts to the left slightly. Here is the code that I am using now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>JCD Manufacturing, Inc.</title>
<link rel="stylesheet" href="style1_1.css"
type="text/css">
</head>
<body>
<div id="wrapper">
<table id="menu">
<tbody>
<tr>
<td><a class="" href="index.html">Home</a></td>
<td><a class="" href="About%20JCD.html">About
JCD</a></td>
<td><a class="" href="contact.html">Contact
JCD</a></td>
</tr>
</tbody>
</table>
<p class="headline">Solutions for your
outsourcing needs</p>
<p class="subtitle" ;="">JCD
is a contract
manufacturing
facility specializing in:</p>
<ul>
<div style="position: absolute; top: 530px; left: 40px;"><li><a
class="four" href="wire%20harness.html">Wiring
Harnesses</a></li>
</div>
<div style="position: absolute; top: 560px; left: 40px;"><li><a
class="four" href="assemblies.html">
Electro-Mechanical
Assemblies and Subassemblies</a></li>
</div>
<div style="position: absolute; top: 590px; left: 40px;"><li><a
class="four" href="enclosures.html">
Electrical
Enclosure Build</a></li>
</div>
<div style="position: absolute; top: 620px; left: 40px;"><li><a
class="four" href="demos.html">
Design
and Build of Sales and Training Demo Units</a></li>
</div>
</ul>
<div style="text-align: right;"><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
id="player1" align="middle" height="240"
width="320">
<param name="movie" value="product.swf"><param
name="menu" value="false"><param name="quality"
value="high"><param name="bgcolor" value="#FFFFFF">
<noscript><a
href="http://www.dvdvideosoft.com/converter/video/mp4-video-converter.htm">mp4
converter</a></noscript>
<embed src="product.swf" menu="false" quality="high"
bgcolor="#FFFFFF" name="player"
allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="240" width="320">
</object></div>
</div>
</body>
</html>

CSS

* {margin:0; padding:0;}
body {background:#000 url(Images/bar1.gif) no-repeat center 10px; font-family:"Times New Roman", Times, serif; text-align:center;}

a {color:#0000ee;}
a:visited {color:#551a8b;}
a:active {color:#ee0000;}

#wrapper {width:90%; margin: 0 auto; text-align:left;}

table#menu {margin:310px 0 10px 0; width: 100%; border: 5px groove #0000b3;}

#menu td {width:33%; background:#FFFF00; text-align:center;}

#menu a, #menu a:visited {text-decoration:none; color:#000; font-size:1.3em; font-weight:bold;}

#menu a:hover {color:#FF0000; text-decoration:underline;}

table2 {position: absolute; top: 450px;}

.headline, .subtitle, .productline {font-face:"times new romans"; font-weight:bold}
.headline {font-size:3.5em; color:red; text-align:center; margin:20px 0;}
.subtitle {font-size:25pt; color:white; text-align:left; margin:20px 0;}
.infotext {font-size:20pt; color:red; position: absolute; top:460px; left:10px;}
.infotext1 {font-size:20pt; color:red;}

li {list-style:"disc"; color:yellow; font-face:"times new romans"; font-weight:bold; font-size:20pt; text-align:left;}

.link1 {font-face:"times new romans"; font-size:20pt;}
a.one:link {text-decoration: none; color:pink;}
a.one:visited {text-decoration: none; color:pink;}
a.one:active {text-decoration: none}
a.one:hover {text-decoration: underline; color: red;}

.link2 {font-face:"times new romans"; font-size:40pt;}
a.two:link {text-decoration: none; color: white}
a.two:visited {text-decoration: none; color: white;}
a.two:active {text-decoration: none}
a.two:hover {text-decoration: underline; color: red;}

.link3 {font-face:"times new romans"; font-size:15pt;}
a.three:link {text-decoration: none; color:black;}
a.three:visited {text-decoration: none; color:black;}
a.three:active {text-decoration: none}
a.three:hover {text-decoration: underline; color: red; font-size:18pt;}

.link4 {font-face:"times new romans"; font-size:20pt;}
a.four:link {text-decoration: none; color:yellow;}
a.four:visited {text-decoration: none; color:yellow}
a.four:active {text-decoration: none}
a.four:hover {text-decoration: underline; color: red;}

.link5 {font-face:"times new romans"; font-size:15pt;}
a.five:link {text-decoration: none; color:blue;}
a.five:visited {text-decoration: none; color:blue;}
a.five:active {text-decoration: none}

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Ok, one at a time. Here's the second page. One reason thing move around and wrap is the text size is gigantic, far too large. It should not be any larger than 1em with headings slightly larger.
I have the css embedded so you will have to move it to the external stylesheet.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Enclosures</title>
<link rel="stylesheet" href="style1.css" type="text/css">
<style type="text/css">
* {margin:0; padding:0;}
body {background:#000 url(Images/bar1.gif) no-repeat center 10px; font:.88em/1.5 "Times New Roman", Times, serif; text-align:center;}

a {color:#0000ee;}
a:visited {color:#551a8b;}
a:active {color:#ee0000;}

#wrapper {width:80%; margin: 0 auto; text-align:left;}

table#menu {margin:310px 0 10px 0; width: 100%; border: 5px groove #0000b3;}

#menu td {width:33%; background:#FFFF00; text-align:center;}

#menu a, #menu a:visited {text-decoration:none; color:#000; font-size:1.8em; font-weight:bold;}

#menu a:hover {color:#FF0000; text-decoration:underline;}

h2 {color:#fff; text-align:center; font-size:3em; color:#FF0000;}

h3 {font-size:2.5em; color:white; text-align:left; margin:20px 0 0 0;}

.enclosure {text-align:center; margin:20px 0;}

.infotext {font-size:1.2em; color:red;}

#special {list-style:disc; color:#FFFF00;}

#special li {font-size:2em; margin:0 0 0 30px;}

#special a, #special a:visited {text-decoration: none; color:#FFFF00;}

#special a:hover {text-decoration: underline; color: #FF0000;}

#movie {float:right; margin:40px 0 0 0;}
</style>
</head>
<body>
<div id="wrapper">
<table id="menu">
<tbody>
<tr>
<td><a class="three" href="index.html">Home</a></td>
<td><a class="three" href="About%20JCD.html">About JCD</a></td>
<td><a class="three" href="contact.html">Contact JCD</a></td>
</tr>
</tbody>
</table>

<h2>Solutions for your outsourcing needs</h2>

<div id="movie"><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
id="player1" align="middle" height="240"
width="320">
<param name="movie" value="product.swf"><param
name="menu" value="false"><param name="quality"
value="high"><param name="bgcolor" value="#FFFFFF">
<noscript><a
href="http://www.dvdvideosoft.com/converter/video/mp4-video-converter.htm">mp4
converter</a></noscript>
<embed src="product.swf" menu="false" quality="high"
bgcolor="#FFFFFF" name="player"
allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="240" width="320">
</object></div>

<ul id="special">
<h3>JCD is a contract manufacturing facility specializing in:</h3>
<li><a href="wire%20harness.html">Wiring Harnesses</a></li>
<li><a href="assemblies.html">Electro-Mechanical Assemblies and Subassemblies</a></li>
<li><a href="enclosures.html">ElectricalEnclosure Build</a></li>
<li><a href="demos.html">Design and Build of Sales and Training Demo Units</a></li>
</ul>

</div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2311

This css should take care of both those pages

Code: * {margin:0; padding:0;}
body {background:#000 url(Images/bar1.gif) no-repeat center 10px; font:.88em/1.5 "Times New Roman", Times, serif; text-align:center;}

a {color:#0000ee;}
a:visited {color:#551a8b;}
a:active {color:#ee0000;}

#wrapper {width:80%; margin: 0 auto; text-align:left;}

table#menu {margin:310px 0 10px 0; width: 100%; border: 5px groove #0000b3;}

#menu td {width:33%; background:#FFFF00; text-align:center;}

#menu a, #menu a:visited {text-decoration:none; color:#000; font-size:1.8em; font-weight:bold;}

#menu a:hover {color:#FF0000; text-decoration:underline;}

h2 {color:#fff; text-align:center; font-size:3em; color:#FF0000;}

h3 {font-size:2.5em; color:white; text-align:left; margin:20px 0 0 0;}

.infotext {
position:relative;
height:335px;
vertical-align:middle;
display:table;
font-size:1.2em;
margin-bottom:20px;
background:url(Images/NEMA%203R%20Enclosure.jpg) no-repeat left center;
}

.inner, .inner_1 {
position:relative;
top:50%;
left:0;
width:100%;
display:table-cell;
vertical-align:middle;
color:#FF0000;
}

.infotext p, .infotext_1 p {
margin: 0 0 0 403px;
top:-50%;
text-align:left;
position:relative;
}

.infotext_1 {
position:relative;
height:335px;
vertical-align:middle;
display:table;
font-size:1.2em;
background:url(Images/Nema%2012%20Enclosure.jpg) no-repeat left center;
}

#special {list-style:disc; color:#FFFF00;}

#special li {font-size:2em; margin:0 0 0 30px;}

#special a, #special a:visited {text-decoration: none; color:#FFFF00;}

#special a:hover {text-decoration: underline; color: #FF0000;}

#movie {float:right; margin:40px 0 0 0;}

html for the first page with the images to the left and text centered vertically on the image
Code: <body>
<div id="wrapper">
<table id="menu">
<tbody>
<tr>
<td><a class="three" href="index.html">Home</a></td>
<td><a class="three" href="About%20JCD.html">About JCD</a></td>
<td><a class="three" href="contact.html">Contact JCD</a></td>
</tr>
</tbody>
</table>

<h2>JCD Manufacturing, Inc. is UL508A Certified for enlosure build.</h2>

<div class="infotext">
<div class="inner">
<p>Large NEMA 3R enclosure,housing PLC andelectrical power monitoring
equipment. This enclosure is heated and air-conditioned.
Push buttons mounted on a swing-out panel provides operator
with easy access to vital control features.</p>
</div>
</div>

<div class="infotext_1">
<div class="inner_1">
<p>Small NEMA 12 enclosure, housing communications equipment. A duplex
receptacle was added for convenience and future expansion.</p>
</div>
</div>

</div>
</body>

lynnc · Joined: 06 Mar 2009 Posts: 10

Thanks again Sticks!! I am looking at the code for the text aligned to the right center of the images and trying to get a grip on how and why it works. I noticed that you put the image location in the CSS and not the HTML. Why is that? I have several other pages that I need to do similar things with. Is it advisable to continue this way or is there a way that would be better for repeatability? I also noticed that you had to call out each instance of the descriptions of the images in two ways such as .inner, .inner_1 and .infotext p, .infotext_1 p. Why is this and is this what I would need to do for every description that I would add on all every page? Did I make sense there? Would I need to add a .inner_2 and .infotext_2 p for the next image description that I would need to add either it was for the page you have done the code for or another page?

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Quote: I also noticed that you had to call out each instance of the descriptions of the images in two ways such as .inner, .inner_1 and .infotext p, .infotext_1 p. Why is this

If you look at the css you will see that the image for each instance is set as a background. This is the only way to get the image with text vertically aligned to the center of the image. If the text were to be aligned at the top of the image then a different method could be used and less css. There are plenty of methods to right align text on an image but very few that work correctly for vertical centering text on an image.

To continue on with another image simply copy the html and change the class to inner_3 and infotext_3 p and copy and paste the css with changes to .inner_3 and .infotext_3 p applying the new image path. The controlling factor is the change of image set as a background.
If you want the same effect and look on another page all you would have to do is continue on in the progression using the appropiate image and text. You couls embed these styles on each page that they are used on to keep the external stylesheet from becoming cluttered.

lynnc · Joined: 06 Mar 2009 Posts: 10

I've decided to do the page a little different and thought I was doing pretty well until I checked my page with multiple images on it with IE7. The page looks like I think it should in Firefox. The images should be side by side until they run out of room and then a new row is created. In IE7 the images are left aligned and the descriptive text is to the right and below the images. The text should be left aligned and bottom center of the images. It seems that IE is not reading the float:left correctly. Here is what I have.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>Enclosures</title>

<link rel="stylesheet" href="style1_4.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="Images/bar3.gif";></div>
<table id="menu">
<tbody>
<tr>
<td>
<a href="index.html">Home</a>
</td>
<td =""><a href="About%20JCD.html">
About JCD</a>
</td>
<td =""><a href="contact.html">
Contact
JCD</a>
</td>
</tr>
</tbody>
</table>
<div id="listed">
<h3>JCD Manufacturing, Inc. is now a UL 508A listed
manufacturer of open or closed control panels.</h3>
</div>
<div class="photo">
<img src="Images/NEMA 3R Enclosure.jpg" alt="Nema 3R enclosure with heating and cooling unit" />
<p>Large NEMA 3R enclosure housing PLC and electrical power
monitoring equipment. This enclosure is heated and air-conditioned.
Push buttons mounted on a swing-out panel provides operator
with easy access to vital control features.</p>
</div>
<div class="photo">
<img src="Images/Nema 12 Enclosure.jpg" alt="Small Nema 12 enclosure" />
<p>Small NEMA 12 enclosure housing communications equipment. A
duplex receptacle was added for convenience and future expansion.</p>
</div>
<div class="photo">
<img src="Images/run test1.JPG" alt="Run Test Machine" />
<p>Run Test</p>
</div>
<div class="photo">
<img src="Images/large 2door enclosure.JPG" alt="" />
<p>Large 2 door enclosure.</p>
</div>
</div>
</div>
</body></html>

* {margin:0; padding:0;}
body {background:#1034A6 url(Images/bgstrip.jpg) repeat-x fixed; font:.88em/1.5 "Times New Roman", Times, serif; text-align:center;}

a {color:#0000ee;}
a:visited {color:#551a8b;}
a:active {color:#ee0000;}

#wrapper {width:800px; margin: 0 auto; text-align:left;}

#logo {margin-top:10px; text-align:center;}

table#menu {margin:0 0 10px 0; width: 100%; border: 5px groove orange;}

#menu td {width:33%; background:#FFFF00 url(Images/electricity1.jpg) repeat-x center; text-align:center;}

#menu a, #menu a:visited {text-decoration:none; color:yellow; font-size:1.4em; font-weight:bold;}

#menu a:hover {color:#FF0000; text-decoration:underline;}

h2 {color:#fff; text-align:center; font-size:1.8em; color:#FF0000; margin:20px 0 20px 0;}

h3 {font-size:1.5em; color:white; text-align:left; margin:20px 0 20px 0;}

.photo {float:left;}

.photo img {margin-left:20px; margin-right:20px; margin-bottom:10px; margin-top:10px; border:4px solid white; padding:0px;}

.photo p {color:white; text-align:left; width:210px; margin-left:auto; margin-right:auto; margin-bottom:25px; line-height:15px; height:8em;}

#listed h3 {color:black; font-size:1.5em; text-align:center; background: silver url(Images/DisturbedEnergytrans50.jpg) repeat-x center;

width:800px; letter-spacing:-.03em;}

#about h4 {font-weight:bold; font-size:1.3em; color:black; text-align:left; margin-top:10px; margin-bottom:10px; background:blue

url(Images/sinetrans.jpg) repeat-x center;width:80%;}

#about p {font-size:1.2em; color:white;}

#about ul {list-style:disc; color:white; font-size:1.2em; margin-left:35px; line-height:20px;}

#special {list-style:disc; color:#FFFF00;}

#special li {font-size:1.2em; margin:0 0 0 30px;}

#special a, #special a:visited {text-decoration: none; color:#FFFF00;}

#special a:hover {text-decoration: underline; color: #FF0000;}

#movie {float:right; margin:40px 0 0 0;}

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Do you have a live link?

lynnc · Joined: 06 Mar 2009 Posts: 10

Not yet, we have an old, very simple/plan page up right now so I don't want to put the new one up until I feel that most of the bugs are worked out. Below are PS's of the results in each browser.

Firefox Result

IE7 Result

sticks464 · Joined: 31 Dec 2006 Posts: 2311

From left to right, what are the image sizes, width and height?