I have this problem:
http://liberainformazione.it/
Title css rule:
p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}
Blue rectangle css rule:
.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}
In Chrome or Firefox the blue rectangle is near the title but with IE the title is on new line.....
I haven't understand why IE not recognize my css rules.
What I am doing wrong?
Thanks a lot.
Your page has <meta http-equiv="X-UA-Compatible" content="IE=7" />, so IE9 is operating as IE7.
In IE7, specifying width or (height) value triggers so called hasLayout which makes element's box somewhat isolated and prevents its contents from being floated by any external elements.
You should either set X-UA-Compatible meta element to IE=edge value (best option), or remove width: 300px; from p.right_sidebar_title rule, or specify this width for a container that contains both p.right_sidebar_title element and floating color square.
I noticed you don't have a float on p.right_sidebar_title, try adding float: left; to that.
If it helps, I'd put p.right_sidebar_title and .post-category-rightSidebar inside their own div:
<div>
<div class="post-category-rightSidebar"></div>
<p class="right_sidebar_title">Title</p>
</div>
Hope this helps!
Related
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
I currently have a simple header set up in HTML, and am using CSS to style it. I have created multiple styles: '#header' and '#header #right'. When I use 'float: right;' for the second style I mentioned, it moves the text down almost completely under the header.
Code:
index.html:
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>
main.css:
#charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}
JSFiddle here: http://jsfiddle.net/aKtep/
try adding a <div style='clear:both'></div> right after you close #right and see what happens
A quick solution (assuming I understand your desired result) is to rearrange the elements so the item you want to float to the right is the first in header. Floated elements are removed from the normal flow of the document, and often are pushed to the next line unless they have enough space. However, if the floated element comes first, subsequent elements will arrange themselves around it. See fiddle.
Remove the p tag from around the Login/Register link, modify the #header #right to include a padding-top:10px; You're also using too many divs when you don't really need to (divitus)
You need to specify a width of units for your container #header that will accommodate all of its content.
All I did here was change #header width from 96% to 960px
I guess I'm not 100% sure on what you're asking but it sounds like your normal header is pushing the right header down below it. From what I can see, it may have to do with your header container having a width of 96%. Then the #right #header has a width of pixels and the original header container might not have enough room left for that many pixels. Try changing the width of #header #right to a %
A word of advice, don't use ID's so much. You are creating very high specificity that can be a pain for you later on.
As mentioned before, you should use clear: float after the #right segment.
The reason for this is that the clear property is related directly to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.