Help with CSS layout in IE on PC

Discussion in 'HTML' started by Alan Cole, Jan 5, 2005.

  1. Alan Cole

    Alan Cole Guest

    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!

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Jan 5, 2005
    #1
    1. Advertising

  2. Alan Cole

    rf Guest

    "Alan Cole" <> wrote

    > 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 :)

    --
    Cheers
    Richard.
    rf, Jan 5, 2005
    #2
    1. Advertising

  3. Alan Cole

    Alan Cole Guest

    In article <aBRCd.104854$>,
    "rf" <rf@.invalid> wrote:

    > "Alan Cole" <> wrote
    >
    > > 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.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Jan 5, 2005
    #3
  4. Alan Cole

    rf Guest

    "Alan Cole" <> wrote
    > "rf" <rf@.invalid> wrote:
    > > "Alan Cole" <> wrote
    > >
    > > > 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.


    > 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.

    --
    Cheers
    Richard.
    rf, Jan 5, 2005
    #4
  5. Alan Cole

    Duende Guest

    Duende, Jan 6, 2005
    #5
  6. Alan Cole

    Alan Cole Guest

    In article <Vp_Cd.105196$>,
    "rf" <rf@.invalid> wrote:

    > "Alan Cole" <> wrote
    > > "rf" <rf@.invalid> wrote:
    > > > "Alan Cole" <> wrote
    > > >
    > > > > 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.

    >
    > > 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
    >

    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.

    > > 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"...
    >


    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.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.tsunami-site-design.co.uk [Website Design]
    http://tinyurl.com/64xrd [Plusnet ISP]
    Alan Cole, Jan 6, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    708
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,000
  3. Replies:
    1
    Views:
    571
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,006
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    874
    Ben C
    Mar 21, 2008
Loading...

Share This Page