Yet another CSS layout problem/issue - I'll get there soon!?

Discussion in 'HTML' started by Si, Feb 12, 2005.

  1. Si

    Si Guest

    Hi All.

    I am trying to use CSS to layout a typical 3 col page.

    I usually don't have a problem with this, but I decided to go down the
    route of structuring the doc so that the content section is the first
    part of the body layout, hence, first in the doc as far as search
    engines are concerned. This I have done many times with tables in the
    past and is dead quick.

    Again, as per a post of mine weeks ago on another issue, Opera (8) and
    FF have no issues with page, bar the fact the content width varies
    slightly, (any pointers on that would be a bonus), but IE hates the
    layout, you can see why on viewing.

    Using prominent shades for clarity sake on the page as well!

    http://test.thedigitalvision.co.uk/

    Any ideas as to what I am missing, I think it may a problem with the abs
    positioning and 'box structure', if thats the correct term.

    TIA

    Si
     
    Si, Feb 12, 2005
    #1
    1. Advertising

  2. Si

    rf Guest

    "Si" <> wrote


    > http://test.thedigitalvision.co.uk/


    How wide is centrecol? Hint: Its exactly as wide as the viewport. That is
    what width: auto means, if you take the IE box model bugs into account where
    the margins are ignored in the width calculation...

    Why position at the left and then use margins (with width: auto).

    position: absolute; left: 180px; right: 180px; seems to work. It is also
    much simpler and more intuitive.

    --
    Cheers
    Richard.
     
    rf, Feb 12, 2005
    #2
    1. Advertising

  3. Si

    Toby Inkster Guest

    Si wrote:

    > I am trying to use CSS to layout a typical 3 col page.
    > I usually don't have a problem with this, but I decided to go down the
    > route of structuring the doc so that the content section is the first
    > part of the body layout


    Only thoroughly tested in Opera 8b1, but I can't imagine any problems in
    IE6, Gecko, etc.

    http://examples.tobyinkster.co.uk/3col

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 12, 2005
    #3
  4. Si

    rf Guest

    rf, Feb 12, 2005
    #4
  5. On Sat, 12 Feb 2005 10:16:23 GMT, rf <rf@.invalid> wrote:

    > "Toby Inkster" <> wrote
    >
    >> Only thoroughly tested in Opera 8b1, but I can't imagine any problems in
    >> IE6, Gecko, etc.
    >>
    >> http://examples.tobyinkster.co.uk/3col

    >
    > Doesn't work in IE6 :-(
    >
    >


    This one should:
    <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.html>


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 12, 2005
    #5
  6. Si

    rf Guest

    rf, Feb 12, 2005
    #6
  7. Si

    Si Guest

    rf wrote:

    > How wide is centrecol? Hint: Its exactly as wide as the viewport. That is
    > what width: auto means, if you take the IE box model bugs into account where
    > the margins are ignored in the width calculation...


    I'm not sure why width: auto was in there, I think I was playing with
    permutations of width to try to fix the issue.

    > Why position at the left and then use margins (with width: auto).


    Same as above

    > position: absolute; left: 180px; right: 180px; seems to work. It is also
    > much simpler and more intuitive.


    This works perfectly! I had no idea I could set the position using left
    & right for the corners. Logical really when thinking about it though.

    Many Thanks

    Si
     
    Si, Feb 12, 2005
    #7
  8. Si

    rf Guest

    "Si" <> wrote

    > rf wrote:


    > > position: absolute; left: 180px; right: 180px; seems to work. It is also
    > > much simpler and more intuitive.

    >
    > This works perfectly! I had no idea I could set the position using left
    > & right for the corners.


    That would be for the left and right edges, not corners :)

    > Logical really when thinking about it though.


    Yep. Go over to the recommendations and read them for a few weeks, thats all
    it takes. All will become clear, eventually :)

    > Many Thanks


    Welcome.

    --
    Cheers
    Richard.
     
    rf, Feb 12, 2005
    #8
  9. On Sat, 12 Feb 2005 11:07:51 GMT, rf <rf@.invalid> wrote:

    > "Barbara de Zoete" <> wrote
    >
    > [Tobys example doesn't work in IE]
    >
    >> This one should:
    >>

    > <http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_centreren-content.h
    > tml>
    >
    > Not bad in FF. Bit shabby at the bottom though.
    >
    > http://users.bigpond.net.au/rf/temp/b1.jpg
    >
    > IE6... well I'll await your opinion :)
    >
    > http://users.bigpond.net.au/rf/temp/b2.jpg
    >


    Thanks for pointing that out. Some time ago I've put some Google AdSense in my
    pages. Didn't go over all of them to check the looks. Seems the ad is too wide
    for the centre column. So it overflows in FF (as it does in Opera too) and in IE
    the centre div streches. Hmm. I'm not used to working with wixed width content,
    so I was off my guard on this :)

    Eventhoug the bottom looks a bit shabby, if the ads are taken out, the page
    works just fine. Yes, also in IE. I took the ads out and now they are okay.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 12, 2005
    #9
  10. Si

    WebMaster Guest

    you can make some latin text here: http://www.lipsum.com/ :)

    Rudy

    "Si" <> wrote in message
    news:BYcPd.44109$...
    > Hi All.
    >
    > I am trying to use CSS to layout a typical 3 col page.
    >
    > I usually don't have a problem with this, but I decided to go down the
    > route of structuring the doc so that the content section is the first
    > part of the body layout, hence, first in the doc as far as search
    > engines are concerned. This I have done many times with tables in the
    > past and is dead quick.
    >
    > Again, as per a post of mine weeks ago on another issue, Opera (8) and
    > FF have no issues with page, bar the fact the content width varies
    > slightly, (any pointers on that would be a bonus), but IE hates the
    > layout, you can see why on viewing.
    >
    > Using prominent shades for clarity sake on the page as well!
    >
    > http://test.thedigitalvision.co.uk/
    >
    > Any ideas as to what I am missing, I think it may a problem with the abs
    > positioning and 'box structure', if thats the correct term.
    >
    > TIA
    >
    > Si
     
    WebMaster, Feb 12, 2005
    #10
  11. Si

    Toby Inkster Guest

    Toby Inkster, Feb 12, 2005
    #11
  12. Si

    Toby Inkster Guest

    Toby Inkster, Feb 13, 2005
    #12
  13. Si

    Els Guest

    Toby Inkster wrote:

    > Toby Inkster wrote:
    >
    >> Fixed now. Even works in NN4. :)
    >> http://examples.tobyinkster.co.uk/3col

    >
    > No standing ovation?


    Not yet :p

    Define "works in NN4" ? :)
    NN4 shows both left and right column with no background colour
    horizontally below main text which remains in the middle,
    leaving sides free.
    That is: NN4.79. If you say it really works in NN4.8, I'll
    believe you, not keen on downloading another dead browser ;-)

    IE6 gets a horizontal scrollbar when the window is narrower than
    about 1000px wide.

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 13, 2005
    #13
  14. Els wrote:
    > Define "works in NN4" ? :)


    Not me!

    > IE6 gets a horizontal scrollbar when the window is narrower than
    > about 1000px wide.


    This could be due to your choice of font-size. Using Smaller, I get a
    horizontal scrollbar at about 750px. With Medium, it is around 1000px.
    It seems IE will not push the long non-breaking comment lines in the
    displayed CSS under the right column. Firefox does, and there is no
    scrollbar until the comment lines hit the right margin of the viewport
    (visible in the body margin at the edge under the right column).

    Looks like a working solution to me.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 13, 2005
    #14
  15. Si

    Els Guest

    Beauregard T. Shagnasty wrote:

    > Els wrote:
    >> Define "works in NN4" ? :)

    >
    > Not me!


    :)

    >> IE6 gets a horizontal scrollbar when the window is
    >> narrower than about 1000px wide.

    >
    > This could be due to your choice of font-size. Using
    > Smaller, I get a horizontal scrollbar at about 750px. With
    > Medium, it is around 1000px. It seems IE will not push the
    > long non-breaking comment lines in the displayed CSS under
    > the right column.


    Ah, didn't realize that. Yup, normal IE behaviour then.

    > Firefox does, and there is no scrollbar
    > until the comment lines hit the right margin of the
    > viewport (visible in the body margin at the edge under the
    > right column).
    >
    > Looks like a working solution to me.


    Yup, agreed.

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 13, 2005
    #15
  16. Els wrote:
    > Beauregard T. Shagnasty wrote:
    >>Looks like a working solution to me.

    >
    > Yup, agreed.


    So, standing ovation, then? <clapclapclapclapclapclap/>

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 13, 2005
    #16
  17. Si

    Toby Inkster Guest

    Els wrote:

    > Define "works in NN4" ? :)
    > NN4 shows both left and right column with no background colour
    > horizontally below main text which remains in the middle,
    > leaving sides free.
    > That is: NN4.79. If you say it really works in NN4.8, I'll
    > believe you, not keen on downloading another dead browser ;-)


    Yes, it did work in NN 4.8 but I don't have 4.79 for testing. I do however
    have 4.08, and I've massaged it a little to get it to work there as well!

    So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in NN 4.79 as
    well!)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Feb 13, 2005
    #17
  18. Si

    Els Guest

    Toby Inkster wrote:

    > Els wrote:
    >
    >> Define "works in NN4" ? :)
    >> NN4 shows both left and right column with no background
    >> colour horizontally below main text which remains in the
    >> middle, leaving sides free.
    >> That is: NN4.79. If you say it really works in NN4.8, I'll
    >> believe you, not keen on downloading another dead browser
    >> ;-)

    >
    > Yes, it did work in NN 4.8 but I don't have 4.79 for
    > testing. I do however have 4.08, and I've massaged it a
    > little to get it to work there as well!
    >
    > So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in
    > NN 4.79 as well!)


    Yes!
    /stands up claps hands :)

    (just must not resize window, although a reload does get it back
    in place at any window width.)


    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 13, 2005
    #18
  19. Si

    Els Guest

    Toby Inkster wrote:

    > Els wrote:
    >
    >> Define "works in NN4" ? :)
    >> NN4 shows both left and right column with no background
    >> colour horizontally below main text which remains in the
    >> middle, leaving sides free.
    >> That is: NN4.79. If you say it really works in NN4.8, I'll
    >> believe you, not keen on downloading another dead browser
    >> ;-)

    >
    > Yes, it did work in NN 4.8 but I don't have 4.79 for
    > testing. I do however have 4.08, and I've massaged it a
    > little to get it to work there as well!
    >
    > So it works in NN 4.08, 4.8, 6.23 and 7.1. (So hopefully in
    > NN 4.79 as well!)


    In addition to the list mentioned on the page:
    Works also in
    Win: IE5.01, Moz1.4, Opera 7.51 and 8.00 beta, Firebird 0.6
    Linux: Konqueror 3.2.1 and Firefox 1.0.



    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Katie Melua - The Closest Thing To Crazy
     
    Els, Feb 13, 2005
    #19
  20. Si

    Duende Guest

    Duende, Feb 13, 2005
    #20
    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:
    781
    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,052
  3. Replies:
    1
    Views:
    643
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,054
    Wÿrm
    Jun 20, 2006
  5. Berehem
    Replies:
    4
    Views:
    592
    Lawrence Kirby
    Apr 28, 2005
Loading...

Share This Page