Link to home
Start Free TrialLog in
Avatar of -Dman100-
-Dman100-Flag for United States of America

asked on

display h4 text inline

I have the following html output:

<tbody><tr valign="top"><td><img alt="WARNING" class="msgIcon" src="/s.gif" title="WARNING"></td><td class="messageCell"><div id="j_id0:pageMessages:j_id8:j_id9:0:j_id10:j_id11:j_id13" class="messageText"><span id="j_id0:pageMessages:j_id8:j_id9:0:j_id10:j_id11:j_id14"><h4>Warning:</h4></span>Unsaved changes<br></div></td></tr><tr><td></td><td></td></tr></tbody>

Open in new window


The display shows the h4 text "Warning:" on one line and the text "Unsaved changes" on the next line.  I want to prevent the line break and show all the text on one line like this:

"Warning: Unsaved changes"

I tried this style:

<style type="text/css">
.messageText span h4 {display:inline;}
</style>

How can I get the text display on one line.

Thanks for any help.
Avatar of becraig
becraig
Flag of United States of America image

<tbody><tr valign="top"><td><img alt="WARNING" class="msgIcon" src="/s.gif" title="WARNING"></td><td class="messageCell"><div id="j_id0:pageMessages:j_id8:j_id9:0:j_id10:j_id11:j_id13" class="messageText"><span id="j_id0:pageMessages:j_id8:j_id9:0:j_id10:j_id11:j_id14"><h4 style="display:inline;">Warning:</h4></span>Unsaved changes<br></div></td></tr><tr><td></td><td></td></tr></tbody>
The style that you posted should work OK, although you'd be better of changing the HTML. Having a block level element (H4) inside an inline element (span) is not valid.

Here's your code working OK - http://jsfiddle.net/EAXpB/
Avatar of -Dman100-

ASKER

The html output is dynamically generated, so I have no way of adding the style tag to the h4 element.  I have to use a class in the page to override the style.
.messageCell h4
{
display:inline;
 
}
OK, just go with your original code - if it's not working, it's likely that something else is wrong, like a missing DOCTYPE for instance. Probably help more if we can see you page in action

And if that HTML is dynamically generated, then you need to talk to whoever created the code to do it - as I said, it's wrong, not to mention, ugly :)
Unfortunately, the code generated is from the Salesforce platform and getting the html output changed is impossible.  I know it is ugly, but that is what I have to work with.

My original style rule doesn't work and I tried:

.messageCell h4
{
display:inline;
 
}

Neither works?

The doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Any other options?
Thanks for the help!
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I agree with Chris, there may be some other style overriding this a link would be super helpful in determining what is causing this behavior.

You might also want to look at using firebug to look at what classes this is nested in so you can determine for yourself what css classes this h4 is nested in.
Adding the !important keyword and moving the style rule to the bottom the page has it working now.  One thing though.  The text shows like this:

Warning:Unsaved changes

I'm not sure it is possible, but is  there a way to insert a space so it displays like this:

Warning: Unsaved changes

Thanks for your help!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
.messageText span h4 { display:inline !important ;padding-right: 10px; }
put some padding-right for the h4 element.
I've requested that this question be closed as follows:

Accepted answer: 500 points for becraig's comment #a38581192
Assisted answer: 0 points for -Dman100-'s comment #a38581168

for the following reason:

Thank you! &nbsp;Works perfectly!