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
Related
On this page in Firefox and IE if u make browser window 350px the table with products is out of borders and the scroll appears. Also the "Sort by: Artist Sort direction Price " part and other elements above it are out of border too. This error does not appear in Chrome, Opera and Safari, in this browsers its adaptive for mobile screens.
image thats show error
Tell me please how can I make this page to be adaptive in FF and IE?
P.S. Please dont just minus, please explain what wrong with my question?
Responsive Tables is a big problem and a lot of people (including myself) have tried many different solutions to that.
The one size fits all solution is https://github.com/filamentgroup/tablesaw
It relies on jQuery (Javascript) and CSS to work, so it might not fit all projects, especially relying on Javascript is something I would not want to do.
Apart from that there are lots of different solutions for you to try out. Chris Coyier at CSS-Tricks wrote a great roundup some time ago: https://css-tricks.com/responsive-data-table-roundup/
Problem was with image that had 764px width.
I made it 100% and problem was fixed!
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.
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 :/
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
Followup 2
Here's a link to a demo page.
As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page
i prefer using http://www.curvycorners.net/
I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position.
Applying the rule "display: inline" to the element seemed to stop the issue.
"Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.
It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on
refresh. But if you remove the rule, it still looks okay on refresh, until you
close and reopen the browser window - then the jumping reappears.
Hope that helps someone.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?