CSS - Ie6 Utter Mess&ie7 Mess. Safari&opera&firefox Alright

Hello everybody, please excuse me as i am a begginner. I have made some changes to my CSS and everything is fine apart from one section.

On my website in the "Check-out" are i should display a Paypal application and and image containing information. I can't figure out why the image and the application are half way down the page.

Here is the Website.

Code:

http://www.Archives-music.com

Here is the CSS

Quote:
/* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} /* Joker Designs Soundclick CSS*/ .mainTable {background: transparent; color:#000000; width:893px; margin-left:auto; margin-right:auto; text-align:left; border: none} .mainContent {background: transparent; color:#color:#000000; width:893px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navbarBottom, .navbarTop {width:893px;} .navigation {background: url(); color:#000000; width:893px; height:1140px; float:left; z-index:9; overflow:hidden; margin:-5px 0px -25px 0px; } .navigation a, .navigationDivider, .navigation .headline, .navigation .div, .navigation img {display:none;} .navigation .statsNumbers {color:black; margin-left:50px;} form .mailingList {margin-left:55px; position:absolute; top:990px; z-index:3;} .mlheadline {display:none;} .mlprivacy {display:none;} .contText form {height:150px;} .contText a {border:none;} .headline {display:none;} .headlineBig {display:none;} .headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#666666; font-size:0px; font-weight:normal;} .headlineSuppl a:link, .headlineSuppl a:visited {color:#929292; text-decoration:none;} .headlineSuppl a:hover {color:white; text-decoration:underline;} .pageturner {background:#000000; color:#cccccc; border:#222222 solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#929292; text-decoration:underline;} .listedPicsBox {border:#222222 solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} .color_supplemental {color:#666666;} .alternateBG0 {background:none;} .alternateBG1 {background:none;} .mainContent .contHeadline {clear:left; font-size:0px; color:#929292; padding:12px 0px 2px 20px;} .mainContent .contText {clear:left; padding-left:0px;} .mainContent .contInterview {clear:left; padding-left:0px;} .mainContent .newsBox {clear:both; background:#000000; color:#cccccc; border:#222222 solid 2px; margin:0px 20px 20px 20px; padding:20px;} .playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;} .playerBox .playerHead {background:; color:#000000; border-top:#000000 solid 1px; border-bottom:#000000 solid 1px; text-align:right; font-size:10px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#;000000 text-decoration:underline;} .playerBox .playerHead a:hover {color:#000000; text-decoration:underline;} .playerBox .songBox {background:#000000; border-bottom:#000000 solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:; font-size:10px; padding:1px;} .playerBox .songBox .singleSong:hover {background:; color:#000000; cursorointer;} .embeddedPlayer {font-size:12px; margin-left:130px; padding40px; position:absolute; top:620px; width:620px; z-index:3;} .contHeadline {display:none;} .pageFooter {clear:both; color:white; padding:30px 0px 10px 20px; width:800px; margin-left:auto; margin-right:auto; text-align:center;} .songsBox {border-bottom:#000000 dashed 0px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox {background: url(); background-repeat: repeat;} .songsBox a:link, .songsBox a:visited {color:#000000 ;} .songsBox a:hover {text-decoration:underline; color:#a70013;} a.songtitle:link, a.songtitle:visited {color:#a70013; text-decoration:none; font-size:13px; font-weight:bold;} a.songtitle:hover {color:#000000 ; text-decoration:underline;} .songsBox .actionlinks {font-size:11px; color:#a70013;} .songsBox .topSong {color:#a70013; float:left; text-align:left; font-size:10px;} body { background-image: url(http://www.ozphotolink.com/usr/95/sphere_black_wh); background-color: #ffffff; background-position: center center; background-repeat: ; background-attachment:fixed; } img { border: none; } body, div, tr, td, select, textarea, input, option { font-family:Verdana; font-size:10px; } a, a:link, a:visited } color:#ffffff; text-decoration:none; } a:hover { color:#a70013; text-decoration:underline; } salesection { background-color:black; } div.salesection /* I made changes to margin and positioning here.*/ { position: absolute; top: 65px; left: -140px; margin-right: 0px; margin-left: 0px; Width: 790px; heigth: 100px; } /* I added this section here.*/ a.paymentsection { position: relative; top: 0px; left: -180px; } /* I added this section here.*/ div.saleform { position: relative; top: -195px; left: 185px; } /* I added this section here.*/ div.button { position: relative; top: 15px; left: 0px; } div.main { position: absolute; top: 0; left: 50; margin-left: 10px; width: 853px; height: 1521px; margin-top:130px; } /* I made changes to margin and positioning here.*/ div.paypal { position: absolute; top: 10; left: 230px; margin-left: 0px; width: 210px; height: 100px; margin-top:1140px; z-index:7; } div.paypal1 { position: absolute; top: 0; left: 50; margin-left: 330px; width: 255px; height: 100px; margin-top:1140px; z-index:7; } div.paypal2 { position: absolute; top: 0; left: 50; margin-left: 600px; width: 177px; height: 100px; margin-top:1140px; z-index:7; } div.widget { position: absolute; top: 0; left: 50; margin-left: 457px; width: 380px; height: 288px; margin-top:784px; z-index:7; } div.newsfeed { position: absolute; top: 0; left: 50; margin-left: 50px; width: 385px; height: 165px; margin-top:870px; z-index:6; } div.mailinglist { position: absolute; top: 0; left: 50; margin-left: 50px; width: 380px; height: 50px; margin-top:1075px; } div.tv { position: absolute; top: 0; left: 50; margin-left: 50px; width: 680px; height: 340px; margin-top:1470px; z-index:6; } #mail { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 108px; margin-top:1435px; z-index:4; background: url(http://elvissalic.com/theachievers/email.png); } #mail:hover { background-position: top right; } #twitter { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 99px; margin-top:1540px; z-index:4; background: url(http://elvissalic.com/theachievers/twitter.png); } #twitter:hover { background-position: top right; } #youtube { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 102px; margin-top:1636px; z-index:4; background: url(http://elvissalic.com/theachievers/youtube.png); } #youtube:hover { background-position: top right; } #skype { display:block; position: absolute; top: 0px; left: 50%; margin-left: 320px; width: 101px; height: 104px; margin-top:1740px; z-index:4; background: url(http://elvissalic.com/theachievers/skype.png); } #skype:hover { background-position: top right; } #hotboy { display:block; position: absolute; top: 0px; left: 50%; margin-left: -410px; width: 403px; height: 66px; margin-top:1853px; z-index:9; background: url(http://img860.imageshack.us/img860/8505/paypalq.png); } #hotboy:hover { background-position: top right; }


Does anybody have any ideas?. I apologize for being so simple but i am a complete beginner with all things CSS.

Peter

Hi,

Here is the site I am working on:

http://www.pizzaz-lingerie.com/launch.php

It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one.

-CJ

haha, Web development could actually be fun if the browsers would at least adhere to the same standard!

Anyway, in my web page I have this setup going:

Code:

<div class="logoContainer">
	<div class="indexLogo">
		<img src="/templates/include/index/logoLeft.jpg">
	</div>
	<div class="indexLogoRight">
		<img src="/templates/include/index/logoRight.jpg">
	</div>
</div>

and the CSS Looks like this:

Code:

.logoContainer {
	position:relative;
	width:100%;
	min-width:866px;
	height:100px;
	background:url(include/index/logoFiller.jpg);
	background-repeat:repeat-x;
}

.indexLogo {
	float:left;
	min-width:431px;
	height:100px;
}

.indexLogoRight {
	float:right;
	min-width:384px;
	height:100px;
}

This works fine in IE and safari, but in IE the right floated div drops down when the browser window is resized to a pixel size smaller than the width of the 2 images. I am forcing IE into standards comliant mode but it doesn't fix this problem.

I've tried various fixes on the net and nothing seems to work. What am I doing wrong or how can this be corrected?

Ok, some trouble with Fire Fox and IE.

I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it.

http://ernies.bombinaid.com

Problems

IE:
The main box areas in each page keeps going over the menu!

FireFox:
In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping.

Here is the css code:

Code:

body      {background-color: black}
.header   {width: 100%; margin-left: -1px; margin-top: -4px;}
.links    {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main     {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2    {background: url(corner1.gif) 0 100% no-repeat}
.main3    {background: url(corner2.gif) 100% 100% no-repeat}
h3        {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link    {text-decoration: underline; color: black;}
a:hover   {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr        {color: white}
img.ajm113 {margin-left: 30cm;}

Can someone help me out here?

This is my first css html design and its been quite a struggle.

I've been reading about bugs and hacks for ie 6 but recognising them and implementing the changes I'm stumbling on.

The pages that look the worst are : efficient-heat net / form and efficient-heat net / services. They have been decimated by ie 6.

I've taken out the javascript navigation for validation reasons.



I know about conditional comments so if I can I would like to make adjustments to the code rather than finding hacks.


What's going on with these pages. Can you give me some suggestions of what I need to do.

I appreciate any help, Thanks.