Probs with CSS (IE & Firefox not showing the same)

Hi guys,
I am playing around with CSS to try and learn it. The page I have started created may be found at http://www.maltapage.com/test/. The problem with it is that it looks different on IE and Firefox. :s. There are 2 differences:
1. The shopping column on firefox has the same dimensions as the other 2 columns, while on IE it is slightly shorter than the other 2 columns.
2. The box called Malta News is well positioned on IE while on firefox it is out of place.

How can I solve these 2 problems please?

Many thanks

 

Not tested.

.left {
float:left;  <<== remove
margin:0px;
padding:0px;
}

Code (markup):

You should really, really remove that annoying title bar clock. If you look, you will see that every screen already has a date/time display.

cheers,

gary

 

With regards to the clock I agree with you. I will remove it soon, currently I am just testing things. With regards to the float:left; line - i did remove it and it did align the "Malta News"box as I wanted but what happened was that the "click here" image moved down :S. What can be done?

And also a reminder about the shopping column.

Thx

 

I didn't notice the logo had the same class. Give the logo an id and float it left.

Upload the changes. Use a new filename if you want to keep the original up for reference, a good idea. We'll get one thing right before moving on to another.

Besides the clock, there's no good reason for the bookmark link. Only IE might/would work, anyway, as it is an ActiveX security vulnerability.

cheers,

gary

 

Hi all,
The "Malta News" box is ok now, that prob was solved - thx . Now the second problem is with the "Shopping" column, on Firefox it is inline with the other columns while on IE it is a bit shorter. I would like ll the columns to have the same height as in Firefox, how can I solve it please?

 

Not tested.

IE creates an anonymous inline box for every container. Images are inline elements that align their bottoms at the baseline of the inline box. The baseline is a few px above the actual bottom, to allow for letter descenders, qypgj eg.

Add a ruleset, img { vertical-align: bottom;}. That should fix it.

cheers,

gary