CODEWITHSUNDEEP
htmlcss
NewBoy
NewBoy

Reputation: 1144

CSS margin issue

Sorry about the simple question..

do anyone know why my images on the button section of this page are not aligning correctly. the image on the far right seems to be pushed down. Doesn't anyone know what's causing this problem?

Link to Issue

Upvotes: 4

Views: 101

Answers (6)

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

You need to remove any spaces or new line between </li> and <li>, so in the HTML mode of your CMS it should literally read </li><li> and not something like:

</li>



        <li>

If that's somehow not possible, contact the developers / forum of your CMS and ask there for help.

Upvotes: 0

maxxon15
maxxon15

Reputation: 1639

Lots of whitespaces above each <li>. Remove them and it should work fine. Use Chrome Developer Tools or Firebug to check 'em out.

Upvotes: 0

rainecc
rainecc

Reputation: 1502

This is not valid html. You need to fix that first. Run your page through a validator and correct the "Element div not allowed as child of element ul in this context" errors.

Upvotes: 0

Kyle Nunery
Kyle Nunery

Reputation: 2049

When I inspect the page I see extra html elements inserted into the document

</li><!-- ITEM ENDS HERE -->
 &nbsp; &nbsp; &nbsp; &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;<li class="item2">

The extra "nbsp"s are throwing off the alignment.

Upvotes: 1

Eric Fortis
Eric Fortis

Reputation: 17350

There is a lot of white space after deleting it: enter image description here

Upvotes: 1

Chords
Chords

Reputation: 6860

You have a bunch of &nbsp's that aren't in tags. Looks like that seem to be the issue after removing them via Firebug. Remove them and it should line up.

Upvotes: 5

Related Questions