Help with CSS layout in IE on PC

[Alan Cole]

I'm still trying to correct my ways and use CSS for layout rather than
tables. However, as a Mac user I am having trouble testing and fixing
things for display in IE on a PC. (Which for this particular site will
definately be the majority of visitors).

Progress so far can be seen at
http://www.tsunami-site-design.co.uk/estates/index.shtml

Everything looks fine on my Mac in Firefox and Netscape (plus a few
other browsers), and most things look OK in IE5 too.
A screen shot of how I 'want' it to look and how it looks in Firefox on
my Mac can be seen here:
http://www.tsunami-site-design.co.uk/estates/images/grab1.jpg

However, I've had a few people look at it on a PC (IE6) and there appear
to be several problems. The one I'm stumped by at the moment is that the
four black tabs across the top (Home, Estates Management etc..) don't
seem to line up with each other, and also don't line up with the black
line I have separating the banner from the rest of the content. Without
direct access to a PC I'm having trouble correcting this.

Can someone confirm that this is indeed a problem, and if so help me
figure out how to fix it please. You'll no doubt find some other
problems with the page, probably with the right hand boxes, but I want
to work on one thing at a time!

TIA.

Al.
P.S. Who knows, once I've finished this site I might be able to treat
myself to a PC specifically for testing purposes!

 

[rf]

Progress so far can be seen at
http://www.tsunami-site-design.co.uk/estates/index.shtml

Confirmed. The problem is there in IE6 and IE5.5.

Why do you float: left the a;s in that nav bar ol? IE(PC) has many problems
with its box model, float being one of them, especially when you float out
of the parent element.

What you are doing is removing the a's from the flow, that is you are
putting them outside the li's and, who knows, outside the ol. Turn borders
on for all elements ( * {border: solid 1px green} ) or selected elements
and you will see what is going on.[1] The a's are stacking, not like they
do in real browsers.

What you really meant to do was to suggest display: inline for the li's.

Oh, BTW I find light yellow text on light grey very hard to read. So much so
that I have to increase my font size more than usual, which causes your left
hand navigation to escape from its boxes.

[1] Forgot, you don't have a PC. Well, go to your favourite second hand
shop. A friend of mine found one for less than $100 the other day. Runs 98
and IE6. Since this is a commercial site (read: you are getting paid for it)
the expense is minimal and your client will be happy that the site works
before it goes to production

 

[Alan Cole]

Progress so far can be seen at
http://www.tsunami-site-design.co.uk/estates/index.shtml

Confirmed. The problem is there in IE6 and IE5.5.

Why do you float: left the a;s in that nav bar ol? IE(PC) has many problems
with its box model, float being one of them, especially when you float out
of the parent element.

What you are doing is removing the a's from the flow, that is you are
putting them outside the li's and, who knows, outside the ol. Turn borders
on for all elements ( * {border: solid 1px green} ) or selected elements
and you will see what is going on.[1] The a's are stacking, not like they
do in real browsers.

What you really meant to do was to suggest display: inline for the li's.

Oh, BTW I find light yellow text on light grey very hard to read. So much so
that I have to increase my font size more than usual, which causes your left
hand navigation to escape from its boxes.

[1] Forgot, you don't have a PC. Well, go to your favourite second hand
shop. A friend of mine found one for less than $100 the other day. Runs 98
and IE6. Since this is a commercial site (read: you are getting paid for it)
the expense is minimal and your client will be happy that the site works
before it goes to production

Thanks Richard,
I've made few changes, got rid of the floats and added
display:inline for the li's. Does it look any better yet.

Thanks for the comment on the readability of the text as well... I've
changed the text to white, but may need to rethink the grey background
really.

As far as getting a PC goes, I will just as soon as I've been paid for
this site, until then I don't have enough money. As you say, a cheap
second hand one will do...The only trouble with that is there will then
be little point in having a Mac... But thats a whole new thread!

Cheers
Al.

 

[rf]

Thanks Richard,
I've made few changes, got rid of the floats and added
display:inline for the li's. Does it look any better yet.

http://users.bigpond.net.au/rf/temp/ie6.jpg

Not bad at all.

I notice you have specified a fixed size font for that nav bar. Why? If your
viewer has to enlarge their font so as to read the content then should they
not be able to read the navigation as well?

http://users.bigpond.net.au/rf/temp/ie55.jpg

A few problems with IE5.5, if you actually care

When I switch off your font size suggestions all still works well in IE6 but
IE55 does not resize the black boxes. The text wraps badly.

The text escaping from the left hand boxes also happens in IE6 with slightly
larger fonts.

Thanks for the comment on the readability of the text as well... I've
changed the text to white, but may need to rethink the grey background
really.
Better.

As far as getting a PC goes, I will just as soon as I've been paid for
this site, until then I don't have enough money. As you say, a cheap
second hand one will do...The only trouble with that is there will then
be little point in having a Mac...

You could use it to "test your site on a Mac"...

http://www.tsunami-site-design.co.uk [Website Design]

Interesting choice of name just now.

 

[Duende]

While sitting in a puddle rf scribbled in the mud:

http://www.tsunami-site-design.co.uk [Website Design]

Interesting choice of name just now.

Just riding the wave.

 

[Alan Cole]

http://users.bigpond.net.au/rf/temp/ie6.jpg

Not bad at all.

I notice you have specified a fixed size font for that nav bar. Why? If your
viewer has to enlarge their font so as to read the content then should they
not be able to read the navigation as well?

http://users.bigpond.net.au/rf/temp/ie55.jpg

Thanks again Richard for the comments and the screenshots, that
certinaly gives me a few things to work on and also gives me some
confidence that I am getting there... It does feel good to be using CSS
layout rather than tables, even if things don't always come out quite as
expected first time.

You could use it to "test your site on a Mac"...

Ahh... Thats true!

http://www.tsunami-site-design.co.uk [Website Design]

Interesting choice of name just now.

Yeah, I know, its been called that for a few years now though and I did
dabble in trying to design surf clothing at one point with a little
company called 'Tsunami Surf', so its just an unfortunate coincidece at
the moment. It does however now mean that people can pronounce it. I
just hope people don't think I've only just come up with the name.

Thanks again.

Alan.