Border and text-align declarations won't work in-browser

Hey guys, I have a pretty frustrating problem here: I’ve made a div and given it a dashed border. I’ve also made a link and given it a class - in the css for the link and its class i’ve given it a text-align: center; property. In Dreamweaver, both of these display just fine. But in both Chrome and IE, the link is left aligned and the div won’t display the border. Any idea why?

Here’s the HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

	<head> 
	
		<title>Thomas Frank | Student Blogger and Developer</title> 
		<link rel="stylesheet" type="text/css" href="masterstyle.css" />
		
	</head>
    
    <body>
    
    <div id="temp">
    
    	<h2>Welcome the web site of Thomas Frank! I'm currently putting the finishing touches on the final version of this site, so for now I've decided to display this simple note. You can reach me at the link below!</h2>
        <a href="http://www.linkedin.com/in/thomasfrank09" class="tempLink">Thomas Frank on LinkedIn</a>
        
        </div>
       
   </body>
   
</html>

Here’s the CSS:

@charset "utf-8";
/* CSS Document */

#temp {
	margin: 0 auto;
	margin-left: 33%;
	width: 400px;
	height: auto;
	border: 1px solid dashed;
	padding: 3em;
}

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666;
}

a.tempLink {
	text-align: center;
}

This is the website: http://www.thomasjfrank.com

Firstly, you should place that link inside a <p> element. Then put the class on the <p>.

<p class="tempLink"><a href="http://www.linkedin.com/in/thomasfrank09" >Thomas Frank on LinkedIn</a></p>

CSS

p.tempLink {text-align: center;}
border: 1px solid dashed;

You need to make up your mind. Is it solid or dashed?

What you need is something like this:

border: 1px dashed #222;

That is, you declare the border size, then the type of border, then a border color.

Thanks! Any ideas for the link?

The reason you have to do it Ralph’s way (or actually, you can do it another way too) is because the text-align can’t go on the inline thingie itself. It must go on a block parent. Inline’s can’t align themselves… they have to get aligned by their parents.

So another option is setting text-align: center on the div itself, which will catch all loose inlines like that anchor.

Then you can undo it on the h2 if you want: h2’s are blocks who have inline content, so you CAN set text-align on that h2 if you don’t want the div’s text-align to center it.

If I grab my shoes and pull them up into the air, I can then climb further up.

Thanks! Any ideas for the link?

To further clarify an inline element is only as wide as the content it contains. Therefore there is no center, left or right - it is already all three of those :slight_smile:

Block elements on the other hand stretch to fill all the available width and therefore you have room in which something could be centred or aligned left and right.