Weird CSS Error using Layers
Posted: Thu Jun 01, 2006 11:16 am
Hey guys,
I am having a problem with IE and Firefox using CSS.
The page is: http://www.swgcomlink.com/ft/
Basically what is happening is in Firefox the layers work correctly and the links show up in the right spot on top of the image, where as in IE the image has some sort of line break or space on the top of it. Take a look and you will get a better idea of what I am talking about I guess.
Here is my HTML for the part of the site:
Here is my CSS that applies to this section:
Thanks in advance!
-- Michael
I am having a problem with IE and Firefox using CSS.
The page is: http://www.swgcomlink.com/ft/
Basically what is happening is in Firefox the layers work correctly and the links show up in the right spot on top of the image, where as in IE the image has some sort of line break or space on the top of it. Take a look and you will get a better idea of what I am talking about I guess.
Here is my HTML for the part of the site:
Code: Select all
<div id="page-header">
<div id="banner-links"> > <a href="index.asp" style="color:white; font-family:Tahoma">Home</a> | <a href="index-p.htm" style="color:white; font-family:Tahoma">Print</a></div>
<div id="banner-top"><img src="images/top/top_mission_1.gif" alt="Business debt consolidation in action."></div>
<div id="banner-btm-left"><img width="370" src="images/top/top_mission_2.gif" alt="Business debt consolidation in action."></div>
<div id="banner-btm-right"><img src="images/top/top_mission_3.gif" usemap="#1" border="0" alt="Business debt relief backed by the TMA and BBB"></div>
</div>Code: Select all
#banner-top {
height: 50px;
width: 800px;
background:url("images/top/top_index_1.gif") top left no-repeat;
position:relative;
top: -14 !important;
top: 0;
left:0;
z-index:1;
}
#banner-links {
float:left;
color:white;
font-family:Tahoma;
font-size:12px;
position:relative;
top:3;
left:0;
z-index:2;
}
#banner-btm-left {
height:135px;
/*border: 1px solid #002157;*/
float:left;
margin-right:0px;
margin-left:0px;
margin-top:0px;
padding:0px;
}
#banner-btm-right {
height:135px;
/*border: 1px solid #002157;*/
float:right;
margin-right:0px;
margin-left:0px;
margin-top:0px;
padding:0px;
text-align:left;
}
#page-header {
float:left;
height: 185;
}Thanks in advance!
-- Michael