Page 1 of 1

Weird CSS Error using Layers

Posted: Thu Jun 01, 2006 11:16 am
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

Re: Weird CSS Error using Layers

Posted: Thu Jun 01, 2006 8:53 pm
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;
	}

Posted: Fri Jun 02, 2006 10:24 am
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

Posted: Fri Jun 02, 2006 10:42 am
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.

Posted: Fri Jun 02, 2006 1:18 pm
by janson0
alrighty...i will try that first before going the other route for sure.

and archaic is the word...lol