PDA

View Full Version : Extra Space with DD Blue Blocks Menu



That Camera Guy
07-11-2007, 08:33 PM
1) Script Title:
DD Blue Blocks Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/dd-blue-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.

jscheuer1
07-11-2007, 09:04 PM
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.

That Camera Guy
07-11-2007, 10:15 PM
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.

jscheuer1
07-12-2007, 02:54 AM
Do them like this:


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

Not like this:


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

Here, I've done them all for you correctly:


<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:


#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:


</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.

That Camera Guy
07-12-2007, 12:11 PM
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!