3 Replies - 948 Views - Last Post: 18 November 2008 - 07:59 PM

#1 jibber4568   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 51
  • Joined: 11-February 08

Image Size Problem

Posted 18 November 2008 - 12:36 PM

I am using an image as the footr for a site and am having a few problems.

As you can see below it is fine in firefox, but massive in IE and I can't work out why.

The div being used is called "footer"

Anyhelp would be much appreciated.

Firefox
Posted Image

IE
Posted Image

HTML
<body>
<center>
<div id="title" style="background-image:url(images/title_home.gif)";>
</div>
<div id="menu">

		<ul>
			<li id="m01"><a href="index.html">HOME</a></li>
			<li id="m02"><a href="Twilight.html">TWILIGHT</a></li>
			<li id="m03"><a href="Night.html">NIGHT</a></li>
			<li id="m04"><a href="Contact.html">CONTACT</a></li>
			
		</ul>
	
	</div>
	<div id="flashcontent2">
	<div id="flashcontent">SimpleViewer requires Javascript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>	
	</div>
	<script type="text/javascript">
	
		var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#ffffff");
		
		
		
		//fo.addVariable("xmlDataPath", "gallery.xml");
		//fo.addVariable("firstImageIndex", "5");	
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("preloaderColor", "0x000000");
		
		fo.write("flashcontent");	
	</script>	

	<div id="footer">
	</div> 
	</center>
		
</body>
</html>



CSS
	/* hide from ie on mac \*/
	html {
		height: 100%;
		overflow: hidden;
	}
	

	#flashcontent {
		height: 60%;
		z-index:1;
		position:relative;
		bottom:75px; 
	}
	/* end hide */

	body {
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #ffffff;
		color:#ffffff;
		font-family:sans-serif;
		font-size:20;
	}
	
	a {	
		color:#cccccc;
	}
	
	#title {
	
	width:862px;
	height:100px;
	position:relative;
	}
	
	#footer{   
	background-image:url(images/footer.gif);
	width:862px;
	height:2px;
	
	
	
	}
	
	#menu {
	width:862px;
	height:90px;
	position:relative;
}
#menu li{
	position:absolute;
	bottom:125px;
	
	list-style-type: none;
}
#m01 {left:450px;}
#m02 {left:540px;}
#m03 {left:655px;}
#m04 {left:740px;}
#menu a{
	font-family: arial;
	font-size: 16px;
	font-weight:bolder;
	color:#636363;
	text-decoration:none;
	text-transform: uppercase;
}
#menu a:hover {color: #000000;}



This post has been edited by jibber4568: 18 November 2008 - 12:39 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Image Size Problem

#2 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1651
  • View blog
  • Posts: 8,523
  • Joined: 07-September 06

Re: Image Size Problem

Posted 18 November 2008 - 02:03 PM

Instead of using divs why not try HR (Horizontal Rule). It will work in IE, and I believe FF the same:

<style>
.footer{
  height: 2px;
  width: 500px;
  color: #333;
  background: #333;
}
</style>

<hr class="footer"/>


Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 jibber4568   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 51
  • Joined: 11-February 08

Re: Image Size Problem

Posted 18 November 2008 - 02:39 PM

View PostBetaWar, on 18 Nov, 2008 - 01:03 PM, said:

Instead of using divs why not try HR (Horizontal Rule). It will work in IE, and I believe FF the same:

<style>
.footer{
  height: 2px;
  width: 500px;
  color: #333;
  background: #333;
}
</style>

<hr class="footer"/>


Hope that helps.



Brilliant, cheers mate :^: :^:

Not that it really matters, but any idea what was causing it to come out so large in IE
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1651
  • View blog
  • Posts: 8,523
  • Joined: 07-September 06

Re: Image Size Problem

Posted 18 November 2008 - 07:59 PM

I believe that IE requires things (that aren't images) to be at least 1 text line high, but not positive.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1