Results 1 to 5 of 5

Thread: Extra Space with DD Blue Blocks Menu

  1. #1
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Extra Space with DD Blue Blocks Menu

    1) Script Title:
    DD Blue Blocks Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/cs...e-blocks-menu/

    3) Describe problem:
    I'm trying to use the Blue Blocks menu as a left hand navigation item but (as usual) Internet Explorer doesn't like the code. Internet Explorer on the PC adds extra space below each item in the left hand menu. It appears fine in Firefox and Safari.

    The site can be found here:
    http://www.rwc.uc.edu/rwcmedia/newlook.html
    Style Sheet here:
    http://www.rwc.uc.edu/rwcmedia/newlook.css

    Any help you guys could give me would be appreciated! This is really driving me crazy and I've tried everything I can think of to fix it.
    Last edited by That Camera Guy; 07-11-2007 at 10:14 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your server is not currently responding to your links or else they are incorrect. Just off hand though, I am wondering if you are using a strict or XHTML strict DOCTYPE and if this may be what is changing the effect of the css in IE. The demo page on DD is written to a transitional DOCTYPE.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It's transitional XHTML.

    Not sure why the link isn't working, maybe it requires the WWW for others to get there. I've updated the links.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Do them like this:

    Code:
    <li><a href="http://ucfilespace.uc.edu"><strong>UCFileSpace</strong></a></li>
    Not like this:

    Code:
    <li><strong><a href="http://ucfilespace.uc.edu">UCFileSpace</a></strong></li>
    Here, I've done them all for you correctly:

    HTML Code:
      <div id="ddblueblockmenu">
        <div class="menutitle">Degree Information </div>
        <ul>
          <li><a href="aas.html"><strong>Associate of Applied Science </strong></a></li>
          <li><a href="certificate.html"><strong>Professional Certificate </strong></a></li>
        </ul>
    	<div class="menutitle">Useful Links </div>
        <ul>
          <li><a href="https://ixpress-server2.uc.edu/Login.asp?SIS=18354240&amp;APPName=Register"><strong>Register for Classes </strong></a></li>
          <li><a href="https://ixpress-server2.uc.edu/Login.asp?SIS=18354240&amp;APPName=Schedule"><strong>View Your Schedule </strong></a></li>
          <li><a href="https://www.onestop.uc.edu/studentlogin.asp?Target=grades&amp;Message=login"><strong>Check Your Grades </strong></a></li>
          <li><a href="https://dars.uc.edu/darswebstu_3.0.10/servlet/SignInServlet"><strong>Degree Audit</strong></a></li>
    	  <li><a href="courses.html"><strong>Class Descriptions</strong></a></li>
          <li><a href="http://onestop.uc.edu"><strong>OneStop Services</strong></a></li>
    	  <li><a href="http://www.uc.edu/registrar/calendars.html"><strong>Academic Calendars</strong></a></li>
    	  <li><a href="http://blackboard.uc.edu"><strong>Blackboard</strong></a></li>
    	  <li><a href="http://ucfilespace.uc.edu"><strong>UCFileSpace</strong></a></li>
    	  <li><a href="http://email.uc.edu"><strong>Bearcat E-Mail</strong></a></li>
    
        </ul>
    	
    	
    	<div class="menutitle">Policies</div>
        <ul>
          <li><a href="policies-lab.html"><strong>Lab Policies </strong></a></li>
          <li><a href="policies-checkout.html"><strong>Checkout Policies </strong></a></li>
        </ul>
    	<div class="menu_btm">
    	  <div align="left"><img src="images/round.jpg" alt="rounded corder" width="42" height="20" align="absbottom" /></div>
    	</div>
    	
      </div>
    </div>
    Probably though, you shouldn't even use the <strong></strong> tag. Just use the:

    Code:
    #ddblueblockmenu li a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 169px; /*185px minus all left/right paddings and margins*/
    text-decoration: none;
    color: white;
    background-color: #2175bc;
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    font-weight:bold;
    }
    In the stylesheet (addition red).

    Also, you shouldn't have this in your stylesheet:

    Code:
    </style>
    
    [if IE]>
    <style type="text/css">
    p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
    padding-top: 1em;
    }
    </style>
    <![endif]
    But, it may be doing something good in some strange way - probably not.
    Last edited by jscheuer1; 07-12-2007 at 03:05 AM. Reason: Add Info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow, thank you so much! I NEVER would have figured it was the strong tag. I've been messing with my style sheet and the container divs forever thinking the problem was there!

    I really appreciate your help!

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
  •