Quote:
Originally Posted by hjalmar
First of all this doesn't seem to complex to be using any child selectors, you really need to change behaviour for an element that belongs to different parents? and then it works in IE6 aswell. :)
descendant selectors works fine, also take note for specificity. selector selector2 vs selector#id selector. But this is simple enought so shouldn't be any problem right now :)
First of sort out all the different height definitions, #head = 150px, #logo = 160px(padding) and #header = 200px as floats don't take up any space.
No need for a clearing div as your main content is in a wrapper, clear the floats there.
Use good names :) left right center etc doesn't really mean anything. You can also import other stylesheets in another stylesheet document like @import url("style.css"); (depending on how you import it there is various support for old browsers, so importing styles like this you exlude browser that don't fully support css2 anyways) remember though that it has to be before anything else in that document except comments.
And to easy up some coding bugs, try to use padding on parent elements instead of margings, that will save you a shitloads with the double margin bugs in IE6 :D
Got a bit off-topic with random rambling but, look over your height definitions or make the parent autoclear(hint: floats clear floats, or use a hack for it  ) or clear it inside where the floats are.
Cheers hjalmar |
No not really.. so I've removed all the > in the CSS, but I doubt it'll work for IE6 xD
Ye, in my conditional stylesheet for ie7, I've set
Code:
div#head div#header {
height: 160px;
}
instead of the height: 200px that were set in the regular CSS-doc. It fixed the #header-part. But the content is still "overlapping" the #head.
I didn't understand the part about clearing div.. if I put the clear:both inside #main, it won't work =/
About padding, I'm going to fix that later! Right now I just want it to look the same in IE7 as it does in FF.
I'm really a newbie when it comes to CSS, as you probably noticed when looking over the code, so I have really no idea how to solve this, even if you specifically say "making parents autoclear" (I'm like wtf?
).
Quote:
Originally Posted by CoryMathews
Sorry forgot win7 has ie8 not ie7.. that would be why it looks the same.
Yes 4 html calls instead of 1, but for now it does not matter.
The actual size of your screen (15 inch, 17inch w/e) does not matter, its your screen resolution. You seem to be running 1440x900 (my guess) but most of the world still runs below this. ( http://www.w3counter.com/globalstats.php)
The easiest fix (but not the best) is to do a conditional style sheet for ie7 and lower. this way you could just add padding to that header id and it should be fine.
Do not use css hacks an mentioned above, they will only piss you off later, and they scream css noob to anyone who known anything about css. |
I'll probably change it when I'm done with the basic CSS.
Ye, I figured. I changed the width to 960px now.
Adding padding to the #header did not solve it.
I'm not really sure exactly what I did, but right now I got height set to 200px in my regular CSS, and in my iefix CSS I got nothing, but the height of the #header still is correct according to the logo.
But the content is still overlapping.
I'm sorry if you guys already said a solution here that would work. I'm just really.. newbie with CSS so I don't really know exactly what to do with all these(great) suggestions that you give me.
I've uploaded the newest update of the layout here:
http://www.adolflemons.se/beta/
And here's 2 new screenshots for those of you who don't have IE7:
