Css Drop shadows

Discussion in 'Web Development & Web Hosting' started by twizzle, Aug 18, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Right so another question and plea for help to those that are our CSS gurus on here.

    Been doing another site layout in Photoshop for a customer. When trying to code it in html and css teh images didnt work well with teh drop shadows. So i've found a way to use CSS code to create a psudeo drop shadow to my layouts. Works fine, except when viewing in FireFox one of teh dropshadows isnt right. Take a look at www.squiretwizz.co.uk/tests in both IE and FF to see the difference. Teh main content box shadow moves left in FF but is correct in IE. If i adjust this to work in FF its wrong in IE and other browsers. Looking at the CSS i cant see why as i've used the same code just with different margns etc for all the drop shadows, and this is the only one that changes in browsers. So why does it do this?

    Below is the CSS and its long winded i'm afraid.

    #container {
    width:900px;
    height:800px;
    margin: 0px 20px auto;
    }


    .shadowlogo {
    background-color: #000;
    width: 155px;
    height:40px;
    filter:alpha(opacity=25);
    opacity:0.25;

    }

    #logo {
    position:relative;
    top:34px;
    right:6px;
    z-index:5;
    }

    #header {
    width: 900px;
    height:20px;
    }

    .shadowmenu {
    background-color: #000;
    width: 755px;
    height:80px;
    filter:alpha(opacity=25);
    opacity:0.25;

    }

    #mainmenu {
    position:relative;
    top: 70px;
    right:6px;
    width:800px;
    height:80px;
    background-image:url("images/headerbackground.gif");
    background-repeat: no-repeat;
    z-index:2;
    }


    #sidemenuarea {
    float:left;
    width:180px;
    height:350px;
    }

    .shadowside {
    position:relative;
    top:-305px;
    right:-5px;
    background-color: #0000cc;
    width: 170px;
    height:320px;
    filter:alpha(opacity=25);
    opacity:0.25;

    z-index:1;
    }

    #sidemenu {
    position:relative;
    top: 10px;
    right: 6px;
    width:170px;
    height:330px;
    background-image:url("images/menubackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    }

    #mainpanel {

    height:330px;
    width: 600px;
    }

    .shadowmain {
    position:relative;
    top:-300px;
    right:-12px;
    background-color: #000;
    width: 560px;
    height:320px;
    filter:alpha(opacity=25);
    opacity:0.25;

    z-index:1;
    }

    #main {
    position:relative;
    top: 10px;
    right: -185px;
    width:560px;
    height:325px;
    background-image:url("images/contentbackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    text-align:left;
    }

    #footer {
    position:relative;
    width:800px;
    height:50px;
    }

    .shadowfooter {
    position:relative;
    top:-320px;
    right:-8px;
    background-color: #000;
    width: 745px;
    height:30px;
    filter:alpha(opacity=25);
    opacity:0.25;

    z-index:1;
    }

    #address {
    position:relative;
    top: -290px;
    right: 4px;
    width:750px;
    height:35px;
    background-image:url("images/addressbackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    }

    #numbers {
    position:relative;
    width:200px;
    height:80px;
    }

    .shadownumbers {
    position:relative;
    top:-340px;
    right:-574px;
    background-color: #000;
    width: 178px;
    height:35px;
    filter:alpha(opacity=25);
    opacity:0.25;

    z-index:1;
    }

    #tele {
    position:relative;
    top: -310px;
    right: -565px;
    width:200px;
    height:40px;
    background-image:url("images/telebackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    }

    #text {
    text-align:left;
    font-size: 10pt;
    font-family: Arial,"Times New Roman";
    color: #fff;
    }



    As and aside from that, you can also see i'm planning on putting text in the main content area, but i cant get it to go to the left hand side. Any tips for getting this formatting right? Any solutiosn to both issues, much appreciated in advance.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. dmarsh
    Honorary Member 500 Likes Award

    dmarsh Petabyte Poster

    4,305
    503
    259
    Add float left to shadowmain ?
     
  3. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    The code below behaves in both FF & IE:-

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	width:760px;
    	height:1000px;
    }
    .shadowmenu {
    	background-color: #000;
    	width: 755px;
    	height:80px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    }
    #logo {
    	position:relative;
    	top:34px;
    	right:6px;
    	z-index:5;
    }
    #mainmenu {
    	position:relative;
    	top: 70px;
    	right:6px;
    	width:760px;
    	height:80px;
    	background-image:url("http://www.squiretwizz.co.uk/tests/images/headerbackground.gif");
    	background-repeat: no-repeat;
    	z-index:2;
    }
    #sidemenu {
    	position:relative;
    	top: 10px;
    	right: 6px;
    	width:170px;
    	height:330px;
    	background-image:url("http://www.squiretwizz.co.uk/tests/images/menubackground.gif");
    	background-repeat:no-repeat;
    	z-index:4;
    	float:left;
    }
    #sidemenuarea {
    	float:left;
    	width:180px;
    	height:350px;
    }
    .shadowside {
    	position:relative;
    	top:-305px;
    	right:-5px;
    	background-color: #0000cc;
    	width: 170px;
    	height:320px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    	float:left;
    	z-index:1;
    }
    #text {
    	text-align:left;
    	font-size: 10pt;
    	font-family: Arial, "Times New Roman";
    	color: #fff;
    	padding:8px;
    }
    #main {
    	position:relative;
    	top: 10px;
    	right:16px;
    	width:560px;
    	height:325px;
    	background-image:url("http://www.squiretwizz.co.uk/tests/images/contentbackground.gif");
    	background-repeat:no-repeat;
    	z-index:4;
    	text-align:left;
    	float:right;
    }
    .shadowmain {
    	position:relative;
    	top:-300px;
    	right:5px;
    	background-color: #000;
    	width: 560px;
    	height:320px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    	float:right;
    	z-index:1;
    }
    #numbers {
    	position:relative;
    	width:200px;
    	height:80px;
    }
    .shadownumbers {
    	position:relative;
    	top:-335px;
    	right:-578px;
    	background-color: #000;
    	width: 178px;
    	height:35px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    	z-index:1;
    }
    #tele {
    	position:relative;
    	top: -310px;
    	right: -565px;
    	width:200px;
    	height:40px;
    	background-image:url("http://www.squiretwizz.co.uk/tests/images/telebackground.gif");
    	background-repeat:no-repeat;
    	z-index:4;
    }
    #footer {
    	position:relative;
    	width:760px;
    	height:50px;
    	float:left;
    }
    .shadowfooter {
    	position:relative;
    	top:-320px;
    	right:-10px;
    	background-color: #000;
    	width: 745px;
    	height:30px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    	z-index:1;
    }
    #address {
    	position:relative;
    	top: -295px;
    	right: 6px;
    	width:750px;
    	height:35px;
    	background-image:url("http://www.squiretwizz.co.uk/tests/images/addressbackground.gif");
    	background-repeat:no-repeat;
    	z-index:4;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
      <div id="logo"> 
          <img src="http://www.squiretwizz.co.uk/tests/images/eseclogo.gif" alt="ESEC LOGO"  height="40" /> 
      </div>
      <div id="mainmenu"> </div>
      <div class="shadowmenu"> </div>
      <div id="sidemenuarea">
        <div id="sidemenu"> </div>
        <div class="shadowside"> </div>
      </div>
      <div id="main">
        <div id="text" >ESEC are your local experts for all types of domestic
          electrical</br>
          wiring and provide heating systems and
          showers to give you a </br>
          safe, warm and comfortable
          home with every modern convenience.</br>
          Our skilled
          and experienced staff can advise you on the latest
          energy saving storage heating, utilising cheaper
          off-peak electricity.</br>
          </br>
          Telephone 0800 9047440 </div>
      </div>
      <div class="shadowmain"> </div>
      <div id="footer">
        <div id="address"> </div>
        <div class="shadowfooter"> </div>
        <div id="numbers">
          <div id="tele"> </div>
          <div class="shadownumbers"> </div>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>
    </html>
    
    
    
    NB
     
    Last edited: Aug 18, 2010
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  4. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Thanks NB for looking. Are the only changes teh float:right; to both .main and .shadowmain in the css?

    I'm looking at an easier way to do the drop shadows as this method seems very long winded.

    Edit - Ok i've taken a closer look and seen a few more changes you made. But basically it seems i was missing the float right and had my positioning wrong for the shadow. Would that have been due to no float for these?
     
    Last edited: Aug 18, 2010
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  5. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Mostly I've just added floats to the css, and some padding for the text.

    I also had to adjust the positioning on some images to make the shadows appear in the correct place.

    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  6. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Well i've only gone and buggered it up again. Was trying to move the backgounds a bit to even out the spacing. And that same shadow will not move. Its too low now and wont come up. Here's my CSS the html hasnt changed from your copy. I'm wondering if its a div size issue where the div isnt big enough to allow for the shadow?

    .wrap {
    width:760px;
    height:1000px;
    }


    .shadowlogo {
    background-color: #000;
    width: 155px;
    height:40px;
    filter:alpha(opacity=25);
    opacity:0.25;
    }

    #logo {
    position:relative;
    top:34px;
    right:6px;
    z-index:5;
    }

    .shadowmenu {
    position:relative;
    background-color: #000;
    width: 750px;
    height:75px;
    filter:alpha(opacity=25);
    opacity:0.25;
    top:-62px;

    }

    #mainmenu {
    position:relative;
    top: 10px;
    right:6px;
    width:760px;
    height:80px;
    background-image:url("images/headerbackground.gif");
    background-repeat: no-repeat;
    z-index:2;
    }
    #sidemenu {
    position:relative;
    top: -55px;
    right: 6px;
    width:170px;
    height:330px;
    background-image:url("images/menubackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    float:left;
    }
    #sidemenuarea {
    float:left;
    width:180px;
    height:350px;
    }
    .shadowside {
    position:relative;
    top:-375px;

    background-color: #0000cc;
    width: 170px;
    height:320px;
    filter:alpha(opacity=25);
    opacity:0.25;
    float:left;
    z-index:1;
    }
    #text {
    text-align:left;
    font-size: 10pt;
    font-family: Arial, "Times New Roman";
    color: #fff;
    padding:8px;
    }
    #main {
    position:relative;
    top: -55px;
    right:16px;
    width:560px;
    height:325px;
    background-image:url("images/contentbackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    text-align:left;
    float:right;
    }
    .shadowmain {
    position:relative;
    background-color: #000;
    width: 560px;
    height:320px;
    filter:alpha(opacity=25);
    opacity:0.25;
    float:right;
    z-index:1;
    }
    #numbers {
    position:relative;
    width:200px;
    height:80px;
    }
    .shadownumbers {
    position:relative;
    top:-418px;
    right:-570px;
    background-color: #000;
    width: 180px;
    height:40px;
    filter:alpha(opacity=25);
    opacity:0.25;
    z-index:1;
    }
    #tele {
    position:relative;
    top: -385px;
    right: -560px;
    width:200px;
    height:40px;
    background-image:url("images/telebackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    }
    #footer {
    position:relative;
    width:760px;
    height:50px;
    float:left;
    }
    .shadowfooter {
    position:relative;
    top:-395px;

    background-color: #000;
    width: 750px;
    height:30px;
    filter:alpha(opacity=25);
    opacity:0.25;
    z-index:1;
    }
    #address {
    position:relative;
    top: -365px;
    right: 6px;
    width:750px;
    height:35px;
    background-image:url("images/addressbackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    }
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  7. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Change the main and shadow main styles for the below:-

    Code:
    #main {
    position:relative;
    top: -55px;
    right:14px;
    width:560px;
    height:325px;
    background-image:url("http://www.squiretwizz.co.uk/tests/images/contentbackground.gif");
    background-repeat:no-repeat;
    z-index:4;
    text-align:left;
    float:right;
    }
    
    .shadowmain {
    	position:relative;
    	top:-370px;
    	right:10px;
    	background-color: #000;
    	width: 560px;
    	height:320px;
    	filter:alpha(opacity=25);
    	opacity:0.25;
    	float:right;
    	z-index:1;
    }
    NB
     
    Last edited: Aug 18, 2010
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  8. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Damn it! I'd tried various top and right settings and that shadow just wouldnt move for me! Just shows i have a lot to learn about CSS, and thats why i'm using this site design. Its my test and aid to learning, but i still have a deadline.

    Again, thanks for the input NB. Mucho Apriciato!
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  9. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    No problem.:D

    Cheers
    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA

Share This Page

Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.