Weird CSS problem with background img in IE (Solved)

[egalegal]

Hi
first, really helpful site, i love it and visit it regularly.
But i have some problems with CSS and div background-images.
See first this link:

http://www.sadsunray.de/test/hld

(yes i know, the white green block isn’t there it meant to be)
In Firefox everything is fine, but IE shows some weird repeating with the background images.
AND when you scroll down, you can see in Firefox the color of the body-background is ok, but too bright in IE.

Someone can help?
Please.
Thanks a lot

[egalegal]

hi,
thanks for the nice welcome.

i tried your suggestion. but look what its doing now. (http://www.sadsunray.de/test/hld

i have this main div layer, what contains every other div following. marked with the black box, but there are different interpretations bei IE and Firefox again.
Look for IE
[img]http://www.sadsunray.de/test/hld/IE.png[/img]
and FF
[img]http://www.sadsunray.de/test/hld/FF.png[/img]

In Firefox he only take the shadows in the box, but in IE everything is in the box.
Also see what it does with the top-shadow in IE while in FF everything is alright.
Next thing, why is the green div in FF at the top of the white one and not like in IE in the middle?
And last one: why is the background color #bfcbcc in IE brighter than in FF??
You see more questions popped up then are solved.
Thanks anyway for your kind help.
Regards.

[egalegal]

First a BIG THANK YOU for taking the time and correct my files.
I noticed I forgot the first lines

Code:

which makes the whole thing in IE centered. (have to study a little bit, what all these doctypes mean)

Quote:

Thats because the main div has been set to a max height of 488px. So everything cant fit in it and it overspils. IE just renders it wrong. To see what I mean if you set another atribute in the #main to "overflow:hidden" you will see everything below disappear. Set the height to auto and it will wrap the entire site and be visible.

thats right, could come to this conclusion myself.

Quote:

I suspect it was just IE being silly again, but #bfcbcc isnt classed as a "websafe" colour, so I edited the bg a little for it to gradient into a #CCCCCC because that is websafe and its fine now… obviously you can find a better colour than I did, its just to show it should blend in properly.

Damn, IE is really silly, it costs a lot of nerves when you sit in front of the monitor and you question your mental health sometime.

Ok so far so good. BUT:
yes i want this white area between the shadows.
logically, it has to arrange this like the shadow divs?
So I put the white, green and content layer into the "shadow_middle" div-tag.
Now we are nearly there, but look what the browsers are now doing. In Firefox it produces a darker shadow in the left and right top corners. In IE there is a bit space between white and bottom shadows.
[img]http://www.sadsunray.de/test/hld/FF2.png[/img]
[img]http://www.sadsunray.de/test/hld/IE2.png[/img]
At some time I thought I understand CSS a little, but now I’m more confused than ever. It seems that nothing wants to fit.
Thanks for any further help.

[egalegal]

they should stay white and green, because i want to try animate the whole rectangle with jQuery.
To adapt the size from the content-layer which is transparant. To have some dynamic in it.
thanks a lot, really saves me lots of hours searching in forums and I’m learning a lot from your answers.

[egalegal]

hi rob, thanks again.

i would like to try something like this
http://www.sadsunray.de/test/hld

if there is more text than space available, it should expand and show all the text.

maybe you can help me again? because now the shadows don’t move along with the white and green area.
thanks
regards

[egalegal]

"Robskiwarrior" wrote:

Well – normally you wouldnt make the shadow separate… do you know what I mean?

no, sorry don’t know what you try to say. i tried to animate the height of the shadow, work well for the shadow, but then the white and green areay jump down a little bit.

[egalegal]

rob, you are my hero
and the solution is so easy, i wouldn’t get to it.
really great, just put the white and green area in the background. genius
thanks, when there are another problems i will turn to you, if its ok with you?

[egalegal]

Yeah, i actually tried to make a really small and tiny webpage with small bytes.
So i thought if I do all graphics with CSS, the whole page gets smaller. Just have to load the shadows then.
But seems its not that easy, I thought.

[egalegal]

you are absolutely right,
but do a little training, to understand all this CSS stuff is also good.

first: this is just demonstration, the menu isn’t in the desired place yet.

now I’ve got the next problem coming up.
look at the site again http://www.sadsunray.de/test/hldand answer me following question:
Why the hell doesn’t IE interpret CSS like every human would do

Code:

top: 0px; left: 0px;

but Firefox doing all right??
Only f***ing IE is so stupid, not doing what I’m want it to do.
Is it me who is thinking wrong???
Please can anyone explain why the menu isn’t in the right place in IE?

[egalegal]

hi,
again big thanks for what you’ve done and explaining it to me.

I thought, when we reset the margin and padding in the html and body tags, it also rest it in all other tags afterwards.
Didn’t know, that <ul> is like a div and have a standard margin in IE, where can i find such individual characteristics for browsers? Is there any resource?
And already didn’t know that there are pseudo-elements for <li>. Just know like this a:hover for links.

Thanks a lot, without you I would like to just make a picture and put it on the website :D

[egalegal]

hi, maybe you can’t help on this, but why is, after resetting everything, the menu (hover to see it) yet in firefox some pixels away from the white area, than in IE ?
http://www.sadsunray.de/test/hld

and another question, can I provide different css-styles for different browsers?

and one more question, when you expand the area in IE and you have Cleartype ON, the new paragraph is not rendered, its not really ideal. how can I fix this?

thanks again.

[Author]

Posts