JEditorPane HTMLEditorkit Image align left
Hi,
I am developing a HTML Editor with JEditorPane and HTMLEditorKit. Apart from the many other difficulties, the HTMLEditorKit doesn't show a text next to an image correctly. I set an Image alignment to left and hopped, the text would be displayed text to it beginninge at the top. But it doesn't. Can anyone help.
Christian
Hi,
I'm sorry, but this doesn't help me at all. To be more precisely, I want a text placed next to an image. A normal Browser does is when you say something like <img align="left" ...> and just place your text behind this tag. It looks like this:
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
%%%IMAGE%%%% My Text My Text My Text My Text My Text My Text
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
The Problem with the JEditorpane and the HTMLEditorKit is, that it shows up like this:
%%%IMAGE%%%%
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
If I put the alignment to top or something else, I can let it look like this:
%%%%%%%%%% My Text My Text My Text My Text My Text My Text
%%%IMAGE%%%%
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
My Text My Text My Text My Text My Text My Text
But annoyingly I let it show up like in any normal Internet Browser.
Hope my problem is more clearly now and somebody can help me.
Yours sincerely,
Christian
Similar Messages
-
Slideshow vertical hero image aligns left
Using the slideshow widget with a vertical image sometimes results in the hero image randomly aligning to the left instead of centered. All the hero images are positioned in the center of the content area. The slideshow frame is the full width of the content area so that each image slides in from right to left (due to the Horizontal setting for Transition). The Y coordinate is 10 for the slideshow content (and the hero image container). Horizontal images have not shown a shift to the left. Not all vertical images exibit the behaviour (one slideshow with 20 images, 5 of them vertical, had 4 which shifted left, one displayed properly centered).
I have only seen this on my Phone layout, not on the Tablet or Desktop layouts. The problem shows when in Preview mode, Preview Page in Browser and on an iPhone 4s.
NOTE: After further troubleshooting I found something that seems to resolve the issue. If I move the Y coordinate of the image to 11 (slideshow content is at Y: 10) the image stops shifting to the far left and aligns properly to the center. It doesn't make sense, since other horizontal images are set at Y: 10 and even a few pixels taller but have not exibited the problem.I noticed when I add a drop shadow to the hero image in the slide show, the hero image when viewed in browser or preview, then aligns left, when I remove the drop shadow from the hero image, then the content is properly aligned.
-
Hi Adobe Community,
I had this issue on previous versions of Fireworks.
Why is it happening? Is there a glitch in the software? I thought it would be fixed in the CC version..
here is a snippet of code that is exported.
<td><table style="display: inline-table;" align=""left" border="0" cellpadding="0" cellspacing="0" width="810">
Basically where ever there is a align="left" it is exported as align=""left"
This leaves me to do a find and replace to fix the code. Kind of annoying.
Personally I thought this would of been fixed in this version.
Please advise and how to fix this and prevent it from happening.
See screenshots below for my fireworks export settings.
Please help.Anyone out there experience this?
-
Image Align Not Working in Browser
Ok, so i have text and i put some images in there and i set my image align to either left or right or however i need it and it looks fine in dreamweaver, but when i preview it in a browser it isn't right. Does anyone know why this could be? I'm prolly being dumb and just have a slight minor detail wrong so......feel free to slap me if needed....
In code view, you have this at the top of your page:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Which should be this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Remove the JavaScript tag.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
I want my spry horizontal accordian in explorer content table to be closed and also wont align left
I've tried everything. my accordian will stay closed when landing on the page in all browsers except explorer and also I can't get the tab text to align left no matter what I do.
Here is the page http://www.lohud.com/legacy/advertising/mediakit/tjn_content_guide.html
Please help I've been at this for many many hours.
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>The Journal News Media Group</title>
<!-- InstanceEndEditable -->
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image: url(images/backdrop.png);
background-repeat: no-repeat;
background-position:top center;
background-color: #77787B;
.pageLable {
font-family: arial;
font-size: 18pt;
color: #00adf0;
line-height: 25pt;
vertical-align: middle;
padding-top: 10px;
.pageLableTagline {
font-family: arial;
font-size: 18pt;
color: #A7A9AC;
.BlueText {
color: #00adf0 !important;
.descriptionFont {
font-family: arial;
font-size: 10pt;
line-height: 14pt;
.labelSub {
font-family: arial;
font-size: 14px;
color: #00adf0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
.content12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
.fontNinePoint {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
.white {
color: #FFF !important;
</style>
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<style type="text/css">
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
h6 {
font-size: 8px;
color: #000;
h4 {
font-size: 12px;
.fontsmall {
font-size: 9pt;
</style>
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="126" rowspan="3"><a href="index.html"><img src="images/Logo_Nav_Black.jpg" alt="The Journal News Media Group" width="126" height="132" border="0" longdesc="index.html" /></a></td>
<td width="780" height="30" align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="61" height="32" align="right" valign="middle"> </td>
<td width="372" align="right" valign="middle"><a href="http://www.linkedin.com/groups/Journal-News-Media-Group-4828545?trk=myg_ugrp_ovr" target="_new"><img src="images/linkedin.png" alt="linkedin" width="16" height="16" border="0" /></a></td>
<td width="37" align="center" valign="middle"><a href="http://www.facebook.com/pages/The-Journals-News-Media-Group/124999397672489" target="_new"><img src="images/facebook.png" alt="facebook" width="8" height="16" border="0" /></a></td>
<td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong><a href="newsletter.html" class="white">newsletter</a></strong></td>
<td width="24" align="center" valign="middle" class="white" style="font-size:12px"><img src="images/dot.png" alt="" width="9" height="9" /></td>
<td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong> <a href="contact.html" class="white">contact us </a></strong></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="75" bgcolor="#000000"> </td>
<td width="369" bgcolor="#000000"><ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MenuBarItemSubmenu"><a href="#">About</a>
<ul>
<li><a href="our_brand.html">Our Brand</a></li>
<li><a href="our_audience.html">Our Audience</a></li>
<li><a href="giving_back.html">Giving Back</a></li>
<li><a href="careers.html">Careers</a></li>
</ul>
</li>
<li><a href="digital.html" >Digital</a> </li>
<li><a href="#">Print</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Journal News</a>
<ul>
<li><a href="tjn_content_guide.html">Content Guide</a></li>
<li><a href="tjn_print_reach.html">Print Reach</a></li>
</ul>
</li>
<li><a href="special_sections.html">Special Sections</a></li>
<li><a href="creative_ad_units.html">Creative Ad Units</a></li>
<li><a href="zoning_guide.html">Zoning Guide</a></li>
</ul>
</li>
<li><a href="events.html">Events</a>
<ul>
<li><a href="golf_show.html">Golf Show</a></li>
<li><a href="theater_awards.html">Metropolitan High School Theater Awards</a></li>
<li><a href="rockland.html">Rockland Scholar Athlete</a></li>
<li><a href="ray_rice_day.html">Ray Rice Day</a></li>
<li><a href="cookie_swap.html">Cookie Swap</a></li>
<li><a href="give_grow.html">Give & Grow</a></li>
</ul>
</li>
<li><a href="#"> Specs</a>
<ul>
<li><a href="print_specs.html">Print Specs</a></li>
<li><a href="digital_specs.html">Digital Specs</a></li>
<li><a href="deadlines.html">Deadlines</a></li>
<li><a href="terms_conditions.html">Terms & Conditions</a></li>
</ul>
</li>
</ul></td>
</tr>
<tr> </tr>
</table></td>
</tr>
<tr>
<td height="70" align="right" valign="top"> </td>
</tr>
</table>
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40"> </td>
</tr>
</table></td>
</tr>
</table>
<!-- InstanceBeginEditable name="MainTable" -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="300" valign="top" bgcolor="#FFFFFF"><table width="906" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td height="57" align="left" valign="top" class="pageLable">Content Guide <span class="pageLableTagline">lohud.com</span></td>
</tr>
</table> <div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">News</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>The latest headlines, by county, updated continuously to keep readers informed of breaking news as it happens. Here is where they go to first for the latest on issues of particular importance to area residents: crime, politics, business, education, health and New York State news.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and high visibility on one of the most frequently<br />
visited pages on lohud.com.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-news.jpg" alt="News" width="180" height="154" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tax Watch</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="685" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Money and taxes. It’s a passion topic that many area residents have a keen interest in following. Our standing Tax Watch feature on LoHud.com keeps them in-the-know with watchdog columns on government accountability, blogs from local tax experts, timely articles and columns.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal environment for financial, banks, real estate, and business.</td>
<td width="179" align="right"><img src="images/digital/contentguide/lh-taxwatch.jpg" alt="Tax Watch" width="179" height="155" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Communities</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Sixteen ultra-local homepages dedicated to the unique villages, towns and cities of Westchester County, with daily updates, photos and neighborhood conversations designed to involve <br />
and engage readers — and have them returning regularly for updates.<br />
<strong><br />
Advertiser Advantage: </strong>Ideal for smaller advertisers looking to reach their best potential customers<br />
within targeted geographic areas.</td>
<td width="181" align="right"><img src="images/digital/contentguide/lh-community.jpg" alt="Communities" width="179" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Living Here</div>
<div class="AccordionPanelContent">
<table width="865" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="686" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Awarded “First Place Winner/Niche Website” by the 2012 New York Associated Press! Offers an insider’s look at Lower Hudson Valley real estate for residents looking to buy, sell up, downsize or plan a renovation.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal for real estate, financial, and home-related businesses. Provides a locally driven and highly targeted environment for your message.</td>
<td width="179" align="right"><img src="images/digital/contentguide/lh-livinghere.jpg" alt="News" width="179" height="155" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Sports</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and updated frequently to keep fans up to date with the latest action from high school, college, major-league teams. Featuring game results, profiles of local athletes, perspective, commentary and blogs for reader interaction.<br />
<strong><br />
Advertiser Advantage:</strong> Action-packed environment for auto aftermarket, sporting goods, financial,<br />
men’s interests, orthopedic and physical therapy businesses.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-sports.jpg" alt="Sports" width="180" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Blogs</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="683" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Can we talk? We sure can…and readers love to hear what our writers and editors have<br />
to say. Our lively Blogs site is where they can turn to for conversation and opinion on all kinds of <br />
subjects — community, lifestyle & entertainment, news, opinion and sports, including our extremely popular Yankees blog.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
<td width="181" align="right"><img src="images/digital/contentguide/lh-blogs.jpg" alt="News" width="181" height="157" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Multimedia</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> A picture is worth a thousand words and this photo/video gallery keeps readers involved and engaged with compelling local photos from the week and informative feature videos on trending stories.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal for retailers of all kinds, benefit from prime positioning and visibility on<br />
highly targeted pages.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-multimedia.jpg" alt="Multimedia" width="178" height="157" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Life & Leisure</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> The perfect complement to our daily “Life & Style” print section, it’s where readers go to be inspired and entertained! Featuring complete local restaurant and food coverage, weddings/engagement announcements, home & garden tips, movie & TV reviews, music and more.<br />
<strong><br />
Advertiser Advantage:</strong> Ideal weekly environment for restaurants, entertainment and leisure-related<br />
businesses.</td>
<td width="180" align="right"><img src="images/digital/contentguide/lh-lifeleisure.jpg" alt="Life and Leisure" width="180" height="158" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Opinion</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Everybody’s got one — and this is where it counts. Our Opinion page on LoHud.com is just <br />
that: opinions on the issues of the day, from our staff and from our readers, designed to inform, inspire and encourage interaction. Find editorials by our writers and editors, commentary, letters, editorial board surveys and more.<br />
<strong><br />
Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-opinion.jpg" alt="Opinion" width="178" height="156" border="0" /></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Obituaries</div>
<div class="AccordionPanelContent">
<table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and complete, with death notices, memorials, touching tributes and <br />
convenient interactive features such as a search feature, free obituary alerts, one-click access to flowers and services, guest book signing and more.<br />
<strong><br />
Advertiser Advantages:</strong> Ideal environment for funeral homes, estate planners and florists.</td>
<td width="178" align="right"><img src="images/digital/contentguide/lh-obits.jpg" alt="Obituaries" width="178" height="154" border="0" /></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p></td>
</tr>
</table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false, defaultPanel: -1 });
</script>
<!-- InstanceEndEditable -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="19" align="center" valign="middle" bgcolor="#77307d" class="white" style="font-size:12px"> <a href="contact.html"><img src="images/contactAnAdvert.png" alt="Contact an advertising expert" width="336" height="18" border="0" /></a></td>
</tr>
<tr>
<td height="19" align="center" valign="middle" class="white" style="font-size:12px"><p><br />
1133 Westchester Avenue, Suite N-110, White Plains, NY 10604 <img src="images/dot.png" width="9" height="9" alt="dot" /> P: 914-694-5500</p>
<p> </p>
<p><a href="http://www.gannett.com/" target="_new"><img src="images/Gannett.png" alt="Gannett" width="130" height="18" border="0" /></a><br />
<br />
Copyright © 2013<a href="http://www.lohud.com/" target="_new" class="white"> www.lohud.com</a>. All rights reserved.<br />
Users of this site agree to the <a href="http://www.lohud.com/section/terms" target="_new" class="white">Terms of Service</a>, <a href="http://www.lohud.com/section/privacy" target="_new" class="white">Privacy Notice/Your California Privacy Rights</a>, and <a href="http://www.lohud.com/section/privacy#adchoices><http://www.lohud.com/section/privacy #adchoices" target="_new" class="white">Ad Choices</a> <br />
</p></td>
</tr>
</table>
<p> </p>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> </tr>
</table>
<p> </p>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>It just wont align left ......This is my style sheet
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
.Accordion {
overflow: hidden;
outline:none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align: left;
.AccordionPanel {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-align: left;
padding-left: 10px;
color: #000000;
background-color: #c0dff5;
border-bottom-width: 6px;
border-bottom-style: solid;
border-bottom-color: #FFF;
text-indent: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
outline:none
margin: 0px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding-left: 10px;
padding-right: 10px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: c0dff5;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #999999;
background-color: c0dff5;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: left;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
.AccordionPanelOpen
.AccordionPanelTab {
background-color: c0dff5;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
font-size: 12pt;
padding-left: 10px;
padding-right: 10px; -
FM10/DITA - buggy image alignment?
Hi all,
when I insert an image element in FM10/DITA structure and then modify the alignment property (e.g. to "right") using the structure window, then this setting is indicated correctly in the structure window but is not really applied and is also ignored when the file is saved. In the saved file, this property is still set to "center".
On the other hand, if I use the anchored frame dialog of FM and set the alignment to right, then this is not shown in the structure window but applied correctly to the image and also saved in the xml code.
Is this a bug or a feature? It seems you should be able to modify this property over the structure window.Robert,
FrameMaker 10 enables the mapping between the alignment property and the DITA image attribute @align.
For the application(default FM structured application or any DITA specialization) that you are using please make sure that the Read Write rule that is being used has the following rule:
attribute "align" {
is fm attribute "align";
is fm property alignment;
value "left" is fm property value align left;
From the problem that you describe it appears that the rule in the application being used does not have the following line-
is fm attribute "align";
that establishes that mapping. Please make that change in the Read Write rules of the DITA application in use. That should solve the problem. Also the DITA document, Structure View and the Attribute editor would reflect the change made.
Please let us know if you still don't see the intended behavior.
-Nakshatra -
How to drag image in left panel then drop into right panel??
Dear friends.
I have following code, it is runnable, just add two jpg image files is ok, to run.
I tried few days to drag image from left panel then drop into right panel or vice versa, but not success, can any GUI guru help??
Thanks.
Sunny
[1]. main code/calling code:
import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class ImagePanelCall extends JComponent {
public JSplitPane ImagePanelCall() {
setPreferredSize(new Dimension(1200,300));
JSplitPane sp = new JSplitPane();
sp.setPreferredSize(new Dimension(1200,600));
sp.setOrientation(JSplitPane.HORIZONTAL_SPLIT);
add(sp);
ImagePanel ip = new ImagePanel();
ImagePanel ip1 = new ImagePanel();
ip.setPreferredSize(new Dimension(600,300));
ip1.setPreferredSize(new Dimension(600,300));
sp.setLeftComponent(ip);// add left part
sp.setRightComponent(ip1);// add right part
sp.setVisible(true);
return sp;
public static void main(String[] args) {
JFrame frame = new JFrame("Test transformable images");
ImagePanelCall ic = new ImagePanelCall();
frame.setPreferredSize(new Dimension(1200,600));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(ic.ImagePanelCall(), BorderLayout.CENTER);
frame.pack();
frame.setVisible(true);
}[2]. code 2
import java.util.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class ImagePanel extends JComponent {
private static final Cursor DEFAULT_CURSOR = new Cursor(Cursor.DEFAULT_CURSOR);
private static final Cursor MOVE_CURSOR = new Cursor(Cursor.MOVE_CURSOR);
private static final Cursor VERTICAL_RESIZE_CURSOR = new Cursor(Cursor.N_RESIZE_CURSOR);
private static final Cursor HORIZONTAL_RESIZE_CURSOR = new Cursor(Cursor.W_RESIZE_CURSOR);
private static final Cursor NW_SE_RESIZE_CURSOR = new Cursor(Cursor.NW_RESIZE_CURSOR);
private static final Cursor NE_SW_RESIZE_CURSOR = new Cursor(Cursor.NE_RESIZE_CURSOR);
public Vector images;
* Create an ImagePanel with two images in.
* A MouseHandler instance is added as mouse listener and mouse motion listener.
public ImagePanel() {
images = new Vector();
images.add(new TransformableImage("swing/dnd/Bird.gif"));
images.add(new TransformableImage("swing/dnd/Cat.gif"));
setPreferredSize(new Dimension(600,600));
MouseHandler mh = new MouseHandler();
addMouseListener(mh);
addMouseMotionListener(mh);
* Simply paint all the images contained in the Vector images, calling their method draw(Graphics2D, ImageObserver).
public void paintComponent(Graphics g) {
Graphics2D g2D = (Graphics2D)g;
for (int i = images.size()-1; i>=0; i--) {
((TransformableImage)images.get(i)).draw(g2D, this);
* Inner class defining the behavior of the mouse.
final class MouseHandler extends MouseInputAdapter {
private TransformableImage draggedImage;
private int transformation;
private int dx, dy;
public void mouseMoved(MouseEvent e) {
Point p = e.getPoint();
TransformableImage image = getImageAt(p);
if (image != null) {
transformation = image.getTransformation(p);
setConvenientCursor(transformation);
else {
setConvenientCursor(-1);
public void mousePressed(MouseEvent e) {
Point p = e.getPoint();
draggedImage = getImageAt(p);
if (draggedImage!=null) {
dx = p.x-draggedImage.x;
dy = p.y-draggedImage.y;
public void mouseDragged(MouseEvent e) {
if (draggedImage==null) {
return;
Point p = e.getPoint();
repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
draggedImage.transform(p, transformation,dx,dy);
repaint(draggedImage.x,draggedImage.y,draggedImage.width+1,draggedImage.height+1);
public void mouseReleased(MouseEvent e) {
Point p = e.getPoint();
draggedImage = null;
* Utility method used to get the image located at a Point p.
* Returns null if there is no image at this point.
private final TransformableImage getImageAt(Point p) {
TransformableImage image = null;
for (int i = 0, n = images.size(); i<n; i++) {
image = (TransformableImage)images.get(i);
if (image.contains(p)) {
return(image);
return(null);
* Sets the convenient cursor according the the transformation (i.e. the position of the mouse over the image).
private final void setConvenientCursor(int transfo) {
Cursor currentCursor = getCursor();
Cursor newCursor = null;
switch (transfo) {
case TransformableImage.MOVE : newCursor = MOVE_CURSOR;
break;
case TransformableImage.RESIZE_TOP : newCursor = VERTICAL_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_BOTTOM : newCursor = VERTICAL_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_LEFT : newCursor = HORIZONTAL_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_RIGHT : newCursor = HORIZONTAL_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_TOP_LEFT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_TOP_RIGHT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_BOTTOM_LEFT_CORNER : newCursor = NE_SW_RESIZE_CURSOR;
break;
case TransformableImage.RESIZE_BOTTOM_RIGHT_CORNER : newCursor = NW_SE_RESIZE_CURSOR;
break;
default : newCursor = DEFAULT_CURSOR;
if (newCursor != null && currentCursor != newCursor) {
setCursor(newCursor);
public static void main(String[] args) {
JFrame frame = new JFrame("Test transformable images");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(new ImagePanel(), BorderLayout.CENTER);
frame.pack();
frame.setVisible(true);
}[3]. code 3
import java.awt.*;
import javax.swing.*;
import java.awt.image.*;
public final class TransformableImage extends Rectangle {
public static final int MOVE = 0;
public static final int RESIZE_TOP = 10;
public static final int RESIZE_BOTTOM = 20;
public static final int RESIZE_RIGHT = 1;
public static final int RESIZE_LEFT = 2;
public static final int RESIZE_TOP_RIGHT_CORNER = 11;
public static final int RESIZE_TOP_LEFT_CORNER = 12;
public static final int RESIZE_BOTTOM_RIGHT_CORNER = 21;
public static final int RESIZE_BOTTOM_LEFT_CORNER = 22;
public static final int BORDER_THICKNESS = 5;
public static final int MIN_THICKNESS = BORDER_THICKNESS*2;
private static final Color borderColor = Color.black;
private Image image;
* Create an TransformableImage from the image file filename.
* The TransformableImage bounds (inherited from the class Rectangle) are setted to the corresponding values.
public TransformableImage(String filename) {
ImageIcon ic = new ImageIcon(filename);
image = ic.getImage();
setBounds(0,0,ic.getIconWidth(), ic.getIconHeight());
* Draw the image rescaled to fit the bounds.
* A black rectangle is drawn around the image.
public final void draw(Graphics2D g, ImageObserver observer) {
Color oldColor = g.getColor();
g.setColor(borderColor);
g.drawImage(image, x, y, width, height, observer);
g.draw(this);
g.setColor(oldColor);
* Return an int corresponding to the transformation available according to the mouse location on the image.
* If the point p is in the border, with a thickness of BORDER_THICKNESS, around the image, the corresponding
* transformation is returned (RESIZE_TOP, ..., RESIZE_BOTTOM_LEFT_CORNER).
* If the point p is located in the center of the image (i.e. out of the border), the MOVE transformation is returned.
* We allways suppose that p is contained in the image bounds.
public final int getTransformation(Point p) {
int px = p.x;
int py = p.y;
int transformation = 0;
if (py<(y+BORDER_THICKNESS)) {
transformation += RESIZE_TOP;
else
if (py>(y+height-BORDER_THICKNESS-1)) {
transformation += RESIZE_BOTTOM;
if (px<(x+BORDER_THICKNESS)) {
transformation += RESIZE_LEFT;
else
if (px>(x+width-BORDER_THICKNESS-1)) {
transformation += RESIZE_RIGHT;
return(transformation);
* Move the left side of the image, verifying that the width is > to the MIN_THICKNESS.
public final void moveX1(int px) {
int x1 = x+width;
if (px>x1-MIN_THICKNESS) {
x = x1-MIN_THICKNESS;
width = MIN_THICKNESS;
else {
width += (x-px);
x = px;
* Move the right side of the image, verifying that the width is > to the MIN_THICKNESS.
public final void moveX2(int px) {
width = px-x;
if (width<MIN_THICKNESS) {
width = MIN_THICKNESS;
* Move the top side of the image, verifying that the height is > to the MIN_THICKNESS.
public final void moveY1(int py) {
int y1 = y+height;
if (py>y1-MIN_THICKNESS) {
y = y1-MIN_THICKNESS;
height = MIN_THICKNESS;
else {
height += (y-py);
y = py;
* Move the bottom side of the image, verifying that the height is > to the MIN_THICKNESS.
public final void moveY2(int py) {
height = py-y;
if (height<MIN_THICKNESS) {
height = MIN_THICKNESS;
* Apply a given transformation with the given Point to the image.
* The shift values dx and dy are needed for move tho locate the image at the same relative position from the cursor (p).
public final void transform(Point p, int transformationType, int dx, int dy) {
int px = p.x;
int py = p.y;
switch (transformationType) {
case MOVE : x = px-dx; y = py-dy;
break;
case RESIZE_TOP : moveY1(py);
break;
case RESIZE_BOTTOM : moveY2(py);
break;
case RESIZE_LEFT : moveX1(px);
break;
case RESIZE_RIGHT : moveX2(px);
break;
case RESIZE_TOP_LEFT_CORNER : moveX1(px);moveY1(py);
break;
case RESIZE_TOP_RIGHT_CORNER : moveX2(px);moveY1(py);
break;
case RESIZE_BOTTOM_LEFT_CORNER : moveX1(px);moveY2(py);
break;
case RESIZE_BOTTOM_RIGHT_CORNER : moveX2(px);moveY2(py);
break;
default :
}I gave you a simple solution in your other posting. You never responded to the suggestion stating why the given solution wouldn't work, so it can't be that urgent.
-
Can HTML emails be aligned left instead of center?
Is it possible to tell Apple Mail to align HTML emails to the left instead of center? All Text emails are aligned to the left and most HTML are aligned center (which gives a lot of empty space to the left on a wide display). However, some HTML emails are aligned left. I wonder what determines this and how it can be affected?
It's not really controlled by the sender either. There is no guarantee that html will render any particular way. Use pdf is appearance is important.
-
Hi,
I want to align the rows in the tables of input_form, master_details, search (creteria) left. the prompt is align right and the and the inputfield left. I just want them to be aligned left.
hope to hear from you soon.try setting the styleClass attribute on the
messageTextInput and changing the alignment via css. -
Having a image alignment problem using clearbox
Hi,
I'm having an image alignment problem. I cannot figure it out. I'm using the clearbox - lightbox dreamweaver widget. Using Dreamweaver CS6.
Actual page located here. Any help would be appreciated.
http://dirtysouthink.com/gallery/dustin2.htmlThis has very little to do with Dreamweaver. DW is merely a tool to assist you in building a web site. It is purely a matter of styling (CSS).
When I look at the structure, I see
BODY-CONTENT (width: 490px)
GALLERY (width: 452px)
CONTAINER (width: 500px)
ITEM (width: 150px)
From this I can deduce that:
GALLERY will fit inside BODY-CONTENT
CONTAINER will NOT fit inside GALLERY or BODY-CONTENT
ITEM will fit three times into CONTAINER
To start with, I would reduce the size of the CONTAINER so that it fits inside of its parent. Then I would adjust the width of the ITEM so that only two of them fit inside of the CONTAINER. -
Align Left Keyboard Shortcut Not Working
Align Left Keyboard Shortcut on a Mac (command-shift-L) does not work on InDesign CC 9.1 and use to work on InDesign CS6.
Align Right (command-shift-R) works fine.
Does anybody know how to fix this?Open System Preferences > Keyboard > Shortcuts > Services and uncheck Search with Google. This setting is capturing your keyboard shortcut.
-
Preview image aligns to right!
please help! (how dramatic) - my preview image aligns to the right, and I can't do nothing with it!
I have a single monitor, and the options for the second one is grayed out but says "secondary viewer - desktop". I don't know if that's the problem, or something else.
the viewer also set to "show one".
how can I revert it to be aligned to center?
please, any suggestions?anyone?!
reinstalled aperture, but still aperture thinks I have another monitor / viewer, but won't let me change how it's used, as it grayed out.
is there a way to completely remove all aperture prefs. and reinstall cleaner? after last reinstall the welcome splash screen doesnt show, as I previously marked it not to show, meaning the re installation wasn't clean and there were leftover data. how can I clean up all the data regarding aperture?
anything? -
Justify with last line aligned left - Problem
I have a problem with the formatation of my text in indesign. Even though i have chosen "Justify with last line aligned left" Indesign justifies all lines exept in one paragraph. Is there someone of you who have had the same problem?
Sincerly
Simon MogrenI'm not seeing the invisibles, and you highlighted more than I asked for, but it actually does seem to confirm Harbs' soft return theory since some of theose spaces between "paragraphs" are actually empty lines of some sort.
Sof t returns, or forced line breaks, are entered by hitting Shift + Enter. They can be useful for controlling styling, among other things, precisely because they don't create a new paragraph. Because there is no new paragraph created after the soft return, the line contaning it is not a last line in the paragraph and doesn't obey the last line formatting in justified text. -
Mobile Website Aligning Left (Cut off)
How do I fix my website which is aligning left and cutting off in the "mobile version"? I've tried some of the suggestions made by the community, there is no empty boxes hanging around in any layers, however the content does go past the page width as I'd like those boxes to scale full screen. If I should be doing it another way any ideas?
Website www.cousinsgravel.caThe Moderators of this forum may be able to help. If you want to contact them they are a UK based BT team This is a link to them
http://bt.custhelp.com/app/contact_email/c/4951
They can take up to 3 days to reply but the have a good record of sorting problems out. -
caption align="left" for table not working in browser
Hi,
I am using Dreamweaver CS6. I have placed two tables on my page and am using <caption align="left"> to left-justify the captions. This looks fine in Design View, but when I bring the page up in a browser, the captions are still centered. I have tested this in I.E. 9 and Chrome, which are the only two browsers I have installed, and the result is the same in both.
Any ideas? I am fairly new to Dreamweaver, and have taken classes in basic Dreamweaver and HTML/CSS. I have searched online help, and could find nothing about this issue.
TIA!
DeniseNot meaning to beat a dead horse but I want to assure you that the <hr> or <hr /> tag is NOT deprecated in HTML or XHTML doc types.
However, the HTML attributes for it: align, noshade, size and width are all deprecated in HTML 4.01 and not supported in HTML5. This is why you must use CSS to style it.
As for IE not displaying correctly, something else is amiss in your code.
As an example, this code has no errors & tests fine in IE7, 8, 9, current Chrome, Opera & Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HR Test</title>
<style type="text/css">
hr {
color: #900;
background-color:#900;
height: 1px;
width: 75%;
border: none;
margin-top: 20px;
</style>
</head>
<body>
<h3>Horizontal Rule styled with CSS</h3>
<hr />
</body>
</html>
Nancy O.
Maybe you are looking for
-
When in Mail, how do I change default to make it go DOWN to the next email and not up!?
After selecting an email, if I hit DELETE to remove it, the cursor goes UP to the next email instead of DOWN. How do I change this?
-
Zen 2.0 - Inventory & New Compaq Deskpros
I got Zen 2.0. We recently got a batch of Compaq Deskpro EN's in and I am finding that inventory is not working. The last batch of Compaq Deskpro EN's we got 4 years ago didnt have problems. Are there any TID's that might yield some information regar
-
SSL connection works through terminal and Firefox only
I have issue with SSL connection. It works through terminal and Firefox only. Everything else requiring SSL is down including App Store. I can't fix the problem by updating software, nor reinstalling as softwareupdate and hdiutil mount patch you via
-
I have tried to install the Forms 6i Demos but am not having much success!! Would anyony out there be able to email me the objects supplied? In particular I would like the stndrd20.fmb/mmb/pll. Thanks in advance.
-
Incoming Payments separate columns for differents currencies
Hi everybody I am modifing this query in order to have an incoming payment report, but we want each currency in one column. For example Checks in USD in one column and checks in other currency in a separate column. Same for cash and transfers. Right