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.
Related
I have a css problem with my drupal site (www.terrafirmasouth.co.uk) to do with the slideshow caption box and the pager block underneath.
When you access my site for the first time, the transparent caption box (bottom left) on the slideshow starts lower by the height of the pager block below then adjusts itself to the correct position. Pressing Ctrl-F5 also recreates the problem.
If I disable the pager block the problem goes away.
By adding position:absolute to the pager block the jumping stops, but the text below my pager block seems to interfere (overlap?) with my pager block, and I cant click on the numbers anymore to change slide .
I want to be able to show the pagers (1-6) under the slide, so that they can be clicked (I have already tested this with no position:absolute and it works fine, but I have the jumping problem of course).
I have attached my latest css below, but this has not gone live onto my site yet, just running it on my pc using xammp.
/* my caption box */
.trcaption {
position: absolute;
left: 20px;
bottom: 10px;
background: #353535;
opacity: 0.85;
filter:alpha(opacity=85);
color: #FFFFFF;
padding: 10px 10px 10px 10px;
}
/* title inside caption box */
#trtitle {
font-weight: normal;
font-size: 18px;
padding-bottom: 5px;
color: #FFFFFF;
font-family: 'LatoLight', Arial, sans-serif;
}
/* read more link inside caption box */
#trlink a {
color: #008C07;
float: left;
font-size : 12px;
}
/* pager block under my slideshow */
.views-slideshow-controls-bottom {
display: block;
position: absolute;
text-align:center;
width: 100%;
}
/* pager item i.e. number number */
.views-slideshow-pager-field-item {
display: inline-block;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* show active pager with grey background */
.views-slideshow-pager-field-item.active {
background: #E8E8E8;
}
If you are adding something absolute, make sure nothing else with property absolute is clashing with same, you can use z-index to arrange them in layer.
that will stop the clashing and things should work fine then. :)
For more help please add some working code, apart from CSS or create fiddel on jsfiddle
I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}
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;
}
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}
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.