For some odd reason I cant get this background image to be centered. Its only centered when the page is at 50% size.
On one of my other pages it works fine, however here it does not.
current HTML:
<head>
<title>
Why are you here?
</title>
<link rel="stylesheet" href="Akari.css">
</head>
<html>
<body>
<div>
<h1>
<span class="colorYellow">Akari </span><span class="colorGreen">- Playstation</span><span class="colorAqua"> 3 VSH Menu</span>
</h1>
</div>
<div class="body">
<p>
This is the page for Akari! Akari is a WIP VSH Menu for <span class="CEX">CEX</span>/<span class="DEX">DEX</span> CFW/<span class="henpt1">PS3</span><span class="henpt2">HEN</span></p>
<a
href="https://github.com/JamesIsWack/Akari-Legacy-Edition/releases/download/v1.2.2-1/Akari.sprx">Click
here to download the latest release (v1.2.2-1)
</a>
<p>
<style>
p
{
color:rgb(194, 194, 194);
}
</style>
To install it, put the Akari.sprx into dev_hdd0/plugins, then add /dev_hdd0/plugins/Akari.sprx to boot_plugins.txt (COBRA), or mamba_plugins.txt (MAMBA)
</p>
</div>
<p class="main">
Screenshots
</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284617-befda427-14ca-463e-9e0f-4ab0ba59707f.png" width="400"></img>
<p>Menu layout</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284724-191861c3-29e9-4a31-ba99-6e157dc83240.png" width="400"></img>
<p>Menu Settings</p>
<img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160466345-e4620c97-8dec-43ce-8689-09f05189fa98.png" width="400">
<p>Overlay and Settings</p>
<u1>Features</u1>
<li>
Ability to restart VSH, Hardware
</li>
<li>
Ability to show current FW version, LV2 Kernal mode (CEX/DEX)
</li>
<li>
Can be loaded by COBRA, MAMBA, and PS3HEN
</li>
<li>
Can take screenshots (BMP, PNG coming soon!)
</li>
<li>
Overlay with FPS, CELL/RSX tempature (F/C), FAN speed, RAM usage, and more
</li>
<br>
<p>
Note: this project has been depricated. Please wait until Akari v2 releases. Until then, use this.
</p>
<br>
<p> </p>
</body>
<div class="navbar">
<a href="../index.html">
Back to home
</a>
</div>
</html>
Current CSS:
body
{
text-align: center;
margin: 0;
background-color: rgb(0, 0, 0);
background-image: url(../images/channels4_banner.jpg);
background-repeat: no-repeat;
background-size: cover;
color: white;
}
a:link
{
color: rgb(126, 70, 156);
text-decoration: none
}
a:visited
{
color: rgb(126, 70, 156);
}
a:hover
{
color: rgb(255, 255, 255);
}
a:active
{
color: purple;
}
.navbar
{
background-color: rgb(52, 51, 51);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
border-radius: 10px;
opacity: 90%;
}
.navbar a
{
float: left;
display: block;
color: rgb(96, 46, 122);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover
{
background-color: grey;
color: rgb(55, 37, 58);
transition: background-color 1s,
color 1s
}
.navbar a.active
{
color: white;
}
h1
{
background-color: rgb(46, 31, 56);
opacity: 90%;
}
.colorYellow
{
color:yellow;
opacity: 100%
}
.colorGreen
{
color:greenyellow
}
.colorAqua
{
color:aqua;
}
main
{
color:rgb(195, 195, 195);
text-align: middle;
}
.CEX
{
color:lightskyblue;
}
.DEX
{
color:darkred
}
.henpt1
{
color:grey;
}
.henpt2
{
color:darkgoldenrod;
}
what it looks like
what its supposed to look like
I have tried changing the background-size but it hasnt gone anywhere.
This css code will get you a perfect full-page centerered background no matter the size.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
Project Link
I'm trying to get my background image to be visible but it doesn't appear, Also my css animations don't work as well any information on how to correct this?
.bg-image {
/* The image used */
background-image: url("https://i.postimg.cc/Hn0vxz91/Bridge.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
object-fit: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
body{
background-color:#28282B;
}
/* Style the links inside the pill navigation menu */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Change the color of links on mouse-over */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
pulse a:hover{
animation: pulse 1s infinite;
animation-timing-function: linear;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1);
100% { transform: scale(1); }
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
border: 1px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
#media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
.checked {
color: orange;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: white;
}
#star{
background-color:#28282B;
}
.container{
background-color:#28282B;
}
.center {
background-color:white;
}
<header>
<title> Portfoilo</title>
<nav id="navbar">
<div class="pill-nav">
<div class="pulse">
<a class="active" href="#welcome-section">Home</a>
Projects
Certifications</nav> </div>
</div>
</header>
<main><section>
<div class="bg-image"></div>
<div class="bg-text">
<h1>I Am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</section>
<section id="welcome-section">
<h1 id="practice"> Welcome to My Practice Portfolio</h1></section>
<p>This is my practice portfolio to fune tune my skills when I am readyu to showcase my skills to the web I will link it to the actual one when it's ready and I am ready to share on the web thank you for reading this messgae.</p>
<section id="projects">
Tribute Page
Technical Documentation
</section>
<section id="Certifications">
Certifications</section>
</main>
<body>
<div class="container">
<img src="https://i.pinimg.com/originals/21/45/47/2145477174ea52cd79758af817b905b9.jpg" alt="Avatar" style="width:90px">
<p><span>Julie Jacobs.</span> CEO at Mighty Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="container">
<img src="https://www.byrdie.com/thmb/fLsxKLnkeZWgt54cWlUCw8ya1KE=/1716x1716/smart/filters:no_upscale()/Screen-Shot-2020-08-31-at-2.57.48-PM-ab7152b68d9042838d10c0ff58f8d3bf.jpg" alt="Avatar" style="width:90px">
<p><span >Rebecca Flex.</span> CEO at Company.</p>
<p>No one is better than John Doe</p>
<div id="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</body>
<footer>
<!-- Add icon library -->
<div class="card">
<img src="https://i.guim.co.uk/img/media/9bb29e1304526b5aeb6378f485f16bd5310dff9e/0_236_4500_2700/master/4500.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=b87889efa83846281e306c50ef9370db" alt="John" style="width:100%">
<h1 class="contact">John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<p><button>Contact</button></p>
</div>
</footer>
I'm trying to get my image to display while having a shade of the background color add effect to the image and I have css animations that don't work any information on how to fix all that? So they both could become visible also the card section how to make one portion of it white.
Your background image is working fine for me right now.
About the animation; You mean div class pulse right?
Put <nav> inside <body> and see if it works or not.
In HTML5 & CSS3, The logo needs to float to the left top corner & the list of items/menu need to float to the right top corner.
In the output here, the logo is not invisible for some reason. But "alt" was mentioned, "in place of the logo."
Here is the output is received from my side. I've marked it with white color on top of the webpage:
/*---------------------------------------------------------*/
/*Basic Setup*/
/*---------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555555;
font-family: 'Lato', 'Arial', sans-serif;
color: #555555;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*---------------------------------------------------------*/
/*----------------REUSABLE COMPONENTS----------------------*/
/*---------------------------------------------------------*/
.row {
max-width: 110px;
margin: 0 auto;
}
/*-------------------------HEADINGS------------------------*/
h1 {
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------------BUTTONS---------------*/
.btn:link,
.btn:visited {
display: inline-block;
color: #fff;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
color: #e67e22;
border: 1px solid #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
color: #fff;
border: 1px solid #cf6d17;
}
/*------------------------------------------------------------------------*/
/*----------------------------HEADER--------------------------------------*/
/*------------------------------------------------------------------------*/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet">
<title>Shyam Restaurant</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/Images/logo-white.png" alt="Shyam Restaurant Logo" class="logo">
<ul class="main-nav">
<li>Food Delivery</li>
<li>How It Works</li>
<li>Our Cities</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food. <br>Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4">
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4">
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4">
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4">
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
I can't find out why the logo is visible.
Your elements are floating correctly, however, the parent has a max width of 110px provided by the class row so, basically, they have no much room to position
I want a <div> that its background is an image . I define width and height but when I use background-image to import the image , nothing appears !
whats the problem ?
of course the path is correct because it works in <img>
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
this is the whole code (the last div is going to be backgrounded by image)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>put.ac.ir::پرتال سایت</title>
<link rel="stylesheet" href="C:\Users\user\Desktop\font-awesome-4.7.0\css\font-awesome.css">
<style>
/* .........................things I should add to page....................*/
/* 1: href to top-menu links*/
/* ---------------------------------------------------------------*/
#font-face {
font-family:'Btitr';
src:url('font/BTitrBold.eot') format('eot'),
url('font/BTitrBold.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:"sahel";
src:url('font/sahel.eot') format('eot'),
url('font/sahel.ttf') format('truetype');
}
#font-face{
font-family:'Bcompset';
src: url('font/BCompset.eot')format('eot'),
url('font/BCompset.ttf')format('truetype');
font-weight:normal;
font-style:normal;
}
body {
margin :0;
padding :0;
}
#header{
margin:0;
padding: 10px;
height :20px;
background-color: #4d4d4d;
list-style-type: none;
}
li{
color: white;
display: inline-block;
}
#circle {
text-align: center;
width: 45px;
height : 45px;
border-radius: 50px;
background-color: white;
box-shadow: 1px 1px 2px 4px rgba(166, 166, 166, 0.3);
position: fixed;
right: 10px;
bottom : 10px;
}
#header-logo {
background-color:#800000;
height : 250px;
}
#header-logo div img{
height : 100px;
width : 400px;
padding-left: 550px;
padding-top:60px;
}
#top-menu{
font-family :sahel;
list-style-type:none;
}
#top-menu li{
color:#cccccc;
padding-top: 30px;
padding-left:25px;
font-size : 13.5px;
}
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
/* ---------------------------------------------------------------------------*/
</style>
</head>
<body>
<a name="top"></a>
<ul id="header">
<li class="fa fa-search" style="color:white;"></li>
<li style="padding-left:10px; font-family:tahoma; font-size:15px;"> ...جستجو نکنید </li>
<li style="font-family:tahoma; padding-left:350px;">شنبه خر است</li>
<li style="padding-left:200px; font-family:tahoma; font-size:16;">اقتصاد مقاومتی ، اقدام و عمل</li>
<li style ="padding-left:400px; color:#cccccc;">[lori] [torki]</li>
</ul>
<div id="circle"><i class="fa fa-angle-up" style="font-size:40px;"></i></div>
<!logo and top of the main page >
<div id="header-logo">
<div>
<img src="project-pics/assets/header-logo.png"/>
</div>
<div>
<ul id="top-menu" title="comming soon">
<a><li style="padding-left:295px;"> دانشگاه TER سامانه</li></a>
<a><li>داعش کده ها</li></a>
<a><li>معاونت حمل و نقل با گاری</li></a>
<a><li>معاونت دانشجوهای کلنگی</li></a>
<a><li>معاونت آمرزشی</li></a>
<a><li>موزه فراست</li></a>
</ul>
</div>
<! slide show of the page>
</div>
<div id="slide-show">
</div>
</body>
</html>
OK !
Its the path in the image
enter image description here
You can't have a space in your url.
background-image: url("project assets\files\project-pics\assets\harvard-university.jpg");
Use %20 or rename that folder with - or _.
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("projectassets\files\project-pics\assets\harvard-university.jpg");
}
use the code above. rename your folder project assets to projectassets.
You cannot have a space in your url path.
Also you don't have semicolon at the end of your height deceleration.
You have not defined a unit for your width declaration,use a valid unit like px,%,em to define your width.
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.
What version of IE are you using? Your page looks fine on IE10.
I can't help you if you are running an older version, but have a look at this :
Imitate CSS3 transition in IE?
-webkit-transition won't work on IE.