I have this odd issue that has been plaguing my site for a few months. The site runs on the Concrete5 CMS. The issue is the letter spacing before and after hyperlinks and bold text are being removed. If I go to edit the page, the spaces show up normal and everything looks nice. However as soon as I save the page, the letter spacing is back to nothing. The only workaround I worked up was adding additional spaces around links and bold text, so I would add a double space before and after to get it to look right on the webpage. I have no idea what's causing this issue. I've poked around with Firefox inspector tool, but I've had no luck in resolving this issue. If anyone has any pointers I would be grateful!
This page is a good example of the issue. https://www.dakotacollege.edu/admissions-financial-aid/apply-financial-aid
Edit: example of step 5 from this page
<div class="step-text">
<div class="steps"><div class="step-number">STEP 5<p> June-August</div></div>
<div class="step-text-inner">
<p>Students who have enrolled <strong>and have accepted</strong> financial aid for the upcoming semester will be allowed to charge books and supplies, up to the amount of any applicable excess aid, at the Dakota College at Bottineau Bookstore. </p>
</div>
</div>
</div>
Here's a video to help explain the issue
https://youtu.be/O8267jreR-U
Alright just another update, I looked at your suggestions and didn't see anything uncommented or changed. A user on the Concrete5 forums did mention the issue is also on the demo website for the Pixel 2 theme that my site uses. So it appears to be a theme issue. I tested this on my test server by removing the theme completely, issue is gone. I've reached out to the Theme creator to see if he has a fix. Here's a link to my request.
https://www.concrete5.org/marketplace/themes/pixel/support/spacing-issue-around-hyperlinks-and-bold-text
Isolated the issue! Your comment was a great clue! There's an HTML Minify option in the Pixel 2 theme options that was causing my issues!
Related
I've been creating a portfolio website for a friend. In an attempt to make the site responsive and artsy, I chose to pull in twitter bootstrap and skrollr. I noticed that in safari in iOS that the site seems to be cut off at a certain point. Has anyone else ran into this issue before? I have provided a link below in case anyone notices anything obvious.
http://jennaparysek.com/
Thanks!
A lot of people (including myself) are having troubles when using skrollr on mobile devices. In order to use both "fixed" and "relative/absolute" position at the same time, you have to put all the divs that are not fixed inside a div called #skrollr-body
However, the real problem is that your skrollr is being confused when getting the height of your
skrollr-body. you can try to put forceHeight: false inside your skrollr.init()
if that doesn't work, it might because skrollr doesn't know where is the end of #skrollr-body, so just put an empty div after your #skrollr-body and give it a keyframe. It should works just fine now :)
I have been testing a site and I found a terrible bug in IE10.
Tour Monkey - Official site
App links are not recognized, but social ones are.
I haven't found anything good already, and the deadline is close. Thanks a lot for your help.
After giving a look I realized that I had to add some content in the a tag. In this case, an img tag.
Old HTML (working in all but IE):
<div class="app-link" id="appstore"><a class="app-link" href="https://itunes.apple.com/us/app/tour-monkey/id810107813?mt=8"></a></div>
New HTML
<div class="app-link" id="appstore"><a class="app-link" href="https://itunes.apple.com/us/app/tour-monkey/id810107813?mt=8" target="_self"><img src="img/appstore.png"></a></div>
My JQM app has a page in it called "settings" which has three buttons serving as links to other pages. One of those pages is called "tracks" and the code for it is below.
Control your relaxation resources
When I click this button I get a "File not found" error and the browser is pointing to the "file:///C:/inetpub/wwwroot/SITES/jQuery%20Mobile%20Form/tracks#tracks" url rather than the "file:///C:/inetpub/wwwroot/SITES/jQuery%20Mobile%20Form/index.html#tracks" url. I'm using FF but it happens in all browsers and it also happens when running on the test website.
The navigation works for the other two buttons on the page.
The behavior occurs regardless of what name I give the page.
I know I've seen this problem discussed but can't find the answer to it, so my apologies in advance it this is a duplicate or triplicate.
Can anyone point me in the right direction?
Updating to beta 2 of JQM took care of this problem. Don't know why but it is resolved now.
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.
a Project I am currently working on uses the jQuery UI framework for some of its widgets.
To provide the user with a global look and feel I would like to use the framework also for its css stuff.
I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.
I try to style the divs like follows
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
Later I would like to implement some draggable-and-sortable functionality.
The Problem I am facing right now is that the boxes aren't properly aligned.
Does anyone has a hint on using jQuery.UI for that kind of css work?
I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.
best regards,
Gordon
I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.
Check how the CSS is applied in this page. You may find it useful.
Can you provide an example where it doesn't work for you?
Maybe you load your own css after you load the jQuery-UI-css and overwrite something.
If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.