My problem is that Firefox is adding 2px to the height of the anchors in my nav. I'm controlling the height by adding padding to the anchors that are nested inside a list.
It's throwing my nav height off and things aren't lining up.
When I inspect the elements, the heights are:
FF: 20px
IE: 18.4px
Chrome: 18px
How do I make sure the heights are the same? I'm adding padding to the anchors so that the whole button is clickable instead of just of the words. Any ideas?
ul, li{
padding: 0;
}
li{
width: 33%;
text-align: center;
display: inline-block;
}
a{
text-decoration: none;
padding: 15px 0;
background-color: bisque;
display: block;
}
a:hover {
background-color: #bbb;
}
<ul>
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
Not sure why it's giving a different height, but to fix it I specified the height of the li and it seems to work. Wish I knew why it has a different height in the first place though.
Related
<div class="box">
<div class="pic">
<img src="/images/img.png" class="img_pic" />
</div>
</div>
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
}
.img_pic {
display: block;
margin-left: auto;
margin-right: auto;
}
I want the image ("img_pic") to be centered vertically as well. With what I have I can do it horizontally but not vertically. I tried vertical-align: middle; but that didn't work and I tried line-height: 73px since the height of the box is 73px. I can't seem to figure a way out of this.
How can I center the image vertically while still retaining the horizontal centering?
Don't make the image a block element. As an inline element you can center it as text. Then set the line height to the same as the box, and set vertical alignment on the image to middle to put it in the middle of the text line:
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
text-align: center;
line-height: 73px;
}
.img_pic {
vertical-align: middle;
}
Demo: http://jsfiddle.net/AwgNy/
You cannot vertical-align block elements.
If you know the height of the image you could put an equal top and bottom margin on .img_plc or an equal top and bottom padding on `.box.'
As you've said it's variable height, then you can use display: table-cell for .box with vertical-align: middle;
If you know the dimensions of the image you can do it in the css and either use margin to push it down:
margin-top:/*(box height / 2) - (image height / 2)*/;
or use relative and absolute positioning:
.box
{
position:relative;
/*other code*/
}
.image_pic
{
position:absolute;
top:/*(box height / 2) - (image height / 2)*/;
}
If you cannot guarantee the dimensions of the image then you should use javascript/jQuery to get the image height and use the same formula as above for working out the offset. Then still using javascript/jQuery, edit the css for the image to set the offset for margin-top or top.
Just Use This CSS DEMO HERE
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
position:relative
}
.img_pic {
display: block;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:auto
}
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I am having trouble ellipsis text (.title) found in between a span that is floated left and a span that is floated right. When overflow occurs .length is pushed down onto a new line. How can I fix this?
JS FIDDLE:
http://jsfiddle.net/VfHdS/6/
HTML:
<div class="song">
<span class="tracknumber">4</span>
<div class="title">This is the song tittle!!!!!!!!!!!</div>
<span class="length">4:31</span>
</div>
CSS:
.song {
font-size: 14px;
padding: 2px 20px;
}
.tracknumber {
margin-right: 10px;
}
.title {
color: #262626;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.length {
float: right;
}
Using the sample html you provided I set up a fiddle. Setting the .title element to display block is what gets the ellipses to show up.
http://jsfiddle.net/f4uUJ/
I've also repositioned the track number and play time absolutely so the song title can be 100% width. You just need to add padding to the track to give the title some breathing room.
CSS
.song {
font-size: 14px;
padding: 2px 40px 2px 20px;
position:relative;
}
.tracknumber {
position:absolute;
left:0;
top:2px;
}
.title {
white-space: nowrap;
width: 100%;
display:block;
overflow: hidden;
text-overflow:ellipsis;
}
.length {
position:absolute;
right:0;
top:2px;
}
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}