Text spills over border line CSS

I use this code for legends as headings with explanatory text inside the boundaries. It works fine on my computer and all browsers but with my cell phone, Android Chrome to be specific, the text spills over the right border like.

Does anybody see where that could be fixed?


<style type="text/css">

.important {

BORDER-BOTTOM: #0b2bcc 1px solid; BORDER-LEFT: #0b2bcc 1px solid; PADDING-BOTTOM: 7px; PADDING-LEFT: 20px; PADDING-RIGHT: 10px; BORDER-TOP: #0b2bcc 1px solid; BORDER-RIGHT: #0b2bcc 1px solid; PADDING-TOP: 8px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px


* > .important {

BACKGROUND: #fff; -moz-border-radius: 4px


.important LEGEND {

BORDER-BOTTOM: #0b2bcc 1px solid; BORDER-LEFT: #0b2bcc 1px solid; PADDING-BOTTOM: 1px; PADDING-LEFT: 15px; PADDING-RIGHT: 15px; FONT: 1.2em "Trebuchet MS"; BACKGROUND: #c8cff1; COLOR: #0b2bcc; BORDER-TOP: #0b2bcc 1px solid; BORDER-RIGHT: #0b2bcc 1px solid; PADDING-TOP: 1px; -moz-border-radius: 4px



<fieldset class="important">

<legend>Text here for legend</legend>

---a bunch of text here--


Do you have a screen shot of that? I’m not seeing anything obvious that would cause it.

Also I took the liberty of refactoring your CSS:-

.important {
  border: #0b2bcc 1px solid; /* The border is the same all round, no need to define every side */
  padding: 8px 10px 7px 20px; /* Shorthand for padding different on all sides */
  border-radius: 6px; /* Don't use redundant browser prefixes. When you do need prefixes, put the rule without any last */

* > .important {
  background: #fff;
  border-radius: 4px;

.important legend {
  border: #0b2bcc 1px solid;
  padding: 1px 15px;  /* Two value shorthand for top & bottom the same, and left & right the same */
  font: 1.2em "Trebuchet MS";
  background: #c8cff1;
  color: #0b2bcc;
  border-radius: 4px;
1 Like

I don’t have an android but this is what the code above looks like on my iPhone.

This is what I see in Chrome on Android.

Though I maybe need to add more content.

1 Like

Looks ok to me. Maybe @javascript7 can supply a screenshot of what he sees?

1 Like


That didn’t make any difference.

Thanks for looking at it, to all.

It wasn’t inteded to make any difference in the functionality of the code. It was to improve readablity and brevity.
Though actaully, removing the prefixes made the round corners work.

But back to the problem. It looks like there is more at play here than you are showing us.
Can you offer the actual content that is within the box, plus any additional CSS that may be affecting it?

It looks like you are outputting strings of code which may contain long unbroken strings without spaces.
By default those won’t break, so will overflow a container that is too small.
You may need to look at word-break.


Thank you for the suggestion. I will look into that and report back. Interesting that the mobile device is the only issue.


It’s a question of screen space. If you have an unbroken string of 100 characters and say each character takes a width on average of 8 pixels, the line will be 800 pixels wide.
That’s no problem on an HD 1920 x 1080 monitor.
But in a mobile of just 320 pixels wide, it just won’t fit.

That might be the case here. I was doing some testing with just plain text on the mobile and there was no issue. What I think might be the issues because of what @SamA74 said, could be this:

<code>&lt;a href=[https://<%=Request.ServerVariables(](https://%3c%25=Request.ServerVariables()SERVER_NAME") %>/<font color=red><b>YourUserName</b></font>&quot;&gt;</code>click here<code>&lt;/a></code>

This shows the url but I don’t want it hyperlinked, which what this accomplishes. Could this be a problem because there is a better way to do this?


Sam already gave you the answer in Post #8 :slight_smile:

Use the word-break property. There’s a link to its usage in Sam’s post

Sorry, yes fault in rushing through the emails between appointments - didn’t even see that. Looks like that will work and I will have at it. Thanks for pointing out my oversight.

1 Like

Thank you, that did the fix. I appreciate it!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.