CSS - Css Sprites Not Working In Ie6 And 7

In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu).

Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu.

Or alternatively somehow make it that the images are only downloaded if the menu is shown??

Any advice or help most welcome.

Richard

Hi guys

I have been reading about sprites and CSS. The fact you can load an image that contains all the state the image can have on hovers is excactly what i am looking for. also the fact that you can do it without javascript makes it even better.

But i have a problem that i need to create a menu, where the text turn blue on hover. Here it is (danish text):



As far as I know, I need to map all areas the with polygon to make the links work. And then apply sprite functionality. But I haven't seen any 'sprites and maps' tutorials, so I am beginning to think that it cant be done with CSS. But before I give up, I would like to ask you if it can be done, and maybe give me some tutorial link or suggestions.

I have tried to do some tutorials, so I think I have the basic idea.

Thanks in advance

I can't see it working (and in practice it hasn't).

Surely the background position needs to be fixed as the image is not scalable.

I hope I am right on this or it's back to the drawing board.

In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns.

With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too.

But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript.

I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical?

Hi,

Instead of organising an image sprite as follows:

image image image
image image image

i'm wondering if there are any negative effects to organising the images in a linear fashion as follows

image image image image image image

I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites?



Thanks

I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet).

I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state.

I don't really want to post the link to the test site itself if I don't have to for client privacy.

Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work.

I don't even need the javascript, I just need it to work. I've experimented with javascript and without.

This is the code I am using:

javascript:
Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>

HTML Markup:

Code:

<div id="nav">
	<ul id="menu">		
		<li><a href="index.php" class="home"></a></li>
		<li><a href="link" class="tour"></a></li>
		<li><a href="link" class="events"></a>
			<ul class="drop">
				<li><a href="/events/calendar">Calendar</a></li>
				<li><a href="/events">Ag Science Hall of Fame</a></li>
				<li><a href="/events/tastes">TASTES</a></li>
			</ul>
		</li>
		<li><a href="news" class="news">News</a>
			<ul class="drop">
				<li><a href="link">Legislation</a></li>
				<li><a href="news/latest-news">Latest News</a></li>
				<li><a href="/news/newsletter">Newsletter</a></li>
				<li><a href="news/in-the-media">In the Media</a></li>
			</ul>
		</li>
		<li><a href="link"></a></li>
		<li><a href="link"></a></li>
	</ul>
</div>

Menu CSS:

Code:

#nav {
position: relative;
	float:left;
	width:940px;
	height:35px;
	z-index: 9;
	background: #fff;
		}	
		
#menu, #menu ul {
position: relative;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:455px;
	z-index: 9;
	}
	
#menu ul.drop {
	background:#520006;
/*	padding:10px;*/
	width:inherit;
	clear:both;
	float:left;
	margin-top:35px;
	z-index: 9;
	}

#menu ul.drop li {
    width: 130px;
	clear:both;
	padding: 5px;
	z-index: 9;
	}
	
#menu ul.drop li:hover {
    background: #c10101;
	z-index: 9;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	z-index: 9;
	}

	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:130px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	z-index: 9;
}

#menu li:hover ul {
	left: auto;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;}


/*SPRITE BACKGROUP POSITIONING*/	
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
	float:left;
	background:url('images/menu.jpg') no-repeat;
	height:35px;
	text-indent:-999999px;
	}
	
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}

#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}

#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}

#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}

#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}

#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}

ul {list-style: none;}

i have been trying my hand at css recently and done this page with some css in it but some how it does not seem to be working.my main problem is the fact the two divs one holding the navigation table and the other holding the texttable are not able to use the css properties in terms of font size and font alignment.i looks like that i have made some serious or stupid error here.i would appreciate any help with this.thanks.the code of the page is given below.


<html>

<head>

<title>
WORKING CSS WITH DIVS..................
</title>

</head>


<style type="text/css">


div.banner
{
POSITION:ABSOLUTE; TOP:0; LEFT:0;RIGHT:0;
WIDTH:750; HEIGHT:100; OVERFLOW:AUTO;
BORDER-LEFT: 5PX SOLID #454545;
BORDER-TOP: 5PX SOLID #454545;
BORDER-BOTTOM:5PX SOLID #454545;
BORDER-RIGHT: 5PX SOLID #454545;
FONT-FAMILY:ARIAL; FONT-SIZE:48PX; TEXT-ALIGN:LEFT;COLOR:WHITE;
BACKGROUND-COLOR:BLACK;
}

div.navigationtable
{
FONT-FAMILY:TAHOMA; FONT-SIZE:10PX;TEXT-ALIGN:LEFT;
}


div.navigationtable
{
POSITION:ABSOLUTE; TOP:150; LEFT:10; WIDTH:150; HEIGHT:200;
}


div.texttable
{
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:10PX; TEXT-ALIGN:JUSTIFY;
}

div.texttable
{
POSITION:ABSOLUTE; TOP:150; LEFT:190; WIDTH:560;
}


</style>


<body bgcolor="#ffffff">


<div class="banner">

Hello.com

</div>


<div class="navigationtable">

<table border=1 cellpadding=0 cellspacing=0 width=150>

<tr>

<td><a href="http://www.yahoo.com">Yahoo</a></td>

</tr>

<tr>

<td><a href="http://www.rediff.com">Rediff</a></td>

</tr>

<tr>

<td><a href="http://www.bbc.co.uk">BBC</a></td>

</tr>

<tr>

<td><a href="http://www.ebay.com">EBay</a></td>

</tr>

<tr>

<td><a href="http://www.w3schools.com">W3Schools</a>
</td>

</tr>

<tr>

<td><a href="http://www.cricket.org">Cricket</a></td>

</tr>

</table>

</div>


<div class="texttable">

<table border=1 cellpadding=0 cellspacing=0 width=560>

<tr>

<td>

Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just

half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia.

He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to

finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various

stages had even seemed slightly better with white, but it was Anand who seized the chances he got.

Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5

points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off-

colour Vladimir Kramnik.

If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite

advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw.

Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just

half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia.

He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to

finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various

stages had even seemed slightly better with white, but it was Anand who seized the chances he got.

Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5

points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off-

colour Vladimir Kramnik.

If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite

advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw.

</td>

</tr>

</table>

</div>

</body>

</html>

Hello,

Simple page trying to get the black line to be at the very top of the page. It works in all browsers (for me) except IE.

http://www.gypsydev.us/css/

Any idea what else I need to do?

Thanks,
GuruGeek

Hey guys,

So I am new to doing PSD>>>XHTML (or html) & CSS.

Basically..I am knew to coding I guess you could say as well.

I have been watching this tutorial: net[dot]tutsplus[dot]com/videos/scree...-psd-to-xhtml/

And in it, he tells me about CSS and how to make the images appear. Basically, the images that I want to appear in my css, are not appearing. I have made sure all of the div id's are correct, and they are.

My CSS can be found he tinypaste[dot]com/770074

ALL of the images, do not appear.

Any help??

(PS- I know some of my things in my CSS are probably not the best practice, but I am not really looking for your criticism, but rather the solution to my problem)

Thanks! ~ Joe

Hi all for some reason my css just won't work:
http://www.milztech.net/area51/

Css:
Code:

body
{
	font-family: verdana, geneva;
	font-size: 52px;
	background-color: #CCCCCC;
}

Any ideas??

Some of the styles or not working in my main.css file. Example: style for td is working but not for ul or li. Syntex is correct, cause I pulled the styles from another one of my sites. Is there something that can cause a partial reading of my main.css file?

Hey, it's me again, I was wondering if there is a way to make any header tag (in my case, it's H3) so that the text appears as normal? Essentially, make it so that nothing changes with the text. eg- 'Hello <H3>everybody</H3>' would appear just the same as 'Hello everybody.'

I've tried multiple things using CSS, but can't seem to make it work.

i have been trying my hand at css recently and done this page with some css in it but some how it does not seem to be working.my main problem is the fact the two divs one holding the navigation table and the other holding the texttable are not able to use the css properties in terms of font size and font alignment.i looks like that i have made some serious or stupid error here.i would appreciate any help with this.thanks.the code of the page is given below.


<html>

<head>

<title>
WORKING CSS WITH DIVS..................
</title>

</head>


<style type="text/css">


div.banner
{
POSITION:ABSOLUTE; TOP:0; LEFT:0;RIGHT:0;
WIDTH:750; HEIGHT:100; OVERFLOW:AUTO;
BORDER-LEFT: 5PX SOLID #454545;
BORDER-TOP: 5PX SOLID #454545;
BORDER-BOTTOM:5PX SOLID #454545;
BORDER-RIGHT: 5PX SOLID #454545;
FONT-FAMILY:ARIAL; FONT-SIZE:48PX; TEXT-ALIGN:LEFT;COLOR:WHITE;
BACKGROUND-COLOR:BLACK;
}

div.navigationtable
{
FONT-FAMILY:TAHOMA; FONT-SIZE:10PX;TEXT-ALIGN:LEFT;
}


div.navigationtable
{
POSITION:ABSOLUTE; TOP:150; LEFT:10; WIDTH:150; HEIGHT:200;
}


div.texttable
{
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:10PX; TEXT-ALIGN:JUSTIFY;
}

div.texttable
{
POSITION:ABSOLUTE; TOP:150; LEFT:190; WIDTH:560;
}


</style>


<body bgcolor="#ffffff">


<div class="banner">

Hello.com

</div>


<div class="navigationtable">

<table border=1 cellpadding=0 cellspacing=0 width=150>

<tr>

<td><a href="http://www.yahoo.com">Yahoo</a></td>

</tr>

<tr>

<td><a href="http://www.rediff.com">Rediff</a></td>

</tr>

<tr>

<td><a href="http://www.bbc.co.uk">BBC</a></td>

</tr>

<tr>

<td><a href="http://www.ebay.com">EBay</a></td>

</tr>

<tr>

<td><a href="http://www.w3schools.com">W3Schools</a></td>

</tr>

<tr>

<td><a href="http://www.cricket.org">Cricket</a></td>

</tr>

</table>

</div>


<div class="texttable">

<table border=1 cellpadding=0 cellspacing=0 width=560>

<tr>

<td>

Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just

half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia.

He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to

finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various

stages had even seemed slightly better with white, but it was Anand who seized the chances he got.

Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5

points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off-

colour Vladimir Kramnik.

If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite

advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw.

Viswanathan Anand kept himself in the race for the title by keeping the gap between him and leader Veselin Topalov to just

half a point with one more round to go in the Category 20 M-Tel Masters chess tournament at Hotel Grand Sofia.

He ensured that the in-form local hero Topalov did not run away with honours with a round to spare. In the last game to

finish in the ninth round, Anand squeezed out a fine win in the endgame against a tired looking Michael Adams, who at various

stages had even seemed slightly better with white, but it was Anand who seized the chances he got.

Anand's win carried him to five points from nine rounds, and a clear second position and Topalov is half a point ahead at 5.5

points. In the final round, Anand will have white pieces against Judit Polgar, who drew her ninth round game against an off-

colour Vladimir Kramnik.

If Topalov and Anand end up with same points, they will have to have a play-off in rapid, where Anand will have a definite

advantage. But for that situation to happen Anand must win against Polgar and hope Topalov does no better than a draw.

</td>

</tr>

</table>

</div>

</body>

</html>

Ok, I have a design and it works how I want it to in firefox.

http://www.eng.nene.ac.uk/~bf04thbu/

However, In IE there are two problems.

1. The graphical border doesnt go all the way around the content area. View it in firefox to see how it's supposed to look.

2. There is a small gap between the first #maintable and #maintable2.

Does anyone know how to fix these? I've been trying for a while without success. It appears that the #maintable2 div is on top of the two side images in #maintable2.

Thanks for any help.

Hi guys. I have finished designing a website and everything looks good except for one thing. I have a form and I have positioned the fields using the margin-top css property. It looks great on FF but there's too much space between fields on IE and it looks bad.

Here's the URL: http://www.theoutsourcingcompany.com/problem/test.html

Try it with FF and then with IE and see for yourself.

The CSS is he http://www.theoutsourcingcompany.com/problem/css/style.css

Would someone please help me and let me know what the problem is?

For those who want the code, here it is. First the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Hi</title>

<style type="text/css">
<!--
.style1 {font-size: 10px}
-->
</style>

<style type="text/css">
<!--
body {
		background-color: #97c7da;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<body>
<div class="divheader">
</div>


<div class="divmiddle">  <font class="Title"><font class="GreyBlue"><br />
  </font></font>
  <p align="left" style="word-spacing: 0; margin-top: 0"><br />
  </p>
<div class="regdiv">
    <form id="ebook-form2" name="contact-form" method="post" action="contact.php">
      <input name="email" type="text" class="textfieldsa" id="email" size="25" />
      <input name="firstname" type="text" class="textfields5" id="firstname" size="25" />
      <input name="lastname" type="text" class="textfields5" id="lastname" size="25" />
      <input name="middleinitial" type="text" class="textfields5" id="middleinitial" size="25" />
      <input name="dob" type="text" class="textfields5" id="dob" size="25" />
      <input name="countryofbirth" type="text" class="textfields5" id="countryofbirth" size="25" />
      <input name="cityofbirth" type="text" class="textfields5" id="cityofbirth" size="25" />
      <input name="countryofcitizenship" type="text" class="textfields5" id="countryofcitizenship" size="25" />
      <input name="foreignaddress" type="text" class="textfieldsb" id="foreignaddress" size="25" />
      <input name="foreigncity" type="text" class="textfields5" id="foreigncity" size="25" />
      <input name="foreignstate" type="text" class="textfields5" id="foreignstate" size="25" />
      <input name="foreignzip" type="text" class="textfields5" id="foreignzip" size="25" />
      <input name="foreigncountry" type="text" class="textfields5" id="foreigncountry" size="25" />
      <input type="image" src="images/contactbutton.jpg" alt="Send Your Message" width="164" height="52" class="textfieldsc" />
    </form>
  </div>
  <p align="left" style="word-spacing: 0"><br />
  </p>
  <p align="left" class="Text">&nbsp;</p>
</div>

<div class="divfooter"> 
  <div align="center"></div>
</div>
</body>

</html>

And here's the CSS:

.contactdiv {
background-image: url(../images/contactform.jpg);
background-repeat: no-repeat;
height: 500px;
width: 500px;
margin: auto;
}
.textfields2 {
font-size: 16px;
margin-left: 230px;
margin-top: 75px;
}
.textfields3 {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.textfields4 {
font-size: 16px;
margin-left: 30px;
margin-top: 12px;
}
.buttoncontact {
font-size: 12px;
margin-left: 152px;
margin-top: 17px;
}

.Title { FONT-SIZE: 20pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;}

.SubTitle { FONT-SIZE: 16pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;}

.BlueLight {
COLOR: #0099FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

.Blue {
COLOR: #0099FF;
}

.GreyBlue {
COLOR: #0099FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

.FormTextBox { BACKGROUND-COLOR: #FFFFFF; FONT-FAMILY: Trebuchet MS, Verdana, Arial; FONT-SIZE: 12px; COLOR: #9AC3D5; FONT-WEIGHT: bold;}

A.Menu:link {
FONT-SIZE: 12px;
FONT-FAMILY: "Trebuchet MS", Verdana, Arial;
COLOR: #0000FF;
TEXT-DECORATION: underline;
}

A.Menu:visited {
FONT-SIZE: 12px;
FONT-FAMILY: "Trebuchet MS", Verdana, Arial;
COLOR: #0000FF;
TEXT-DECORATION: underline;
}

A.Menu:hover { FONT-SIZE: 12px; FONT-FAMILY: Trebuchet MS, Verdana, Arial; TEXT-DECORATION: underline;

COLOR: #4034B4;}

#sddm { margin: 0; padding: 0; z-index: 30}

#sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px Trebuchet MS;}

#sddm li a { display: block; margin: 0 0px 0 0; padding: 4px 10px; width: 90px; background: #1A70AB;color: #FFF;text-align: center;text-decoration: none}

#sddm li a:hover{background:#9CD0DD;}

#sddm div{position: absolute;visibility: hidden;margin: 0;padding: 0;background: #BDD9E1;border: 1px solid #5970B2;}

#sddm div a{position: relative; display: block; margin: 0;padding: 5px 10px;width: auto; white-space: nowrap;text-align: left;text-decoration: none;background: #CAE9F2;color: #1F0573;font: 11px Trebuchet MS;}

#sddm div a:hover{background: #507F90;color: #FFF;}
.centro {
text-align: center;
}
.divheader {
background-image: url(../images/newheader.jpg);
background-repeat: no-repeat;
height: 155px;
width: 697px;
margin: auto;
}
.divmiddle {
background-image: url(../images/newmiddle.jpg);
background-repeat: repeat-y;
width: 697px;
margin-top: -11px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
.divfooter {
background-image: url(../images/newfooter.jpg);
background-repeat: no-repeat;
height: 74px;
width: 697px;
margin-top: -12px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
p {
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.padding {
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 15px;
}
.paddingleft {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 0px;
}
h1 {
padding: 20px;
text-align: justify;
}
::selection { background: #000066; color: white;
}
::-moz-selection { background: #000066; color: white;
}
.textfields5 {
font-size: 16px;
margin-left: 250px;
margin-top: 4px;
}
.textfields6 {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.footertext {
font-size: 10px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.posheader {
margin-left: 8px;
margin-top: -10px;
}
.photopad {
padding-right: 10px;
text-align: center;
}
.floatr {
float: right;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.regdiv {
background-image: url(../images/regform.jpg);
background-repeat: no-repeat;
height: 636px;
width: 500px;
margin: auto;
}
.textfieldsa {
font-size: 16px;
margin-left: 250px;
margin-top: 98px;
}
.textfieldsb {
font-size: 16px;
margin-left: 250px;
margin-top: 67px;
}
.textfieldsc {
font-size: 16px;
margin-left: 170px;
margin-top: 18px;
}
.textfieldsd {
font-size: 16px;
margin-left: 230px;
margin-top: 4px;
}
.ebookformindex {
background-image: url(../images/brochure.jpg);
height: 308px;
width: 500px;
background-repeat: no-repeat;
margin: auto;
}
.textfieldsdname {
font-size: 16px;
margin-left: 90px;
margin-top: 190px;
}
.textfieldsdemail {
font-size: 16px;
margin-left: 90px;
margin-top: 3px;
}
.textfieldsdbutton {
font-size: 16px;
margin-left: 300px;
margin-top: -60px;
}
.tableprices {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
}
h2 {
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
padding-top: 10px;
padding-right: 20px;
padding-bottom: -30px;
padding-left: 20px;
font-weight: normal;
margin-bottom: -20px;
}


Thank you so much for your help, this is driving me nuts.