I dont know whether its my mistake or Firefox bug. I have a text box in which the value is dynamically generated through python.
The value in the text box should be in the middle of the text box.
It works in IE and Chrome, but in Firefox it doesn't work.
Here is the CSS:
#query
{
margin: 0px;
padding: 0px;
width: 465px;
vertical-align: middle;
height: 45px;
font-weight: bold;
font-size: 16px;
line-height: 45px;
color: #aaaaaa;
padding-left: 10px;
display: block;
}
I don't know your html but your code renders the input visually ok - only the cursor is rendered badly. IE8 renders it as it should, firefox stretches the cursor from bottom to top, but once you start writing it will go back to normal. In chrome the cursor renders from top to baseline.
Other that that it looks ok. If you are really having issues you could change the line-height to padding
height:29px
padding:8px 10px;
I think
vertical-align: middle
Does not work in firefox ... people has some problems with it.
Should try different approach.
Related
I created a text box over an image for a client that has a overflow set to scroll so that the text does not spill over when the page is resized. For some reason I do not see scroll bars on my screen but my client sees them on both the x and y axis.
Does anyone know if having "overflow: scroll;" causes scroll bars to show up in certain versions of Chrome and if there is a solution to make them invisible?
My client's alternative would be to use images with text on them and I would like avoid that for myriad reasons including accessibility.
I have an offline version of this as well and still see no scrollbars.
I am using a Mac and they are using PC but, to my knowledge and recollection, this shouldn't make a difference for this issue.
You can view the page here.
The page is cramped at the moment as we are doing a stylesheet overhaul that is offline.
Here is a snippet of the CSS I am using for this. Thinking some of it may be redundant. Not sure if removing any parts of this will change things visually as I can't replicate the issue.
.boxwrapper {
position: relative;
font-family: Arial;
margin: 10px 15px;
}
.imagebox {
position: absolute;
top: 15px;
right: 15px;
background-color: #ffffff;
color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
height: 85%;
width: 35%;
overflow: scroll;
}
.imagebox p{
color: #000;
overflow: scroll;
font-size: 18px;
}
Expected results are for the page to render with no scroll bars like it does for me.
I have a little div with a number inside of it.
Firefox displays it differently from Safari or Chrome.
Here is what Safari displays:
And here is what Firefox displays:
The CSS is this:
background: red;
height: 20px;
width: 20px;
float: left;
margin: 7px;
padding-top: 0px;
color: white;
text-align: center;
Why is this happening? What can I do to prevent it?
Thanks a lot in advance.
Explicitly set the line height and the margins of the text itself.
open the following URL in chrome
www.nextag.com/camera/stores-html
and refresh the page
Notice the location of the help icon next to ZIP code on top right corner..it is misaligned
Now open the same in firefox.. it is properly aligned..
CSS code for this is as follows:
background: none repeat scroll 0 0 white;
border: 1px solid #C2CCCC;
border-radius: 4px 4px 4px 4px;
color: #C2CCCC;
display: block;
float: right;
font-weight: bold;
height: 13px;
margin-left: 4px;
text-align: center;
width: 12px;
padding-right: 1px;
to make it work in firefox.. i added the following 3 ATTRIBUTES:
position: relative;
top: -15px;
left: 18px;
then it started working fine in chrome, but now it got misaligned in firefox.. what do i do??
You have a SPAN inside A. Simply disable the "float: right" property and add "display: inline"
.rb span.zip-info {
dispay: inline;
float: none;
}
Have you tried using the "position: absolute" attribute instead of "position: relative"?
Seems like Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
You can do one thing add a div wrapper and then absolutely position the element in the top right of the wrapper.
Hope this helps.
Add property float:left
.rb #zipTxt a {
color: #2283AB;
font-size: 12px;
font-weight: bold;
float: left;
}
Take the following example:
This is a textarea, with a background image (the grey bar) and a relative positioned div after the textarea with a top offset to move the text in place.
The Markup:
<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>
The CSS:
.some_textarea {
background: transparent url(gray_bar.png) repeat-x 50% 100%;
width: 99%;
padding: 5px;
margin: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
border: 1px solid #C3C3C3;
}
.message_text {
display: inline;
color: #999;
font-size: 10px;
position: relative;
top: -21px;
padding: 0 6px;
}
The problem is that Firefox is the only browser that doesn't agree with the offset, and results in this very small pixel pushing annoyance:
What is causing this? How can I fix this for consistency? What non-clunky workarounds exist if it can't be fixed?
UPDATE
http://jsfiddle.net/UnsungHero97/maHkr/7/
How about something like this...
http://jsfiddle.net/UnsungHero97/maHkr/2/
What I did was wrap your textarea/message combo in a relatively positioned div and then absolutely positioned the message to the bottom left. You can play round with the exact positioning/margins/paddings to get it looking good across the browsers.
I hope this helps.
Hristo
use jQuery(window).load() instead of jQuery(document).ready()
I have this CSS code:
#tweet-container{
width: 290px;
height: 272px;
border: 1px solid #CCC;
color: #CCC;
font-size: 28px;
text-align: center;
letter-spacing: -2px;
min-height: 10px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
But firefox doesn't seem to recognize the top and bottom padding. Safari and Chrome both show it normally, and even in Firebug when I add padding-top: it doesn't work. Its like its not a valid statement or something. Is there something I'm missing?
Humm, this is a bit interesting. You've set the width as 272px, but its actually displayed as 270px. You've set the height as 290px, with the 30px total of padding, the real displayed height should be 320px, but its actually 318px.
Had a little play and taking out display: table-cell; seems to sort the issue. Although the padding isn't spread equally for some reaosn, it all appears at the bottom. Putting the text in a p tag, and giving that a 15px top margin has done the job though I think.
did you try adding padding:15px!important; ?