I have a website with text that I've set to #666666 in CSS. This color persists just fine across browsers- however, when I view the site on a Windows machine, the text appears a much lighter shade of gray, despite my using the same browsers (Firefox and Chrome). This problem only occurs within the content elements- the nav bar is also set to #666666 and it behaves as desired.
The CSS for the nav bar:
a.nav {
color: #666666;
font-size: 48px;
font-family: 'Raleway';
text-align: center;
text-decoration: none;
margin-top: -50px;
}
The CSS for my content (this is the stuff that changes color):
#content {
color: #666666;
font-size: 18px;
font-family: 'Raleway';
width: 470px;
margin: 0 auto;
margin-top: 15px;
line-height: 128%;
text-align: justify;
}
Any ideas about why this might be happening and what I can do to remedy it?
may be rgb color as it may be more consistent applied on different elements.
color: rgb(102,102,102);
Related
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>
on my website: http://evoxity.net/en/wallpaper/3-wallpaper.html
i noticed two bugs with fancy box. The first one is, if you decide to enlarge the pciture with a click on it. The first time it loads, the background is a bit out of the center, if you close the window and enlarge it again, its fine. This bug contains if you hover one of the sites of the fancybox and switch through the images.
The secound bug is, the line under the X to close the window.
Any suggestions how to fix that?
product.tpl:
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css:
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here some pictures to explain the last bug. (just click first, secound image to navigate) http://imgur.com/kGUyv2i,Ts8rrOk#0
Removing the lines under the X
a {text-decoration: none;}
The box looks centered for me when I open it.
search in global.css line 7959 add text-decoration:none;
It works in Chrome desktop
But not Safari iOS
Here is the the CSS
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // A little smaller because it's in uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I tried font-size: smaller, 0.8em, etc, but it did not help. 50% or 0.5em looks good on iPhone, but is too small on the desktop. text-transform did not matter. padding: 1px; did not help.
Change display to inline-block, and add padding to the top
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!
I'm trying to make a banner in HTML/CSS. However, I'm having trouble with the margins in one of my div's. It works perfectly in Firefox, but not in IE.
#lowerText{
float: left;
margin-top: 50px;
margin-left: -185px;
color: rgb(255, 199, 142);
font-family: 'Special Elite', cursive;
font-size: 15px;
text-transform: uppercase;
display:inline;
}
#upperText{
float: left;
margin-left: 20px;
margin-top: -10px;
color: rgb(255, 199, 142);
font-family: 'Special Elite', cursive;
font-size: 30px;
text-transform: uppercase;
display:inline;
}
It's an h3 tag in #lowerText which says "-Foo foo foo bar". In IE it only shows: "oo bar". The text in this div HAS to be right underneath #upperText at a specfic position. But the margin-left: 185px in #lowerText doesn't show in IE, but it shows in Firefox.
What do I need to do to fix this?
In your comment, you state your jsfiddle works in IE. jsfiddle auto inserts a doctype which I now assume you do not have in your original page. If so, IE is in quirks mode without the doctype and the cause of your problem (other than IE being the worst browser on the planet).
EDIT: Didn't look first. jsfiddle shows a doctype. Did you put that there?