hi, can anyone check this site [here] in ie6 and tell me if the page is centered and if the background pattern is visible? and if it shows the same in ie6 and ie7
No it isn't, and no it does not, and here's why: body { background-image: url('images/asq.gif'); background-repeat: repeat; text-align: center; width: expression(document.body.clientWidth > 732? '732px':"auto"); margin: 0px auto; height: 100%; } #container { width: expression(document.body.clientWidth > 732? '732px':"auto"); text-align: Center; color: black; margin: 0px auto; background-color: white; height:auto; overflow: hidden; } Code (markup): The width you are stating on the body is messing up IE - of course there is NOTHING in the layout that should warrant sending different data to IE in the first place either. (that's just bad practice) That should probably just be: body { background:url('images/asq.gif'); text-align:center; } #container { width: expression(document.body.clientWidth > 732? '732px':"auto"); text-align:left; color:black; margin:0px auto; background:#FFF; overflow: hidden; } Code (markup): Though that will likely require a total CSS rewrite given the rest of what I'm seeing. I'd also suggest fixing that unclosed FONT tag, or even better taking an axe to both the presentational tags (FONT, multiple BR's and   for spacing), switch to classnames that say what something is NOT how it appears (which defeats the point of separation of presentation from content), and switch to using header tags in the proper order. (good rule of thumb is one H1 per page - think of headers as a tree) OH, and on 'large font' machines your menu has a broken appearance because you are trying to use a fixed image as the background.
hey deathshadow, thanks for the reply, but i need it to state in body the width i require for the purpose of resizing the content to the browser size.... so im not sure about the idea of removing the width from it. i tried it without having the width specified in the body and its still the same
presently i have done this: seperated the expression supported widths from the css file, and created a new css file called iespecific.css and put in the following code in the html files: <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> Code (markup): heres the ie6 specific css: html{ width:100%; height:100%; } a:link { color: #870000; } a:visited { color: #870000; } a:hover { color: #FF4B4B; cursor: help; } .center { text-align: center; } .red { color: red; font-weight: bold; } .tab { margin-left: 100px; } h1 { font-size: 16pt; } h2 { font-size: 16pt; font-weight: normal; } h3 { font-size: 15pt; } /* Center #container, constrain to 732px width ----------------------------------------------- */ body { background-image: url('images/asq.gif'); background-repeat: repeat; text-align: center; width: expression(document.body.clientWidth > 732? '732px':"auto"); margin: 0px auto; height: 100%; } #container { width: expression(document.body.clientWidth > 732? '732px':"auto"); text-align: Center; color: black; margin: 0px auto; background-color: white; height:auto; overflow: hidden; } #headcont { overflow:hidden; width: expression(document.body.clientWidth > 732? '732px':"auto"); background-image: url('images/header.jpg'); background-repeat: no-repeat; height: 190px; padding-top: 10px; margin-bottom: 10px; border-bottom: 1px; } .hcont { padding-top: 85px; padding-left: 190px; text-align: left; font-size: 29pt; } .subcont { text-align: left; font-size: 13pt; font-weight: bold; } #nav { float: left; width: 150px; padding-top:15px; } .navbg { margin-left: 10px; background-image: url('images/menubox.jpg'); background-repeat: repeat-y; height: 132px; width:113px; } .navtext { float: left; width: 113px; text-align: center; padding-left: 10px; line-height: 1.4em; color: #870000; } #main { padding-top:15px; padding-right: 10px; padding-left: 100px; Text-align: left; font-size: 13pt; } .block { border: 1px solid black; width: expression(document.body.clientWidth > 500? '500px':"auto"); padding: 5px; margin-right: 25px; vertical-align: text-top; } .text { font-size:13px; } .custfloat1 { float: left; width: 140px; } .footer { margin-top: 75px; text-align: center; color: #870000; } .flright { float: right; } #headcont img { float: right; margin-right: 15px; } Code (markup): can you recheck to see if it works please? ill take care of the font and other deprecated tags after this major issue is over
alright, update: ... if i modify the width command in the body selector, to 100%, it shows the desired content resize effect in IE7 and FF but in ie6, it breaks the content selector width and flows out wildly, can anyone check the link in ie6 here to see if it is fixed?
The problem is you are overstating EVERYTHING - you don't have to state it on the body, that's WHAT the container div is for. for the code for html, body and #container - No reason to ever state width:100% on HTML. That's the default behavior. No reason to state background repeat, that's the default behavior. No reason to state height:auto - that's the default behavior. Width on the body, width on the container - REDUNDANT - You're compressing body to match #container - at which point the background on body should never show but does because of a quirk in the specification. The overflow:hidden is fine for RoW (rest of world), but breaks IE.... the IE version should state a fixed width, state your scale width... and being you are stating height on the body (I'm not sure WHY)... Hmm, I'd scratch that html/body declaration too. if you get rid of that html { width:100%; height:100% } from the top of your CSS, this should do what you are trying to do in ALL browsers. body { background:url('images/asq.gif'); text-align: center; } #container { max-width:732px; margin:0px auto; color:#000; background:#FFF; overflow: hidden; } * html #container { /* "* html" = IE only */ width:732px; /* just in case .js is off */ width:expression(document.body.clientWidth > 732 ? '732px' : 'auto'); height:1%; /* trip haslayout */ overflow:visible; /* the haslayout fix means we can't have hidden */ } Code (markup): So you don't even have to spoonfeed different sheets to different browsers... and the haslayout height and overflow properties can be axed if you don't need to worry about clearing the container because the footer is in said container. (yours is) Unless I am completely missing what you are trying to do.
thanks a lot! problem is fixed, and although i didnt quite get the trip haslout part as im relatively new.... but thanks again!
Well, fortunately there's a resource you're going to love (SitePoint - I'm a Mentor on the Design Team there). http://www.sitepoint.com/forums/showthread.php?t=171943 That thread will answer just about any question you will probably ever have about how to use CSS properly. As for your hasLayout issue... http://www.sitepoint.com/forums/showthread.php?p=2041209#post2041209 Please note however that the FAQ does need to be updated (and it will be - trust me on this). Instead of diving for the hack as Paul O'Brien suggests, try inlining the height: 1%; in with the rest of the style rule.