In Google Chrome when using placeholder in an text input with the height of 30px, the place holder text it vertical aligned top??
How can I make it sit in the vertical middle of the text input?
Alignment of placeholder text is broken in the current version of Chrome, because it’s broken in the current WebKit. Unfortunately, you won’t be able to do this using native placeholders, until it’s fixed.
Chromium bug 72413
WebKit bug 54797
Update: According to the Chromium bug, the fix should ship in Chrome 14.
In the meantime, you can use padding-top to push the text down.
Related
I am having trouble making http://jackwaghorn.com/#popup usable in Safari. Chrome hasn't been a problem but when it comes to text appearing in an overlay DIV - nothing comes through in Safari. Unless you press 'new tab'.
http://i.stack.imgur.com/zbUAf.jpg
You already found the problem. We call it Safari. If you use Safari for Windows you cannot optimize the webpage for this.
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
Ran into this quirk today.
http://jsfiddle.net/UJAjD/3/
You'll notice that in Firefox 7 and Opera, the gray box has the word "Next" in it. The CSS includes a text-indent property that should move that text outside of its container. Viewing this page in IE or Chrome shows it the way it should. At least the way that you would think it should show.
Is this a known bug? Is there a workaround?
Per spec, text-indent affects the text in the first line box of the block.
The problem is that the spec doesn't really make it clear whether the first line box in this case contains the block or the text, and different UAs interpret the spec differently...
http://jsfiddle.net/nicktheandroid/3LxRr/
When highlighting a paragraph containing a link that's set to "display:inline-block", there appears a little white block over the top of the link ( when it's selected/highlighted). press Ctrl+A to select everything on the page and you'll see what the problem is.
If I change the line-height down to 16px - it goes away, but the line-height for the paragraph and the link are the same. I need the link to be displayed as an inline-block because I have tool tips that pop up, and if the link gets split in half by a new line, the tool tip appears in the middle of the page, so inline-block is a must.
It only happens in webkit browsers (Chrome and Safari). It's something about how the browser engine renders text selection highlight and is not really a CSS issue. because when you apply background color your code will work same in every browser.
If you believe it's a bug you can report it to webkit.org