Check the image at this link www.checkwebsitedemo.com/paging.jpg
, you will notice part of Next >> is wrapped in 2 lines i.e. >> is showing in 2nd line, I want them to have them in same line always. If the space is less the entire Next button should go to next line but should not break.
Please let me know how can i do this via css. Below is my css code.
.paging {font-size:15px !important; line-height:250%; text-align:center;}
.paging .paginate, span.inactive, a.current {font-size:12px; margin:1px; padding:3px 5px;}
.paging span.paginate_dropdown {float:right;}
.paging span.inactive {background:none !important; border:1px solid #CCCCCC !important; color:#CCCCCC !important; cursor: default;}
.paging a.paginate {border:1px solid #CCCCCC; color:#0A246A; text-decoration:none;}
.paging a.paginate:hover {background:#088AD8; border:1px solid #000000; color:#FFFFFF; text-decoration:none; text-shadow:0 1px 1px #000000;}
.paging a.current {background:#088AD8; border:1px solid #000000; color:#FFFFFF; font-weight:bold; text-decoration:none; text-shadow:0 1px 1px #000000;}
Thanks in advance.
Add white-space:nowrap; to the button's CSS you are talking about.
Using display: inline-block; should get that button to stick together; either stay on the first line or get pushed down together.
Overall, however, you should adjust your styles so that the buttons never get pushed to a second line. Perhaps "..." a couple more pages.
Related
I have a CSS style defined for all inputs with type text on the page. I'm using the Spectrum Color Chooser on part of my page, and this is implemented onto the page using
<input type="text" class="basic" />
I'm trying to override the "global" styling that I've applied to all inputs of type text using the following, but it's not working:
input[type=text]:not([class=basic]), select {
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
Is there a way to override this?
I really fail to see the issue here, isn't this the point of CSS specificity? http://jsfiddle.net/calder12/GBH8b/
input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}
The CSS code posted works, affecting fields not in the class, on supporting browsers (including modern browsers in general, but excluding IE 8 an older).
It does not affect fields that are in the class, obviously. But replacing an existing rule that applies to all input fields by this more restricted rule would make a difference.
Just Declare !important as it will override the main.
input[type=text]:not([class=basic]), select {
height:28px !important;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
I have CSS code from a template design that a client wants to use. One of the issue I'm having is that, once a text option is selected (those options with wide length) is writing over the drop-down arrow.
See image
I have tried using z-index and placing overflow:hidden where appropriate. Here is the CSS code:
/* search drop-down values */
select option {}
option.level-0{padding:0 3px;}
option.level-1,option.level-2,option.level-3,
option.level-4,option.level-5,option.level-6,
option.level-7{}
.selectBox-dropdown{ height: 34px; min-width:190px; max-width: 320px; position:relative; border:solid 1px #BBB; line-height:1; text-decoration:none; color:#666; outline:none; vertical-align:middle; background:#FFF; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; display:inline-block; cursor:default; margin-top: 1px\9; height: 33px\9;}
.content_right .selectBox-dropdown {width:303px;}
.content_right a.selectBox-dropdown:hover {text-decoration:none;}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow{border-color:#BBB}
.selectBox-dropdown.selectBox-menuShowing{-moz-border-radius-bottomleft:0; -moz- border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.selectBox-dropdown .selectBox-label{width:100%; padding:0 .7em; line-height:2.4em; display:inline-block; white-space:nowrap; overflow:hidden; font-size:14px}
.selectBox-dropdown .selectBox-arrow{position:absolute; top:0; right:0; width:23px; height:100%; background:url(images/sb-arrow.png) 50% center no-repeat; border-left:solid 1px #BBB; }
.selectBox-dropdown-menu{position:absolute; z-index:99999; max-height:200px; border:solid 1px #BBB; background:#FFF; -moz-box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); overflow:auto}
.selectBox-inline{width:250px; outline:none; border:solid 1px #BBB; background:#FFF; display:inline-block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow:hidden;}
.selectBox-inline:focus{border-color:#666}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a{list-style:none; display:block; cursor:default; padding:0; margin:0}
.selectBox-options li a{color:#666; padding:1px .7em; white-space:nowrap; overflow:hidden; background:6px center no-repeat; text-decoration:none; font:14px/1.5em Arial,Helvetica,sans-serif;}
.selectBox-options li.selectBox-hover a{background-color:#EEE}
.selectBox-options li.selectBox-disabled a{color:#888; background-color:transparent}
.selectBox-options .selectBox-optgroup{color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;}
.selectBox.selectBox-disabled{color:#888 !important}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow{opacity:.5; filter:alpha(opacity=50); border-color:#666;}
.selectBox-inline.selectBox-disabled{color:#888 !important}
.selectBox-inline.selectBox-disabled .selectBox-options a{background-color:transparent !important}
code for the drop-down:
<div class="state-dropdown"><?php wp_state_dropdown() ?></div>
<span id="campus_dropdown"><?php if (empty($_GET['cp_state'])){ wp_campus_dropdown();} ?></span>
<?php if (!empty($_GET['cp_state'])){?>
<script type="text/javascript" >loadXMLDoc('<?php echo $_GET['cp_state'];?>','<?php echo $_GET['cp_your_college'];?>')</script>
<?php }?>
Any suggestions or help would be greatly appreciated. I know this is a bit too much of CSS, but again its from a template and I have been pulling my hair out for weeks!
Thank you so much in advance!
First of all without sample HTML, we can only guess at how the css is used. After analyzing the css you provided, I took a stab at how I thought it might be used, jsFiddle here. Based on this assumption there are two options:
Set a right padding for the elements that contain the menu options. This may cause the dropdown to widen, but should be better as it will allow users to see the entire text of the option.
Set the background for the dropdown arrow element ('.selectBox-arrow') to a solid color and match the border radius of the containing element. Note that the background color defaults to transparent.
If for whatever reason neither of these options work in your situation, remember, Firebug (or other browser's developer tools) are your friend. These tools can help make short work of problems like this.
Hi I'm trying to set a space between two div tags but I don't know how to do it, I've been searching but I don't understand the examples that I've found
Here's the CSS code:
#logo{
position:absolute;
top:160px;
left:65px;
}
#desc{
position:relative;
margin-top:290px;
left:65px;
}
#desc_entry{
position:relative;
margin-top:5px;
left:65px;
}
.pressed {
color:#999;
padding: 10px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
this is the only way I've managed to get a separation between the div tags but the problem is that because I'm using the pressed class it fills the div with this style like this
http://i54.tinypic.com/uoux0.jpg
And i don't want it to be all filled. Any thoughts?
like other people said, you need to post the html or at least say what element do you want to add space to. This being said, I bet what you need is some clear:both somewhere, because that's the most common mistake on people starting with CSS
I have a triangle next to menu items, using pure CSS. It works flawlessly in Internet Explorer and Firefox but Chrome crops the bottom of the arrow. Here's some screenshots of the issue:
Here is the CSS I'm using:
/*menu arrows */
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.arrowspriteselected {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.leftish li:hover .arrowsprite {
border-top:5px solid #444444;
}
.leftish li:hover .arrowspriteselected {
border-top:5px solid #444444;
}
The HTML is:
<li>Wanted <span class="arrowsprite"></span></li>
Does anyone see any glaring problems in my CSS?
Try setting display to inline-block for your .arrowsprite rule. See this fiddle for an example.
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
display:inline-block;
}
It's working for me in Chrome 14.0.803.0 dev.
I'm not able to reproduce what you see in Chrome 12.0.742.112. For me, the span didn't even show up with that CSS and HTML. However, I tried putting in a non-breaking space, and then I was able to see it and it displayed fine.
<li>Wanted <span class="arrowsprite"> </span></li>
Here's a fiddle to compare with and without the non-breaking space. Notice that on Firefox at least the method gives more space (no pun intended), so see if you can still make it do what you want. If you can't, the next thing to try would be a float for your list elements (See this question for why).
I have a UL that looks like this:
<ul class="popular-pages">
<li>California</li>
<li>Michigan</li>
<li>Missouri</li>
<li>New York</li>
<li>Oregon</li>
<li>Oregon; Washington</li>
<li>Pennsylvania</li>
<li>Texas</li>
<li>Virginia</li>
<li>Washington</li>
</ul>
And CSS that looks like this:
ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px; color:#526d3f
}
ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
So it's working fine in modern browsers, but it's looking like this in IE6. Any suggestions?
The reason for your layout is probably because you have the float on the anchor, move it to the list-item instead.
ul.popular-pages li {
float: left;
}
Since you're not setting any width in your LI's, I suggest skipping the float and set display: inline on your LI's instead, if you want them on a row.
Adjust with padding/margin to get appropriate spacing between them, and line-height to get correct behaviour for any eventual 2nd line.
That way you won't have problem with your UL not taking up space, without the need of a hidden clear-element at the end of the list (which is your other alternative)
What DOCTYPE are you using? DOCTYPE has an impact on how browsers render.
try use this CSS hack for IE6.
*html ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px;
color:#526d3f
}
*html ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
then adjust your CSS definition for IE6
You're floating your elements, so their parent needs to clear/reset the flow via the clearfix 'hack'.