I have some pages that are loaded with a hash/anchor in the url. When we do this it screws up the padding/margin of the document. Without it, it works fine.
What's even stranger is if I use the browser tools to get to the css and disable the margin and padding and then reenable it, it looks fine. We are using a third party web site to serve our site which means we're kind of locked into a CMS type of service and our hands are tied to a certain extent as to how much we can customize our pages. So, therefore, we have multiple css files referenced and so forth.
If you look at the two urls below you'll see the issue in the one with the #company_settings appended to the end of the url. If you then use inspect element in chrome to look at the header and disable and reenable the custom.css:2 for margin and padding, you'll see it then fixes the problem. Any idea why this is happening and if there's something I can do in css to fix this? Thanks.
http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings
vs
http://www.patriotsoftware.com/patriot-pay-help-center-payroll-settings/#company_settings
Using a hash in the URL signals the browser to scroll to a specific location of the document.
And the browser is exactly doing so.
If you can edit skin.css (which sounds so by it's name), go into line 6:
#foxboro_header {width:100%;overflow:hidden;}
Change it, remove the overflow rule:
#foxboro_header {width:100%;}
This should make it work.
BTW if it's a block element, the width is automatically set to 100%. Setting it would be redundant then.
Next to that the code of the page is full of validation errors, deal with them otherwise you might run into more and more problems.
I had a similar issue using hash.
There is/was a some bug with display: table and hash url. I changed it to display: block and it was working correctly afterwards.
Hope it helps someone.
Related
I've got a super strange and hard to diagnose issue. Hoping that someone on this forum has run into it before. Basically, I have a wordpress + woocommerce page loading like this:
As you can see there is a lot of extra whitespace. The problem is I can't figure out where the whitespace is coming from because every time I inspect element, the page removes the whitespace immediately and it looks (correctly) like this:
If I keep the "inspect element" window open and refresh the page, the whitespace returns, but as soon as I change the CSS in any way whatsoever (ie remove a random attribute or change anything), the page once again fixes itself.
If I locate the area where the whitespace should be (by not changing anything), there is literally nothing there that the whitespace is attached to. It's as if it's invisible.
I'm using Chrome (34.0.1847.131 m). Any ideas what could cause this strange behaviour?
This seems like an issue, somehow being caused by javascript. I've worked with WC before, and the JS they use is really buggy. I'd suggest trying to turn off javascript, and see if the issue still occurs. The next place to check would be the template itself. After that, check woocommerces filter set/action hooks. From my experience, WC's templates are super badly done (Seriously, who still uses tables). It caused me all sort of weird headaches as well.
Please see this link. Notice that the search bar first renders near the top of screen. Then aligns itself to be opposite to the logo. I think some css rules are causing this but I am unable to figure out. Can you please help me in pinpointing the reason. What one should avoid in the code to avoid/minimize this behaviour.
This almost aways happens when you have a css rule for blocking that is overwriting the previous. The best thing to do is to have the first thing in the css file to be blocking and normalizing. Every time you need something to be in a place or have a specific size, you should go to the blocking section of your code.
But the most preocupying part of the site you shown is the time it takes to load a fancybox css file.
This issue could just be how each browser loads and renders the content, and also on how fast your network can download content. Since there is many multiple Javascript and CSS files it can just be parsing them slowly and configuring the site as it goes while your network and browser is still downloading and loading everything.
I viewed it in Chrome and Firefox and it seemed to load fine for me.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
Here is the source:
http://store.bionoricausa.com/index.aspx
All good in FF and Mac browsers.
In IE8 developer mode, the 3 divs immediately below div id="footerIn" are shown being recreated a second time, resulting in a repeating footer.
This is with Compatibility Mode off.
When it is on, the repeating problem is gone, but the header logo is missing.
This page is a port of a WordPress site as home page to a Network Solutions e-commerce site. As you probably know, NS auto-generates a container and table around the header, body, and footer content, interfering with any of your own containers that you may have used in another CMS. I suspect this is most of my problem, as I've had to develop workarounds to display parts of the page properly to match the original WP site. But no matter how I rearrange the footer code, I can't get IE8 to stop doubling it.
Any help would be GREATLY appreciated. Thanks in advance!
Without going through all your markup, I can say I've seen this kind of problem before on IE and it's typically caused by: a tag that wasn't closed, tags that weren't nested propertly, or an extraneous closing tag somewhere. That's where I would start first.
It was the fact that there was a search form in the footer tag - Network Solutions creates a form, container, and table to put the whole page in, so the search form that was part of the page I imported from WordPress wouldn't work (you can't have a form within a form). That is what IE objected to. The nested form caused all the footer tags to go haywire in DW, but DW didn't highlight the form as being a problem at all, just all the divs around it...
Thanks kinakuta for your help.
I'm having a peculiar problem with comments in Drupal. If I enable writing comments in a node, and I put a hash tag in the url (for example, node/123#footer), it will load for a split second at the correct div and jump right back to the top. This doesn't happen on any other page of the site where there are no comments. It also doesn't happen if I disable comments or set comments to read-only for the node. It's not Javascript and it's not my theme because the same thing happens if I disable JS in my browser (tested with Chrome, Firefox, IE, and Opera) and use Garland. I've also changed the node's comment settings to every combination I could think of.
I want to use this because I have a lot of links that jump directly to a comment (each comment has id="comment-cid") but it's pretty useless right now!
Any idea where to look? Appreciate it!
Did you check thr source to see if there are any actual anchors available ?
If you have commentes over multiple pages(I mean 30 comments per page), then node/123#comment-3232 won't work if the comment-3232 is in ?page=1 or 2,3,etc.