Google Chrome messing up my alignment

scroll down and see what should be four boxes lined up nicely.

Penny Colman - Award Winning Author for all Ages.

any ideas what’s up?

It’s the same in FF.

You’ve messed up this div:


<div id="npr">
<a alt="Penny discusses frances perkins on NPR." src="http://www.pennycolman.com/img/npr.png" <img="" href="http://www.npr.org/templates/story/story.php?storyId=4795737"></a>
</div>

<div id="npr"> 
<a href="http://www.npr.org/templates/story/story.php?storyId=4795737"<img src="http://www.pennycolman.com/img/npr.png"  alt="Penny discusses frances perkins on NPR."/></a> 
</div> 

mine looks like that… completely different.

:slight_smile:

Which is still invalid.

Notice the missing > before <img.

I copied mine from Firebug. FF considered <img to be an attribute for a, and rearranged those attributes, that’s why it’s different than your source code.

oh yeah, let me check it out. What is firebug. I know I can look it up but sometimes it’s best to get an answer from an experienced user.

edited…

it worked thank you! embarrassed

I use Firebug to inspect live how my mark up and CSS are applied in browser.

It’s an extension, from the Developer Tools category, and each of the Big5 has it.

With Firebug you can also alter the mark up, change the CSS, and see those alteration applied immediately, live, in your browser’s window.

In addition, you get too see the box model and info on each element, the browser computed values of the values you’ve coded, and you can get info about the network traffic and web page calls.