SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with drop shadow and IE

    Hi everybody,

    I've a little problem with drop shadows because the text above the drop shadow is not visible.
    You can find the demo at http://www.fjd.de/test/.

    I searched for hours, but I can't find the problem.

    Can you help me?

    Many thanks,

    Chris

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    What text is missing? I can't see any drop shadows either ?

    Paul

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the missing drop shadow but the problem is still online.
    Above the two images is white text on white background which should be black.

    Chris

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry but I'm still not sure what I'm looking for!

    This is the content form your page. The text above the dropshadow div (marked in bold) is showing in both my browsers.

    Code:
    <div id="middle"> 
    <div id="main"> 
    	<h3>Ihr Weg zu uns</h3>
    	<h4>Anfahrt mit dem PKW</h4>
    	<p>Sie finden FJD, wenn Sie den Autobahnring um München (A 99) in Richtung 
    	 des Autobahnkreuzes München Ost fahren und die Autobahn bei der Ausfahrt 
    	 15 "Kirchheim b. München" verlassen. Sie finden auf den unten eingefügten 
    	 Grafiken sowohl eine Ausschnittkarte des Autobahnrings A99 als auch eine 
    	 Ortskarte von Kirchheim, die Ihnen die Anfahrt zu unserem Büro im Detail 
    	 aufzeigt.</p>
    	<h4>Anfahrt mit den öffentlichen Verkehrsmitteln</h4>
    	<p>Geben Sie im Routenplaner des MVV Ihren Startpunkt ein. Geben Sie als Zielpunkt 
    	 "Kirchheim b München" und als Haltestelle "Rathausplatz" ein. Unten eingefügte 
    	 Ortskarte von Kirchheim zeigt Ihnen den Weg zu unserem Büro im Detail (ca. 
    	 5 Gehminuten).testing</p>
    	<div class="dropshadow"> 
    	 <div><a href="./pic/kirchheim.gif" target="_blank"><img src="<A href="http://www.fjd.de/test/pic/kirchheim_klein.gif"></a></div">http://www.fjd.de/test/pic/kirchheim_klein.gif"></a></div>
    	</div>
    	<div class="dropshadow"> 
    	 <div><a href="./pic/muenchen.gif" target="_blank"><img src="<A href="http://www.fjd.de/test/pic/muenchen_klein.gif"></a></div">http://www.fjd.de/test/pic/muenchen_klein.gif"></a></div>
    	</div>
    	<ul>
    	 <li><a href="./css/screen.css" target="_blank">link to css</a></li>
    	</ul>
    </div>
    </div>
    Apart form that I can't see what you mean unless i'm missing something very obvious

    Paul

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first problem the missing shadow is solved. I have forgotten the shadow.gif and shadowAlpha.png.
    The new demo site is http://www.bum-bum.de/test/.
    A picture from the first opening of the site is located at http://www.bum-bum.de/test/notext.jpg.
    Firefox and Opera are showing the text above. IE on W2K and WinXP are showing nothing.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks fine in my ie6 on win xp home.

    It will be broken in ie5 and ie5,5, because you have not used the correct dimensions for the box model hack. Also the voice family hack is incorrect for ie5 unless you follow the style immeditaley with html>body as the voic hack causes ie5 to jump the whole next style.

    I can see that the dimensions of #middle are set bt margins alone and this may be the cause of your problem. This usually upsets all version of ie but strangely enough mune seems to be ok. Anyway add the height :1% hack as dictated in the followwing code and see if it helps in your version.

    Also use the following styles for your box model hacks as they are more reliable and are the correct dimensions.

    Code:
    #top {
      text-align: center;
      margin: 20px 20px 0px 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
      height: 50px;
    }
    * html #top{  height: 72px;he\ight:50px} /* ie5win fudge begins */
    #left {
      position: absolute;
      top: 100px;
      left: 0px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
      width: 160px;
    }
    * html #left {  width: 182px;w\idth:160px} /* ie5win fudge begins */
    #left2 {
      position: absolute;
      top: 450px;
      left: 0px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
      width: 160px;
    }
    * html #left2{  width:182px;w\idth:160px} /* ie5win fudge begins */
    #middle {
      margin: 28px 220px 20px 220px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
    }
    /* commented backslash hack v2 \*/ 
    * html #middle{height:1%;} 
    /* end hack */ 
     
    #main {
      padding: 0;
      
    }
    #right {
      position: absolute;
      top: 100px;
      right: 0px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
      width: 160px;
    }
    * html #right {
      width: 182px;w\idth:160px; /* ie5win fudge ends */
    }
    The part in bold is the height:1% hack which should fix your missing text.

    Hope that helps.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    thank you very much for your help. I will test it tomorrow....

    CU, Chris

  8. #8
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good morning Paul,

    now I can see the text... but the middle box is in touch with the top box (only in IE).

    Chris


  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you can post an updated link I'll have another look this afternoon

    Paul

  10. #10
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The updated link is

    http://www.fjd.de/test/

    the css can be found at

    http://www.fjd.de/test/css/screen.css

    thanx,

    christian

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE is collapsing the margin for some reason so just apply a margin-bottom margin to #top instead for the same effect.

    Code:
    #top {
      text-align: center;
      margin: 20px 20px 28px 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
      height: 50px;
    }
    #middle {
      margin: 0px 220px 20px 220px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #fff;
    }
    Paul

  12. #12
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Dear Paul,

    thank you very very much for your help. It works now!!!!

    Christian


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •