8 Replies Latest reply on Jan 5, 2009 10:45 PM by Newsgroup_User

    IE not displaying css border

    amoncur Level 1
      I am using css to display a 1 pixel border on the bottom of my text. It works fine in Firefox but not in IE. Is this a known issue? Here's my css rule:

      #content #content-top a#portrait_underline {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #6598cd;
      padding-bottom: 1px;
      }

      The padding is there so the border doesn't interfere with letters that dip below, like g, y, j, etc. IE seems not to display the border with or without the padding, though. Anyone know how to get IE to display the border?

      Thanks,

      Aaron
        • 1. Re: IE not displaying css border
          Level 7
          Let's see the HTML.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "amoncur" <webforumsuser@macromedia.com> wrote in message
          news:gjrgid$bt1$1@forums.macromedia.com...
          >I am using css to display a 1 pixel border on the bottom of my text. It
          >works
          > fine in Firefox but not in IE. Is this a known issue? Here's my css
          > rule:
          >
          > #content #content-top a#portrait_underline {
          > border-bottom-width: 1px;
          > border-bottom-style: solid;
          > border-bottom-color: #6598cd;
          > padding-bottom: 1px;
          > }
          >
          > The padding is there so the border doesn't interfere with letters that dip
          > below, like g, y, j, etc. IE seems not to display the border with or
          > without
          > the padding, though. Anyone know how to get IE to display the border?
          >
          > Thanks,
          >
          > Aaron
          >

          • 2. Re: IE not displaying css border
            Level 7
            >>Here's my css rule:

            The rule in isolation seems OK but doesn't tell us much.

            Can you provide a link to the site so we can see the issue for ourselves?


            --
            Regards

            John Waller
            • 3. Re: IE not displaying css border
              amoncur Level 1
              Here's the HTML.



              <!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"><!-- InstanceBegin template="/Templates/DM Photo 2 Template.dwt" codeOutsideHTMLIsLocked="false" -->
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

              <!-- InstanceBeginEditable name="Meta Edit Region" -->
              <meta name="Description" content="DM Photo's portrait photography centers around family portraits, senior pictures, and babies. Our unique and portable lighting systems set us apart from the crowd." />
              <meta name="Keywords" content="Portrait Photography, Family Portraits, Senior Pictures, Baby Photography, Infant Photography, Child Photography"/>
              <!-- InstanceEndEditable -->

              <META NAME="COPYRIGHT" CONTENT="&copy; 2009 DM Photo">
              <META NAME="GENERATOR" CONTENT="">
              <META NAME="AUTHOR" CONTENT="DM Photo">
              <META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
              <META NAME="DISTRIBUTION" CONTENT="GLOBAL">
              <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
              <META NAME="REVISIT-AFTER" CONTENT="1 DAYS">
              <META NAME="RATING" CONTENT="GENERAL">
              <META HTTP-EQUIV="PAGE-ENTER" CONTENT="RevealTrans(Duration=0,Transition=1)">
              <!-- InstanceBeginEditable name="doctitle" -->
              <title>Arizona Portrait Photography Family Photography Senior Pictures</title>
              <!-- InstanceEndEditable -->
              <link href="../Styles/dm-photo-styles.css" rel="stylesheet" type="text/css" />
              <style type="text/css">
              <!--
              body {
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              }
              a:link {
              color: #6598cd;
              text-decoration: none;
              }
              a:visited {
              color: #6598cd;
              text-decoration: none;
              }
              a:hover {
              color: #999999;
              text-decoration: none;
              }
              a:active {
              color: #6598cd;
              text-decoration: none;
              }
              -->
              </style>
              <!-- InstanceBeginEditable name="head" -->
              <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

              <style type="text/css">
              #content #content-middle {
              width: 870px;
              background-image: url(../Images/images/background_middle.jpg);
              background-repeat: repeat-y;
              margin: 0px;
              height: 585px;
              text-align: center;
              padding: 0px;
              }
              #content #content-top a#portrait_underline {
              border-bottom-width: 1px;
              border-bottom-style: solid;
              border-bottom-color: #6598cd;
              padding-bottom: 1px;
              }
              </style>
              <!-- InstanceEndEditable -->
              </head>

              <body>

              <div id="wrapper">
              <div id="header"><a href="../index.html"> <img src="../Images/DM No Graphic Template Image.jpg" alt="DM Photo Logo" width="161" height="50" border="0" longdesc="../index.html" /></a></div>
              <!-- end div id="header" -->
              <div id="left_sidebar">
               
              </div> <!-- end div id="left_sidebar" -->
              <div id="content">
              <div id="content-top"><a href="portrait-photography.html" id="portrait_underline">Portrait</a>  <span class="vert_line_nav_color">|</span>  <a href="../weddings/wedding-photography.html" id="wedding_underline">Wedding</a>  <span class="vert_line_nav_color">|</span>  <a href="../commercial/commercial-photography.html" id="commercial_underline">Commercial</a>  <span class="vert_line_nav_color">|</span>  <a href="../pricing.html" id="pricing_underline">Pricing</a>  <span class="vert_line_nav_color">|</span>  <a href="../about.html" id="about_underline">About Us</a>  <span class="vert_line_nav_color">|</span>  <a href=" http://dmphotogallery.exposuremanager.com/" id="contact_underline">Online Proofing</a></div>
              <!-- InstanceBeginEditable name="Edit content-middle" -->
              <div id="content-middle">
              <script type="text/javascript">
              AC_FL_RunContent( 'codebase',' http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','800','height','650','src','res/viewer','quality','high','pluginspage','http://www.ado be.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#CC0000' ,'movie','res/viewer' ); //end AC code
              </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="650">
              <param name="movie" value="res/viewer.swf" />
              <param name="quality" value="high" /><param name="BGCOLOR" value="#CC0000" />
              <embed src="res/viewer.swf" width="800" height="650" quality="high" pluginspage=" http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#CC0000"></embed>
              </object></noscript>
              </div>

              <!-- end div id="content-middle" -->


              <!-- InstanceEndEditable -->
              <div id="content-bottom">
              </div> <!-- end div id="content-bottom" -->
              </div> <!-- end div id="content" -->
              <div id="right_sidebar">
              <p> </p>
              <p><a href="../contact.html">Contact Us</a></p>
              <p> </p>

              <p><a href=" http://dmphotogallery.blogspot.com/">Blog</a></p>
              <p> </p>

              <p><a href="../testimonials.html">Testimonials</a></p>
              <p> </p>

              <p><a href="../post-processing-examples.html">Image Enhancement Examples</a></p>
              <p> </p>

              <p><a href="../post-processing-service.html">Image Enhancement Services</a></p>
              <p> </p>

              <p><a href="../carpe-dm.html">Book Us For Free!</a></p>
              <p> </p>

              <p><a href="../tutorials.html">Tutorials &amp; Resources</a></p>
              <p> </p>
              </div>
              <!-- end div id="right_sidebar" -->
              <div id="footer">DM Photo, LLC &copy; 2009</div>
              <!-- end divi id="footer" -->
              </div> <!-- end div id="wrapper" -->
              </body>
              <!-- InstanceEnd --></html>
              • 5. Re: IE not displaying css border
                Level 7
                "amoncur" <webforumsuser@macromedia.com> wrote in message
                news:gjrktr$ha8$1@forums.macromedia.com...
                > Here's a link to the site:
                >
                > http://dmphotogallery.com/dmphoto2/commercial/commercial-photography.html



                Try this:

                #content-top a {zoom:1;}




                --
                Thierry | Adobe Community Expert | Articles and Tutorials ::
                http://www.TJKDesign.com/go/?0

                Spry Widgets | http://labs.adobe.com/technologies/spry/samples/ [click on
                "Widgets"]
                Spry Menu Bar samples |
                http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
                --

                • 6. Re: IE not displaying css border
                  Level 7
                  You have quite a few validation errors. You may want to work on them to see
                  if that helps as well. Remember xhtml does not allow for capital letter
                  tags.

                  Michael

                  • 7. Re: IE not displaying css border
                    amoncur Level 1
                    Looks like that did it. Thanks! Just to be sure, I've added the #content-top a {zoom:1;} rule to the edit table head section so my rules now appear like this:

                    <!-- InstanceBeginEditable name="head" -->
                    <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

                    <style type="text/css">
                    #content #content-middle {
                    width: 870px;
                    background-image: url(../Images/images/background_middle.jpg);
                    background-repeat: repeat-y;
                    margin: 0px;
                    height: 585px;
                    text-align: center;
                    padding: 0px;
                    }
                    #content-top a {zoom:1;}
                    #content #content-top a#portrait_underline {
                    border-bottom-width: 1px;
                    border-bottom-style: solid;
                    border-bottom-color: #6598cd;
                    padding-bottom: 1px;
                    }
                    </style>
                    <!-- InstanceEndEditable -->
                    </head>

                    Is this the correct location? Thanks again!
                    • 8. Re: IE not displaying css border
                      Level 7
                      "amoncur" <webforumsuser@macromedia.com> wrote in message
                      news:gju9m8$6vd$1@forums.macromedia.com...
                      > Looks like that did it. Thanks! Just to be sure, I've added the
                      > #content-top
                      > a {zoom:1;} rule to the edit table head section so my rules now appear
                      > like
                      > this:
                      >
                      > <!-- InstanceBeginEditable name="head" -->
                      > <script src="../Scripts/AC_RunActiveContent.js"
                      > type="text/javascript"></script>
                      >
                      > <style type="text/css">
                      > #content #content-middle {
                      > width: 870px;
                      > background-image: url(../Images/images/background_middle.jpg);
                      > background-repeat: repeat-y;
                      > margin: 0px;
                      > height: 585px;
                      > text-align: center;
                      > padding: 0px;
                      > }
                      > #content-top a {zoom:1;}
                      > #content #content-top a#portrait_underline {
                      > border-bottom-width: 1px;
                      > border-bottom-style: solid;
                      > border-bottom-color: #6598cd;
                      > padding-bottom: 1px;
                      > }
                      > </style>
                      > <!-- InstanceEndEditable -->
                      > </head>
                      >
                      > Is this the correct location?

                      Yes, that's ok

                      > Thanks again!

                      You're welcome


                      --
                      Thierry | Adobe Community Expert | Articles and Tutorials ::
                      http://www.TJKDesign.com/go/?0

                      Spry Widgets | http://labs.adobe.com/technologies/spry/samples/ [click on
                      "Widgets"]
                      Spry Menu Bar samples |
                      http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
                      --