I have an issue with the right part of the text in a div being hidden when the scrollbar is shown!
No problem with IE, but with Firefox or Chrome.
Does someone already seen this issue, and possibly have a fix?
Try using some css properties like margin-right or word-break...
eg:
margin-right:10px;
or
word-break: break-all;
This might work...
Related
I'm having problems removing a 1px border (at least, that's what it appears to be) between some of the table elements in this page:
http://tkevents.ca/microsoft/cls2012/email_en_new.html
This page renders fine in Chrome, FIrefox, Safari and IE 6 through 9. The problem is in Outlook 2007 & 2010. It looks like some of the td tags have picked up an extra 1 px border or something.
Screenshot: (I can't post an image - my account is too new). But, you can duplicate this by embedding the code in an Outlook message.
I can't figure out where I've gone wrong... I've applied a bunch of suggestions from other answers within Stack Overflow, all with no luck.
Any help would be greatly appreciated.
This should do the trick, add this to your css.
table td {
border-collapse: collapse;
}
I seem to be having two problems:
My top nav bar links don't work in Firefox
The design breaks in IE7.
Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!
http://www.christthesavioracademy.org
You can fix the IE7 problem by making the following changes:
On #content, add position: relative; padding-top:1px.
On #logo, remove the margin and add position:absolute; top:0; left:9px.
On #bottomnav, remove clear: both.
I can't reproduce your Firefox issue. If there is still a problem, hopefully the steps above will have helped.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.
I need to show the ellipses(...) if the text overflows in DIVs and SPANs.
I have a CSS attribute called text-overflow:ellipses. But this works only in IE.
I want to display the same in other browsers like Firefox/Chrome etc..
This article (http://mattlaine.com/blog/?p=49) explains how to do it for Firefox.
There is also a jQuery plugin that will add the ellipses for Firefox.
text-overflow: ellipsis works on a few other browsers, like Safari. Opera uses -o-text-overflow.
try
text-overflow: ellipsis | clip
This property is not implemented in Firefox ..
They mention that you can use the -moz-binding to simulate this
reference: https://developer.mozilla.org/en/CSS/text-overflow
If I use an inline element in Firefox and put a background color on it, the element appears to have a 1px margin across the top. This doesn't happen in IE8, Safari 4 or Chrome 2. They show the element flush with whatever is above it. I've tried Firefox 3 and 3.5 with the same results. Using display:inline-block; will fix the problem but I don't think that's what it's made for. Any idea what is going on?
Have a look at the Layout tab in Firebug. Does it have a margin?
Here's an example screenshot I just took: