Some problems with CSS & IE

[Ninjan]

Hey.

I decided to ask some help here because I have problems with CSS and IE.

I managed to make a "nice" layout with CSS and HTML. I use divs and I was very proud of myself when my lay was ready. Firefox showed it well but I didn't.

Now my whole homepage is ready and I don't have any problems with Firefox. IE shows my page incorrectly. There is AnyLink CSS Menu script from Dynamic Drive.com in my page. Menu seems stupid and the link buttons are in the wrong place. I have problem with the bottom bar too. Luckily IE 7.0 beta shows my pages a bit better but the bottom bar and the table (http://kotisivu.mtv3.fi/taaviss/esittely.html) is in the wrong place.

I really want to know why IE does this and how I must change the code that IE shows pages correctly.

You can see my pages here:
http://kotisivu.mtv3.fi/taaviss/etusivu.html

I hope that you could help me.

-Ninja-

[assie-chan]

I'm sorry, because your HTML and CSS is in a differnet language, and is rather messy, it's hard for me to even begin to dicipher what's going on. So correct me if I'm wrong anywhere....

Code:

<div id="kokohoska">
<div id="otsikko"></div>
<div id="yksi">
<div id="kaksi">
<div id="kolme">
<div id="oikeayla">
<div id="keski">
<div id="nelja">
<div id="viisi">
<div id="oikeaala">

Now these are all image slices, correct? If so, there should be a </div> for each of them. Because without the </div> your padding from all these DIVs is being added into all your other DIVs, which may not be what you want, and may be causing the IE problem...

Secondly,

Code:

ul#menu {
height:45px;
display:block;
padding-left:56px;
        margin-left:25px;
        padding-top:0px;
        padding-right:-20px

}

You're using alot of padding and margins here. Padding is for inside the <ul>, margins are for outside the <ul>, if that makes sense. So you don't really need margin and padding. It would be sufficient to use just margin. And I'm not quite sure why you're using padding-right: -20px at all...

Really though, when using DIVs and CSS, Firefox and IE really have a difficult time getting along. Sorry I can't be of much help.. Perhaps someone else could figure it out..?

[Ninjan]

I'm sorry, because your HTML and CSS is in a differnet language, and is rather messy, it's hard for me to even begin to dicipher what's going on. So correct me if I'm wrong anywhere....

I'm a beginner - that's right.
Could you tell me what is the messiest thing in my page? ;)

Now these are all image slices, correct? If so, there should be a </div> for each of them. Because without the </div> your padding from all these DIVs is being added into all your other DIVs, which may not be what you want, and may be causing the IE problem...

I have added </div>-signs.

Code:

</div> <Div>
</div> <Div>
</div> <Div>
</div> <Div>
</div> <Div>

</div> <Div>
</div> <Div>
</div> <Div>
</div> <Div>
</div> <Div>

[Ninjan]

I used the validator and changed one of my pages code. :-)
Now I have better code ;-)

Still, I have problems with IE. I mean just this page which I changed.

http://kotisivu.mtv3.fi/taaviss/valid.html

I also noticed that one of the left bars (I admit I don't know which it is) is in the wrong place. You can see the backround and bar are not in the same line. What should I do? *I'm flogging a dead horse*