Spaces goes wonky every time I edit!

• 

  menorcanvillas · Member · Dec 25, 2012 at 6:43 pm

  • Copy link
  • Add topic to favorites

  I have a couple of pages on my site where I have lists of info with a relevant photo at the side. When I publish these pages its all lined up perfectly, but any time I go on to edit the page all the pictures end up going diagonally (as if they’re moving into the spaces I’ve made previously), even if I don’t actually change anything on the page! I have to manually put them all back in place each time I make any changes.

  Any ideas?

  I am very clueless about techy stuff and making this using wordpress.com.

  It’s http://www.menorcanvillas.co.uk

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Dec 25, 2012 at 10:12 pm

  • Copy link

  The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. http://en.support.wordpress.com/visual-editor/#alignment They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

  Align-left means position left, with the rest of the content wrapping around the right side of the image.
  Align-right means position right, with the rest of the content wrapping around the left side of the image.
  Align-center means position center, with no wrap-around (= the rest of the content below the image).

  Every theme has a maximum displayed image width http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ so it’s important to keep that in mind when posting multiple images side-by-side. If you want two images to be side by side on the same line start by setting the alignment of both images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
  <p style="clear:both;">TEXT HERE</p>

• 

  menorcanvillas · Member · Dec 25, 2012 at 10:25 pm

  • Copy link

  Hi,
  Thanks so much for the reply. I really appreciate the help.
  The way you explained it makes sense, I guess it’s kind of using up the spaces I’m creating in between photos and text.

  It’s not side by side images I’m having a problem with though, it’s the couple of pages like this one that have them in a list style: http://menorcanvillas.co.uk/the-villas/

  Would the same code work and if so would I just insert it in between each photo?

• 

  timethief · Member · Dec 25, 2012 at 10:38 pm

  • Copy link

  Yes and I am using FF17 and seeing a beautiful properly aligned page at that link. If that’s not what you see then clear your browser cache and cookies. http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=32050

• 

  menorcanvillas · Member · Dec 25, 2012 at 10:41 pm

  • Copy link

  Hi,

  That’s what I see now too but if I click to edit that page it all becomes misaligned, even if I don’t actuallly make any changes. So I insert that bit of code between property details and it should keep them separate?

  I really do appreciate your replies, I’m truly blundering my way through this! :-)

  (Merry Christmas to you too)

• 

  timethief · Member · Dec 25, 2012 at 10:47 pm

  • Copy link

  They are properly separated right now in FF17, Chrome 23 and IE8 – no code required.

• 

  menorcanvillas · Member · Dec 25, 2012 at 10:49 pm

  • Copy link

  I’m not sure why though but I’ve had to realign them about 20 times, I know if I click on the page at all to edit (which I need to do occasionally) I have to realign all over again. Would the code stop them going out of line when I edit?

• 

  timethief · Member · Dec 25, 2012 at 10:55 pm

  • Copy link

  No. What you describe has nothing to do with spacing. It sounds like a browser issue to me.

  If you are not running one of the browsers and versions listed at http://browsehappy.com/ please try upgrading or switching first.

  Note: If you are using an IE9 browser in compatibility mode that makes it render as IE7 and IE7 is not supported. To disable see > http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html

  If you are running one of the browsers and versions listed at http://browsehappy.com please do these four things:

  1. Try clearing your browser’s cache:

  http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=32050

  2. Make sure that you have third-party cookies enabled: http://en.support.wordpress.com/third-party-cookies/

  3. Try with all browser extensions or add-ons temporarily disabled.

  4. Try enabling HTTPS: http://en.support.wordpress.com/https/

  If it’s still happening, let us know exactly which browser (and version of it) you’re using by checking here if necessary http://www.whatbrowser.org/