There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
acer audio black screen boot bsod computer connection crash css dell display driver drivers email error excel explorer firefox firefox 3 game hard drive internet internet explorer itunes laptop lcd linux malware network networking outlook outlook 2003 outlook express partition printer problem ram router slow software sound trojan usb video virus vista windows windows vista windows xp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
links hiding behind image in IE7 - plz help


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

Closed Thread
 
Thread Tools
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
27-Feb-2008, 10:34 PM #1
Question links hiding behind image in IE7 - plz help
Hi I'm trying to set up a webpage for a friend and am having some trouble with alignment in IE7. I don't really know much about html and nothing about anything else lol (no css, no ftp, nuthin') Could anybody take a look at my page and see if they can figure out how to make the silly links go where they are supposed to be? (tucked under the logo) It looks perfect from Firefox, but IE is a whole other story apparently.

http://vitalia.100webspace.net/

I'd appreciate any help. Though I hate to post it here, I'll probably end up looking like an idiot!
__________________
Libs

"The whole aim of practical politics is to keep the populace alarmed -- and
thus clamorous to be led to safety -- by menacing it with an endless series
of hobgoblins, all of them imaginary." -- H.L. Mencken
Sequal7's Avatar
Computer Specs
Distinguished Member with 2,369 posts.
  
Join Date: Apr 2001
Location: Around the corner!
Experience: Including today?
28-Feb-2008, 12:41 AM #2
Well, it isn't perfect but in such short time this is what you can use to correct the problem.

Code:
<html>
<style type="text/css">
<!-- New style for links in top
.navlinks {
   color: #737800;
   text-decoration: none;
}

a:link {
    color: #737800;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<body bgcolor="#B4B870" background="http://vitalia.100webspace.net/images/VitaliaBG.jpg">
<!-- BIG PINK TABLE-->
<TABLE width="1079" border="0" align="center" bgcolor="#D9BB9F" >
<tr>
  <td colspan="8"><a href="http://vitalia.100webspace.net/index.html"><img src="http://vitalia.100webspace.net/images/LogoResizedAF.jpg"  align="left" border="0"></a></td>
  <td width="399" align="left" valign="top"><img src="http://vitalia.100webspace.net/images/frontdoor2.jpg" width="325" height="209" border="0" align="left" valign="center" ></td>
<tr>
  <td colspan="8"><table width="80%" border="0" align="left">
  <tr>
    <th scope="col"><a href="http://www.ymlp35.com/pubarchive_show_message.php?vitalia+177" target="_blank" class="navlinks" align="left"> Discover It.</a></th>
    <th scope="col"><a href="http://www.ymlp35.com/pubarchive.php?vitalia" target="_blank" class="navlinks">Believe It.</a></th>
    <th scope="col"><a href="http://www.ymlp35.com/pubarchive_show_message.php?vitalia+144" target="_blank" class="navlinks" align="left">Live It.</a></th>
    <th scope="col"><a href="http://vitalia.100webspace.net/directions.html" class="navlinks" align="left">directions</a></th>
    <th scope="col"><a href="http://vitalia.100webspace.net/specials.html" class="navlinks" align="left">specials</a></th>
    <th scope="col"><a href="http://vitalia.100webspace.net/products.html" class="navlinks" align="left">products</a></th>
    <th scope="col"><a href="http://vitalia.100webspace.net/aboutus.html" class="navlinks" align="left">about us</a></th>
    <th scope="col"><a href="http://vitalia.100webspace.net/contact.html" class="navlinks" align="left">contact</a></th>
  </tr>
</table>	</td>
<!-- begin your links table, I added a css declaration in the page for you. -->
    <td rowspan="3" valign="top"><div align="left"><img src="http://vitalia.100webspace.net/images/specialorderbox.jpg" align="left" border="0"></div></td>
    <!-- End your links table -->
  <tr>
    <td colspan="8"><font size="4" align="center">
      <div align="center">
        <p>Come visit the Effingham area's only health food store!</p>
	      <blockquote>
	        <blockquote>
	          <blockquote>
	            <blockquote>
	              <blockquote>
	                <p align="left"><br>
                      Monday - Friday 9:00 am - 5:30 pm<br>
	                  Saturdays 9:00 am - 5:00 pm <font color="#532A30"><font size="4" align="center"> </p>
                  </blockquote>
	            </blockquote>
	          </blockquote>
	        </blockquote>
            <p align="left">Located on the SW corner between the overpass and underpass in Effingham, <br>
              Vitalia Natural Foods carries a full line of supplements and health foods <br>
              including well known brands like NOW, Jason, Food for Life, Muir Glen, <br>
              Annie's Naturals, Pamela's and Newman's. Local produce is available in season. <br>
                    </p>
        </blockquote>
      </div>
      <blockquote>
        <p> We invite you to come see the new store, taste our free samples, <br>
          and have a complimentary cup of hot tea.  Make sure you don't miss the <br>
          gluten free aisle, and all natural cleaning products!</p>
    </blockquote></td>
  <tr>
	    <td colspan="8" align="left"><table width="100%" border="0">
          <tr>
            <th colspan="2" scope="col"><img src="http://vitalia.100webspace.net/images/bubble8.jpg" alt="storeimages" border="0" align="center"></th>
          </tr>
          <tr>
            <td><img src="http://vitalia.100webspace.net/images/bubble2.jpg" alt="storeimages" border="0" align="center" valign="center" ></td>
            <td><img src="http://vitalia.100webspace.net/images/bubble3.jpg" alt="storeimages" border="0" align="center" valign="center" ></td>
          </tr>
          <tr>
            <td colspan="2"><div align="center"><img src="http://vitalia.100webspace.net/images/bubble4.jpg" alt="storeimages" border="0" align="center" valign="center" ></div></td>
          </tr>
          <tr>
            <td><img src="http://vitalia.100webspace.net/images/bubble5.jpg" alt="storeimages" width="349" height="249" border="0" align="center" valign="center" ></td>
            <td><img src="http://vitalia.100webspace.net/images/bubble7.jpg" alt="storeimages" width="350" height="249" border="0" align="center" valign="center" > </td>
          </tr>

        </table>
    </div></td>
  <tr>
	      <td colspan="10"><div align="center"><img src="http://vitalia.100webspace.net/images/wheat.gif" align="center"></div></td>
  <tr>
    <td colspan="10"><font color="#737800">
<div align="center"><font size="2" align="center">To report a problem with this page please contact the <a href="mailto:kdl@wabash.net"?subject=Vitalia Website Mail>webmaster</a>.</font></div></td>
</TABLE>
<!-- END BIG PINK TABLE-->
</body>
</html>
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
28-Feb-2008, 11:26 AM #3
thank you so much!
You're amazing. I hope it didn't take you as long to fix all that as it would've taken me!

It fixed the links hiding behind the image (in both browsers) but now I have an image that is off the page. It appears to be off in it's own little square and I can't figure out how to get it to pop into the box with the text. (I added a 1pt border to the main table trying to figure out what the image wasn't where it should be.) I've also been tinkering around with the settings in the code trying to find the control for how wide the main table is. I can't get it to come back onto the page (it stays wider than the page and I'd like it to be about 950 wide).

The special order box should be directly under the products, about us and contact links.
If that's possible! If I ever make another webpage I'm going to have to take the time to learn css. But what with homeschooling 4 kids...

Thanks so much again for fixing the links! If you have time to look at the image situation I'd really appreciate it.
__________________
Libs

"The whole aim of practical politics is to keep the populace alarmed -- and
thus clamorous to be led to safety -- by menacing it with an endless series
of hobgoblins, all of them imaginary." -- H.L. Mencken
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
28-Feb-2008, 03:24 PM #4
New url for recent modifications
http://vitalia.100webspace.net/test.html

Still trying to get the table sized down and get the special orders box in the right spot.

I thought the links were messed up because of the table,
but apparently it's something else,
because I'm having the same problem on this page:
http://vitalia.100webspace.net/directions.html
and I left the table out just so I wouldn't have
to deal with the links being messed up.
__________________
Libs

"The whole aim of practical politics is to keep the populace alarmed -- and
thus clamorous to be led to safety -- by menacing it with an endless series
of hobgoblins, all of them imaginary." -- H.L. Mencken
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,716 posts.
  
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
28-Feb-2008, 04:18 PM #5
Quote:
Originally Posted by Liber8ed1 View Post
Still trying to get the table sized down and get the special orders box in the right spot.
Ok, attached are "before" and "after" screenshots of your page as viewed in Opera 9.5b2 on Windows XP. Does the "after" screenshot show what you're basically wanting the page to look like?

Peace...
Attached Thumbnails
links-hiding-behind-image-ie7-opera-before.jpg  links-hiding-behind-image-ie7-opera-after.jpg  
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
28-Feb-2008, 04:37 PM #6
I think I got it!!
I think I may have managed to tweak it enough to get it to look right.

(I wanted to jump up and down, but there wasn't an icon for that. )

Yes, the Opera screenshot is what I was trying to achieve.
I dont' have Opera or Netscape, but now it looks right in IE7 and Firefox.
I hope I haven't messed it up for the other two.

Thanks for looking at my post!
If you did some coding to make it work like you showed in the Opera screenshot
I'd love to see it. It might be easier than the tortured mess I'm working with now!
(a combination of Sequal7's css code and my lousy html! lol
__________________
Libs

"The whole aim of practical politics is to keep the populace alarmed -- and
thus clamorous to be led to safety -- by menacing it with an endless series
of hobgoblins, all of them imaginary." -- H.L. Mencken
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,716 posts.
  
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
28-Feb-2008, 05:13 PM #7
Quote:
Originally Posted by Liber8ed1 View Post
I think I may have managed to tweak it enough to get it to look right.
Great! Glad you got it working.

Quote:
Thanks for looking at my post!
If you did some coding to make it work like you showed in the Opera screenshot
I'd love to see it.
I really didn't do much to make it appear in "the right place" in my screenshot. Basically, I put the "specialorderbox" inside the same column as the text and "floated" the image to the right:

Code:
<td colspan="8"><font align="center" size="4"> </font>
<div align="center"><font align="center" size="4"> </font>
<p><font align="center" size="4"><font align="center" color="#532a30">Come visit the
Effingham area's only health food store!</font></font></p>

<div align="left"><img style="float: right;" src="test_files/specialorderbox.jpg" align="left" border="0"></div>
<div align="left"></div>
If you code you have now is working, leave it alone.

EDIT: It looks like you did the same thing I did.... but with gophers.

Peace...
Sequal7's Avatar
Computer Specs
Distinguished Member with 2,369 posts.
  
Join Date: Apr 2001
Location: Around the corner!
Experience: Including today?
28-Feb-2008, 05:16 PM #8
Well, since you wanted to have tables, here is the page as you want it to display.
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vitalia Natural Foods</title>
<style type="text/css">
<!-- Just done to make links not underlines and the proper color.
.navlinks {
   color: #737800;
   text-decoration: none;
}
a:link {
    color: #737800;
	text-decoration: none;
}
a:visited {
    color: #737800;
	text-decoration: none;
}
a:hover {
    color: #737800;
	text-decoration: none;
}
a:active {
    color: #737800;
	text-decoration: none;
}
-->
</style>
</head>

<body bgcolor="#B4B870" background="http://vitalia.100webspace.net/images/VitaliaBG.jpg">
<table width="952" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#D9BB9F"><a href="http://vitalia.100webspace.net/index.html"><img src="http://vitalia.100webspace.net/images/LogoResizedAF.jpg"  align="left" border="0" /><img src="http://vitalia.100webspace.net/images/frontdoor2.jpg" width="325" height="209" border="0" align="left" valign="center" /></a></td>
  </tr>
  <tr bgcolor="#DABAA1">
    <td><table width="100%" border="0" cellpadding "0" cellspacing="0" align="center">
      <tr>
        <th scope="col"><a href="http://www.ymlp35.com/pubarchive_show_message.php?vitalia+177" target="_blank" class="navlinks" align="left"> Discover It.</a></th>
        <th scope="col"><a href="http://www.ymlp35.com/pubarchive.php?vitalia" target="_blank" class="navlinks">Believe It.</a></th>
        <th scope="col"><a href="http://www.ymlp35.com/pubarchive_show_message.php?vitalia+144" target="_blank" class="navlinks" align="left">Live It.</a></th>
        <th scope="col"><a href="http://vitalia.100webspace.net/directions.html" class="navlinks" align="left">directions</a></th>
        <th scope="col"><a href="http://vitalia.100webspace.net/specials.html" class="navlinks" align="left">specials</a></th>
        <th scope="col"><a href="http://vitalia.100webspace.net/products.html" class="navlinks" align="left">products</a></th>
        <th scope="col"><a href="http://vitalia.100webspace.net/aboutus.html" class="navlinks" align="left">about us</a></th>
        <th bgcolor="#DABAA1" scope="col"><a href="http://vitalia.100webspace.net/contact.html" class="navlinks" align="left">contact</a></th>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#D8B99D"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <th bgcolor="#D8B99D" scope="col"><div align="center">
          <p>Come visit the Effingham area's only health food store!</p>
          <blockquote>
            <blockquote>
              <blockquote>
                <blockquote>
                  <blockquote>
                    <p align="left"><br />
                      Monday - Friday 9:00 am - 5:30 pm<br />
                      Saturdays 9:00 am - 5:00 pm <font color="#532A30"><font size="4" align="center"> </p>
                  </blockquote>
                </blockquote>
              </blockquote>
            </blockquote>
            <p align="left">Located on the SW corner between the overpass and underpass in Effingham, <br />
              Vitalia Natural Foods carries a full line of supplements and health foods <br />
              including well known brands like NOW, Jason, Food for Life, Muir Glen, <br />
              Annie's Naturals, Pamela's and Newman's. Local produce is available in season. <br />
            </p>
          </blockquote>
        </div>
          <blockquote>
            <p> We invite you to come see the new store, taste our free samples, <br />
              and have a complimentary cup of hot tea.  Make sure you don't miss the <br />
              gluten free aisle, and all natural cleaning products!</p>
          </blockquote></th>
        <th bgcolor="#D8B99D" scope="col"><img src="http://vitalia.100webspace.net/images/specialorderbox.jpg" alt="order" border="0" align="left" /></th>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#D8B99D"><div align="center"><img src="http://vitalia.100webspace.net/images/bubble8.jpg" alt="storeimages" border="0" align="center" /></div></td>
        </tr>
      <tr>
        <td colspan="2" bgcolor="#D8B99D"><table width="100%" border="0">
          <tr>
            <th scope="col"><div align="center"><img src="http://vitalia.100webspace.net/images/bubble2.jpg" alt="storeimages" border="0" align="center" valign="center" /></div></th>
            <th scope="col"><img src="http://vitalia.100webspace.net/images/bubble3.jpg" alt="storeimages" border="0" align="center" valign="center" /></th>
          </tr>
          <tr>
            <td colspan="2"><div align="center"><img src="http://vitalia.100webspace.net/images/bubble4.jpg" alt="storeimages" border="0" align="center" valign="center" /></div></td>
            </tr>
          <tr>
            <td><div align="center"><img src="http://vitalia.100webspace.net/images/bubble5.jpg" alt="storeimages" width="349" height="249" border="0" align="center" valign="center" /></div></td>
            <td><div align="center"><img src="http://vitalia.100webspace.net/images/bubble7.jpg" alt="storeimages" width="350" height="249" border="0" align="center" valign="center" /></div></td>
          </tr>
        </table></td>
        </tr>
      
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#DEBDA5"><div align="center"><img src="http://vitalia.100webspace.net/images/wheat.gif" alt="grainImage" align="center" /></div></td>
  </tr>
  <tr>
    <td bgcolor="#DEBDA5"><div align="center"><font size="2" align="center">To report a problem with this page please contact the <a href="mailto:kdl@wabash.net"?subject=Vitalia website="Website" mail="Mail">webmaster</a>.</font></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
This links you to a test of that code for you to try in different browsers.
Last edited by Sequal7 : 28-Feb-2008 05:22 PM. Reason: Forgot navlinks code in css.
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
28-Feb-2008, 08:37 PM #9
Quote:
Originally Posted by tomdkat View Post
EDIT: It looks like you did the same thing I did.... but with gophers.
LOL got a kick out of the "gophers".
does that refer to something specific?

Now that i'm really happy about my code being good,
the stinking server has apparently gone down and i can't even access the page!
argh!
Liber8ed1's Avatar
Member with 96 posts.
  
Join Date: Sep 2003
28-Feb-2008, 08:39 PM #10
Thanks!
Thanks Sequal7!
You're a real gem!
Sequal7's Avatar
Computer Specs
Distinguished Member with 2,369 posts.
  
Join Date: Apr 2001
Location: Around the corner!
Experience: Including today?
29-Feb-2008, 01:11 AM #11
Quote:
Originally Posted by Liber8ed1 View Post
Thanks Sequal7!
You're a real gem!
Or at least the lump of coal that gems come from at one point...

Your welcome.
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,716 posts.
  
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
29-Feb-2008, 02:28 PM #12
Quote:
Originally Posted by Liber8ed1 View Post
LOL got a kick out of the "gophers".
does that refer to something specific?
I believe that's from a line of dialogue from a movie but I forget which movie.

Peace...
Closed Thread

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

« Previous Thread | Web Design & Development | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who help people like you solve computer problems. See our Welcome Guide to get started.



Thread Tools


Related Sites: 56k Dial-Up | Tech Gift Ideas | Mobile TechGuy | Advertise on TSG
Contact Us - HelpOnThe.Net - Archive - Terms of Service - Top
You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 01:34 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.