Can you help debug my HTML?

I'm writing this in Wordpress and it's not coming out that great.  I feel like I'm using too many &nbsp and should be using something else.  You can see this page here.

<strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong>

[dropcap]1[/dropcap]

Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:
[clear][spacer]

<a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a>
&nbsp;

&nbsp;

&nbsp;

<a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a>

&nbsp;

&nbsp;

&nbsp;


[dropcap]2[/dropcap]


When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.

[clear][spacer]

[dropcap]3[/dropcap]

Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:

<img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" />

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

[dropcap]4[/dropcap]
Sit back and relax as we fix your problem.

[clear][spacer]

Open in new window

LVL 11
epichero22Asked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
Two things:

Because you are using WordPress, you may have some issues with repeating spaces and line breaks in the visual editor.  If you want better representation of code in your posts and pages then I recommend you switch to the TinyMCE Advanced plugin and configure it to retain line breaks and spacing.  You also get a better HTML tab out of it than the default visual editor.  

On those same lines, for any solution above that uses CSS, add the CSS to style.css for your current theme to get it to work better.
0
 
Jason C. LevineNo oneCommented:
What's wrong with it?
0
 
epichero22Author Commented:
Well, the thing is that I would rather start using better code.  What I wrote was what I felt is just slapping some tags together and not something strong.  Plus, you'll notice the number 4 is to the right of the graphic.  And the text for each number is aligned at the top of the respective number and not the center.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
epichero22Author Commented:
Update: I turned off the alignment on the graphics and it seems to work better now.  But would there be a way to have the "Windows" and "Mac" graphics on the same line?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
<style type="text/css">
.dropcap {
	float: left;
	color: #3043CA;
	padding-right: 8px;
	padding-left: 3px;
	font-family: Georgia;
	font-size: 50px;
	line-height: 100px;
	margin-top: -40px;
}
.center {
	text-align: center;
}
.center img {
	padding:15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
p {
	min-height:55px;
	padding-bottom: 20px;
}
</style>
</head>

<body>

<p><strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong> </p>

<p><span class="dropcap">1</span>Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:</p>

<p class="center"><a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a> 


 <a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a></p>


<p><span class="dropcap">2</span>When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.</p>

<p><span class="dropcap">3</span> Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:</p>

<p class="center"> <img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" /></p>


<p><span class="dropcap">4</span>Sit back and relax as we fix your problem.</p>

</body>

Open in new window

0
 
epichero22Author Commented:
Padas,


That code made my entire page look completely funky.  There was text all over the place.  That was not helpful.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
did you paste everything as is?  That was partial code. I left out the top.  Here it is live http://jsbin.com/exumip/1  I would add some more styling for the width or adding a container.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style type="text/css">
.dropcap {
	float: left;
	color: #3043CA;
	padding-right: 8px;
	padding-left: 3px;
	font-family: Georgia;
	font-size: 50px;
	line-height: 100px;
	margin-top: -40px;
}
.center {
	text-align: center;
}
.center img {
	padding:15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
p {
	min-height:55px;
	padding-bottom: 20px;
}
</style>
</head>

<body>

<p><strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong> </p>

<p><span class="dropcap">1</span>Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:</p>

<p class="center"><a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a> 


 <a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a></p>


<p><span class="dropcap">2</span>When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.</p>

<p><span class="dropcap">3</span> Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:</p>

<p class="center"> <img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" /></p>


<p><span class="dropcap">4</span>Sit back and relax as we fix your problem.</p>

</body>
</html>

Open in new window

0
 
mcnuteCommented:
you can add a inline css to the paragraphs your using for the mac and windows graphics.

display:inline

Open in new window

add this to both paragraphs or just use divs instead of paragraphs and add this to the class of the divs or create a new one: .inlineimg {display:inline} and they'll be on the same line.

I would recommend you to use firebug add-on on firefox to see make live changes to your css and see the results. Speeds up developing so much!
Bildschirmfoto-2012-08-31-um-13..png
0
 
Andrew DerseIT ManagerCommented:
Do you still need assistance with this or did you get your question(s) resolved.  If you still need them resolved, I'll be glad to help.
0
 
epichero22Author Commented:
Actually, after some experimenting, I was able to make it look better.  It appears that what it really took was turning off the text wrapping in Wordpress.  But thanks for your help with this.


There is a question I did want to ask.  Take another look at the page:

http://www.redalertconsulting.com/get-computer-help-now/

Is there a way to vertically center the text that's to the right of the number buttons?  Right now it appears as though they're vertically aligned to the top.
0
 
epichero22Author Commented:
That's correct, it was the visual editor.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.