3 replies [Last post]
Cipes
Cipes's picture
Offline
Regular
Montreal
Last seen: 13 years 37 weeks ago
Montreal
Joined: 2008-10-01
Posts: 18
Points: 0

Hi Gang, I just wanted to ask is there a particular bug with IE (7) that gives it problems with AP?
I hardly ever use AP cause Im not sharp enough to do it properly, but when making a dropdown NAV menu
it seems like to only good way to make sure things are going to line up proper in multiple situations.

So what are some reasons for the same value of Top and Left to show up differently in IE than in the other browsers?

I've got a relatively positioned div with the main #nav then an AP positioned div with the sub-menu.

I usually think of things like clearing margins, and floats etc..

Here she be..

/* CSS Document 
   Authored by Cipescapes
   <a href="http://www.cipescapes.com" rel="nofollow">www.cipescapes.com</a>
   Oct. 27/08
*/
 
body {
	background:#F9EAC9;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#333300;
}
 
#wrapper {
	margin:0;
	padding:0;
	width:933px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
 
}
 
#introContents {
	margin:0;
	padding:0;
	width:820px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
	background:url(imgs/paper_intro.png) no-repeat;
	margin-top: 80px;
	text-align:left;
	position:relative;
}
#introContents img {
	margin:0;
	padding:0;
	border: 2px #573900 solid;
	padding:10px;
	margin-left:100px;
	margin-top:45px;
}
#title {
	margin:0;
	padding:0;
	margin-left:100px;
	margin-bottom:10px;
	width:350px;
	border-bottom: 2px #573900 solid;
}
#title img {
	margin:0;
	padding:0;
	border:none;
	margin:20px 0px 5px 0px;
 
}
.bgImg {
	position:absolute;
	top:0px;
	right:0px;
}
#leftContents {
	margin:0;
	padding:0;
	margin-top:20px;
	width:300px;
	float:left;
	position:relative;
	background-color:#000066;
}
#drawingNav {
    margin:0;
	padding:0;
	width:100px;
	position:absolute;
	top:92px;
	left:0px;
	text-align:left;
	background-color:#00CCFF;
}
#rightContents {
	margin:0;
	padding:0;
	width:600px;
	float:right;
}
ul#navigation {
	margin-left:0;
	padding-left:0;
	list-style-type:none;
	width:100%;
	float:left;
	background-color:#333366;
}
ul#navigation li {
	display:inline;
}
ul#navigation li img {
	display:block;
	float:left;
	padding-right:15px;
	border:none;
}
 
#titleGallery {
	margin:0;
	padding:0;
	margin-bottom:10px;
	width:300px;
	padding-bottom:10px;
	border-bottom: 2px #573900 solid;
	text-align:left;
	background-color:#CCCC00;
}
 
#gContainer{
    width:900px;
    height:500px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	float:left;
}
 
#gContainer ul{
    padding:0;
    margin:0;
	margin-top:50px;
    list-style-type:none;
	width:100px;
	float:left;
	text-align:left;
    }
#gContainer li {
	float:left;
}
#gContainer a.gallery span {
    position:absolute;
    width:1px;
    height:1px;
    top:5px;
    left:5px;
    overflow:hidden;
 
}
#gContainer a.gallery:hover {
    border:1px solid #fff;
    }
#gContainer a.gallery:hover span {
    position:absolute;
    width:800px;
    height:500px;
    top:10px;
    left:105px;	
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#573900;
}
#gContainer a.gallery:hover span img {
	padding:5px;
	border: 1px #573900 solid;
}
 
Blockquote {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#573900;
	width:250px;
	text-align:right;
	float:right;
	margin-top:150px;
}
.catTitle {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	font-style:italic;
 
}

And the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clement Yeh</title>
<link href="clement.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#gContainer a.gallery, #gContainer a.gallery:visited {
    display:block;
    color:#000;
    text-decoration:none;
	padding:5px;
    border:1px #573900 solid;
    margin:1px 2px 1px 2px;
    text-align:left;
    cursor:default;
    }
#gContainer a.slidea {
    background:url(imgs/thumbs/Cathedral_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slideb {
    background:url(imgs/thumbs/Flatiron_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slidec {
    background:url(imgs/thumbs/Sqidgi-Boo_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slided {
    background:url(imgs/thumbs/EdmontontoCalgary_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slidee {
    background:url(imgs/thumbs/Celebration_thumb.jpg);
	width:29px;
	height:29px;
        }
#gContainer a.slidef {
    background:url(imgs/thumbs/TheConch_thumb.jpg);
	width:29px;
	height:29px;
        }
#gContainer a.slideg {
    background:url(imgs/thumbs/CatchingaRide_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slideh {
    background:url(imgs/thumbs/Atlinlake_thumb.jpg);
	width:29px;
	height:29px;
        }
#gContainer a.slidei {
    background:url(imgs/thumbs/KitMaloDrawing_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slidej {
    background:url(imgs/thumbs/Malenude_thumb.jpg);
	width:29px;
	height:29px;
       }
#gContainer a.slidek {
    background:url(imgs/thumbs/Emma_thumb.jpg);
	width:29px;
	height:29px;
      }
#gContainer a.slidel {
    background:url(imgs/thumbs/BuiltSound_thumb.jpg);
	width:29px;
	height:29px;
      }
#gContainer a.slidem {
    background:url(imgs/thumbs/Trevor_thumb.jpg);
	width:29px;
	height:29px;
}
#gContainer a.sliden {
    background:url(imgs/thumbs/TowerofBabble_thumb.jpg);
	width:29px;
	height:29px;
}    
 
</style>
 
<body>
<img src="imgs/paper_corner.png" class="bgImg" />
<div id="wrapper">
 
<div id="leftContents">
	<div id="titleGallery">
	<img src="imgs/Clement_title.png" /></div>
	<ul id="navigation">
		<li><a href="sketchbook.html"><img src="imgs/Nav/drawing.png" /></a></li>
		<li><a href="#"><img src="imgs/Nav/sculpture.png" /></a></li>
		<li><a href="a"><img src="imgs/Nav/about.png" /></a></li>
	</ul>
	<div id="drawingNav"><img src="imgs/Nav/bicpen.png" /><img src="imgs/Nav/sketchbook.png" />
	<img src="imgs/Nav/myhandiscold.png" /></div>
	<div id="sculptureNav"></div>
	<div id="aboutNav"></div>
</div>
 
<div id="gContainer">
 <ul>
    <li>
		<a class="gallery slidea" href="#nogo">
        <span>
      <img src="imgs/art/Cathedral.jpg" alt="Cathedrale"  />
      <br />
      Cathedrale<br />
      13.5 x 21.5, 2000</span>	  </a>    </li>
 
    <li>
	<a class="gallery slideb" href="#">
        <span>
      <img src="imgs/art/Flatiron.jpg" alt="Flatiron"  />
      <br />
      Flatiron
      <br />
      pen, felt marker, 13 ½ x 21 ½”, 2001</span>	  </a>    </li>
    <li>
	<a class="gallery slidec" href="#">
        <span>
      <img src="imgs/art/Sqidgi-Boo.jpg" alt="Sqidgi-Boo"  />
      <br />
      Sqidgi-Boo<br />
     india ink, 2004</span>	  </a>    </li>
    <li>
	<a class="gallery slided" href="#">
        <span>
      <img src="imgs/art/EdmontontoCalgary.jpg" alt="Edmonton to Calgary"  />
      <br />
      Edmonton to Calgary
      <br />
      pen, 11” x 17, 2005</span>	  </a>    </li>
    <li>
	<a class="gallery slidee" href="#">
        <span>
      <img src="imgs/art/Celebration.jpg" alt="Celebration"  />
      <br />
      Celebration
      <br />
      felt marker, acrylic, 8 ½ x 11, 2006</span>	  </a>    </li>
    <li>
	<a class="gallery slidef" href="#">
        <span>
      <img src="imgs/art/TheConch.jpg" alt="The Conch"  />
      <br />
      The Conch
      <br />
      pen, 6 ½” x 9, 2006</span>	  </a>    </li>
    <li>
	<a class="gallery slideg" href="#">
        <span>
      <img src="imgs/art/CatchingaRide.jpg" alt="Catching a Ride"  />
      <br />
      Catching a Ride
      <br />
      pencil, felt marker, 8 ½ x 11, 2007</span>	  </a>	     </li>
    <li>
	<a class="gallery slideh" href="#">
        <span>
      <img src="imgs/art/Atlin lake.jpg"alt="Atlin lake"  />
      <br />
      Atlin lake
      <br />
      pen, pencil crayon, felt marker, 11” x 17, 2007</span>	  </a>    </li>
    <li>
	<a class="gallery slidei" href="#">
        <span>
      <img src="imgs/art/Kit Malo Drawing.jpg" alt="Kit Malo Drawing"  />
      <br />
      Kit Malo Drawing
      <br />
      pen, felt marker, 8 ½ x 11, 2007</span>	  </a>	  </li>
    <li>
	<a class="gallery slidej" href="#">
        <span>
      <img src="imgs/art/Malenude.jpg" alt="Male nude"  />
      <br />
      Male nude
      <br />
     pen, 11” x 17, 2007</span>	  </a>    </li>
    <li>
	<a class="gallery slidek" href="#">
        <span>
      <img src="imgs/art/Emma.jpg" alt="Emma" />
      <br />
      Emma
      <br />
      felt pen, conté, 11” x 17, 2007</span>	  </a>    </li>
    <li>
	<a class="gallery slidel" href="#">
        <span>
      <img src="imgs/art/Built Sound.jpg" alt="Built Sound"  />
      <br />
      Built Sound
      <br />
      pen, felt marker, acrylic, 11” x 17, 2008</span>	  </a>    </li>
	<li>
	<a class="gallery slidem" href="#">
        <span>
      <img src="imgs/art/Trevor.jpg" alt="Trevor"  />
      <br />
      Trevor
      <br />
      india ink, 8 ½ x 11, 2008</span>	  </a>    </li>
	  <li>
	<a class="gallery sliden" href="#">
        <span>
      <img src="imgs/art/The-Tower-of-Babble.jpg" alt="Trevor"  />
      <br />
      The Tower of Babble
      <br />
      4 diaries/1983-1989, 28 sketchbooks/1995-2006, size variable, 2008</span>	  </a>    </li>
  </ul>
 <blockquote>
 <span class="catTitle">Sketchbook</span><br/><br/>
 Sketchbooks and diaries are the most important part of my work. Most of my projects begin there, whether as a doodle or a bunch of hastily scrawled notes. They have been an invaluable place to experiment with new directions and they allow me to carry my practice with me when I’m out and about.</blockquote>
</div>
</div>
</body>
</html>

Sorry for the long code, it happens when using CSS to power an art gallery..Sad
I've spent a good while reading articles on AP to try and sort this out but I just can't find anything other than AP is bad! AP is good! and everything in between, but not any particular
browser issues with AP. So this would suggest its something else?
Thanks so much!

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 31 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

All browsers have the

All browsers have the padding and margins set differently IE does this more than most, try setting the margin and padding to 0 for your body this should make most browsers align. If all else fails then try a separate stylesheet for IE specificly.

Hope this helps.

Cipes
Cipes's picture
Offline
Regular
Montreal
Last seen: 13 years 37 weeks ago
Montreal
Joined: 2008-10-01
Posts: 18
Points: 0

Thanks Josh, I tried

Thanks Josh, I tried setting the body to 0 as well, but that didn't do it.

I'll give it a go with a separate style sheet. Thanks!

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 31 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

No problem

No problem