...

View Full Version : IE image link problem



etmopterus
08-19-2005, 11:06 PM
http://www.thefish.soulrinse.com/


<HEAD>
<TITLE>thefishlayout3</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script src="/js/escram.js" language="javascript" type="text/javascript"></script>
<script src="../js/preload.js" language="javascript" type"text/javascript"></script>

<STYLE TYPE="text/css">
body {
margin:0;
padding:0;
background:#000;
}

img {
border:0;
margin-bottom:0;
}
a img {
text-decoration:none;
border:0;
margin:0;
padding:0;
}

#box {
margin:0 auto;
width:685px;
height:526px;
}
#right_col {
float:right;
width:97px;
height:526px;
background:#aaa;
}
#top_right {
width:97px;
height:207px;
background:url("images/top_right.jpg") no-repeat;
}
#bottom_right {
width:97px;
height:319px;
background:url("images/right_side.gif") no-repeat;
}
#main {
width:396px;
height:526px;
background:url("images/main_bg.jpg") no-repeat;
float:right
}

#left_col {
width:191px;
height:526px;
background:#fff;
float:right;
}
#top_left {
width:191px;
height:207px;
background:url("images/top_left.jpg") no-repeat;
}
#bottom_left {
width:78px;
height:319px;
background:url("images/left_side.jpg") no-repeat;
float:left;
}
#menu {
text-align:center;
width:113px;
height:319px;
float:right;
}

</STYLE>
</HEAD>

<BODY ONLOAD="preloadImages();">
<map name="right_side_Map">
<area shape="circle" alt="Extras" coords="26,194,19" href="../extras.html" />
</map>

<div id="box">
<div id="right_col">
<div id="top_right">&nbsp;</div>
<div id="bottom_right"><img src="images/right_side.gif" border=0 usemap="#right_side_Map"></div>
</div>
<div id="main">&nbsp;</div>
<div id="left_col">
<div id="top_left">&nbsp;</div>
<div id="bottom_left">&nbsp;</div>
<div id="menu">
<a href="../index.html" onmouseover="changeImages('thefish_logo', 'images/thefish_logo-over.jpg'); return true;" onmouseout="changeImages('thefish_logo', 'images/thefish_logo.jpg'); return true;"> <img name="thefish_logo" src="images/thefish_logo.jpg" width=113 height=23 border=0 alt="Home" /></a>
<a href="../news.html" onmouseover="changeImages('news', 'images/news-over.jpg'); return true;" onmouseout="changeImages('news', 'images/news.jpg'); return true;"> <img name="news" src="images/news.jpg" width=113 height=24 border=0 alt="News" /></a>
<a href="../events/" onmouseover="changeImages('events', 'images/events-over.jpg'); return true;" onmouseout="changeImages('events', 'images/events.jpg'); return true;"> <img name="events" src="images/events.jpg" width=113 height=24 border=0 alt="Event Calendar" /></a>
<a href="../sponsors.html" onmouseover="changeImages('sponsors', 'images/sponsors-over.jpg'); return true;" onmouseout="changeImages('sponsors', 'images/sponsors.jpg'); return true;"> <img name="sponsors" src="images/sponsors.jpg" width=113 height=25 border=0 alt="Sponsors" /></a>
<a href="../bands.html" onmouseover="changeImages('bands', 'images/bands-over.jpg'); return true;" onmouseout="changeImages('bands', 'images/bands.jpg'); return true;"> <img name="bands" src="images/bands.jpg" width=113 height=25 border=0 alt="Bands" /></a></td>
<a href="../gallery.html" onmouseover="changeImages('photos', 'images/photos-over.jpg'); return true;" onmouseout="changeImages('photos', 'images/photos.jpg'); return true;"> <img name="photos" src="images/photos.jpg" width=113 height=22 border=0 alt="Photos" /></a>
<a href="../devos.html" onmouseover="changeImages('devos', 'images/devos-over.jpg'); return true;" onmouseout="changeImages('devos', 'images/devos.jpg'); return true;"> <img name="devos" src="images/devos.jpg" width=113 height=26 border=0 alt="Devos" /></a>
<a href="../groups.html" onmouseover="changeImages('smallgroups', 'images/smallgroups-over.jpg'); return true;" onmouseout="changeImages('smallgroups', 'images/smallgroups.jpg'); return true;"> <img name="smallgroups" src="images/smallgroups.jpg" width=113 height=22 border=0 alt="Small Groups" /></a>
<img src="images/menu_bottom.jpg" width=113 height=128 alt="" />
</div>
</div>
</div>


</BODY>

-----

In Firefox, the layout renders correctly. In IE, the image links (in the "menu" div) have a bottom margin that shouldn't be there. Does anyone have an idea what the problem could be? Thanks.

EDIT: It just broke in Firefox too.

jaap
08-19-2005, 11:32 PM
Hmmm, your code is quiet unreadable... could you repost the code with indents for every div? That way, it is always better to see what div is used, what div is open.... where are we now?

Don't care about the extra spaces, you won't see the difference in pageloading times.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum