|
CSS - Fine In Ie7 & Ff3 But Page Looks A Mess In Ie6
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. 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 http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
See here The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution. Any tips ? (The relevant subset of my) website is he http://www.smoli.com (URL address blocked: See forum rules) It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...). Everything works fine in: - Preview from within FP. - IE8 and IE9 - Latest version of Chrome. But not with Firefox (latest version). Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place". I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules) Any idea what is causing the incompatibility? Many thanks. I have several pages on a website I am developing that will not print correctly in IE7. They print fine in FF 2 & 3, Opera, and Safari. In IE7 the page prints the Header, the menu, and the end content on the second printed page, the main content on does not print on printed page 1. If I comment out enough of either the middle or the end of the html page to make it a single printed page document it prints fine. I have tried building the end of the body content using tables but with the same result: only part of the page prints. Any ideas on what may be causing this behavior or directions in which I should look? Any help will be greatly appreciated as I have run out of ideas. Thanks, John White I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.center-wrap p {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
font-size: 30px;
line-height: 35px;
padding: 0px;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 66px;
font-weight: bold;
color: #942610;
text-align: center;
line-height: 64px;
margin-top: 83px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap img {
margin-top: 47px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 248px;
}
}
-->
</style>
</head>
<body>
<div class="all-wrap">
<div class="center-wrap">
<h2>NEW WEBSITE<br />
COMING SOON</br></h2>
<p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
<img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
</img></div>
</div>
</body>
</html>
Any thoughts on what I need to change? Thank you. if you take a look at http://www.cherrysociety.com/mag/art/ you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong? the css is at http://www.cherrysociety.com/mag/style.css thanks guys, i appreciate it a lot. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ 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? 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 I just uploaded this to my server, don't know what happend. It looked fine. The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning). Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks. Code: <div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center"> <div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4"> finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE here is my code and the bit in bold is what has the problem with the background color in FF also, is there a way to make the page end when the content ends? /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; height : auto; } #sidebar { float : left; width : 243px; height : auto; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #innercontent { float : left; width : 750px; height : auto; padding : 0; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 243px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } First off, i'd like to say: So here's the code i'm screwin' with: ul.navlinks { font-weight: bold; background-color: #d7d7d7; margin: -5px -10px 0px -10px; padding: 0px 10px 1px 10px; border-bottom: 1px solid #2169AD; } Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored. Any suggestions? Thanks site css View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF. How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?) Thanks Enjoy your weekends Bryan |
|||||||