WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Blank right margin in visual editor (10 posts)

  1. fermars
    Member
    Posted 1 year ago #

    Dear all,

    I have just installed the latest version of wordpress and I have one strange think when I want to add a new post. There is always a blank space on the right side. Please, check this image to understand better.

    http://imageshack.us/a/img222/4817/wordpressvisualmargin.jpg

    I have no plug-in nor external themes.
    Does anyone know how to solve this? It is really annoying...

    Thank you.

  2. kmessinger
    Volunteer Moderator
    Posted 1 year ago #

    Is this only in the dashboard or does it show up on the published post?

    You can use FireBug with FireFox or hit F12 in IE to help find where it is coming from.

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    might be added by the editor-style.css to simulate the size of the content on the front;

    http://codex.wordpress.org/Function_Reference/add_editor_style

  4. fermars
    Member
    Posted 1 year ago #

    Thank you for your answers.
    For your information, I have re-installed WordPress form scratch and again the same problem! It's really rare.

    kmessinger, it is only in the dashboard, when I publish a post the margins are correct. I also tried in Firefox and IE, but it happens the same.

    alchymyth, I have not installed TinyMCE, but in my previous installation I did it with no results.

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I have not installed TinyMCE

    how are you editing your posts?
    generally, the editor is pre-installed.
    editor-style.css has nothing to do with an installed TinyMCE plugin; it is down to your theme to add it or not add it.

    what theme are you using?

    does your theme have an 'editor-style.css' file?

  6. kmessinger
    Volunteer Moderator
    Posted 1 year ago #

    With FireBug or IE's developer tools (I don't know what browser you are using.) you can bring up the editor, open FireBug and see where the space is coming from in the source code. That should help you eliminate it.

  7. fermars
    Member
    Posted 1 year ago #

    I have not installed any plug-in (TinyMCE), but I use the Visual editor by default (pre-installed) that probably is a basic TinyMCE (I didn't know it).

    I am using the "Twenty Eleven" theme, one of the default themes that comes with WordPress, but it happens with any theme I install.

    Here you have the editor-style.css:

    /*
    Theme Name: Twenty Eleven
    Description: Used to style the TinyMCE editor.
    */
    
    html .mceContentBody {
    	max-width: 584px;
    }
    * {
    	color: inherit;
    	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-style: inherit;
    	font-weight: inherit;
    	line-height: 1.625;
    }
    body {
    	color: #333;
    	font: 15px "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;
    	font-weight: 300;
    	line-height: 1.625;
    }
    
    /* Headings */
    h1,h2,h3,h4,h5,h6 {
    	clear: both;
    }
    h1,
    h2 {
    	color: #000;
    	font-size: 15px;
    	font-weight: bold;
    	margin: 0 0 .8125em;
    }
    h3 {
    	font-size: 10px;
    	letter-spacing: 0.1em;
    	line-height: 2.6em;
    	text-transform: uppercase;
    }
    h4, h5, h6 {
    	font-size: 14px;
    	margin: 0;
    }
    hr {
    	background-color: #ccc;
    	border: 0;
    	height: 1px;
    	margin-bottom: 1.625em;
    }
    
    /* Text elements */
    p, ul, ol, dl {
    	font-weight: 300;
    }
    p {
    	margin-bottom: 1.625em;
    }
    ul, ol {
    	margin: 0 0 1.625em 2.5em;
    	padding: 0;
    }
    ul {
    	list-style: square;
    }
    ol {
    	list-style-type: decimal;
    }
    ol ol {
    	list-style: upper-alpha;
    }
    ol ol ol {
    	list-style: lower-roman;
    }
    ol ol ol ol {
    	list-style: lower-alpha;
    }
    ul ul, ol ol, ul ol, ol ul {
    	margin-bottom: 0;
    }
    dl {
    	margin: 0 1.625em;
    }
    dt {
    	font-size: 15px;
    	font-weight: bold;
    }
    dd {
    	margin: 0 0 1.625em;
    }
    strong {
    	font-weight: bold;
    }
    cite, em, i {
    	font-style: italic;
    }
    cite {
    	border: none;
    }
    big {
    	font-size: 131.25%;
    }
    .mceContentBody blockquote,
    .mceContentBody blockquote p {
    	font-family: Georgia, "Bitstream Charter", serif !important;
    	font-style: italic !important;
    	font-weight: normal;
    	margin: 0 3em;
    }
    .mceContentBody blockquote em,
    .mceContentBody blockquote i,
    .mceContentBody blockquote cite {
    	font-style: normal;
    }
    .mceContentBody blockquote cite {
    	color: #666;
    	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-weight: 300;
    	letter-spacing: 0.05em;
    	text-transform: uppercase;
    }
    pre {
    	background: #f4f4f4;
    	font: 13px "Courier 10 Pitch", Courier, monospace;
    	line-height: 1.5;
    	margin-bottom: 1.625em;
    	padding: 0.75em 1.625em;
    }
    code, kbd, samp, var {
    	font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    }
    abbr, acronym, dfn {
    	border-bottom: 1px dotted #666;
    	cursor: help;
    }
    address {
    	display: block;
    	margin: 0 0 1.625em;
    }
    del {
    	color: #333;
    }
    ins {
    	background: #fff9c0;
    	border: none;
    	color: #333;
    	text-decoration: none;
    }
    sup,
    sub {
    	font-size: 10px;
    	height: 0;
    	line-height: 1;
    	position: relative;
    	vertical-align: baseline;
    }
    sup {
    	bottom: 1ex;
    }
    sub {
    	top: .5ex;
    }
    input[type=text],
    textarea {
    	background: #fafafa;
    	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    	border: 1px solid #ddd;
    	color: #888;
    }
    input[type=text]:focus,
    textarea:focus {
    	color: #333;
    }
    textarea {
    	padding-left: 3px;
    	width: 98%;
    }
    input[type=text] {
    	padding: 3px;
    }
    
    /* Links */
    a,
    a em,
    a strong {
    	color: #1b8be0;
    	text-decoration: none;
    }
    a:focus,
    a:active,
    a:hover {
    	text-decoration: underline;
    }
    
    /* Alignment */
    .alignleft {
    	display: inline;
    	float: left;
    	margin-right: 1.625em;
    }
    .alignright {
    	display: inline;
    	float: right;
    	margin-left: 1.625em;
    }
    .aligncenter {
    	clear: both;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    /* Tables */
    table {
    	border: none !important;
    	border-bottom: 1px solid #ddd !important;
    	border-collapse: collapse;
    	border-spacing: 0;
    	text-align: left;
    	margin: 0 0 1.625em;
    	width: 100%;
    }
    tr th {
    	border: none !important;
    	color: #666;
    	font-size: 10px;
    	font-weight: 500;
    	letter-spacing: 0.1em;
    	line-height: 2.6em;
    	text-transform: uppercase;
    }
    td {
    	border: none !important;
    	border-top: 1px solid #ddd !important;
    	padding: 6px 10px 6px 0;
    }
    
    /* Images */
    img[class*="wp-image-"] {
    	height: auto;
    	max-width: 97.5%;
    }
    img.size-full {
    	width: auto; /* Prevent stretching of full-size images in IE8 */
    }
    img.wp-smiley {
    	border: none;
    	margin-bottom: 0;
    	margin-top: 0;
    	padding: 0;
    }
    p img,
    .wp-caption {
    	margin-top: 0.4em;
    }
    img {
    	border: 1px solid #ddd;
    	padding: 6px;
    }
    img.alignleft,
    img.alignright,
    img.aligncenter {
    	margin-bottom: 1.625em;
    }
    .wp-caption {
    	background: #eee;
    	border: none;
    	margin-bottom: 1.625em;
    	max-width: 96%;
    	padding: 9px;
    }
    .wp-caption img {
    	display: block;
    	margin: 5px auto 0 !important;
    	max-width: 98%;
    	border-color: #eee;
    }
    .wp-caption .wp-caption-text,
    .wp-caption-dd {
    	color: #666;
    	font-family: Georgia, serif !important;
    	font-size: 12px;
    	margin: 0 0 0.6em 0 !important;
    	padding: 0 0 5px 40px;
    	position: relative;
    	text-align: left;
    }
    .wp-caption .wp-caption-text:before {
    	color: #666;
    	content: '\2014';
    	font-size: 14px;
    	font-style: normal;
    	font-weight: bold;
    	margin-right: 5px;
    	position: absolute;
    	left: 10px;
    	top: 7px;
    }
    a:focus img[class*="wp-image-"],
    a:hover img[class*="wp-image-"],
    a:active img[class*="wp-image-"] {
    	background: #eee;
    	border-color: #bbb;
    }
    .wp-caption a:focus img,
    .wp-caption a:active img,
    .wp-caption a:hover img {
    	background: #fff;
    	border-color: #ddd;
    }
  8. fermars
    Member
    Posted 1 year ago #

    Thank you kmessinger, I am going to try with Firebug. I didn't know it as well ;-), but it could be very useful.

  9. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this is the section in editor-style.css which restricts the visual editor window width:

    html .mceContentBody {
    	max-width: 584px;
    }

    it happens with any theme I install

    check for each of those themes, if they have an editor-style.css, and if this contains similar styles to the one above.

  10. fermars
    Member
    Posted 1 year ago #

    Yes, with Firebug I discovered that the problem was that 'width' definition. I have changed to 100% in the CSS file and now the margins are ok.
    I have never had this kind of issue with previous versions or installations of WordPress, but some time ago, I change other installation of wordpress from one server to other and I got it. The funny thing is that I solved the problem deactivating and re-activating the Jetpack plug-in.

    Anyway, everything is ok now. Thank you both for your help.

    Regards.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.