Weird CSS Error using Layers

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
janson0
Forum Newbie
Posts: 6
Joined: Thu Jun 01, 2006 11:10 am

Weird CSS Error using Layers

Post by janson0 »

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:

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>
Here is my CSS that applies to this section:

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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Weird CSS Error using Layers

Post by RobertGonzalez »

You gotta love IE! Not sure if it'll help, but try the CSS changes below. It might work. I would guess this has something to do with the banner-top div coming after the banner-links div. I think you need to float the second so it moves over the first. Not sure, but give it a shot.

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 {
	float: left;
	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 {
	color:white;
	font-family:Tahoma; 
	font-size:12px;
	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 {
	height: 185;
	}
janson0
Forum Newbie
Posts: 6
Joined: Thu Jun 01, 2006 11:10 am

Post by janson0 »

Thanks for the idea, but it seems that I just cant get this to work this way.

Either I am going to have to just edit all the images with the home and print and make an image map....

or

I am going to make the "Financial Technologies" in the to right the thing to click to go home and then put a "Print this Page" link near the bottom of the page.

I think that option 2 sounds more straightforward. What do you guys think? Will people be confused?

-- Michael
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Sounds archaic, but what I normally do in cases like this is start removing CSS elements then add them back in one by one. What you want is for the second <div> to be in the highest location. You want the first <div> to float over it. Using that, make your CSS as minimal as possible until you get that effect, then add in the other styling.
janson0
Forum Newbie
Posts: 6
Joined: Thu Jun 01, 2006 11:10 am

Post by janson0 »

alrighty...i will try that first before going the other route for sure.

and archaic is the word...lol
Post Reply