- This topic is empty.
-
AuthorPosts
-
December 7, 2009 at 4:22 pm #27113FJDdesignMember
Hi
I’m having 2 IE6 issues. I’m creating a very small e-commerce site sing paypal (simple free version). I’ve searched and searched and I can’t seem to find the answer so I’m hoping you can helpFirst issue: I’ve got a div that, for some reason, is adding a large padding or margin on top of it that I can’t seem to clear.
2nd Issue: I’ve got a paypal button that I’m using a class to style and it’s got this weird gray background for some reason. The class has a background image that used to be a png, but I changed it to a jpg and it’s still happening. It’s a form with input type: "submit"Browser shot of the IE6 problem:
http://i10.photobucket.com/albums/a121/ … _sucks.jpgThere are multiple pages this problem is occurring on, because they are all using the same class.
So here’s an example of how it’s supposed to look if you click on this link through a more modern browser: http://www.poufpillows.com/pillows/silk … night.htmlhere’s the link to the full CSS file. I’m using a conditional statement (thanks CSS-Tricks!) to load a separate CSS file for IE6: http://www.poufpillows.com/IE6orLess.css
The cart class structure:
<div id=cart_container>
<div id=cart>
<form….paypal provided code…..>
<input type="hidden" etc etc, paypal provided code…>
<input type="hidden" etc etc, paypal provided code…>
<input type="submit" class="addtocart" … paypal provided code… >
</form>
</div> <!— end cart div —>for the menu at the bottom, the specific class that’s having the problem is called ".nav_zoom"
below should be all the CSS that’s actually used in the page:
Code:* { margin: 0; padding: 0; }body { background-color: white; padding-top:30px; }
.clear { clear: both; }
a img { border: 0; }
/*
Typography
*/
a {
text-decoration:none;
color: #3f403f;
font-family: Arial, Helvetica, sans-serif;
font-size:0.85em;
}a:visited { text-decoration:none; }
a:active { color:#a1a4a1; }
a:hover { color:#CCCCCC; }p { font-size:0.8em;
font-family: futura, Helvetica, sans-serif;
line-height: 1.05em;
}#page_container { margin: 0 auto;
width: 755px;
height: 553px;
}#menu2 {
float:right;
margin-top:10px;
}#nav2 {list-style-type:none; }
#nav2 li {display:block; line-height:1em; text-align:right;}#layout1 { padding-top:156px; width: 755px; }
#collections { padding-top:156px; width: 790px; }
#collections a { margin-right:20px; }h2.vert_title { width: 42px; height: 234px;
padding-top:74px;background:url(“images/about_title.jpg”);
background-position:bottom;
background-repeat:no-repeat;
text-indent: -9999px;}
/* elements for the zoomed pages */
#pillow_page {width:630px;
padding-top:150px;
margin: 0 auto;
}#zoomed { float:left;
width: 315px;
}#zoomed_text { background-color:#313132;
width: 199px;
height: 265px;
float:right;
color:#FFFFFF;
padding: 50px 58px 0px 58px;
}#pillow_page .nav_zoom { font-family: Arial, Helvetica, sans-serif;
text-align:right;
font-size:.8em;
padding: 0; margin: 0;
}.cart_container { position:relative; right: -120px; margin-top: .8em;
width: 120px; height: 38px; }.cart { width: 40px; float:left; position: relative; bottom: 0px;
background:none;
}.addtocart_text { position:relative; bottom: 0px; padding: 25px 0 0 45px;}
.addtocart {
color:#FFFFFF;
background:none;
border:none;
font-size:.8em;
height: 38px; width: 40px;background:url(‘images/cart.jpg’) no-repeat;
}December 8, 2009 at 1:25 am #67774AshtonSandersParticipant"FJDdesign" wrote:First issue: I’ve got a div that, for some reason, is adding a large padding or margin on top of it that I can’t seem to clear.I didn’t find a solution for this, as it’s hard for me to test in IE6, but did you try removing your: Clear div?
Code:"FJDdesign" wrote:2nd Issue: I’ve got a paypal button that I’m using a class to style and it’s got this weird gray background for some reason. The class has a background image that used to be a png, but I changed it to a jpg and it’s still happening. It’s a form with input type: "submit"the problem is that it is still a clear png: images/cart.png (IE6 can’t handle the clear PNG)
December 9, 2009 at 11:02 am #67900BridoMemberCode:.clear { clear:both; padding:0px; margin:0px; line-height:0px; }.nav_zoom { display:inline; float:right; font-family:Arial,Helvetica,sans-serif; font-size:0.8em; margin-top:16px; text-align:right; }
Replace these two classes in your css. Let me know the results.
Also, you are getting the gray background behind your image… because it’s a png, and IE6 will not read the alpha transparency without some sort of png fix. Search around for "jquery png fix".
December 9, 2009 at 1:52 pm #67916FJDdesignMemberThanks for your help! (both of you)
first… I could have sworn that I edited my css and changed the PNG to a JPG, guess I didn’t upload or something. That was my stupid overlook mistake.
second…. I had removed the .clear altogether, and I tried Brido’s suggestion, none worked. Then I did something so obvious that I don’t know why I didn’t do it before. I converted those three links into a UL and then styled it and got it to work perfectly, and IE removed that extra space. I’m still very confused as to why IE was adding that space, even without a UL, it shouldn’t have been there, but then again we all know IE shouldn’t be doing a lot of things. oh well.
problem solved!
thanksCode:.nav_zoom { width: 200px; display:inline;
float:right; font-family:Arial,Helvetica,sans-serif; font-size:0.8em; margin-top:16px; text-align:right; }ul.nav_zoom li {
display: inline; /* Prevents “stepdown” */} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.