Help with CSS on IE
 

Heya!

I'm currently developing a website for my dad, and I've only done the "ground" as of now. Looks like this: http://adolflemons.se/beta/

It works great in FireFox. But if you view it in Internet Explorer 7, it looks weird. Any idea how to fix it?

Can you please post a screenshot of what is wrong or atleast point us to the right direction, I'm only running IE6 and that doesn't support child-selectors.

selector > selector1...

What?!

First off why is it split into 4 different sheets?

Second why so many >? thats just making it harder on you, get rid of them just use normal #id selectors.

third a width of 1380px. You just cut out more then half the world. We all have to side scroll now. make it 960px.

and it looks the same in IE7 as the rest so I don't see what the problem is.

Thanks, I noticed this myself and I wasn't sure why so I didn't say anything since I'm no CSS expert.


Yeah I had to scroll too and I'm using a 1080p monitor. Of course if I stretched it all the way out I wouldn't, but most of the time my brower uses about 75% width of the monitor. Being a 1080p monitor, that's all I need it to do...

For me, IE7 is messed up. If you look at the middle layers. The red,blue and purple boxes collide with the top boxes.
In FF, they are all evenly spaced out...

Use this site to read up on IE CSS Hacks:
http://www.positioniseverything.net/...-dehacker.html

then I am assuming by what allworknoplay said it is your "float" that is having issues so i recommend play with that.

I do not have IE7 so I am unable to look myself.

Sure, I'll upload a pic soon!

Well, I just don't like the idea of having a 1000-line CSS-document where everything's just bloated. Easier to find this way as the "main.css" is referring to all styling of the "main"(which contains left - menu, center - content, right - loginbox and stuff). Is it affecting the loading-time or usability by splitting them up?

Alright then! I'll do that.

Really? I didn't have to scroll anything :o
Perhaps I have a smaller resolution. I'm on a 15" screen so it's not like I have a big screen. But my resolution could be smaller than yours. When I have 1380px in width, the width is stretched so it has 10px margin (white space) before the browser window borders. See screenshot of how it looks to me.

And it's not really the same in IE7 and FF, see allworknoplay's reply.

That's exactly what I mean!

I will post a screenshot. Thank you very much for the link, I will definitely check that out!

Here's the images.

FireFox(how it should look):

IE7(how it should NOT look):


Also note the FireFox, I do not have a scrollbar, but in IE7 I have.. so the width is weirdly displayed in IE7. Apparently I need to lower the width.
But you still see the problems I have with IE7.

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

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.

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
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? :-/).

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:

It helps using selectors that IE6 supports atleast :D

I'll keep it simple this time, from your #head{} remove the height. and add overflow: auto; what do you get?

And get rid of that conditional comment for IE it's not needed here.

Well that's good ;-)

Holy shit. That actually did it!


I removed the conditional comment for IE aswell. Haven't uploaded this update on the live server yet though, so I can only show you that SS.

One thing left though, just a small thing. If you check this last SS, and compare the font-weight to the previously posted Firefox SS, you'll see it's much more thicker in IE, why is that? What's causing it, and how to fix?

Also, if you have time, and you want, could you explain how the overflow: auto, made it work?? And why I had to remove the height from #head ?

Thanks a bunch!

By the way, how does it look in IE6 now?

** IGNORE **
What i would assume is because you are using 100% font-size on your body. Now the browsers have their default values that varies so it could be that.
** /IGNORE **

Looks the same for me in ff3 and your screenshots, aswell in safari.

There is a neat little trick that lots of people use and it's to set the body font-size: 62.5%; and that would equal 1em to around 10px but still be scalable.

Could be a bit tricky using em's at first tho as it's relative to it's parent(s).

Because you don't need a height defined, you want it to autowrap around your content, overflow: auto; does just that(not neccessarely(sp?) what it's intended for but it works like that also ^^), you having a height there would prob get you some scrollbars as your height was less then whats inside. your clearing div would have worked aswell if it was inside the wrapper without a height defined on #head{} (do whats best for you, on some occasions you could still end up with scrollbars when using overflow for autoclearing)

Don't have access to a pc/bootcamp/parralels etc right now :/, so hopefully someone else can help you out with IE6.

No problemo!

Hjalmar

*edit*
Don't use names like this, class="sub 2" thats actually 2 different classes it's looking for, .sub{} and .2{} (actually not even valid).

nono: 2sub (starting with a number)
yesyes: sub-2, sub2 (ending with a number is just fine)

Ah, now that you say it it's probably possible that it's like that. I'll try experiment with it. As I said, it's just a minor detail.

And yes, em's is tricky, but I'll try :-)

Oh, I see! And about the clearing div, you meant it like this?

instead of

??

Ye I was actually very uncertain about that, but I'll edit it!

Thanks for all the help mate! :-D

Exactly! as floated elements don't take up any space(taken out of the normal flow...) so your wrapper/container div #head in this case won't act like it has something in it and wont expand with the flow.

So you clearing the floated element inside would have solved the problem. And you don't have to hard code everything(height in this case) it will just be more code and annoying edits in the end (if there will be any :D)

Block elements take up 100% of the given width, except for floats that will wrap down to the content inside. So if you are aiming for 100% just leave it out much easier and less code if dealing with padding aswell. But i assume you did know that.

I'm just adding on with some rambling someone else might find usefull. :)

I see!
Thank you :-)

Your rambling is good, I find it very interesting and useful information to learn ;-)

I have a quick question about DIV's.

I have a main body container that has a fixed width of 1024. And the minimal height is 350 px.

The reason for the min height is that I want all pages to have a consistent look, even if there's not much content.

But when the content exceeds the 350 px, the content just flows passed the DIV container.

Is is possible for the DIV container to have the DIV stretch beyond the 350 px if the content is a lot?

Basically the same way that tables would handle it?

If the div is floated, then the container won't be stretched, unless you add a clear div like I did.

And the css:
.clear { clear: both; }

Thanks Tanax, I will give that a shot....