Hello Everyone! i have a persian language website.. we write from right to left .. (RTL) i bought an english template (LTR) and i tried to play with css files and make it's direction to Right to Left .. now I'm just informed that my site has many problems in some Browsers... i would be very thankful if someone could fix my css .. or tell me where the problem is and how to fix it... Thank you.. Here is my site : http://webluq.com/ Here is my css: http://webluq.com/templates/premium/css/screen.css here are the screen shots: http://browsershots.org/http://webluq.com/
You need to get those people reporting errors to tell you something useful. I looked at your page in FF 3.5 on Linux and don't see anything looking too wrong. There are some rtl bugs I know of in Safari... one of them being, select dropdowns in forms will not obey text-align nor will Safari (and so maybe also not Chrome) put the arrow on the correct side. (so likely that dropdown menu you have, چیدمان: You have <html dir="rtl" which is correct... there's at least one other way to explicitly set the direction but without knowing which browsers are giving you which problems, you and we are not going to know what to do. And with Safari users, the best you can do is check the webkit bugzilla and see if anyone is working on that, as there's not really anything you can do about bugs like that.
Ah, it took browsershots a while to load. The retarded browsers who don't render anything right aside, FF2 looks like it has the most trouble. Looking in K-Meleon on Windows, I see the same problem as in the screen shots. However i can't tell what's causing it: the left sidebar only has a 7px margin, the right side doesn't have anything really set on it except overflow: hidden, which shouldn't cause a problem. If I scroll AAAAAAALLLLL the way to the right in K-Meleon (a Windows-only version of Firefox using the same engine as FF2), there seem to be two words, which I cannot copy, but link to http://khodnevis.com/, which seem to be pulling the wrapper much too wide. I cannot find the words in the source. But I wonder if they have some trick like a negative text-indent not working correctly? Konqueror has a bug where, in a ltr page, something pulled off-screen with a negative left margin actually appears on the right of the page (stretching it to a bazillion-pixel width) if you pull it too far offscreen. Hm, Safari-3 for Windows has the same issue, except it doesn't look bad because #main isn't moving... but those two links are there pulling the screen too wide. Both Safari and Chrome make incorrect use of the bottom scrollbar... if the screen is not wide enough, it scrolls to the right (offscreen) rather than to the left (to reveal the rest of the page). The dropdown actually seems ok, the arrow is on the left where it should be. Maybe this was fixed? Opera 10 seems ok, and even has the scrollbar on the left side where it should be. Also scrolls the screen correctly if the viewport is too small. Go team Opera! You can safely advise people to use Opera if their other browsers have too many bugs with rtl pages. FF3.5 on both Ubuntu and Windows have the vert scrollbar on the right but it works properly, also if the screen is too narrow. IE7 shows too many problems. It's almost ok if the viewport is big enough but it's lost one of the login fields in the sidebar. If the viewport is too small, it doesn't seem to know where to put boxes and throws them everywhere. Since this looks like a template, I suspect the sole issue is with rtl and I dunno if there's anything you can do about that. Ie6 looks about as bad, but that's to be expected from a decade-old browser. --------------------------------------- Do you have Windows? I see your browsershots are all for Ubuntu. If you have windows, go download K-Meleon (the FF2-ish browser) so you can see those two words on the right... I think if they are found and fixed, FF2 will be okay. Here's a screenshot: http://stommepoes.nl/webluq.jpg I will remove it after a while, so make a copy of it.
thanks for your reply stomme poes i looked in my css file and i searched over internet and i found out that overflow:hidden; is causing this problem. it's a bug in IE7 And Firefox2 and some old browsers wich overflow:hidden; doesn't work there... does anyone know how to fix this ?
Create a separate CSS file(s) for problematic browsers? And do you really need to support all the old browsers? If you can reach the stats, you can tell what browsers your visitors are using the most. This site looks really nice by the way, scrollbar on the left side makes me dizzy.
But, was overflow: hidden causing the text that sits way at the right?? That really looked bad there. I don't know of any major problems with either IE7 or FF2 and overflow:hidden... IE6 definitely does. For IE7, you could, in the CSS, find where you state overflow: hidden (#main?) and add for IE7: #main { overflow: hidden; } *+html #main {overflow: visible;} So add the part in bold, if #main's the one who had that. However it doesn't seem that would cause the problems in Chrome and Safari... which is the same problem FF2. Where is that text I saw? The text in the screenshots?
thanks for your reply. i removed the words between <span></span> and now it looks like better .. <span> tags are having problems with some old browsers i dont know why .. i will give your code a try now thanks
duuuh the problem is still there .. in: firefox 2.0.0.19 IE6 Kazehakase 0.5.2 Loeape seamonkey and .... But my website works properly in latest versions of Firefox , IE , Opera . i need a fix for those retarted browsers but i dont know how .. duhhh Thank you anyway
firefox 2.0.0.19 IE6 Kazehakase 0.5.2 Loeape seamonkey Except IE6, I think all those other browsers use the old Gecko rendering engine (so they all likely have the same single bug). If the overflow: visible trick worked with IE7, you can also give it to IE6, right next to your IE7 code: * html #main {overflow: visible;} but really, a decade-old browser made in the west just isn't going to work well with a rtl page I don't think. For the old Geckos... could you throw up a duplicate of your site, with a small red border around #main, to see how that looks in FF2? Otherwise I might have time to copy the code so I can play with my own copy, to find out what's killing FF2.