vertical-align is the one issue which i am struggling to fix for long days. I understand vertical-align css property is buggy in most of the browsers.
Mostly, we can fix using display:table-cell, because vertical-align is ideal for table and IE will not respond for this.
But, do we have any other alternate fix for vertical-alignment.
Here, is my example for which i suppose to fix.
http://jsfiddle.net/gviswanathan/5rVJ3/
using line-height would be a good replacement.. but,it depends on what you are applying it on.. it will work in your case though.. check the fiddle,added height,width,line-height
http://jsfiddle.net/mvivekc/R4Y4s/2/
You can try using bottom-margin in div blocks in case vertical-align doesn help to achieve your required result.
<div style="margin-bottom: ?px">
where ? can be +ve or -ve value as necessary
You can fix this with a negative bottom margin on the ul. Here's a working example: http://jsfiddle.net/5rVJ3/13/
code that changed:
.w ul, .w li {
list-style : none;
margin: 0 0 -7px 0;
padding: 0;
}
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I have an input field an width of 20% like you can see here:
<input id="saveServer" width="20%" class="depth"></input>
So to center it i add two span elements,with an width:40%, before and after the input field, to center the input field. Like you can see here:
<span style="width:40%"></span>
<input id="saveServer" width="20%" class="depth"></input>
<span style="width:40%"></span>
But somehow the the inut field does not center himself. I have no idea how to center it! Greetings from Germany! Thanks!
Heres the same example on fiddle:http://jsfiddle.net/bmkc2/
I think more context would help to clarify the problem,
but is this what you are after? One way to
center the input itself is by adding the rule:
margin: 0 auto;
http://jsfiddle.net/QqRCm/
Sticking to your method, here's a working fiddle: http://jsfiddle.net/bmkc2/1/
to be taken into consideration, a width can't be applied on an inline element like a span. You first have to display it as inline-block for example.
display: block on input will display it alone on its own line. Again, inline-block or floating.
inline-block has one annoyance (it's normal but still annoying here), it'll display whitespace between elements displayed as inline-block, that is a 4px space between each span and input. The HTML comments are there to avoid these spaces (it's normal because imagine two words each in a span and separated by a space. You need and expect this space between words or it'd be unreadable!)
width: 20% and border-width: 1px and padding 5px will add up and with 2x40% it'll be greater than 100%. box-sizing: border-box will avoid that border and padding are taken from the 20% width (check caniuse.com for the complete list of prefix to add -moz-, etc).
edit:
your input has neither a label (associated with its for attribute) nor a title attribute, is it just because it's a demo ?
margin: 0 auto as stated in another answer and text-align: center are preferable to adding 2 empty elements just for centering. I just wanted to make your first try work.
The reason your code does not work as you think it should is because both the input element and the span element are floated elements. To get them to work they way you are thinking, you need to have them displayed as inline-block elements.
Add the following code and it will work the way you expect it should.
span, #saveServer {
display:inline-block;
}
jsFiddle: http://jsfiddle.net/bmkc2/2/
---------------------------`
.x
{
margin: 0 auto;
display: block;
}
`-----------
to enter the image copy the link then paste in browser
https://i.stack.imgur.com/XJsoq.png
I am making a HTML page, and have attempted to set a <a> tag a border-bottom.
It would not show, whatever I did. So I made a reduced test case that can be seen here:
http://codepen.io/hwg/pen/ILKdx
Happens in FF beta, and Chrome 22.
If I remove the overflow:hidden; or change it to overflow:visible, it works. The problem is that I need to have that set.
So how can I have a border-bottom? (or is it me :) )
(I cannot use text-underline, want it dotted)
Thanks
Harley
display:inline-block; on the link seems to do the trick.
Add 1px of padding on the top and bottom of the grid:
.grid{overflow:hidden; padding: 1px 0px;}
OR
Make the grid element inline:
.grid{overflow:hidden; display: inline;}
There's probably a hundred different ways of solving this really.
try increasing the line-height. eg. add line-height:200%; to the #test css
In my case any solutions didn't work for me.
I solved the problem by add blank div after last trouble-making div.
In my case, I had to add this to my element:
display: table;
width: 95%;
As you can see from the example below, the Facebook like button is supposed to appear in that blank space between the date and the start of the article, but instead it's shifted downwards for an unknown reason that I can't figure out. I'm sure it's some obscure weird CSS stuff, but any help is appreciated. Thanks! :-)
And here's the actual page: http://readabout.me/achievements/Reinhardt-University-s-Morgan-Sparks-Selected-for-Who-s-Who-Among-Students-in-American-Universities-and-Colleges/3638644
I fount the issue
Please remove margin #news-story iframe.fb_ltr
http://readabout.me/stylesheets/news.css line 30 - and set padding top on "#fbLikeButton" problem will be solve
I could fixed the issue on firebugg , this is print screen;
Delete line 30 in your news.css file:
#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
You are explicitly giving the like button iframe a top margin of 25px.
I think this will solve your problem :)
<div id="fbLikeButton" style="height: 50px; ">
Edit: I think the #cpilko has spotted the exact reason, though I believe the news.css is not yours but facebook's, in that case you can try adding the following code to your css.
#news-story iframe.fb_ltr {
margin: 0 !important;
}
Just add a height property in the like button - #fbLikeButton{height:60px;}
This worked. Thanks everyone!
-#news-story iframe.fb_ltr {margin:25px 0 10px 0;}
+
+div#fbLikeButton {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
Basically, I removed the internal styling and styled the surrounding div. I didn't realize we had code that actually styled inside the Facebook like button iFrame.
If you go to the first blog item (Mona) and expand it using the '+' icon. The image thumbnails are aligned 24px from the left using a margin. This works in every browser but IE7 which ignores the margin on the first list item.
http://www.dririser.co.uk/index.php
CSS
.artistMeta li {
float: left;
margin: 0 0 24px 24px;
position: relative;
width: 160px;
}
There is a similar question on here but the there was no real answer and I can't use their solution.
Why is ie7 ignoring the left-margin on my first list item (only)?
Any ideas?
just a quick test.. not sure if it will work.. but try adding a display:block on your li and don't use the shorthand for the margin, instead use margin-left and margin-bottom...
it seems to me that IE is not refreshing the style of the elements, because when i inspect the elements, the navigator adds the correct margins...
If that doesn't work.. you might want to put the style inside the tag (since you're using JS to add the images), i know it's not elegant, but i guess that could force the navigator to set the style on the li
and if that doesn't work.. then i've no idea what could be wrong =P. I hope this helps...
Good Luck!
The problem IE7 is having here isn't in your CSS file, it's in your javascript in global.js. Specifically the following line ...
$(".artistMeta > li:nth-child(3n+1)").addClass("articleSlideOdd");
As per the convention in CSS, JQuery starts the child count at 1 for nth-child (as in the first child is nth-child(1)), where as, ie7 is expecting it to start at 0. So with ie7 3n+1 matches the 2nd, 5th, 8th item and so on.
Looks like JQuery isn't handling ie7 properly, so you'll need two statements to cover ie7, and everything else.