Jump to content

Vertically aligning a small icon with text


amakeler
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 ";}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...