|
|
Questions, Answers and Comments by Category
-
-
|
Just an observation about long text strings in posts. Example here:
http://www.helpmefind.com/gardening/l.php?l=2.2347.2&tab=32
Discussion id : 90-858, Reply #3 contains a long url. On Gecko it's breaking at the hyphen, but not at the underscores, with the result that the text overflows the div by a considerable amount.
There are a couple of CSS tricks you can use here if you want to. CSS3's word-break attribute is well supported these days. If it's set to break-all it should solve the issue.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
There are other ways of handling it, but they require some way of targetting the long link. Easy if you have anchor tags in the markup, but HMF doesn't.
|
REPLY
|
|
Thanks for bringing this to our attention. Yes, well have to address this and thanks to your technical assistance we should be able to resolve this quickly. Thanks again.
|
REPLY
|
|
Just noticed this long link problem cropping up again in one of Jay-Jay's recent posts (Reply #3, Discussion id : 92-078)so I tested some CSS edits in my browser's userContent stylesheet. This works for Firefox or Pale Moon:
@-moz-document domain(helpmefind.com) {
.replies {word-wrap: break-word;}
}
Could be incorporated into HMF's existing stylesheet (http://www.helpmefind.com/css/qcs_1.css) as follows:
div.replies {
padding-left:12px;
border-left:0px solid #E0E2B0;
word-wrap: break-word;
}
That fixes the long links overflow problem without breaking anything else.
(Edited for better solution)
|
REPLY
|
|
BTW, if you are going to change the CSS to fix this, it could be simplified to:
.replies {
padding-left:12px;
border-left: none;
word-wrap: break-word;
}
You may also want an additional declaration for Google and Apple browsers.
See http://caniuse.com/#search=word-wrap
|
REPLY
|
|
Well... you can't get much helpful than that; thank you !
|
REPLY
|
|
Just adding some extra stuff here, since I can't reply to my own posts and I don't think this suits a separate topic.
Anyway, I've been finding the layout of the photos pages a bit irritating, in that if anyone writes a decent blurb for their photo it gets crammed into a tiny column at the right. This makes it difficult to read, so I threw a few more tweaks at my browser's userContent.css file. I find the result much more convenient. These tweaks can be applied by anyone, to their own browser, if they like this layout. If anyone wants tips on how to apply it, just ask.
The code looks like this:
@-moz-document domain(helpmefind.com) {
.replies {
word-wrap: break-word;
}
#tabContent>table td {
display: block;
}
#tabContent>table .comments {
margin: 0 !important;
padding: 8px 28px !important;
color: #333 !important;
background: none !important;
border: none !important;
}
#tabContent>table td:first-child, #tabContent>table td:first-child div {
text-align: center !important;
}
#tabContent>table #comments>.comments {
font-size: 100% !important;
line-height: 1.5em !important;
}
#ratings td, #tabContent>#ratings td:first-child,
#plantCuttings td, #tabContent>#plantCuttings td:first-child {
display: table-cell !important;
text-align: left !important;
}
}
And the result look likes this:
|
REPLY
|
|
Yes, that is a nicer display format. We'll incorporate it in the near future. Thank you this and your several other much appreciated suggestions,
|
REPLY
|
No problem. I just did it for my own benefit anyway. That code is specifically for overriding the existing site code in one's own browser, so it's too verbose for use as actual site coding. It wouldn't make sense to use the same code directly in the site's CSS file. You could get a leaner result by just tweaking the markup a bit. I'd lose the table and change the markup to a few paragraphs. You could give the image an auto x margin to centre it up top, then three paragraphs beneath for the photo id, blurb and copyright respectively. The <img> and <p> tags are block level anyway by default, so don't need to be wrapped in anything else. So markup could just be: <div id="tabContent"> <div id="mylstg"> ... </div> <img ... /> <p> ... </p> <p> ... </p> <p> ... </p> </div> Then you can do the CSS as just: #tabContent>img {margin: 10px auto;} /* The 10px y margin is just an example */ #tabContent>p {padding: 0 28px;} #tabContent>p:nth-of-type(odd) {font-size: 90% line-height: 1.1em;} Shouldn't need anything else, AFAIK. Edit: Although you may still want the id="comment" on the second p tag if your back end coding relies on that to call the correct db content. Can't see any need for classes in this case though. |
REPLY
|
|
