This is a question I belive has been asked before but I haven't found any solution.
Open my jsfiddle in both Firefox and Chrome (Or Safari instead of Chrome). If you look carefully at the letter 'y', you can see that there are one or two extra pixels between the letter and the lower border of the section1-div, in Firefox compared to one of the other two.
I have set padding and margin top/bottom to 0px on the most elements in order to reset the styling to som extent.
Why is that and what measures should I take in order to prevent this?
UPDATE: Using Chrome 17.0.963.56, FF 11 and Mac.
I'm not really sure why this problem happend. It was not working. In my own code I could relate it to the padding. Chrome/Safari and Firefox is handling the padding differently. By adding som padding to the standard css and making an exception for Firefox I did get the expected result. This doesn't help the jsfiddle example (it could actually be that there isn't any problem in the example, could be that the font is displayed a bit different and it looks like there are differen number of pixels between the letter and the border...).
#adminmenu a{
padding-bottom: 2px;
}
#-moz-document url-prefix() {
#adminmenu a{ padding-bottom: 0px; }
}
Related
I have a title which is displayed in uppercase letters. I would like to have just 2 pixels between this title and the framed box below.
If the text contains lowercase letters like ’g’, there is no space below, but once all ’g’, ’y’ and ’j’ letters are gone, it appears.
Is there any cross-browser method of getting rid of that space? Apparently browsers display different amount of empty space: https://jsfiddle.net/5o94va6p/13/, so tricks like line-height: 0.7 work in Firefox but eat too much space in Safari.
Safari and chrome look similar in terms of empty space. The browser that looks different is Firefox. I would only specify line height for it using CSS. This way, Firefox will look good, and it will not effect the look in other browsers.
Try this code which will target only Firefox:
#-moz-document url-prefix() {
h1 {
line-height: 0.7
}
}
The space below the baseline which is needed for letter like y, g, p etc. is ALWAYS there, it's part of the line-height - this is the reason for your problem. You can't change that unless you define a negative margin-bottom value, like
.my_heading {
margin-bottom: -4px;
}
try using this -
.box{
margin-top: 2px;
position: fixed;
}
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!
There's something wrong with my CSS-code for a list. Indentation of second (and further) lines of list items are not correct in IE, but okay in other browsers. See: http://jsfiddle.net/nXYee/
Any idea?
IE8 gives this result:
Chrome, Safari and FF give this result:
This occurs because you've placed the bullet inside the list item (list-style-position:inside;), and the browser controls the space between the bullet and the li content, not you. Internet Explorer assigns more space between the bullet and the content than the other browsers you mentioned.
The fact that your indented content aligns correctly in Chrome/Safari/Firefox is because those browsers all implemented the same (or similar) distance between the bullet and the li content, so a text-indent of 1em gives you a visually consistent result - but really this visual consistency is just a fluke.
(In fact, if you check closely you'll notice that Firefox is slightly out too).
If you feel it is necessary to display the bullet inside the list items, then you may find you need to use a conditional comment to feed different text-indent and padding-left values to IE (e.g. 1.5em/-1.5em) - but that will break in IE10, which doesn't support conditional comments.
Personally, I would keep the bullets outside the list items, since I think you'll find it much easier to get a consistent result.
Hmm it looks like you were overthinking a bit in terms of your css with all that list positions and negative text margin, I've simplified it to the following:
body {
font-family:verdana;
font-size:1.0em;
width:500px;
}
ul {
list-style-type:disc;
padding-left:1em;
margin-left:0px;
}
Tested it on IE8, looks normal.
http://jsfiddle.net/nXYee/1/
I'm quite certain it has something to do with your styles, specifically, this part:
li {
list-style-position:inside;
...
}
ul {
text-indent:-1em;
padding-left:1em;
...
}
When list-style-position is set to inside, it's considered part of the list item itself and when the item wraps, it will wrap to under the item marker. It is then indented due to your left padding being set - but it's not enough to get it to the right level. FF and Webkit may use some other algorithms to determine the position, or maybe 1em is just evaluates differently.
I have forked your jsfiddle and fixed the styles in it so that the list is now displayed correctly:
http://jsfiddle.net/8vxTw/3/
ul {
list-style-position: outside !important;
}
fixed it I've had similar problem
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
i know IE6 is dead,but in china, there are lots of people still using it. so expect someone can do me a favor about this problem.
this is the page.the even line's background color is not the same length, under IE6, which is shorter
the display under IE6. (http://run.xxmn.com/ie6.jpg). the bgcolor displays different from other browers.
the display under IE7,FF,CHROME (http://run.xxmn.com/ie7.jpg). it displays ok.
how to make it under IE6 displays the same result as other browers?
ps:the problem is solved. thanks all the guys.
The problem in IE6 is probably due to negative margins on the views-field-title class (though I don't have IE6 installed to check).
You don't actually need negative margins to achieve the effect you want. So suggest removing them like this:
Remove margin-left: -4px; from #left_cplist .cplist-bg .view-content .views-field-title
Remove margin-left: 5px; form #left_cplist .cplist-bg .views-row