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!
Related
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.
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 am having trouble with image resizing in tables in my current website project.
While basically all images in the page content are getting resized to the containers width (caused by the Twitter Bootstrap framework I am using for layout) I found out that for images in tables it does only work in Chrome. With other browser engines, resizing is ignored (only) for tables. I thought using max-width: 100% for resizing is working in all cases.
Before you ask me, for certain pages use of html tables is intended, because people without knowledge of html should also be able to easily edit the page (so I need them, sorry).
The url of the page is: http://kunden.tommy-computer.at/fsv_noetsch/?page_id=35
A stripped-down version of the problem can be seen in this fiddle.
This is what the page should look like for small browser resolutions (correct behaviour, but works in Chrome only):
This is what it looks like in other browsers (image is not resized, table columns do not have 50% width, wrong at all):
I can`t figure out how to fix this and also do not have a better approach for it. Maybe you can help me out. Thank you !
Add the table-layout: fixed; attribute to your table (tested OK with Firefox).
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
So I'm stuck with this annoying and minor IE8 problem. When I'm scrolling it seems like IE cuts off some piece of my H1 titles. I made a video so it's clear what is happening.
The HTML & CSS are very large, so before I'm going to include all the HTML and CSS I would like to know if someone knows an possible cause. Or maybe it's an known IE problem?
The titles (BRACELETS, NECKLACES, ..) are H1´s with z-index set to 999.
The video can be found here http://imageshack.us/clip/my-videos/607/wcw.mp4/
A live code sample would be great to explore. My only guess based on the video (which is very helpful in this scenario nice!), is that IE8 is choking and lagging on rendering items as you are scrolling. Is there any markup changes tied to scroll events or perhaps some CSS "fixed" items on your page?
i know it's a very old question but i think it could help others
I found myself having the same problem with a free-for-commercial-use font
The solution i found was playing around with the line-height CSS property
In some sports setting it to the height of the div, in others to the font-size, in others to a little bit more than that
In my experience it changes from font to font and from font-size to font-size