Center Alignment with IE & Mozilla

[yandoo]

Hi there,

 

Im really stressing out because i am using the same simple lines of html code (a hyperlink at the bottom of each webpage - should be centered)and they dont display centered in Mozzila but fine in IE7.

 

Upon further investigation i have found that some pages do have the correctly centerd hyperlinks in both IE7 & Mozzilla??? The code i am using is identical for each page??

 

<div align="center"><span class="style52">Website Created by <a href="http://www.hyperlinkname.co.uk" target="_blank">click here</a></span></div>

 

This is really quite frustrating as i works centerd for some pages in both ie and mozzilla but not for other pages...

Any ideas why this can be???

 

Thank  You

 

 

[dropfaith]

it works on some?

 

oh and div align="" is deprecated use css

div class="center"

 

 

then in css use text-align:center

[F1Fan]

I think the align="center" as well as the css text-align: center; both center the contents of the div, but do not center the div on the page. So, you could use the old <center></center> tags around the div, or you could make the width of the div 100% on the page. Here are the two options:

 

<center><div style="text-align:center;"><span class="style52">Website Created by <a href="http://www.hyperlinkname.co.uk" target="_blank">click here</a></span></div></center>

 

or

 

<div style="width: 100%; text-align: center;"><span class="style52">Website Created by <a href="http://www.hyperlinkname.co.uk" target="_blank">click here</a></span></div>

[dropfaith]

the center tag in html is depreciated and shouldnt be used  those other options should work tho.

 

 

[yandoo]

Hi there,

 

I have tried using both css options above....and still at the bottom is not centered??? This is crazy because some pages it works fine in both ie7 and firefox and other pages it isnt centered???

 

The code on these pages is the same too???

 

What am i doing wrong?

 

Thank You

[yandoo]

Should i add the code into my css stylesheet or use manually on page???

 

Heres my style sheet code:

body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 0px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}

div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}

.border {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #990033;
border-bottom-color: #990033;

}

 

 

Have to say im baffeled why it works on some pages and doesnt on others????

 

If anbody got any ideas please help...gona hav pulled my hair out by end of day.

 

Thank You

[yandoo]

Just noticed something that may be relevant....

 

If i change the alignment to left, it doesnt allign fully to the left??? (to left hand side of the DIV main tag and NOT the left of the entire page DIV Navigation + DIV Main.)

 

So on that basis when its supposed to be centered it is slgihtly alligned to the right.

 

Oh man this is painful...help

 

Thanks

 

 

[F1Fan]

If you align it left, that will show you the left-most part of that div. The same on the right if you align it right. Center will be right in between those two. So, the problem is still that it's not spanning the whole width of the page.

 

In this code:

<div align="center"><span class="style52">Website Created by <a href="http://www.hyperlinkname.co.uk" target="_blank">click here</a></span></div>

You have a span inside a div. You don't list your "style52" class, but I'm guessing that it has to do with the widths of both elements.

 

Maybe the div is set to 100% width and centered, which centers the span element in the middle of the page, but the data within the span are not centered, which would throw it off. Try adding the center align and width 100% to the span and the div.