Almost all of my text in page look like this in IE7
Structure:
<div>
<span>Andrea</span>
</div>
<div>
<span>Puglisi</span>
</div>
CSS:
div {
font-size: 35px;
height: 35px;
line-height: 35px;
padding-top: 5px;
}
I try increase height etc, nothing works.
Increase your line-height (along with height) until the problem goes away or remove line-height (and height) altogether and let the browser set the default line-height for your specified font size (while the div expands with content).
div {
font-size: 35px;
height: 45px;
line-height: 45px;
padding-top: 5px;
}
or
div {
font-size: 35px;
padding-top: 5px;
}
You can simply add some padding to bottom to fix problem.
padding-bottom:10px;
Related
The logo text on my site is for some reason offcentre. I can make it centred again by turning off display: inline-block. However this flattens the spacing around the text and I'm unable to get spacing back above the text (can't do vertical padding for inline elements).
How am I able to centre the text with the background colour? (trying to add text-align: center is automatically scored out in chrome dev tools for some reason?
HTML
<h1 class="logo">
<span class="text logo-title">SomeLogoText</span>
</h1>
less (css)
h1.logo {
font-family: "Roboto Slab", arial, sans-serif;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 15px;
float: left;
a {
color: #fff;
padding: 15px 30px;
display: inline-block;
text-align: center;
line-height: 1.4;
max-width: 155px;
background: #color;
.border-radiuses(0, 4px, 4px, 0);
.transition (color 0.4s ease-in-out);
position: relative;
font-size: 20px;
&:hover {
text-decoration: none;
}
}
.logo-title {
vertical-align: middle;
line-height: 1.6;
}
}
Inline elements ignore width, and also max-width.
Your text simply doesn't fit the max-width: 155px; that you specify in your LESS code.
As soon as you take display: inline-block; off the element, it becomes display: inline; per default and thus ignores your max-width: 155px; and so the element becomes wider to contain the text.
If you have to stick to those 155px all you can do is try to reduce the padding-left and padding-right, e.g. padding: 15px 10px; and see if your text fits then.
What you need is either:
Increase the max-with on .a (current value 155px)
Reduce the padding left/right on .a (current value 30px)
until the text fit the background
If a logo you could get away with giving the box a fixed width, as the text wont dynamically change, just match the box to logo width (or wider with centered text). If you need vertical spacing you could add an inline-block element inside the logo which contains the logo link itself
I have a title bar with a content div beneath it, that I would expect to match in width. The content div, however, appears to be offset very slightly to the left, as well as being slightly narrower as evidenced on the right hand side in this image:
The title div also has a little dynamic JS to make it "stick" to the top of the page, thus the "stick" portion of the css is also included.
Title div
#menu {
margin-top: 10px;
padding: 0.5ex;
width: 100%;
background-color: #0B0000;
color: #ffffff;
height: 16px;
}
#menu.stick {
margin-top: 0 !important;
position: sticky;
top: 0;
z-index: 10000;
}
Root background
#bodystyle {
background-color: #efefef;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding-left: 20px;
padding-right: 20px;
}
Page Content
#pagecontent {
/*width: 100%;*/ <=== This being set does not remedy the problem.
padding-left: 7%; Instead the div expands to the right hand
padding-right: 7%; edge of the page.
padding-top: 3%;
background-color: #ffffff !important;
}
Could the edge of the title possibly be affected by the text padding? I would have thought not, myself. Or, is this expected behaviour? Ideally I would like both sides of both title and content divs to be utterly uniform.
To answer here.
So what you want to do is add box-sizing to all alements:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
this could go just after your css reset. This way when you set the width of an element, that's the width that it is, as padding is now happening inside that width.
Next for height, you have 2 options, fixed height of that nav or to add padding to it. I would go with fixed height and also add line-height to be same height in order to center text in it.
Thats it.
I want to give space between span and div which is as follow
<span class="headingUserName">JAVA MAN</span>
<div class="home-middle">
Content
</div>
in My external css file
.headingUserName{
font-size: 24px;
margin-bottom: 10px;
}
this is not providing space between div and span.How to resolve this.
try this
<style>
.headingUserName{
font-size: 24px;
}
.home-middle
{
margin-top: 10px;
}
</style>
Setting the display to block will surely do what you are looking for. But it also will make your span element to cover all the width, because block elements has by default a 100% width.
If you don't want this, you can use inline-block instead. Your element stays with an automatic width but you can set it to have margins as in block elements.
.headingUserName{
display: inline-block;
margin-bottom: 10px;
}
Add display: block to the span styling
DEMO http://jsfiddle.net/kevinPHPkevin/Ep8G8/
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
This should work
.home-middle
{
margin-top:10px;
}
JS Fiddle Demo
or as Vector's Solution
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
If you really wanted the Span to provide the spacing, for some reason, you would have to set its display property to block, like this:
.headingUserName{
font-size: 24px;
margin-bottom: 20px;
display: block;
Please see below the code i have. I am trying to align the name with the image in a way that the name is centered on the right side of the image. I haven't been able to do it correctly. I tried adding position: absolute; but that still won't do the trick.
<div id="contain">
<div id="baseline">
<div id="title2">
<img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
</div>
CSS:
#contain {
width: 770px;
min-height: 170px;
margin: 20px auto 60px auto;
color: #222222;
font-size: 15px;
position: relative;
}
#baseline {
color: #999;
}
#title2 {
color: #000;
font-size: 30px;
margin-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
width: 750px;
}
Float both left and adjust the title with margin to center it.
http://jsfiddle.net/FBj3f/
If you know the height of the image you can set the line-height of the title resulting in a vertical centerd title http://jsfiddle.net/BtPwh/1/
If you're not against using a table then you can automatically ( Don't need image height. ) do it like this: http://jsfiddle.net/tLggp/1/
The easiest way is to set use a background-image instead of an image element. Then you can right-align text in that block, resulting in top-right positioning.
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.