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;
}
Related
I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?
.icon-wrap a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.icon-wrap a {
display: inline-block;
width: 110px;
height: 110px;
text-align: center;
overflow: hidden;
margin: 0px auto;
border: 6px solid black;
border-radius: 100%;
text-decoration: none;
}
...
Here's my code working in a fiddle
Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.
If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.
So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.
Something, like this:
.icon-wrap:first-child .icon-holder {
padding-top: 5px;
}
Here's an updated jsfiddle to that.
here's an image of whats going on:
http://imageshack.us/photo/my-images/217/ffbug.png/
here's my code:
select {
width: 150px;
height: 40px;
padding-left: 10px;
}
in chrome and firefox, it vertically-aligns the select values perfectly. in firefox, the values are stuck to the top of the select.
i've tried adding vertical-align: middle and line-height: 40px, both of which changed nothing.
Just use padding-top: 10px; padding-bottom: 10px; on that element. Your text will be automatically centerd.
i decided to put it in a div with this code:
.search li select {
padding: 0px;
margin: 0px;
}
.search li div {
height: 32px;
padding: 10px 10px 0px 10px;
background: #ffffff;
}
the div background is same as the select background.
its pretty well centered in FF IE and chrome, only thing is the arrow is inside the padding as well...oh well...sometimes you can't win i guess.
Try this CSS code:
#-moz-document url-prefix() {
select {
padding-top: 13px;
}
}
This should work, when you want multiple browser support.
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()
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.
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; ?