Trying to attain a near-exact cross-browser experience for our clients, lately, I've come to a problem that I can't fix. I've got the website up and running, and it's functioning smoothly on every and each browser, expect Mozilla Firefox. The problem that occurs in Firefox, is that I get to witness a broad white space on the right side of the site's main contents, and it is arising from my responsive css3 slider. The link below shows you 100% of the slider's codes, which works perfectly on jsfiddle;
Css Slider
but well, the problem is that each article tag is taking its space, even when it's hidden and not being displayed in Mozilla. So the more the slider comes toward the end of it, the less white space I get to see. The next upcoming slides are hidden, but however, they are still occupying a certain space, which forces a lot of vacuous area on the right side.
You can check the website itself at the link below;
My Website
Hoping that I have clearly stated the issue, what could be the possible solution for this matter ?!?
Adding overflow-x: hidden on the <html> tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.
Related
Background info: I'm working on a public facing website for our company. developing in VS2012, asp.net and vb.net, using some JS, some JQuery, and a decent amount of CSS.
Everything was looking great in our internal testing, until someone checked from home, where they only had IE 9. Suddenly, big chunks of text within expanding panels weren't being displayed, the bottom of the page was missing in most cases, some links that call javascript functions don't do anything... It's so random that the only reason I think they're connected is that it only happens in IE9 (or probably before, though no one has looked.)
I tried setting the standards mode to edge in the web.config. (tried setting it to IE10 as well, just to try) I've played with changing some positioning, heights in px instead of %, relative to fixed positioning, tried inserting the html5shiv, removing the gradients... nothing has changed. Everything displays correctly, until it doesn't display at all. When I was starting to see and research this last week, I thought I'd found an article somewhere that said there were limits on the CSS tags you could use in a page for IE9, but that number was WAY higher than anything I'm using, including both what's on the page directly, and incorporating the .css file. The only other clue is that it looks like at the bottom, where the missing stuff starts, I also lose the gradient from the page background (so just a block of all white, however if I play with the size of the window, sometimes I can get this block to slide down, and I can see another line or two that was originally hidden...
Has anyone had issues like this? The site works perfect in chrome, ff, IE10 and 11, several Linux browsers, opera, safari, from macs, pcs, and Linux boxes. everything except this old IE 9.
HELP?
Just a little hack fix I found, if anyone comes across this question looking for similar answers... I created a new css file implemented when IE9 browsers are detected, and I extended the min-height for the content of pages until every page displayed... the drawback is that on those longer pages, if the content isn't expanded, the footer still lies several scrolls down... but this only happens on the very content-lengthy pages, so while it isn't ideal, I guess it's good enough, if someone's ok with using outdated browser technology :/
I'm having issues with some strange padding on the right side of this website I'm working on right now. I'm currently viewing it on a 13" Macbook Pro, full-screen within that viewport. (It has a lot of issues on the smaller viewports that I'm aware of; I haven't gotten to that point in the process.) I've inspected it thoroughly with the developer tools in Chrome but haven't been able to find anything to account for the padding-right or margin-right that's creating the horizontal scroll.
It's currently built with Bootstrap and Flexslider.
Link to repo: https://github.com/helenvholmes/designshow
Thanks!
The horizontal scrollbar also appears on Chrome 25 on my Win 8 64 system, regardless of width.
Try adding overflow: hidden; to the rules for div.flexslider.
That removed the horizontal scrollbar for me and appeared to leave everything else intact. However, please be warned that I haven't tested all the content thoroughly, so look carefully to see if that rule has other unwanted side effects.
How does that work for you?
Apologies to inflict an IE6 post on everyone - posting in the hope that someone will have had experience of these issues. I don't have a link for now unfortunately, but the first issue is that occasionally images are stretched without keeping aspect ratio - the images have their height and width defined in the tag, then in the css file their width is set to be a little smaller than that. Sometimes the images load fine, sometimes really badly stretched. Any ideas what is happening here? Fine in all other browsers.
The other issue, which I've not come across before, is that some pages on my site need a refresh of the page for floated elements to align properly. Is there a reason why this could happen in IE6?
Thanks, and apologies again :)
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
I don't have any code to show as it is on a intranet system. However I have noticed a couple of weird things when looking at it in IE6. This isn't the usual box model problem or IE6 rendering things differently.
One thing that I noticed is on a div where I have a gradient background with repeat-x attribute. When the page loads in IE6 (and any other browser) it looks fine. However when I scroll down the page and back the background appears to repeat in the y direction too?!
Also I have a footer div, which is flush to the content. Again at first this is fine. However when I scroll it off the page and back there appears a gap, which gets bigger when I scroll off and back again. Once more returns it to what it originally (and should) looked.
Are there known IE6 rendering bugs for such problems or is it just bad coding?
Thanks.
Try adding zoom: 1 to blocks with problems. If it works — it's hasLayout problem.