IE margins. [Archive] - Dynamic Drive Forums

davidarechiga

02-02-2009, 06:34 PM

the link is

continuedmovement.com/scf-test/clothing.html

on the clothing page, it seems Internet Explorer is adding either margins or padding to the clothingMenu div or the divs right next to it when i click on the links to animate the divs back and forth.
i can specify more description if needed.

thanks in advance.

CSS

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, small, strike, strong, ul, li,
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
line-height: 1;
color: black;
background: transparent;
}
ol, ul {
list-style: none;
}

*{margin:0 auto;}

html, body {
margin:0 auto;
height:100%;
background: url(images/background.gif) no-repeat fixed center 90%;
}

div#container {
margin:0px auto;
width:800px;
height:100%;
}

div#header {
clear:both;
margin:0;
padding:0;
background-image: url(images/headerBG.jpg);
width:800px;
height:260px;
position:relative;
}
div#mainNav {
clear:both;
text-align:right;
background:#000000 ;
margin-top:0px;
width:800px;
height:30px;
position:relative;

}

div#mainNav ul, div#mainNav ul li{
padding:0 15px;
border:solid white 0px;
list-style-type:none;
display:inline;
line-height:33px;
font-size:13pt;
margin:0;

}

a:link
{
color:#999966;
text-decoration:none;
}

a:visited
{
color:#999966;
text-decoration:none;
}

a:active
{
text-decoration:none;
}
a:hover
{
color:#000000;
text-decoration:none;
}

div#mainContent{
width:800px;
height:670px;
position:relative;
background:url(images/contentBG.jpg) repeat;
}

div#mainContent h1{
margin-left:15px;
padding-top:15px;
padding-bottom:15px;
}

div#mainContent h3{
border:solid black 0px;
margin:0px 15px 5px 15px;
font-size:12.5pt
}

div#mainContent p{
border:solid black 0px;
margin:15px;
font-size:10.5pt;
}

div#footer {
clear:both;
padding-left:15px;
line-height:38px;
height:8%;
font-size:9pt;
margin:0;
background:black;
color:#999966;
position:relative;
}

div#contdmvmntimg {
width:132px;
height:25px;
position:absolute;
top:0px;
right:65px;
background:url(images/contdmvmnt.jpg) no-repeat;
line-height:999px;
overflow:hidden;
}

div#cushyimg {
width:132px;
height:25px;
position:absolute;
top:0px;
right:195px;
background:url(images/cushy.jpg) no-repeat;
line-height:999px;
overflow:hidden;
}

div#logIn {
width:auto;
height:30px;
line-height:37px;
background:black;
position:absolute;
top:0px;
right:15px;
color:white;

}
div#clothingNav {

width:250px;height:670px;margin:0;
}

div#shirtDescription {

width:250px;height:670px;margin:0;
}

div#clothingMenu a:link {
color:#000;
text-decoration:none;
}

div#clothingMenu a:active {
color:#000;
text-decoration:none;
}

div#clothingMenu a:visited {
color:#000;
text-decoration:none;
}

div#clothingMenu a:hover {
color: #CC9;
text-decoration:none;
}

p a {color:#000;}

div#clothingMenu ul#clothingNav li {
line-height:27px;
text-align:left;
margin-left:-30px;
padding:auto 10px;
border-bottom:0px solid #CC9;
}

div#clothingMenu ul#clothingNav li:hover {
background:url(images/grenade.png) no-repeat 90% 50% ;
}

davidarechiga

02-02-2009, 06:37 PM

Html

<!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>
<title>
So Cal Felons | 2009
</title>

<link rel="stylesheet" href="clothing.css" media="screen" />

<meta name="keywords" content="So, Cal, Felons" />
<meta http-equiv="content-type" content="text/html; char=utf-8" />

<script type="text/javascript" src="IEmarginFix.js"></script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

animatedcollapse.addDiv('1', 'fade=1,speed=400,group=pets,hide=0')
animatedcollapse.addDiv('2', 'fade=1,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('3', 'fade=1,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('4', 'fade=1,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('5', 'fade=1,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('6', 'fade=1,speed=400,group=pets,hide=1')

animatedcollapse.init()

</script>

</head>

<body>
<div id="container">
<div id="header">

</div>
<div id="mainNav">
<ul id="nav">
<li><a href="news.html">News</a></li>
<li><a href="clothing.html">Clothing</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="friends.html">Friends</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="mainContent">

<div id="clothingMenu" style="padding-left:0;float:left; padding:0px 0px 0 0;
width:200px;height:670px; background:transparent;text-align:left;">
<ul id="clothingNav" style="list-style-type:none;width:150px;margin-top:15px;line-height:20px;">
<li><strong>T-Shirts</strong></li>
<li><a href="javascript:animatedcollapse.toggle('1')">Cali Knuckles</a></li>
<li><a href="javascript:animatedcollapse.toggle('2')">Pray For Us (Black)</a></li>
<li><a href="javascript:animatedcollapse.toggle('3')">Grenades</a></li>
<li><a href="javascript:animatedcollapse.toggle('4')">Pray For Us (White)</a></li>
<li><a href="javascript:animatedcollapse.toggle('5')">Zebra</a></li>
<li><strong>Miscellaneous</strong></li>
<li><a href="javascript:animatedcollapse.toggle('6')">Booty Shorts</a></li>
</ul>

</div>

<div id="1" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">Kali Knuckles</h1>
<p style="padding-left:15px;font-size:12px;">6 oz 100% cotton tee with front right chest print and side print<br /><br />
<a href="http://socalfelons.bigcartel.com/product/kali-knucks" target="_blank" style="color:#000;">Buy Now</a></p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;">
<img src="images/caliknucksfront.jpeg" width="205" height="306" alt="caliknucks" /><br /><br />
<img src="images/caliknucksangle.jpeg" width="205" height="306" alt="caliknucksangle" />
</div>
</div>

<div id="2" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">Pray For Us (Black)</h1>
<p style="padding-left:15px;font-size:12px;">6 oz 100% cotton tee with front right chest print and side print<br /><br />
<a href="#" target="_blank" style="color:#000;">Buy Now</a>
</p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;">
<img src="images/holyhandsblackfront.jpeg" width="205" height="306" alt="holyhandsblackfront" /><br /><br />
<img src="images/holyhandsblackangle.jpeg" width="205" height="306" alt="holyhandsblackangle" />
</div>
</div>

<div id="3" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">Grenades</h1>
<p style="padding-left:15px;font-size:12px;">6 oz 100% cotton tee grenade logo across neck<br /><br />
<a href="http://socalfelons.bigcartel.com/product/grenades" target="_blank" style="color:#000;">Buy Now</a></p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;">
<img src="images/grenades.jpeg" width="205" height="306" alt="grenades" />
</div>
</div>

<div id="4" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">Pray For Us (White)</h1>
<p style="padding-left:15px;font-size:12px;">100% cotton tee white with black print right chest.<br /><br />
<a href="http://socalfelons.bigcartel.com/product/pray-for-us-felony-tee-guys" target="_blank" style="color:#000;">Buy Now</a>
</p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;">
<img src="images/holyhandswhitefront.jpeg" width="205" height="306" alt="holyhandswhitefront" /><br /><br />
<img src="images/holyhandswhiteangle.jpeg" width="205" height="306" alt="holyhandswhiteangle" />
</div>
</div>

<div id="5" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">Zebra Tee</h1>
<p style="padding-left:15px;font-size:12px;"><br /><br />
<a href="http://socalfelons.bigcartel.com/product/zebra-tee" target="_blank" style="color:#000;">Buy Now</a></p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;">
<img src="images/zebra.jpeg" width="205" height="306" alt="zebra" />
</div>
</div>

<div id="6" style="margin-left:150px;">

<div style="float:left;width:300px;height:670px;padding-bottom:0px; background:transparent;text-align:left;">
<h1 style="padding-left:15px;">So Cal Felons Booty Shorts</h1>
<p style="padding-left:15px;font-size:12px;"><br /><br />
<a href="#" target="_blank" style="color:#000;">Buy Now</a></p>
</div>

<div style="float:left;width:270px;height:655px;padding-bottom:15px;padding:15px 15px 0 0; background: transparent;text-align:right;"><img src="images/bootyshorts.jpeg" width="265" height="160" alt="bootyshorts" align="right" />
</div>
</div>

</div>

<div id="footer">
<p>All Content Copyright© So Cal Felons 2009</p>
<div id="cushyimg"><a href="#">Cushy CMS</a></div>
<div id="contdmvmntimg"></div>
<div id="logIn"><a href="#">Login?</a></div>

</div>
</div>

</body>

</html>