Wrox Blog editor image question

norman001 · February 22nd, 2009, 12:16 PM

I have a question in Wrox blog code again..

FCKeditorV2:FCKeditor ID="txtBody" runat="server" BasePath="~/FCKeditor/" ToolbarSet="WroxBlog" Width="500px">
</FCKeditorV2:FCKeditor>

When entering text into blogs, the editor allows to add images and nicely link into any location! It also allows to adjust an image where text could be placed under the image, to the left of the image an other bunch of choices.

After querying the data from the database, the blog body text is assign to a label.text to display on the page. But my problem is, no matter how the image is formatted to show text left to the image, it always comes bottom of the image.
Is this something do with label.text or is there a another way to do this?

Thanks for an answer.

Imar · February 22nd, 2009, 12:37 PM

Hi there,

The editor just collects and displays HTML. It's up to the final page to display it correctly. Maybe you have CSS or HTML rules in the final page that mess with the layout? For example, maybe the image doesn't fit in the spot where it's placed and is moved to another location?

What does the final HTML in the browser look like?

Imar

norman001 · February 22nd, 2009, 02:13 PM

Hi Imar,

You are absolutely right! My CSS file is messing up! I have the following in my CSS file.If the image properties are explicitly added within img tag, I don't understand why it is picking up from the CSS file. If I change vertical-align property to "right", the blog picture comes at the correct position. I can't change what is in CSS file as it will impact the whole website. What else I could do here?
img
{
border:0;
vertical-align:middle;
}
The html file for the blog page looks like this..
<p><imgborder="2" hspace="2" vspace="2" align="right" src="http://tbn0.google.com/images?q=tbn:yz7s82kyTJ4DYM:http://www.fs.fed.us/r2/psicc/coma/images/Picture_canyon.jpg" width="130" height="75" alt="" />Testing text from the web... The purpose behind "greeking" is to force your reviewers to ignore the text and just focus on the design elements on the page. Every designer has experienced the review session where the reviewers found 13 typos in the sample text that was used, or decide..</p>.<br/>

Imar · February 22nd, 2009, 02:42 PM

Quote:

I can't change what is in CSS file as it will impact the whole website.

This means you'll have to fight the CSS rules you set in your CSS file somehow.

Consider this:

img
{
vertical-align:middle;
}

Because of the generic selector (img) this applies to ALL images in your site, unless specified otherwise. There are a few ways around this, for example:

1. In-line styles take precedence over the element selector. So this should work (or at least override the previous declaration):

<img src="Tralala.jpg" style="vertical-align: top;" />

2. Be more specific. E.g. create a selector that's more specific than the img selector. For example, if your image is in a <div> with an ID of MainContent you can target the image like this:

#MainContent img
{
vertical-align:top;
}

Finally, you can use !important to overrule previous settings:

img
{
vertical-align:top !important;
}

However, when you add this in the same CSS file as the img selector, you might as well change the original definition.

Hope this helps...

Imar

BTW: you may need to turn your head 90 degrees to make all of this work. There's typically no "right" in a vertical direction.... ;-)

norman001 · February 22nd, 2009, 07:42 PM

Thanks! I got it working by adding the following to CSS file..
Added another div tag wrapping around the blogBody text.. with this..
<div id="MainContent">

#MainContent img
{
border:0;
vertical-align:top;
float:right;
}

Everything works now great!

Imar · February 23rd, 2009, 03:40 AM

You're welcome...

Imar