|
CSS - Css In A Mess
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 Similar TutorialsYou can check this problem in the pink square with curvy corners that I have in the url metatradersoftware com(I cannot mention it because of forum fules). How I am supposed to show you my code if you do not know the url where it is?This post is just for asking a question. Thus, I hope there is nothing wrong with it. If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft. I would appreciate any suggestion. Thanks in advance 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? 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 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. I'm trying to add tables to page in my Wordpress blog, and when I publish, there is TONS of white space between the previous paragraph and the table. It appears the more rows I have in the table, the more white space there is. Which makes me suspect that it might be something to do with the CSS stylesheet. Any ideas on how to solve this? In case you need it, the tables are about half-way down on this page: dominatelocalrankings.com/skeptical TIA for any help, Tom |
|||||||