I have an issue with IE9 and css. It looks like IE9 doesn't accept the padding definition of the two elements p and a. The background color shrinked and is only in the upper left corner of the elements. The following css works fine in firefox though:
<div class="slider">
<p class="claim orange">Some Text</p>
<a class="claim blue" href="">Some Link</a>
</div>
<style type="text/css">
.slider p {
position: absolute;
top: -200px;
z-index: 8000;
padding: 0.5% 2%;
line-height: 100%;
color: #fff;
white-space: nowrap;
text-transform: uppercase;
}
.claim {
line-height: 100%;
font-size: 18px;
}
.orange { background: #EF7D00 }
.blue {
color: white;
font-weight: bold;
padding: 10px 15px;
border-color: white;
}
.blue:hover {
color: white;
font-weight: bold;
padding: 10px 15px;
background: #2e6da4;
border-color: #2e6da4;
text-decoration: none;
}
</style>
What might be the issue and how can I get the background color work in IE9 in this case?
Your code as-is doesn't seem to display a working page, at least for me in Chrome or Firefox. The p element containing "some text" is displaying with top: -200px, off the page to the top, and the background is white so I can't see anything until I mouseover the link.
Did you forget to include some key lines in your code? Try pasting everything into a text file and testing it out, before uploading it in a question, or it's going to be hard for us to help you.
It's not clear to me what you're trying to do here!
Related
I'm trying to keep the unicode ace of hearts U+1F0B1 white with a green body background. I'm thinking that I need to create a div with the same size as the card and set that to white. Is there a better way to do this?
This is the sample way. but you need to adjust the "text-indent" and the "letter-spacing" depending on the font-size of the unicode.
See code below
body {
background: grey;
}
i {
position: relative;
display: inline-block;
}
i::before{
content: "\1F0B1";
font-style: normal;
color: white;
display: block;
line-height: 0.8;
font-size: 150px;
background: green;
letter-spacing: -10px;
text-indent: -10px;
}
<i class="heart"></i>
You can do it in a single HTML element as well, with a pseudo-class. Similar to how icon sets work these days.
i {
background: green;
font-style: normal;
padding: 2px 4px;
}
i::before {
content: "\1F0B1";
color: white;
}
<i class="heart"></i>
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
I've made two divs for navigation with given css:
for first button:
.OptionsButton .DropDownButtonOverlay
{
margin: 0px -95px 0px 0px;
width: 92px;
height: 38.5px;
float: right;
z-index: 2;
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
.optionsButton
{
border-radius: 3px;
-webkit-appearance: none;
}
and the second button is as this:
.defaultButton
{
font-family: 'Open Sans', Segoe UI, Verdana, Helvetica, Sans-Serif;
border-radius: 3px;
font-size: 14px;
color: #FFFFFF;
padding: 10px 15px;
-webkit-appearance: none;
margin: 0; /* fixes chrome bug */
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
the problem I am dealing with is they look fine on Chrome and IE (alligned nicely). However when I go to firefox they don't get alligned as well as intended (i am putting them in another div as a top menu thingy).
It seems like the font is influencing that. I've tried making font by percentage (100.01%), however it makes it look nice in firefox, but then ruins the view in IE and Chrome.
how could I fix this?
I found out that firefox tends to work differently on divs (I knew this before, but the solution was unclear), therefore I added Max-Height attribute on the button that expands due to text-size in it's body which fixed the problem.
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points