Hi! I have a (hopefully easy) problem with my layout. It doesn't work as it should in IE5.5 and IE6. I don't know much about CSS but I've tried to build the layout with some 100%-width divs/rows under each-other, (which I've specified the height on with pixels) with background-images. The layout works fine in Firefox and IE7/8 but in IE5.5/6 it gets worse. In some of the divs, the background-images repeats vertically (also with wrong "starting-point", not at top-left as it should(?) be) though I've specified the height of the images so that it's the same as the height of the divs, which makes the layout strange. I bet you don't understand a thing so here is 2 screen-shots: Right: http://viriol.egensajt.se/firefox.jpg Wrong: http://viriol.egensajt.se/ie6.jpg html: <body> <div id="kontainer"> <div id="overst"></div> <div id="sidhuvud"><img src="bilder/logga.jpg" alt="NeoBux.se - Logga med text" /></div> <div id="nav_huvud">Huvudmenyn</div> <div id="nav_under">Undermenyn</div> <div id="kon_huvud"></div> <div id="kontenta"> Kontentan </div> <div id="fot_kontainer"> <div id="kon_fot"></div> <div id="sidfot">Sidfoten</div> </div> </div> </body> HTML: css: html, body { height: 100%; background: #f5f0d2; } #kontainer { min-height: 100%; position: relative; } #overst { width: 100%; height: 13px; background: url(../bilder/overst_bg.gif); } #sidhuvud { width: 100%; height: 130px; background: url(../bilder/sidhuvud_bg.gif); } #sidhuvud img { margin-left: auto; margin-right: auto; display: block; } #nav_huvud { width: 100%; height: 40px; background: url(../bilder/nav_huvud_bg.gif); } #nav_under { width: 100%; height: 30px; background: url(../bilder/nav_under_bg.gif); } #kon_huvud { width: 100%; height: 10px; background: url(../bilder/kon_huvud_bg.gif); } #kontenta { /* Höjden på #fot_kontainer */ padding-bottom: 27px; } #fot_kontainer { width: 100%; /* Höjden på #kon_fot + #sidfot */ height: 27px; position: absolute; bottom: 0; } #kon_fot { height: 1px; background: #fffadc; } #sidfot { height: 26px; background: url(../bilder/sidfot_bg.gif); } Code (markup): URL: http://wse114848.web17.talkactive.net/neobux.se/ CSS: http://wse114848.web17.talkactive.net/neobux.se/css/huvudcss.css I've searched but didn't find a solution for this (maybe it's to easy?). Really hope anyone can help me! Thanks in advice! PS. Sorry for my bad English ...
Nowadays people are talking about dropping support for IE6 but you have to support 5.5?! Poor fellow. I don't think I remember anymore how to do.
just do some google.... gee......i never notice...the height of div in ie5/6 didnt work well... well....try to put overflow:hidden into this id, overst and kon_huvud..
Ie6 shouldn't have a problem, but IE5 would be more work. Where you have this declaration: #kontainer { min-height: 100%; position: relative; } Code (markup): IE5 and 6 do not know min-height. So tell them "height" instead: #kontainer { min-height: 100%; position: relative; } [b]* html #kontainer {height: 100%;};[/b] Code (markup): That will tell IE5 and 6 to make #kontainer 100% high, and it will grow in those browsers so no worry there. You can remove all of the width: 100% in everything, those divs are already 100% width by default. Do not make your code more difficult to debug by adding redundant statements. IE5 and 6 will have trouble with the absolute positioned footer I think. #fot_kontainer { width: 100%; /* Höjden på #kon_fot + #sidfot */ height: 27px; position: absolute; bottom: 0; } Code (markup): You may need to also give it left and right coordinates as well. But first, IE5/6 needs to see kontainer 100% high, so after adding in the height: 100% the footer might work better. Or, you might want to just do a "sticky footer" which removes problems with the absolute positioning. If you can't get the absolute positioning to work in IE5/6 after making kontainer 100%, try sticky footer. Um, there are stupid sticky footers, but Paul has a decent one though I don't do mine that way (I pull the footer up over the padded bottom of kontainer with a negative top margin but it doesn't really matter).
drhowarddrfine: No, actually I don't even care about 5.5, but I noticed that the "bug" appeared on both versions, which can be helpful information when doing troubleshooting. If the layout looked nice in IE6 I wouldn't care about posting ... crazeann: I tried to Google, but didn't find anything. Your solution worked ! Thanks alot! Really appreciated. I think I spent over 3 hours looking for a fix yesterday ... And now it works perfekt in both IE5.5 / 6. Why is it that these DIVs need overflow:hidden? Stomme poes: The footer always worked perfect (I have included the 100% height to #kontainer "fix" in a different CSS, only loaded with older versions of IE). I used this guide for that: matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Those DIVs are not 100% wide by default? Background-images won't show if I remove 100% causing the whole layout to destroy. "crazeann" had the solution, thanks anyway!!
That's not true. Static divs are 100% wide by default. The only box you must put 100% wide on is the abso-po'd footer, since abso-po'd boxes do NOT default to 100% wide, but rather the width of their contents (any text etc inside). See for your self. Oops, I should have looked at the screen shots! That extra space is caused by a fairly well-known IE bug where the default font-size (which comes with a line-height) sets the height of a container, even if it's empty. So you can see in my code, I replaced your overflow: hiddens with font-size: 0 and it does the same thing (normally, these small divs would just be additional background images instead of separate divs, which is why it's been so long since I've seen this). Overflow: hidden would take the div's 0 height and not let the font-size (prolly 16px on your computer) from "overflowing" : ) I just copied your code, removed the reset because I think Meyer's is harmful and bloated (really, are you going to have deprecated stuff like applets, u and center tags in your HTML? Of course not, so why mention it in a reset? : ), and removed #kon-fot because it's a div acting like a border (so added a border to the footer instead). Obviously if you are planning to do something special with #kon_fot then you'd keep it in your code, but for this demo, no reason to keep it. It looks great in my IE6 and IE5.5 (except the image is not centered in IE5.5 of course but you aren't really building for that one, and it's a well-known bug so we don't care) plus the other browsers. Of course I'll remove the link in a few days or a week or whatever, so none of your images/code will be on my server after you've taken a look. I'm just showing an example, and robots are not allowed on my server so there's no google-peaking.
First of all, WOW, thanks a lot for all the work / thoughts!! Really appreciate it!! I see! I was sure that I already tried without "width: 100%", guess I just remembered wrong I listened to everything you said and rewrote the things you mentioned. Also took away the "allround-IE8.js-fix" and "reset.css". But I have some questions I hope you can answer ..: 1. I changed the settings of #overst, because it wasn't a gradient image (just a solid color and a border). I did the same thing you did to the footer. Just added border-bottom. One GIF smaller! Any thoughts on this, is it negative in any way? I decided to keep the DIV for future use (maybe going to add some icons to the top-right corner of the layout later). 2. Why did you declare the width of the logo-JPG in the CSS? Why is this good and why not the height also? 3. I guessed that this code... * html #kontainer { height: 100%; } Code (markup): ...only applied to IE5.5 thanks to the star? Maybe this is not right observed. Anyway, based on that I made a "fix" for the non-centered logo in IE5.5: * html #sidhuvud { text-align: center; } Code (markup): It seems to work but is this negative in any way? 4. padding: 11px 0 27px; /*added 11px to imitate #kon_huvud's height*/ Code (markup): Is there any reason you chose 11px instead of the GIFs height, 10px? 5. Also decided to only have one footer-DIV as the other became useless(?) when we applied the border. Any thoughts on this, is this negative? Thanks again for your help!!
well...thanks Stomme for the explanation.....it clears some doubts about why!!! another great solution, font-size:0
It also occurred to me to remove it entirely, and add the 1px border to the image itself, and paste the image as a background to #sidhuvud instead. However if you are going to put stuff in it, fine. The point is, have boxes when you need boxes and otherwise try to cram as much of (whatever) as possible into as few elements as possible. Because your page is a very early stage it's hard for any of us to tell what you will do with it. So while it almost looks like you have too many divs (#nav_huvud div will hopefully become a ul instead), it's just a skeleton now and also while normally we don't set heights in boxes, you need to right now just to see your layout (since an empty div will collapse). I took out the JS because I didn't know what it was doing. You should not need Javascript to fix layout in IE8 but who knows, maybe you were targetting something specific with IE8 and its Javascript Engine? I didn't remove it because it was bad, only because it had nothing to do with the mockup of your layout I was making. The reset... I use a reset myself, but it's very small. A reset is only valuable to you if you find yourself writing the same things over and over. I found myself always removing margins and padding from menus, and always vertical-aligning images to "bottom" to remove the little space under images, and I was always removing margins from everything. But Meyer's reset is full of lots of stuff... it's prolly useful to him, but I think it's bloat for someone with a simple page. As I said before, stuff in that reset is deprecated, a lot of it you are unlikely to use (tt tags), and it does things people don't pay attention to (he says, if you remove outline, be sure to add in something with :focus for keyboarders... but people don't). The only "reset" I have in my version of your page is the * { margin: 0;} but I usually have a few more things. Depends on what you want to do. Actually normally I'd have the height and width in the HTML, to prevent browsers from double-rendering (they render the html/css, then render it again after they've downloaded the image, because only after loading the image does the browser know what the dimensions are of the image. So it can be quicker for them if you just tell them beforehand what the dimensions are). Because the browser knows the width of the image after it loads, I did not have to set the width in the CSS: I did that because you were using automargins to center it, and since usually a width is required, I mentioned it out of habit (and it's good to see the width of something you're centering). So, no, you don't need it in there (unless there is some browser who demands you do put it in there) and normally I would actually have it in the HTML (it's not presentational if you are only telling the browser early what the actual dimensions are). It applies to IE6 and under (so yes, also 5.5). Since IE6 and under do not understand min (or max) height (or width), we tell all those IE browsers "height" instead. That's pretty much how most people do it. A famous example of centering a page (for websites where they are centered) is to set text-align: center on the body element, and then set back to "left" on the page container you've just centered. The possible negatives are, if you ever put anything else in that box, it would also get centered. IE incorrectly centers blocks with text-align: center, when it should only center inline children (like... text lawlz). Although, images are inlines by default. So another solution, cross browser, could have been to leave the image inline (no display: block or margin: auto) and use text-align: center for all browsers. If nothing else will be in #sidhuvud then this might be okay. If you will have more things inside then it may not be okay. Depends on what you are planning to do. I don't remember any more. I think because 10 px didn't quite line up well in some browser. Try 10 and see if any browser doesn't look right. <div id="fot_kontainer"> <div id="sidfot">Sidfoten</div> </div> Code (markup): I didn't know what you were planning with that footer. Some people make really full footers with lots of stuff in them. If it's only going to have footer stuff like a single line of address or copyright 2010 or whatever, you don't need more stuff. Heck I've even seen people do without a footer entirely: <p id="footer">© 2009 Blah Corp</p> Just, try to only use a division when you need to group stuff... and normally you need to group stuff for styling, not because it matters to the content itself. So if you have a few divs, look at them and see if one can't do the job of two. This is usually bad code (unless there are lots of fancy images): <div id="header"> <div id="headerOuter"> <div id="headerInner"> <div id="logoHolder"> <h1 id="logo"><a href="home" title="ZOMG OUR COMPANY IS TEH AWESOME"><img src="logo" alt="our logo"></a></h1> </div> </div> </div> </div> Code (markup): Ok I exaggerate a little but then again I see similar code in most templates (but they do this to be flexible). Instead you can have <h1><a href="home"><img src="logo" height="the height" width="the width" alt="Blah Corp, the most awesome company in da world"></a></h1> Or if you're doing Gilder-Levin: <h1>Blah Corp, the most awesom company in the world <a href="home"> </a></h1> where the anchor also holds the logo image which covers the h1's text. Not that logos should be in h1's most of the time but it's an example. BTW I was looking to see if there was an online version of this dummy site and I found your deviantArt. Nice artwork!