CSS Position Not Appearing the same in IE as in FF...

**jihanemo** · 12-27-2008, 06:07 PM

Please check this page: http://americanchic.net/untitled The pop up image is showing HORRIBLY in IE (of course). I'm trying to fixed it so that the pop-up image is displayed close to the main image. I don't know what I'm doing. I thought that creating a "relative" position for the large pop image would help but I've screwed it up. Help?

**bluewalrus** · 12-28-2008, 05:13 PM

This is working in FF exactley as you want? If so might not want to make the changes I've made....In flock for me your images weren't showing up in a viewable area (down 300ish pixels from the mouse on the image which is down some 250ish pixels as well). I don't have ie to see the difference but there are some changes you should make that may help from problems with other browsers as well (if this works in all but ie don't change a thing and ignore this but I dont think that will be the case).

You should have the link tag for the css stylesheet in the head. You should also put all your css into one style sheet. You need to declare the type of page you have written so all browser will read it the same as well with a doctype.

put this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

in place of this

Code:

<html>
  <head>

You have an extra head tag here get rid of that and the other stuff in the body tag, I've put in the css so that can go as well.
was...

Code:

 
</head>

  <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" topmargin="0" leftmargin="0">

<!--$begin exclude$-->
    <div id="root" style="position:absolute;width:750px;height:965px;">
<!--$end exclude$-->
      <div id="e0" style="position:absolute;left:15;top:90;width:735;height:855;"><div style="width:735px;height:855px;overflow:auto;"><!--$begin html$--><head>

<link rel="stylesheet" media="all" type="text/css" href="http://www.americanchic.net/images/picpopup.css" />

</head>

So this should be ....

Code:

</head>
  <body>

<!--$begin exclude$-->
    <div id="root" style="position:absolute;width:750px;height:965px;">
<!--$end exclude$-->
      <div id="e0" style="position:absolute;left:15;top:90;width:735;height:855;">
      <div style="width:735px;height:855px;><!--$begin html$-->

You should use the classes you've made but remove the top from them in the css (this will put them right under the image assumed that's what you wanted).

Code:

<a class="p1" href="#" title="thumbnail image"><img src="http://www.americanchic.net/temporary/1.jpg" alt="Thumbnail image" width="80" height="80" title="Thumbnail image" /><img  src="http://www.americanchic.net/temporary/1_big.jpg" alt="Enlarged view of image" width="350" height="233" class="large" title="Enlarged view of image" /></a>


<a class="p2" href="#" title="thumbnail image"><img src="http://www.americanchic.net/temporary/2.jpg" alt="Thumbnail image" width="80" height="80" title="Thumbnail image" /><img  src="http://www.americanchic.net/temporary/2_big.jpg" alt="Enlarged view of image" width="350" height="233" class="large" title="Enlarged view of image" /></a>


<a class="p3" href="#" title="thumbnail image"><img src="http://www.americanchic.net/temporary/3.jpg" alt="Thumbnail image" width="80" height="80" title="Thumbnail image" /><img  src="http://www.americanchic.net/temporary/3_big.jpg" alt="Enlarged view of image" width="350" height="233" class="large" title="Enlarged view of image" /></a>

and this would be all the css less the css in the div tag at the start I left those but will probably change that later if you post back here with more info (screen shots?)

Code:

.right {
	font-size: 1.0em;
	padding-right: 100px;
	text-align: right;
}

#info {
	border: 1px solid #C2C7BE;
	margin-left: 80px;
	margin-right: 80px;
	margin-top: 20px;
	padding: 0px 15px 0px 15px;
	position: relative;
}

#info a, #info a:visited {
	color: #8A9483;
	text-decoration: none;
}

#info a:hover {
	color: #9BA495;
	text-decoration: underline;
}

#pic a {
	float: left;

}

#pic a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: relative;
	top: -1px;
	width: 1px;
}

#pic a img {
	border: 0;
}

#pic a.p1, #pic a.p1:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 80px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: 80px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
}

#pic a.p1:hover .large {
	border: 1px solid #000000;
	display: block;
	height: 280px;
	left: 35px;
	position: relative;
	width: 280px;
}

#pic a.p2, #pic a.p2:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 80px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: 80px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
}

#pic a.p2:hover .large {
	border: 1px solid #000000;
	display: block;
	height: 280px;
	left: 35px;
	position:relative;
	width: 280px;
	overflow:hidden;
}

#pic a.p3, #pic a.p3:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 80px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: 80px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
}

#pic a.p3:hover .large {
	border: 1px solid #000000;
	display: block;
	height: 280px;
	left: 35px;
	position:relative;
	width: 280px;
}

#top {
	margin-left: 80px;
}
 	body {font-family:"Arial"; font-size:14;margin:0px;padding:0px; background:#FFFFFF; color:#000000; margin:0;}
	a {color:#0000FF;}
	a:visited {color:#800080;}
    p {font-family:"Arial"; font-size:14;}
      form {margin:0;padding:0;}

Make sense?

Thread: CSS Position Not Appearing the same in IE as in FF...

Thread Tools

Search Thread

CSS Position Not Appearing the same in IE as in FF...

Bookmarks

Bookmarks

Posting Permissions