9 replies [Last post]
jasie-jay
Offline
newbie
Last seen: 14 years 51 weeks ago
Timezone: GMT+2
Joined: 2006-02-03
Posts: 5
Points: 0

Hello, 1st post!

I'm a beginning web-designer, and my aim is to work with totally valid XHTML 1.1 and newest CSS definitions. This is not always the case, for instance the site I'm about to submit is NOT valid, for I have not worked a way out of the java script-errors - my client wants a javascript pop-up, and so I will not say to him "no can do, I want my sites to be 100% valid". So how do I correct my java script errors (the site appears to be otherwise valid). Also I have some minor warnings in my CSS-validation check, but I will resolve them soon.

My REAL problem - which I would like to give me some advice about - is that it doesn't look the same on IE as it does on my SuSe Linux - Firefox. I have no way to test it with IE, so that's where You come in. The first (and I last, I hope) problem is obvious: the menu that is supposed to stick to the right, goes instead to the left as a continuance (is that english?) to the left thang.

I am not familiar with the differences of IE and Firefox in regards of CSS-visualizing. How do web designers learn to dodge these annoyances? I hate IE, always have - at least ever since I started using CSS.. :/

http://www.lahetyskirkonmessu.fi

Aiight, I would appreciate it if you could tip me out.
Pz, jasie-jay

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 6 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

lahetyskirkonmessu.fi

Windows xp64 here. Looks good in Firefox but totally broke in IE. I took a screencap for you - http://nopeople.com/webfiles/screencap.jpg

jasie-jay
Offline
newbie
Last seen: 14 years 51 weeks ago
Timezone: GMT+2
Joined: 2006-02-03
Posts: 5
Points: 0

lahetyskirkonmessu.fi

Excavator wrote:
Looks good in Firefox but totally broke in IE

Thanks a bunch!

Now all we (actually You, because I have no idea of the differences of IE and Firefox and why one shows perfectly as I intended, and the other's a mess..) need to figure out is why this is, what part of my code messes IE up but Firefox is familiar about.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 6 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

lahetyskirkonmessu.fi

As near as I can tell (and I am hardly the resident expert!) the #right div is getting pushed down because the combined width of the 3 divs is wider than the 750px of the body.
IE adds a couple px to a div and you have to adjust for it. Others here can explain the why, I only know that it happens.

When I adjusted the width of the #div the word järjestäjät was keeping it wide. That word is too long at that font size and the 10px padding you have.

jasie-jay
Offline
newbie
Last seen: 14 years 51 weeks ago
Timezone: GMT+2
Joined: 2006-02-03
Posts: 5
Points: 0

lahetyskirkonmessu.fi

I took ten pixels (5 off of each) off, and changed the text "järjestäjät" to "powered by", hoping that it would help. How does it look like now?

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 28 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

lahetyskirkonmessu.fi

Layout is same in FF 1.5 and IE 7 (beta).

One thing i did notice is that the background images for the sidebars do not appear in FF but are there in IE

Also, you can 'clean up' your CSS quite a bit

h1, h2, h3, h4 {
padding:10px 10px 0 0;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
h1{font-size:2em;}
h2{font-size:1.5em;}
h3, h4{font-size:1em;}

instead of

h1 {
padding-left:10px;
font-size:xx-large;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
text-align:center;
}

h2 {
padding-left:10px;
font-size:x-large;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

h3 {
padding-left:10px;
font-size:small;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

h4 {
padding-left:10px;
font-size:small;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}

You can also apply that to you links and left and right columns

a:link, a:visited, a:active{color: #564b47;
font-size: small;
background-color:transparent;
text-decoration: underline;}
a:hover {color:red;}

Notice I've changed your font-size to use a relative size. small / large / x-large are just going to render badly in different browsers.

By using a relative font size you allow users to re-size the text to suit them selves, very important from an accessibility point of view.

Hope that helps

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

jasie-jay
Offline
newbie
Last seen: 14 years 51 weeks ago
Timezone: GMT+2
Joined: 2006-02-03
Posts: 5
Points: 0

lahetyskirkonmessu.fi

Thanks a lot, Freddy!

fatfreddy wrote:
Layout is same in FF 1.5 and IE 7 (beta).
By using a relative font size you allow users to re-size the text to suit them selves, very important from an accessibility point of view.

Thanks for that tip, too. The reason why I used "large", "x-large" etc. was because I saw an article somewhere that said it was the right way to deal with relative fonts. If this, you say, is the correct way, though, I'm going to use it next time.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 6 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

lahetyskirkonmessu.fi

The way it is now may look ok in IE7beta but it's still broke in IE6.

It took me FOREVER to figure out what was going on with this but I finally used the Firefox DOM inspector and saw that the floats were all breaking out of the #box container.
I know there is a better way to do it but I put <br style="clear:left;"> just before you close the #box and that keeps the floats enclosed.

Then I put the word järjestäjät back in because the rest of your page is in your language and you should keep it that way.

I changed <h2> to large so it will fit

I converted your .png image to a .jpg and resized it to 393x697

I changed the #right and #left divs to 175px wide

I changed the #content div to 393px wide

And last, I put it up on a test server for you to grab if you like - http://nopeople.com/test/L%e4hetyskirkon%20messu.fi.htm

===================================

Now I have a couple questions for this forums experts:

What is IE looking at when your figuring out widths of divs? Even when I set padding and margin to 0 the math does not add up to the width of the container.

Is there a better way to clear the floats than what I've used here?

Thanks in advance!

jasie-jay
Offline
newbie
Last seen: 14 years 51 weeks ago
Timezone: GMT+2
Joined: 2006-02-03
Posts: 5
Points: 0

lahetyskirkonmessu.fi

Excavator wrote:

It took me FOREVER to figure out what was going on with this but I finally used the Firefox DOM inspector and saw that the floats were all breaking out of the #box container.

Thanks a million! I now did all the things you said, I hope it works better now. (I still don't have a IE6-machine to test it with)

A few questions:

1) What is .png good for - I understand it compresses the picture less than .jpg, but if so, why should one use PNG when it doesn't function properly as a transparent picture in IE anyway..?

2) What's the thing with "clearing" divs? How does it work? I've seen divs cleared before, but I've just mechanically copied them and hoped things work alright. I understand that they are there because of IE6, but how do they affect it?

And I have, too, noticed how Firefox and IE calculate the widths of divs and borders differently..

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

lahetyskirkonmessu.fi

Excavator wrote:
What is IE looking at when your figuring out widths of divs? Even when I set padding and margin to 0 the math does not add up to the width of the container.

IE6 in standards mode should be totalling the same as Firefox etc. although I find there is the odd instance sometimes where something seems to be the odd pixel out.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference