CSS - Text Centering Issue.

Hello,

I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover.

My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions.

Does anyone know if its possible to anchor a layer to a point from something on a different z-index?

I did a search on the forums here and found a similar question but no responses.

Thanks guys!

Hey Everyone,

I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned.

See: ratemodifiers.com/menu.htm

Thanks for all help!!

Id appreciate all help! thank you so much

sorry if its lame but how do i keep my text/text block/para center in a DIV?

code:
.box {
float:left;
width:400px;
height: 400px;
}
now i want the text/para to be exactly in the middle of the box(having same top, bottom space or margin/padding). the text shall be dynamicly generated by cms...

Hello,

I have a vertical menu on the left hand side of my page that I'm working on.

I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment.

Here's the code I'm using for the menu:

Code:

#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#menu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}	

#menu li {
margin-bottom: 4px;  /* space between each menu item */
}

#menu li a {           /* text */

font-weight: bold;
height: 25px;  /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

If anyone could help me out that'd be great. Thanks!

There's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so:

Home | Guestbook | Contact Us | Help

I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it).

I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths.

Ideas?

Hi,

I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text.

The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text.

I tried using overflow: visible but this didn't change anything.

Thanks for any help.

How do I create centered left-justified text? I want it to look something like this:

+---------------SUPPOSE THIS IS MY PAGE---------------+
This paragraph is centered
with respect to the page,
but note that the text is
wrapped around and
left-justified within the
paragraph. +-----------------------------------------------------+


Can I achieve that with CSS without using tables and manipulating cell widths and cell alignments?


.

my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering.

placement:
well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure???

Code:

#navbar {
	text-align:right;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	padding-right: 8px;
	margin-top:-12;
	height:31;
}

#navbar ul {
	margin-right: -0.3em;
	height:31px;
	position:relative;
	bottom:-2px;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
	margin-left: 0.3em;
	margin-right: 0.3em;
	position:relative;
	vertical-align:middle;
}

#navbar ul li a {
	padding-top:11px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li div {
	position:relative;
	
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	margin: 0;
}

vertical centering:
i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this...

.......................................
. .
. texttexttexttexttext.
.image texttexttexttexttext.
.----- texttexttexttexttext.
. .
.......................................
so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc.

i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this.

http://www.viportals.com/

EDIT:

DID IT ON MY OWN!!! THATS A FIRST!!!

Code:

#navbar {
	text-align:center;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	margin-top:-15px;
	height:31px;
	line-height:31px;
	margin-left:0;
	margin-right:0;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
}

#navbar ul li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 4px;
	padding-bottom: 4px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	vertical-align:	middle;
}

now i have one QUESTION:
how do i get all the buttons to align center?????????? they all stay to the right

oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well.

Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me.

The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this:

My History Website

The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>History Through The Ages: 1865-1900</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Ethan Mick">
	<!-- Date: 2008-05-21 -->
	<!-- I will eventually put this style sheet into its own external CSS file.-->
	<style type="text/css">
	<!--
	body {
		background:gray;
	}
	p {
		color:white;
		text-align:left;
		position:top;
		text-indent:1cm;
		vertical-align:top;
	}
	h2 {
		color:black;
		text-align:center;	
	}
	
	.sidebar {
		position:relative;
		
		
		
	}
	
	.ads {
		display:block;
		margin-left:auto;
		margin-right:auto;	
	}
	.imageright {float:right;}
	.imageleft {float:left;}

	-->
	</style>


</head>
<body>
	<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
	<table width="800" border="0">
		<tr>
			<td width="150" height="300">

				<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
				<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />

				<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>	
				
				
			
			</td>
			<td width="*">
				<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
				<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865.  Photograph by Thomas C. Roche">
				<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences.  Over half a million people were killed in the war.  The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>				
				<p>This time period set up the United States for many years to come.  During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before.  The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market.  The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
				<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union.  During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK.  The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th.  Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination.  To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
				<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
				<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba.  The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts.  The only interesting points of the war was the Philippines and Cuba.  In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause.  However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well.  In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>				
				<p>My family on both sides was in the United States at this point, but I am not positive where they were.  My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery.  Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois.  This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
								
				
			</td>
			
			
	</table>
	<img class="ads" src="file:///Users/Ethan/image_1.png">
	
	
</body>
</html>

I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me.

So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know.

I'm trying to get all the text lowercase on a page (client's wishes, not mine)

I thought it was working just fine until I tried IE6 on a PC.

I have a "text-transform: lowercase" in the body section of my css file.

Visit this URL to see what I mean: http://matthiaslot.com/calendar

On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized...

Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks.

I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag.
Why isn't it picking up the #gt_links li a tag.
here is the code:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NONE</title>
<style>
#gt_links {
	position: relative;
	top: 139px;
	height:auto;
	width: 138px;
	margin: auto;
    font-size: 12px;
	font-weight:bold;
	color: #ffcc66;
	text-decoration: underline;  // believe is culprit
	margin-top: 5px; 
}
#gt_links li, ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration:none;
}
#gt_links li a {
		display: inline;
		position: relative;
		font-size: 10px;
		font-weight: normal;
		text-decoration: none;
		color: #ffcc66;
}
#gt_links a {
	display: inline;
	position: relative;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}

</style>
</head>
<body>
	<div id="gt_links">Grepolis Tools
		<ul>
			<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
			<li><a id="w_toggle" href="#">Show/Hide</a></li>
		</ul>
	</div>  
</body>
</html>

Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue.
Please help.
Thanks

Good Day,

I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added.

This is what the page looks like with limited text:

http://lisawesselsphotography.ca/services.html

It looks ok from here

This is what it looks like when a greater amount of text is inserted:

http://lisawesselsphotography.ca/services-test.html

Not so cool looking

Here is my css:

Code:

html, body {
		height: 100%;
}

body {
		margin: 0px;
		padding: 0px;
		background: #11121A url(images/bg1_01.jpg) repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #5A5D6A;
}

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
}

p, ol, ul {
		margin-top: 0px;
}

ol, ul {
		margin: 0px;
		padding: 0px;
}

p {
		line-height: 220%;
}

strong {
		font-weight: normal;
		color: #FFFFFF;
}

a {
		color: #A40000;
		outline: none;
}

a:hover {
		text-decoration: none;
}

a img {
		border: none;
}

img.border {
}

img.alignleft {
		float: left;
		padding-right: 25px;
}

img.alignright {
		float: right;
}

img.aligncenter {
		margin: 0px auto;
}

hr {
		display: none;
}

ul.style1 {
		margin: 0px;
		padding: 0px 0px 0px 15px;
}

ul.style1 li {
		padding: 3px 0px;
}

ul.style1 span {
		color: #FFFFFF;
}

/** WRAPPER */

#wrapper-content {
		background: url(images/bg1_02.jpg) repeat-x left top;
}

#wrapper {
		background: url(images/bg1_05.jpg) repeat-y center top;
}

#wrapper-bgtop {
		background: url(images/bg1_03.jpg) no-repeat center top;
}

#wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg1_04.jpg) repeat-y center bottom;
}

.homepage #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.homepage #wrapper-bgtop {
		background: url(images/bg3_01.jpg) no-repeat center top;
}

.homepage #wrapper-bgbtm {
		background: url(images/bg3_02.jpg) no-repeat center bottom;
}

.single #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.single #wrapper-bgtop {
		background: url(images/bg2_01.jpg) no-repeat center top;
}

.single #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg2_02.jpg) no-repeat center bottom;
}

.gallery #wrapper {
		background: url(images/bg4_03.jpg) repeat-y center top;
}

.gallery #wrapper-bgtop {
		background: url(images/bg4_01.jpg) no-repeat center top;
}

.gallery #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		padding-bottom: 60px;
		background: url(images/bg4_02.jpg) no-repeat center bottom;
}

.container {
		width: 900px;
		margin: 0px auto;
}

.clearfix {
		clear: both;
}

/** HEADER */

#header {
}

/** LOGO */

#logo {
		width: 300px;
		height: 174px;
}

.homepage #logo {
		width: 300px;
		height: 350px;
}

#logo h1, #logo p {
		margin: 0px;
		line-height: normal;
		text-indent: -9999em;
}

#logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 174px;
		background: url(images/homepage02.png) no-repeat left top;
}

.homepage #logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 350px;
		background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}		
		
}

/** MENU */

#menu {
		height: 45px;
		padding: 15px 0px 0px 40px;
}

#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: normal;
}

#menu li {
		float: left;
		padding: 0px 30px;
}

#menu a {
		float: left;
		display: block;
		height: 23px;
		margin: 0px;
		padding: 6px 0px 0px 0px;
		line-height: 1;
		letter-spacing: -1px;
		text-decoration: none;
		text-transform: uppercase;
		text-shadow: #270000 -1px 2px 3px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
}

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

#menu .active {
		background: url(images/subpage1_02.jpg) repeat-x left top;
}

/** PAGE */

#page {
}

/** CONTENT */

#content {
}

.homepage #content {
		height: 290px;
		background: url(images/homepage022.jpg) no-repeat center top;
}

.gallery #content {
		padding: 0px 45px;
}

.single #content {
		padding: 100px;
}

/** SIDEBAR */

#sidebar {
}

/** FOOTER */

#footer-wrapper {
		height: 200px;
		background: url(images/bg1_06.jpg) no-repeat center top;
}

#footer {
		padding-top: 40px;
}

#footer p {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		line-height: 220%;
		color: #31343F;
}

#footer .column1 {
		float: left;
		width: 575px;
}

#footer .column2 {
		float: left;
		width: 50px;
		height: 82px;
		background: url(images/subpage1_03.jpg) no-repeat center top;
}

#footer .column3 {
		float: right;
		width: 275px;
		text-align: right;
}

#footer .copyright {
		padding-top: 5px;
		font-size: 10px;
		color: #252732;
}

#footer .copyright a {
		color: #252732;
}

.box-style {
}

.box-style .title {
		margin: 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 28px;
		font-weight: bold;
		color: #FFFFFF;
}

.box-style .byline {
		margin: -10px 0px 30px 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		color: #363945;
}

/*  GALLERY   */

#slideshow {
}

#gallery {
		position: relative;
		width: 804px;
		height: 337px;
		margin: 38px 0px 50px 0px;
}

#gallery .slide {
		width: 634px;
		height: 337px;
		position: absolute;
		left: 85px;
		top: 0px;
		background: url(images/gallery_01.jpg) no-repeat left top;
}

#gallery .output {
		position: absolute;
		top: 17px;
		left: 17px;
}

#gallery .border {
		width: 600px;
		height: 300px;
		position: absolute;
		top: 17px;
		left: 17px;
		background: url(images/gallery_borders.png) no-repeat left top;
}

#gallery .captions {
		width: 600px;
		height: 55px;
		position: absolute;
		left: 17px;
		top: 262px;
		background: url(images/gallery_caption.png) repeat left top;
		font: 12px Arial, Helvetica, sans-serif;
		text-transform: uppercase;
}

#gallery .captions p {
		margin: 0px;
		padding: 22px 0px 0px 0px;
		line-height: 1;
		text-shadow: #000000 0px 2px 0px;
}

#gallery .captions .left {
		float: left;
		padding-left: 20px;
		color: #FFFFFF;
}

#gallery .captions .right {
		float: right;
		padding-right: 20px;
		color: #777777;
}

#gallery .prev, #gallery .next {
		display: block;
		width: 68px;
		height: 106px;
		position: absolute;
		top: 116px;
		text-indent: -9999em;
}

#gallery .prev {
		left: 0px;
		background: url(images/gallery_02.jpg) no-repeat left top;
}

#gallery .next {
		right: 0px;
		background: url(images/gallery_03.jpg) no-repeat left top;
}

#gallery-thumbnails {
		width: 750px;
		margin-left: 30px;
}

#gallery-thumbnails ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
}

#gallery-thumbnails li {
		float: left;
		display: block;
		width: 120px;
		height: 60px;
		padding: 15px;
		position: relative;
}

#gallery-thumbnails img {
}

#gallery-thumbnails .border {
		display: block;
		width: 130px;
		height: 70px;
		position: absolute;
		left: 10px;
		top: 10px;
		background: url(images/gallery_borders.png) no-repeat left bottom;
}

#gallery-thumbnails .active .border {
		background-position: -130px 100%;
}

Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with.

Here is my xhtml
And here is my css

I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly.

Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc.

Cheers

I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image.

Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post.

It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it.

Any help or guidance is appreciated.

Hi everyone,

this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying!

I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left

nothing is telling it to align centrally!

If anyone can spot the problem it would be a huge help!!

here is a link to the page i am referencing, onyahead.com/arsenal

if need be I can post the css, but there is a lot of it!