Hello,
I am using a CoffeeCup template and I want to change the menu from text to images. I substituted links to images in the html and it looks fine-- Except it inserts a huge block of space underneath the menu. I've examimed the css file and the html file, and I can't figure out what's doing this. Any ideas?
I've attached the HTML code (with one extra line above and below) and my CSS sheet. Any advise would be greatly appreciated!
Thank you,
Sarah
Need help with editing CSS Menu...
Sarah M.
Registered User
34 posts
david wilson
Ambassador
1,707 posts
might this be the culprit?
<div style="WIDTH: 695px; HEIGHT: 196px" id="main-photo"></div><div style="WIDTH: 696px; HEIGHT: 587px" id="content">
Volunteering to help 
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sarah M.
Registered User
34 posts
Good call! I updated but the problem remains.. what am I missing?
<div id="nav">
<ul>
<li id="about" value="0">
<a href="about.html"><img src="images/menu-button_about.jpg"</a> </li>
<li id="phm" value="0">
<a href="phm.html"><img src="images/menu-button_phm.jpg"</a> </li>
<li id="hr" value="0">
<a href="hr.html"><img src="images/menu-button_hr.jpg"</a> </li>
<li id="benefits" value="0">
<a href="benefits.html"><img src="images/menu-button_benefits.jpg"</a> </li>
<li id="portal" value="0">
<a href="https://www.afis-benefits.net/login"><img src="images/menu-button_portal.jpg"</a> </li>
</ul>
<div class="clearfix"></div>
</div><!-- /#nav -->
<div style="WIDTH: 695px; HEIGHT: 196px" id="main-photo" <img src="images/welcome_header.jpg" width="696" height="65" alt="" border="0"></div>
<div style="WIDTH: 696px; HEIGHT: 587px" id="content">
<div id="breadcrumb">
<a href="index.html">Home</a> > <strong>Welcome</strong> </div>
<ul>
<li id="about" value="0">
<a href="about.html"><img src="images/menu-button_about.jpg"</a> </li>
<li id="phm" value="0">
<a href="phm.html"><img src="images/menu-button_phm.jpg"</a> </li>
<li id="hr" value="0">
<a href="hr.html"><img src="images/menu-button_hr.jpg"</a> </li>
<li id="benefits" value="0">
<a href="benefits.html"><img src="images/menu-button_benefits.jpg"</a> </li>
<li id="portal" value="0">
<a href="https://www.afis-benefits.net/login"><img src="images/menu-button_portal.jpg"</a> </li>
</ul>
<div class="clearfix"></div>
</div><!-- /#nav -->
<div style="WIDTH: 695px; HEIGHT: 196px" id="main-photo" <img src="images/welcome_header.jpg" width="696" height="65" alt="" border="0"></div>
<div style="WIDTH: 696px; HEIGHT: 587px" id="content">
<div id="breadcrumb">
<a href="index.html">Home</a> > <strong>Welcome</strong> </div>
Sarah M.
Registered User
34 posts
I copied the Navigation portaion of an old version of the Style Sheet I had saved, and it worked- guess that's where my mistake was. Thanks for your help!
david wilson
Ambassador
1,707 posts
After you update when you view the page in the browser you flush the cache with F5 to load a new version in memory right?
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Sarah M.
Registered User
34 posts
Yep! Thanks!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
