Vertically aligning a small icon with text

[amakeler]

Hi all,I have designed a 'alert' box for my documents. The 'alert' can be 'Note', 'Important', 'See this' , or similar. I assume you all get the picture.The 'alert' box is not a table (purist - that I am...). It is from two 'sections': a header line and subsequent body lines.The header line contains the 'alert' tag text, e.g., "Note" and also, to the right, is an appropriate small icon. The trouble is that the icon is a little higher -- about a millimeter -- than I want it.How can I lower the icon a bit? Alternatively, how can I raise the "Note" text a bit?TIS, - avi

[jeffman]

As always, we can help best if you post the relevant HTML and CSS. It is possible we will suggest a different structure for this item.

[ShadowMage]

As always, we can help best if you post the relevant HTML and CSS. It is possible we will suggest a different structure for this item.

Right, that's the best way to get help.Without seeing the code, the only thing I can really think of is to make sure that the line height property is set the same for the text and the icon.

[Ingolme]

You can most likely assign "vertical-align: middle" to the image (not to the text or the container) and you'll probably get the effect you want.

[amakeler]

As always, we can help best if you post the relevant HTML and CSS. It is possible we will suggest a different structure for this item.

Thanks. See below for:1. HTML/CSS2. Full CSS file1. HTML/CSS

/*Created with Adobe RoboHelp.*//*Created with Adobe RoboHelp.*//*Created with Adobe RoboHelp.*//*Created with Adobe RoboHelp.*//*Created with Adobe RoboHelp.*//* TIS */body {	background-color: #f6f6f6;}/* #fafafa  */H1 {	color: #aa0000;	background-color: #DDDDDD;	padding-top: 9pt;	padding-bottom: 9pt;	padding-left: 9pt;	margin-bottom: 20pt;	font-family: "Arial ";}/* #fafafa  */LI.H1 {	color: #aa0000;	font-family: "Arial ";}P.Heading1_Online {	color: #aa0000;	background-color: #DDDDDD;	padding-top: 9pt;	padding-bottom: 9pt;	padding-left: 9pt;	margin-bottom: 20pt;	font-family: "Arial ";	font-size: 22pt;	font-weight: bold;}LI.P-Heading1_Online {	color: #aa0000;	font-family: "Arial ";	font-size: 22pt;	font-weight: bold;}H2 {	font-weight: bold;	color: #AA0000;	direction: ltr;	margin-top: 20pt;	margin-bottom: 12pt;	font-family: Arial, sans-serif;	x-next-class: BodyText;	x-next-type: P;	font-size: 16pt;}LI.H2 {	font-weight: bold;	color: #AA0000;	direction: ltr;	font-family: Arial, sans-serif;	font-size: 16pt;}P.Heading2_Online {	font-weight: bold;	color: #AA0000;	direction: ltr;	margin-top: 20pt;	margin-bottom: 12pt;	font-family: Arial, sans-serif;	x-next-class: BodyText;	x-next-type: P;	font-size: 17pt;}LI.P-Heading2_Online {	font-weight: bold;	color: #AA0000;	direction: ltr;	font-family: Arial, sans-serif;	font-size: 17pt;}H3 {	font-weight: bold;	font-size: 14.0pt;	color: #AA0000;	padding-top: 15pt;	padding-bottom: 3pt;	font-family: Arial, sans-serif;	margin-bottom: 9.5pt;}LI.H3 {	font-weight: bold;	font-size: 14.0pt;	color: #AA0000;	font-family: Arial, sans-serif;}P.Heading3_Online {	font-weight: bold;	font-size: 14.0pt;	color: #AA0000;	padding-top: 15pt;	padding-bottom: 3pt;	font-family: Arial, sans-serif;	margin-bottom: 9.5pt;}LI.P-Heading3_Online {	font-weight: bold;	font-size: 14.0pt;	color: #AA0000;	font-family: Arial, sans-serif;}H4 {	font-family: Arial, sans-serif;	font-weight: bold;	font-size: 12.0pt;	color: #AA0000;}LI.H4 {	font-family: Arial, sans-serif;	font-weight: bold;	font-size: 12.0pt;	color: #AA0000;}P.Heading4_Online {	font-family: Arial, sans-serif;	font-weight: bold;	font-size: 12.0pt;	color: #AA0000;}LI.P-Heading4_Online {	font-family: Arial, sans-serif;	font-weight: bold;	font-size: 12.0pt;	color: #AA0000;}H5 {	font-weight: bold;	font-size: 10.0pt;}LI.H5 {	font-weight: bold;	font-size: 10.0pt;}H6 {	font-weight: bold;	font-size: 8.0pt;}LI.H6 {	font-weight: bold;	font-size: 8.0pt;}A.expandspot {	color: #008000;	cursor: hand;	font-style: italic;	text-decoration: none;}SPAN.expandtext {	font-style: italic;	font-weight: normal;	color: #ff0000;}SPAN.emph_bigncolor {	font-size: 11pt;	color: #aa0000;}A.dropspot {	cursor: hand;	color: #008000;	font-style: italic;	text-decoration: none;}A.glossterm {	color: #800000;	cursor: hand;	font-style: italic;	text-decoration: none;}SPAN.glosstext {	font-style: italic;	font-weight: normal;	color: #0000ff;}P,P.BodyText,LI.List_Item_L1,LI.List_Item_L2,P.List_Item_L1,P.List_Item_L2,LI.P-BodyText,LI.P-List_Item_L1,LI.P-List_Item_L2,LI.List_Continue,P.List_Continue {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;}LI.P,LI.P-BodyText,LI.P-List_Item_L1,LI.P-List_Item_L2,LI.P-List_Continue {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;}OL.decimal {	list-style-type: decimal;}OL.lroman {	list-style-type: lower-roman;}UL.disc {	list-style-type: disc;}UL.circle {	list-style-type: circle;}UL.alert_disc {	list-style-type: disc;	list-style-position: inside;}.Table_Text,.Table_Text_Heading {	margin: 4.5pt;	margin-left: 0pt;	margin-top: 2pt;	font-family: Arial;	font-size: 10pt;}.Table_Text_Heading {	font-weight: bold;}P.Table_Text_Center {	font-weight: normal;	text-align: Center;	font-size: 9pt;	margin-top: 4.5pt;}LI.P-Table_Text_Center {	font-weight: normal;	text-align: Center;	font-size: 9pt;}P.Table_Text_Heading_Center {	font-weight: bold;	font-style: normal;	text-align: Center;	background-color: Transparent;	margin-top: 0pt;	margin-bottom: 0pt;}LI.P-Table_Text_Heading_Center {	font-weight: bold;	font-style: normal;	text-align: Center;}P.Figure {	font-family: Arial;	font-size: 10pt;	font-style: normal;	margin: 6pt 0pt 18pt 0.25cm;	margin-top: 1.5pt;	margin-bottom: 0pt;}LI.P-Figure {	font-family: Arial;	font-size: 10pt;	font-style: normal;}P.Figure_Indent {	margin: 6pt 0pt 18pt 2.5cm;	margin-left: 0.75cm;}LI.P-Figure_Indent {}P.FigureCaption {	font-family: Arial;	font-size: 9pt;	font-style: normal;	font-weight: bold;	margin: 6pt 0pt 18pt 1cm;	margin-bottom: 13.5pt;	margin-top: 10.5pt;}LI.P-FigureCaption {	font-family: Arial;	font-size: 9pt;	font-style: normal;	font-weight: bold;}p.Table_Text {	font-weight: normal;	font-size: 9pt;}LI.p-Table_Text {	font-weight: normal;	font-size: 9pt;}SPAN.GUI_Item_c {	font-weight: bold;}SPAN.Code_c {	font-weight: normal;	font-family: "Courier New", Courier, monospace;	font-size: 9.5pt;}SPAN.Name_gen_c {	letter-spacing: 1.5pt;}SPAN.Gray_text_c {	color: #595959;}TABLE.Alert {	text-align: left;	border: 1px solid #FFCACA;	border-collapse: collapse;	border-spacing: 0px;	margin: 12pt 0 12pt 0;}P.Alert_Heading,P.Alert_Heading_css {	font-family: Arial;	font-size: 12pt;}LI.P-Alert_Heading,LI.P-Alert_Heading_css {	font-family: Arial;	font-size: 12pt;}P.Alert_Text,P.Alert_Text_css,P.CodeBox_Heading_css,P.CodeBox_Text_css,LI.P-Alert_Heading,LI.P-Alert_Heading_css,LI.P-Alert_Text,LI.P-Alert_Text_css,LI.P-CodeBox_Heading_css,LI.P-CodeBox_Text_css {	font-family: Arial;	font-size: 10pt;}P.Alert_Heading {	border: medium none #E8E8E8;	background-color: #E8E8E8;	font-weight: bold;	color: #AA0000;}LI.P-Alert_Heading {	font-weight: bold;	color: #AA0000;}/*padding: 0pt 0pt 0pt 0pt;*/P.Alert_Heading_css {	font-family: Arial;	font-weight: bold;	font-size: 11pt;	border: 1px solid #D3D3D3;	padding: 3pt 6pt 3pt 6pt;	margin: 12pt 0pt 0pt 0pt;	background-color: #E8E8E8;	color: #AA0000;}/*padding: 0pt 0pt 0pt 0pt;*/LI.P-Alert_Heading_css {	font-family: Arial;	font-weight: bold;	font-size: 11pt;	color: #AA0000;}LI.P-Alert_Text_css,P.Alert_Text_css {	border-style: solid;	border-width: 0px 1px 1px 1px;	border-color: #CFCFCF;	padding: 8pt;	margin: 0pt 0pt 12pt 0pt;	background-color: #eeeeee;}P.CodeBox_Heading_css,P.CodeBox_Text_top,P.CodeBox_Text_mid,P.CodeBox_Text_bot,P.CodeBox_Text_lone {	border: 1px solid #AAAAAA;}LI.P-CodeBox_Heading_css,LI.P-CodeBox_Text_top,LI.P-CodeBox_Text_mid,LI.P-CodeBox_Text_bot,LI.P-CodeBox_Text_lone {}P.CodeBox_Heading_css {	font-family: Tahoma;	border-width: 1px 1px 0px 1px;	margin: 0pt;	background-color: #E0F0F0;	font-weight: bold;	color: #000000;	padding: 3pt 6pt 3pt 6pt;	margin: 0pt 0pt 0pt 0pt;	font-size: 9pt;}LI.P-CodeBox_Heading_css {	font-family: Tahoma;	font-weight: bold;	color: #000000;	font-size: 9pt;}P.CodeBox_Text_top,P.CodeBox_Text_mid,P.CodeBox_Text_bot,P.CodeBox_Text_lone {	font-family: "Courier New";	font-size: 8pt;	margin: 0pt;	background-color: #EFF5FD;}LI.P-CodeBox_Text_top,LI.P-CodeBox_Text_mid,LI.P-CodeBox_Text_bot,LI.P-CodeBox_Text_lone {	font-family: "Courier New";	font-size: 8pt;}P.CodeBox_Text_top {	padding: 6pt 6pt 0pt 6pt;	margin-top: 0pt;	border-width: 1px 1px 0px 1px;	x-next-class: CodeBox_Text_mid;	x-next-type: P;}LI.P-CodeBox_Text_top {}P.CodeBox_Text_mid {	padding: 0pt 0pt 0pt 6pt;	border-width: 0px 1px 0px 1px;}LI.P-CodeBox_Text_mid {}P.CodeBox_Text_bot {	padding: 0pt 0pt 6pt 6pt;	border-width: 0px 1px 1px 1px;	x-next-class: ;	x-next-type: P;	margin-bottom: 12pt;}LI.P-CodeBox_Text_bot {}P.CodeBox_Text_lone {	padding: 6pt 6pt 6pt 6pt;	border-width: 1px 1px 1px 1px;	x-next-class: ;	x-next-type: P;	margin-top: 0pt;	margin-bottom: 12pt;}LI.P-CodeBox_Text_lone {}LI.P-Alert_Heading,LI.P-Alert_Text {	font-family: Arial;	font-size: 10pt;}LI.P-Alert_Text {	border-style: solid;	border-width: 0px 1px 1px 1px;	border-color: #FFCACA;	padding: 3pt 6pt 3pt 6pt;	margin: 0pt 0pt 12pt 0pt;}LI.Alert_ListItem {	padding-right: 4.5mm;	padding-left: 4.5mm;	margin-left: 1.5mm;}TH.Alert_Heading_Cell {	font-weight: bold;	text-align: left;	color: #AA0000;	background-color: #FFDDDD;	border-style: solid;	border-width: 0px 0px 1px 0px;	border-color: #FFCACA;	padding: 3pt 6pt 3pt 6pt;}TD.Alert_Text_Cell {	background-color: #FFF2F2;	text-align: left;	x: "padding:" 3pt 6pt 3pt 6pt;	margin-top: 0pt;	margin-bottom: 0pt;}p.inlist {	margin-top: 0;	top: 5px;}LI.p-inlist {}p.inlist2 {	position: relative;	left: -1.55cm;	margin-top: 12pt;}LI.p-inlist2 {}/* General Tables */TABLE.table-colored {	border: 3px #c0c0c0 solid;	table-layout: fixed;	font-family: Arial, Helvetica, sans-serif;	font-size: 10pt;	border-collapse: collapse;	x-cell-content-align: middle;	width: 100%;	border-spacing: 0px;	width=100%: ;}TD {	padding: 3pt 6pt 3pt 6pt;}P.Copyright {	text-align: center;	font-size: 8pt;	color: #808080;	margin-top: 36pt;	font-style: italic;	font-weight: normal;}LI.P-Copyright {	text-align: center;	font-size: 8pt;	color: #808080;	font-style: italic;	font-weight: normal;}P.Paragraph_Header {	font-weight: bold;	font-size: 10.0pt;	margin-top: 20pt;	x-next-class: BodyText;	x-next-type: P;}LI.P-Paragraph_Header {	font-weight: bold;	font-size: 10.0pt;}SPAN.Style1 {	letter-spacing: 1pt;}P {	font-size: 10pt;	font-family: Arial, sans-serif;}LI.P {	font-size: 10pt;	font-family: Arial, sans-serif;}P.Body_tzafuf {	font-weight: normal;	margin-top: 0pt;	margin-bottom: 0pt;}LI.P-Body_tzafuf {	font-weight: normal;}OL,UL {	margin-top: 0pt;	margin-bottom: 0pt;}P.Style2 {}LI.P-Style2 {}P.FigureCenter {	text-align: Center;	margin-top: 0pt;	margin-bottom: 80pt;}LI.P-FigureCenter {	text-align: Center;}P.TestS {}LI.P-TestS {}m_BtnSetRotatePageRightActive {}P.Spacer {	margin-top: 0pt;	margin-bottom: 0pt;}LI.P-Spacer {}SPAN.Question {	font-size: 10pt;	font-weight: bold;	font-style: normal;	font-family: Arial, sans-serif;	background-color: #ffeaea;	color: #a60000;}P.TableCaption {	font-family: Arial;	font-size: 9pt;	font-style: normal;	font-weight: bold;	margin: 6pt 0pt 18pt 1cm;	margin-left: 0px;	margin-bottom: 7.5pt;	margin-top: 23pt;}LI.P-TableCaption {	font-family: Arial;	font-size: 9pt;	font-style: normal;	font-weight: bold;}P.List_Item_L1 {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	margin-bottom: 4.5pt;	margin-top: 4.5pt;}LI.P-List_Item_L1 {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;}P.List_Continue {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	margin-bottom: 6pt;	margin-top: 0pt;}LI.P-List_Continue {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;}SPAN.QuestionedText {	background-color: #ffe8e8;}SPAN.Bodytext_ch {	font-size: 10pt;	font-family: Arial, sans-serif;}SPAN.Style3 {}P.Style4 {	font-weight: bold;	font-style: normal;	text-align: Center;	background-color: Transparent;	margin-top: 0pt;	margin-bottom: 0pt;}LI.P-Style4 {	font-weight: bold;	font-style: normal;	text-align: Center;}P.Table_Text_Heading_Left {	font-weight: bold;	font-style: normal;	background-color: Transparent;	margin-top: 0pt;	margin-bottom: 0pt;	text-align: Left;}LI.P-Table_Text_Heading_Left {	font-weight: bold;	font-style: normal;	text-align: Left;}SPAN.Table_Code_ch {	font-size: 9pt;	font-family: "Courier New", monospace;}P.Table_Text_2 {	font-weight: normal;	font-size: 9pt;	margin-left: 0.3cm;}LI.P-Table_Text_2 {	font-weight: normal;	font-size: 9pt;}P.Table_Paragraph_Header {	font-weight: bold;	x-next-class: BodyText;	x-next-type: P;	font-size: 9pt;	margin-bottom: 2pt;	margin-top: 6pt;}LI.P-Table_Paragraph_Header {	font-weight: bold;	font-size: 9pt;}P.Table_Text_3 {	font-weight: normal;	font-size: 9pt;	margin-left: 0.6cm;	margin-top: 3pt;	margin-bottom: 3pt;}LI.P-Table_Text_3 {	font-weight: normal;	font-size: 9pt;}A:visited {	color: #800000;}SPAN.Hyperlink_ch {	background-color: Transparent;	color: #0000ff;	text-decoration: underline;}P.BodyText2 {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	padding: 0pt 0px 0pt 0px;	margin: 6pt 0pt 6pt 0pt;	margin-bottom: 4.5pt;	margin-top: 4.5pt;	margin-left: 0.5cm;}LI.P-BodyText2 {	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;	font-family: Arial;	font-size: 10pt;	font-style: normal;	font-weight: normal;}P.Style5 {	color: #aa0000;	background-color: #DDDDDD;	padding-top: 9pt;	padding-bottom: 9pt;	padding-left: 9pt;	margin-bottom: 20pt;	font-family: "Arial ";}LI.P-Style5 {	color: #aa0000;	font-family: "Arial ";}P.Style6 {	color: #aa0000;	background-color: #DDDDDD;	padding-top: 9pt;	padding-bottom: 9pt;	padding-left: 9pt;	margin-bottom: 20pt;	font-family: "Arial ";}LI.P-Style6 {	color: #aa0000;	font-family: "Arial ";}

[Synook]

ARGH is all that really necessary? And why all the repeated attributes?You have some serious tidying up to do - no-one will be able to figure anything out (without spending lots and lots of time) from that code.P.S. I put it in a codebox for easier viewing.

[amakeler]

ARGH is all that really necessary? And why all the repeated attributes?You have some serious tidying up to do - no-one will be able to figure anything out (without spending lots and lots of time) from that code.P.S. I put it in a codebox for easier viewing.

>> P.S. I put it in a codebox for easier viewing.Thanks!>> is all that really necessary?Because all of the repeated attributes ... I didn't have time to thin it down.>> And why all the repeated attributes?That's a nice present (bug) from RoboHelp. At some point it dawned on me that every time you create or update a style in RoboHelp it creates duplicates.>> ARGH I quite agree... tnx - avi

[amakeler]

Hi again,I just realized that i did quote just the relevant code separately. Here it is again.avi

<p class=Alert_Heading_css><span style="letter-spacing: 0.1pt;"><img src="..\..\Note - with pen - 10 edited.png" x-maintain-ratio=TRUE style="border: none; width: 16px; height: 16px; float: none;    border-style: none; border-style: none;" width=16 height=16 border=0> </span>Note:</p><p class=Alert_Text_css>These typography conventions are intended to apply across the board for all TIS help documentation. Not all conventions have to be present in all documents. Some conventions are not appropriate for certain types of documents. <p>