my span text is centering in Firefox 2

dee2005 · Jun 5, 2008

Hi,

This must be a real easy thing to do, but I can not think how to do it.

I have a image in a list with the text next to the image in an anchor tag. I am trying to center the text in the span tag it works ok in IE7 but Firefox is ignoring it. Can any one help. I hope the code make sense.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>UnionView</title>
<link rel="stylesheet" type="text/css" href="css/global.css" media="screen"/>
</head>
<body>
<div class="PageWrapper">
<div class="AdvertiseBanner"><p> Advertising Banner</p></div>
<div class="MainContent">
<div class="PageHeader">
<h2 class="PageTitle"><span>UnionView</span></h2>
<div class="NavBar">
<ul>
<li><a href="#"><img src="media/help_icon.jpg" alt="" title="" /><span>test</span></a></li>
<li><a href="#"><img src="media/uni_icon.jpg" alt="" title="" /><span>test</span></span></a></li>
<li><a href="#"><img src="media/aboutus_icon.jpg" alt="" title="" /><span>test</span></a></li>
<li><a href="#"><img src="media/contact_icon.jpg" alt="" title="" /><span>test</span></a></li>
</ul>
</div>
</div>
<div class="InnerContent"></div>
<div class="FooterBar"></div>
</div>
</div>
</body>
</html>

CSS

body{
background: #fafafa url(../media/bg_shadow.jpg) top center;
}

body, h1, h2, h3, p, ul, li{margin:0;}
ul, li{padding:0}

a{outline:none}

a img{border:none;}

.AdvertiseBanner{

}

.PageWrapper{
position:relative;
width:998px;
height:1000px;
margin:0 auto;
}

.MainContent{
float:left;
width:936px;
margin-top:265px;
padding:10px 34px 0 37px;
}

/* Header
====================================*/
.PageHeader{
float:left;
}

.PageTitle{
float:left;
margin-top:30px;
width:253px;
height:39px;
background-image:url(../media/unionview_logo.jpg);
}

.PageTitle span{display:none;}

.NavBar{float:right;}

.NavBar li{
list-style:none;
float:left;
display:block;
margin-right:25px;
text-align:center;
}

.NavBar li span{float:left;}

dee2005 · Jun 5, 2008

sorry the header is suppose to read no working in FIREFOX

Vragabond · Jun 5, 2008

Your span is floated to the left. That will make it a block-level element (inline element don't float) and as such will not be subject to text-align, which refers only to inline elements. IE is wrong to centre your span.

You will either have to remove the float on the span or add some margins to the element to move it closer to the centre. There is no automatic way to move floated elements to the centre -- as the value suggests, they are either left or right.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

my span text is centering in Firefox 2

dee2005

Programmer

dee2005

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor