CSS issue, ping Els or any of you really

Discussion in 'HTML' started by Chaddy2222, Oct 23, 2008.

  1. Chaddy2222

    Chaddy2222 Guest

    Chaddy2222, Oct 23, 2008
    #1
    1. Advertising

  2. Chaddy2222

    Lars Eighner Guest

    In our last episode,
    <>, the
    lovely and talented Chaddy2222 broadcast on alt.html:

    > Hi all.
    > I have a test page at: http://freewebdesignonline.org/test/temp.html
    > For some reason the CSS in this three colum layout does not show
    > properly (as it should in IE7 or 6 for that matter.


    You haven't said how it fails in IE. IE is so buggy that it is hard to
    guess what your concern may be.

    However, just as a shot in the dark, try making your navigation links like
    this:

    <ul
    ><li><a href="foo.html">Link 1</a></li
    ><li><a href="bar.html">Link 2</a></li
    ></ul>


    IE cannot handle lists properly. Tidy will "fix" this if you do it before
    tidy, so if you use tidy, you need a script to untidy your lists after you
    run tidy: be sure there is no white space (including newlines) between the
    close and open tags.

    Also there is a well-know bug in vertical padding.

    If you can be more specific about the problem, you will probably get
    a more useful answer.

    > What is going on here. It looks fine both firefox and Opera, well more
    > like it should look anyway.


    --
    Lars Eighner <http://larseighner.com/>
    Q. What did Palin do that Obama could not do?
    A. Got me to vote for Obama.
    Lars Eighner, Oct 23, 2008
    #2
    1. Advertising

  3. Chaddy2222

    dorayme Guest

    In article
    <>,
    Chaddy2222 <> wrote:

    > Hi all.
    > I have a test page at: http://freewebdesignonline.org/test/temp.html
    > For some reason the CSS in this three colum layout does not show
    > properly (as it should in IE7 or 6 for that matter. What is going on
    > here. It looks fine both firefox and Opera, well more like it should
    > look anyway.
    > --
    > Regards Chad. http://freewebdesignonline.org


    Not totally sure of the look you want? Got a screenshot of the ideal?
    Anyway, you might want to try overflow: hidden on #wrapper?

    Not sure why your wrapped an h1 in a div? Or why you needed so many
    &nbsp;s. This latter is usually a sign of frustration at not being able
    to get something to be where it is in cleaner ways.

    You probably need to look carefully at your wrapper. Give it a red
    background to see what it is doing. btw, height: 5.55556e+7px; is a new
    one on me! Perhaps leave height out altogether is best. Let the overflow
    mentioned above take care of it 'seeing' its floats and growing height
    for them.

    In fact, why not get rid of a few divs, like #header which are not
    really needed. Get rid of all &nbsp;s

    Probably don't put the h2 as a list item, it is not really part of any
    meaningful list, except as a layout device.

    If I go on any more, rf will think I have too much time on my hands...
    <g>

    --
    dorayme
    dorayme, Oct 23, 2008
    #3
  4. Chaddy2222

    Chaddy2222 Guest

    On Oct 24, 9:20 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >  Chaddy2222 <> wrote:
    > > Hi all.
    > > I have a test page at:http://freewebdesignonline.org/test/temp.html
    > > For some reason the CSS in this three colum layout does not show
    > > properly (as it should in IE7 or 6 for that matter. What is going on
    > > here. It looks fine both firefox and Opera, well more like it should
    > > look anyway.
    > > --
    > > Regards Chad.http://freewebdesignonline.org

    >
    > Not totally sure of the look you want? Got a screenshot of the ideal?
    > Anyway, you might want to try overflow: hidden on #wrapper?
    >
    > Not sure why your wrapped an h1 in a div? Or why you needed so many
    > &nbsp;s. This latter is usually a sign of frustration at not being able
    > to get something to be where it is in cleaner ways.
    >
    > You probably need to look carefully at your wrapper. Give it a red
    > background to see what it is doing. btw, height: 5.55556e+7px; is a new
    > one on me! Perhaps leave height out altogether is best. Let the overflow
    > mentioned above take care of it 'seeing' its floats and growing height
    > for them.
    >
    > In fact, why not get rid of a few divs, like #header which are not
    > really needed. Get rid of all &nbsp;s
    >
    > Probably don't put the h2 as a list item, it is not really part of any
    > meaningful list, except as a layout device.

    Well yes, that is why it's there.
    But if you have a look at the page in Firefox you will get the idea of
    how it is meant to look, the content box goes below both menu lists in
    IE.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Oct 24, 2008
    #4
  5. Chaddy2222

    dorayme Guest

    In article
    <>,
    Chaddy2222 <> wrote:

    > On Oct 24, 9:20 am, dorayme <> wrote:
    > > In article
    > > <>,
    > >
    > >  Chaddy2222 <> wrote:
    > > > Hi all.
    > > > I have a test page at:http://freewebdesignonline.org/test/temp.html
    > > > For some reason the CSS in this three colum layout does not show
    > > > properly (as it should in IE7 or 6 for that matter. What is going on
    > > > here. It looks fine both firefox and Opera, well more like it should
    > > > look anyway.
    > > > --
    > > > Regards Chad.http://freewebdesignonline.org

    > >
    > > Not totally sure of the look you want? Got a screenshot of the ideal?
    > > Anyway, you might want to try overflow: hidden on #wrapper?
    > >
    > > Not sure why your wrapped an h1 in a div? Or why you needed so many
    > > &nbsp;s. This latter is usually a sign of frustration at not being able
    > > to get something to be where it is in cleaner ways.
    > >
    > > You probably need to look carefully at your wrapper. Give it a red
    > > background to see what it is doing. btw, height: 5.55556e+7px; is a new
    > > one on me! Perhaps leave height out altogether is best. Let the overflow
    > > mentioned above take care of it 'seeing' its floats and growing height
    > > for them.
    > >
    > > In fact, why not get rid of a few divs, like #header which are not
    > > really needed. Get rid of all &nbsp;s
    > >
    > > Probably don't put the h2 as a list item, it is not really part of any
    > > meaningful list, except as a layout device.


    > Well yes, that is why it's there.


    It's there as a layout device? OK. I would prefer to draw the line at
    doing this in a case where you do not actually have to. Surely good
    practice means trying to get by as far as possible with semantic markup
    and then succumbing when the going gets tough! Meaning, I am not a
    complete purist. <g>

    > But if you have a look at the page in Firefox you will get the idea of
    > how it is meant to look, the content box goes below both menu lists in
    > IE.


    That is the browser I looked at your site on. I see the menu and links
    box hanging out of the wrapper. Perhaps that is a look you want. OK fair
    enough. As for why the content is dropping in IE6, there could be a few
    reasons, but I cannot at the moment fire up my Winbox. I might be able
    to tomorrow.

    Mostly, of course, it is because IE6 thinks there is not enough room.
    Have you given dimensions of any kind to #content and the left and right
    floats? Try it. Watch out, even then, for the 3px bug.

    I would lay all this out rather differently but if you want to fix for
    IE6 eyes only (use a conditional):

    #othercontent {
    ...
    width: 11em;
    }
    #content {
    ...
    margin-right: 16em;
    margin-left: 20em;
    }

    #navlist {
    ....
    width: 10em;
    }

    or something like that... Just some thoughts...

    --
    dorayme
    dorayme, Oct 24, 2008
    #5
  6. Chaddy2222

    richard Guest

    On Thu, 23 Oct 2008 08:30:23 -0700 (PDT), Chaddy2222
    <> wrote:

    >Hi all.
    >I have a test page at: http://freewebdesignonline.org/test/temp.html
    >For some reason the CSS in this three colum layout does not show
    >properly (as it should in IE7 or 6 for that matter. What is going on
    >here. It looks fine both firefox and Opera, well more like it should
    >look anyway.


    Most likely you don't have proper width assignments.
    IE shows me the "welcome" box below the menu and links.
    This tells me there is a width problem.

    I'd personally set "menu" and "links" width in either percentage or
    ems.
    Then give "welcome" no width at all. Let it float between the two as
    needed.

    Those 3 columns are inside a container. So they don't break apart.

    The footer should either be centered or as wide as the banner box.

    IE shows the ugly green background for the image box way way way down
    the page. While FF shows it only partly down the page.

    A few minor adjustments in the CSS should cure it all.
    richard, Oct 24, 2008
    #6
  7. Chaddy2222

    Chaddy2222 Guest

    On Oct 25, 7:45 am, richard <> wrote:
    > On Thu, 23 Oct 2008 08:30:23 -0700 (PDT), Chaddy2222
    >
    > <> wrote:
    > >Hi all.
    > >I have a test page at:http://freewebdesignonline.org/test/temp.html
    > >For some reason the CSS in this three colum layout does not show
    > >properly (as it should in IE7 or 6 for that matter. What is going on
    > >here. It looks fine both firefox and Opera, well more like it should
    > >look anyway.

    >
    > Most likely you don't have proper width assignments.
    > IE shows me the "welcome" box below the menu and links.
    > This tells me there is a width problem.
    >
    > I'd personally set "menu" and "links" width in either percentage or
    > ems.
    > Then give "welcome" no width at all. Let it float between the two as
    > needed.
    >
    > Those 3 columns are inside a container. So they don't break apart.
    >

    Thanks for that, not setting a width on the content box was what did
    the trick.

    > The footer should either be centered or as wide as the banner box.
    >
    > IE shows the ugly green background for the image box way way way down
    > the page. While FF shows it only partly down the page.
    >
    > A few minor adjustments in the CSS should cure it all.


    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Oct 25, 2008
    #7
  8. Chaddy2222

    Chaddy2222 Guest

    On Oct 24, 8:10 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    >
    >
    >
    >
    >  Chaddy2222 <> wrote:
    > > On Oct 24, 9:20 am, dorayme <> wrote:
    > > > In article
    > > > <>,

    >
    > > >  Chaddy2222 <> wrote:
    > > > > Hi all.
    > > > > I have a test page at:http://freewebdesignonline.org/test/temp.html
    > > > > For some reason the CSS in this three colum layout does not show
    > > > > properly (as it should in IE7 or 6 for that matter. What is going on
    > > > > here. It looks fine both firefox and Opera, well more like it should
    > > > > look anyway.
    > > > > --
    > > > > Regards Chad.http://freewebdesignonline.org

    >
    > > > Not totally sure of the look you want? Got a screenshot of the ideal?
    > > > Anyway, you might want to try overflow: hidden on #wrapper?

    >
    > > > Not sure why your wrapped an h1 in a div? Or why you needed so many
    > > > &nbsp;s. This latter is usually a sign of frustration at not being able
    > > > to get something to be where it is in cleaner ways.

    >
    > > > You probably need to look carefully at your wrapper. Give it a red
    > > > background to see what it is doing. btw, height: 5.55556e+7px; is a new
    > > > one on me! Perhaps leave height out altogether is best. Let the overflow
    > > > mentioned above take care of it 'seeing' its floats and growing height
    > > > for them.

    >
    > > > In fact, why not get rid of a few divs, like #header which are not
    > > > really needed. Get rid of all &nbsp;s

    >
    > > > Probably don't put the h2 as a list item, it is not really part of any
    > > > meaningful list, except as a layout device.

    > > Well yes, that is why it's there.

    >
    > It's there as a layout device? OK. I would prefer to draw the line at
    > doing this in a case where you do not actually have to. Surely good
    > practice means trying to get by as far as possible with semantic markup
    > and then succumbing when the going gets tough! Meaning, I am not a
    > complete purist. <g>
    >
    > > But if you have a look at the page in Firefox you will get the idea of
    > > how it is meant to look, the content box goes below both menu lists in
    > > IE.

    >
    > That is the browser I looked at your site on. I see the menu and links
    > box hanging out of the wrapper. Perhaps that is a look you want. OK fair
    > enough. As for why the content is dropping in IE6, there could be a few
    > reasons, but I cannot at the moment fire up my Winbox. I might be able
    > to tomorrow.
    >
    > Mostly, of course, it is because IE6 thinks there is not enough room.
    > Have you given dimensions of any kind to #content and the left and right
    > floats? Try it. Watch out, even then, for the 3px bug.
    >
    > I would lay all this out rather differently but if you want to fix for
    > IE6 eyes only (use a conditional):
    >
    > #othercontent {
    >  ...
    > width: 11em;}
    >
    > #content {
    >   ...
    >   margin-right: 16em;
    >   margin-left: 20em;
    >
    > }
    >
    > #navlist {
    > ...
    >   width: 10em;
    >
    > }
    >
    > or something like that... Just some thoughts...
    >

    Thanks mate. You were kind of on the right track but it was as richard
    said a content width issue.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Oct 25, 2008
    #8
    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. Guest

    ELS-Script Report tools

    Guest, Jun 7, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    407
    Guest
    Jun 7, 2005
  2. Guest

    ELS-SCRIPT Report Tools

    Guest, Jun 7, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    408
    Guest
    Jun 7, 2005
  3. luca72

    unify els database

    luca72, Jul 2, 2007, in forum: Python
    Replies:
    4
    Views:
    292
    luca72
    Jul 9, 2007
  4. Replies:
    30
    Views:
    979
    Arne Vajhøj
    Feb 10, 2008
  5. Stuart H
    Replies:
    3
    Views:
    200
    Ben Morrow
    Nov 3, 2003
Loading...

Share This Page