# links hiding behind image in IE7 - plz help



## Liber8ed1 (Sep 24, 2003)

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!


----------



## Sequal7 (Apr 15, 2001)

Well, it isn't perfect but in such short time this is what you can use to correct the problem.


```
<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:[email protected]"?subject=Vitalia Website Mail>webmaster</a>.</font></div></td>
</TABLE>
<!-- END BIG PINK TABLE-->
</body>
</html>
```


----------



## Liber8ed1 (Sep 24, 2003)

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.


----------



## Liber8ed1 (Sep 24, 2003)

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.


----------



## tomdkat (May 6, 2006)

Liber8ed1 said:


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


----------



## Liber8ed1 (Sep 24, 2003)

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


----------



## tomdkat (May 6, 2006)

Liber8ed1 said:


> I think I may have managed to tweak it enough to get it to look right.


Great! Glad you got it working. 



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


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

[i]<div align="left">[u]<img style="float: right;" src="test_files/specialorderbox.jpg" align="left" border="0">[/u]</div>[/i]
<div align="left"></div>[/b]
```
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 (Apr 15, 2001)

Well, since you wanted to have tables, here is the page as you want it to display.

```
<!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:[email protected]"?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.


----------



## Liber8ed1 (Sep 24, 2003)

tomdkat said:


> 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 (Sep 24, 2003)

Thanks Sequal7!
You're a real gem!


----------



## Sequal7 (Apr 15, 2001)

Liber8ed1 said:


> Thanks Sequal7!
> You're a real gem!


Or at least the lump of coal that gems come from at one point...

Your welcome.


----------



## tomdkat (May 6, 2006)

Liber8ed1 said:


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


----------

