Stupid question right? This site I am doing I have it perfect in IE7 & FF YET - in ie 6 my right side content is being pushed to the bottom .... Any ideas,,...am I missing a float.....IE6 not work with css?
Hi sundaybrew, Yes, CSS does work in IE6 but this lovely browser has a number of bugs/unusual implementations that can trip you up. Getting a page to work in IE6 and modern browsers requires a bit of fiddling. It sounds to me like you've run out of space inside the DIV that contains your left and right side content. In other words, IE6 thinks there isn't enough room to fit the right content alongside the left content. There's two potential causes of this. The first is the way IE6 (and IE5.5) handles the CSS Box Model in quirks mode. Simply put, whereas 'padding' should be in addition to width, IE6 treats it as being part of the width. Assuming a margin and border of 0, a width of 100px and a padding of 5px, IE7 and Firefox will render that element as 110px wide. IE6 will render it at 100px wide. So, if you've got padding in your outer DIV, this might be what's making it too small. Fortunately this bug is easy to avoid - just don't use padding in an outer div - use additional divs or CSS to do the spacing. The second possible cause is the IE6 'margin-doubling' bug. For reasons best known to itself, if you specify 'margin-left' or 'margin-right' in an element then IE6 will double that value when rendering. Again, one solution is to build CSS that doesn't use these elements on their own, but another is simply to add the tag 'display:inline' to the element definition. If you put 'IE6 CSS bugs' into Google you'll find a wealth of information on the subject and I'm sure you'll crack it. BEWARE though, there's a lot of 'hack' information out there that uses quite complex and detailed CSS to solve these issues but in truth most can simply be avoided without resorting to this sort of detail. Jon
Hey Jon, Thanks for the FULLY detailed response, I am using a float right on more then one class as well as some float lefts, I have just learned csss ( basic ) , and I can create my own themes and such its just the little things like ie6 that suck Here is my css for my right nav #flushtvsidebar { width: 150px; float: right; margin: 0px 0px 0px 600px; padding: 0px 0px 0px 0px; text-align: left; clear: both; } Then I have this for the main text #flushsqueeze{ width: 500px; vertical-align: top; padding: 0px 0px 0px 0px; If possible could you show me what you mean on those classes Thanks in advance } Then I have this for the whole 2 column wrap /************************************************ * Page wrap * ************************************************/ #flushtvcontentwrap{ width: 800px; background: #FFFFFF; margin: 0px auto 0px; padding: 0px; overflow: hidden; vertical-align: top; }
First thing I see on that css is that you've got a large left margin on the right-floating sidebar. Usually, the trick is to simply float the sidebar, and then give the leftover content a right margin of likie 150px or more so the text and stuff don't slide under the float. There is an additional IE6 thing where sometimes you have 100% room, and think you can fit two floats of 50% width. Should work, right? But IE6's rounding error adds a bit to that (so we'd make our floats like 49.999% or a negative margin of like a pixel or two on one of the floats). Try changing the margin from the sidebar to the content. 500px + 150px = 650px which should normally fit in a container of 800px. The double-margin-float bug only hits when there's two floats next to each other, so I don't think it's that (unless there's something special about floating it right... left floats alone don't get that bug). It would be really great tho if you could post the HTML.
Thanks for the tips , I can do better then the html Have a look at the site http://flushtv.wetheadmedia.com You can see the whole source there, Please also bear in mind that I am a TOTAL CSS NOOB So be easy on me , when you see how it is I am trying to be neat as possible with a two column layout Thanks in advance for the return reply
Okay yup. It's the margin on the sidebar. I'm actually surprised all the other browsers don't do the same thing-- 650px (sidebar) + 500px (content) = more than 800px. Now the float is actually kinda "floating" on top of the other content... prolly why the other browsers allow it to sit above the content while being so wide with margin. I'll stick with my original guess-- let the sidebar only have like 5 or 10 px margin -- maybe only for the right side or something if you didn't want it right on the edge-- and look at the content. The sidebar should cover some of it, but it should otherwise look like it does now in FF. Now add a right margin of a little more than 150px on the content to push it away from being underneath the sidebar. Should work. Let us know. Also, the QuickTime link thingie... for some reason is displaying in my FF, prolly an unclosed p tag... and I can see that line go right off to the sidebar (and over it, not under like I'd expect) and off the page. So there could be something else going on too. If you're new to CSS and HTML and make a page, and then look at it a few months or a year later, you'll be like, buh? I also see what looks like three things called various forms of "sidebar" being 150px wide and floated right... not sure what those are.
Thanks for the replies . Let me try that, I just also started to theme this blog ( inside look at my webmaster life ) http://www.sundaybrewmedia.com Seems that I dont have this issue here. Does everything look ok to you in that site? Maybe I was to tired on one...... But yes, going to try that tonight I will keep you posted or even Vblog about it
17 validation errors - that's a good START. Fix those BEFORE worrying about layout issues. No HTML tag, nasty case of classitus, use of   for spacing, lack of anything approaching formatting making debugging a nightmare, I'd suggest a total rewrite with prodigious use of the ENTER and TAB keys if for no other reason than to make sure all the DIV's are opened and closed properly (since that too is something the validator is bitching about) Of course, being you are stuck with code vomited up by Turdpress, there might not be a lot one can do about certain issues.
Here, look. </div> </html> </div> Nothing can come after the </html>. And there's stuff in the css like width: 700px; margin: 0 auto; float: left; Margin: 0 auto is centering something still within the document flow. Float left is something completely diifferent. I won't break anything to have them both together, but usually you do one or the other. Look for this book in the library-- it's awesome and will really get some basic CSS straight in your head: HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. As a nice by-product, you get some HTML tips as well plus you'll be able to see some good indenting styles. Wherever you start a tag, its end should line up with the opening one (easy to see if something's closed and where it opened).
Yea , I was kind of sloppy , but like I was saying I am still learning and was just kinda messing around and thats why I decided to ask you pros Thanks for the advice, I actually was going to start a "fresh" css sheet today and build each new class one by one and validate as I go . But yea, awesome response ! I actually can code html and some php The </div> after my html tag was probably cause it was 7am and I was up for 30 + hours and was copy and pasting at that point to restore or something. But yea, thanks for all the responses, I am learning as I go, Book = ya good idea, I need to get the basic functions memorized like I did with html and php and then at least I will know what they do before I go and confuse the hell out of the css sheet Thanks for the multiple responses, css is awesome , even thou its a bit to learn