Coding Issue

[Tsuchino]

Hello guys,

I would appreciate some help regarding a problem I encountered in CSS.

I can't get the Logo image to be displayed in front of all the other elements on the website.

This is how the logo should look:


And this is how it looks right now:


After some research I understood it's a z-index issue, so I changed the z-index of the big picture to 10px and the logo z-index to 15.  It still didn't work.

Attaching my CSS and HTML.

HTML

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

+356 1234 5678

info@demsey.com.mt

• 
  HOME
  


• 
  ABOUT
  


• 
  SERVICES
  


• 
  PORTFOLIO
  


• 
  QUOTATIONS
  


• 
  CONTACT US
  

Demsey
Aluminium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

Our
Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

What
We Believe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

CSS

div{
display: block;
}

body{
margin: 0;
padding: 0;
background-image: url("images/background.jpg");
background-size: cover;
}

.wrapper{
position: relative;
}
.header{
width: 960px;
margin: 0 auto;
position: relative;
z-index: 10;
}

.headerImage{
width: 20px;
height: 20px;
padding-top:15px;
padding-left:10px;
padding-right:2px;
}

.contactInformation{
float:right;
height:50px;
}

.telephone{
float:left;
}

.telephonePicture{
background-repeat: no-repeat;
float: left;
}

.telephoneText{
font-family: Calibri, Times New Roman;
font-style: italic;
color: white;
float: left;
}

.email{
float:left;
}

.emailPicture{
background-repeat:no-repeat;
float: left;
}

.emailText{
font-family: Calibri, Times New Roman;
font-style: italic;
color: white;
float: left;
}

.twitter{
float:left;
}

.facebook{
float:left;
}

.vimeo{
float:left;
}

.headerBottom{
width: 100%;
height: 70px;
color: #939393;
font-family: Calibri, Times New Roman;
font-size: 15px;
text-align: center;
margin: 0 auto;
background-color: White;
float: right;
}

.menu{
width: 55%;
float: right;
}

.menu ul{
width: 100%;
margin: 0 auto;
list-style-type: none;
    float: left;
padding-left: 15px;
}

.menu ul li{
float: left;
text-align: center;
height: 75px;
line-height: 75px;
padding-left: 15px;
}

.logo{
width:45%;
float:left;
margin-top:-10px;
z-index:15px;
position:relative;
overflow:hidden;
}

.slideshow{
position: relative;
clear: left;
float: left;
z-index: 10px;
}

.allBoxes{
border: 3px solid red;
position:relative;
padding:50px 0px 30px 0px;
}

.box{
    width:305px;
    height:300px;
    float:left;
    margin-left:10px;
}

.box-title{
font-family: Calibri, Times New Roman;
color: White;
font-size: 20px;
}

p{
font-family: Calibri, Times New Roman;
color: White;
}

.footerBottom{
width: 100%;
height: 5px;
background-color: #ff8000;
float: right;
margin-bottom:50px;
}

Many thanks

Claire

[Liberator]

No idea on building web pages at all.....

But from looking into z-index layering it would appear that the expected value is an integer only, so maybe it's ignoring your logos z-index of 15px as an unset variable and converting it to 0, just "z-index: 15;".

[Jamoe]

Is there an accessible version of the page?

I could spend 10 minutes messing with it using the developer tool bar.

[DrunkenZombiee]

As Jamoe says would be useful to access the page and much about with the code on there to see if we can get it on top.

Cheers,

DZ

[Tsuchino]

Here's a link to the file including all the assets.  (Hope it works.) http://www.filedropper.com/testproject_1
Liberator, I tried that and it didn't work either.

Thanks alot.

[Jamoe]

I forgot to ask, which browser is that happening in?

[Tsuchino]

I'm using Chrome, but I tried it out with FF as well, the same thing happened.

[Jamoe]

No idea on building web pages at all.....

But from looking into z-index layering it would appear that the expected value is an integer only, so maybe it's ignoring your logos z-index of 15px as an unset variable and converting it to 0, just "z-index: 15;".

I did what Lib suggested and it worked in Chrome on Ubuntu. I suggest you try again and force the browser to refresh the cache (ctrl + f5).

Code Select Expand

.logo{
    width:45%;
    float:left;
    margin-top:-10px;
    z-index: 15;
    position:relative;
    overflow:hidden;
}

.slideshow{
    position: relative;
    clear: left;
    float: left;
    z-index: 10;
}

[Tsuchino]

Wow, all I needed was the refresh.  Thank you so much guys, and sorry Lib, it actually worked!

[Jamoe]

Glad we could help. In Chrome/firefox if you hit f12 you get some nice little dev tools. You can edit the all the things in the page, really helps when debugging.

Have a play and google around to see what else you can do with it.

[Tsuchino]

Will do Jamoe, thanks again.

[Liberator]

Wow, all I needed was the refresh.  Thank you so much guys, and sorry Lib, it actually worked!

Hey, I'm as surprised as everyone else that I was right.

The dreaded web caching strikes again.