CSS problem with IE6. Comments and advice appreciated

Discussion in 'HTML' started by Deryck, Jun 12, 2004.

  1. Deryck

    Deryck Guest

    Hello,

    I'm new to this group so please forgive me posting something that may have
    already been covered in a recent post (if it has, please point me to it).

    I was experimenting with a way to display an image and make it repeat
    (horizontally only) without putting it into the background of the body or
    using a table. I wanted to use CSS. I did this by creating a box and putting
    a background image into it. This displayed just fine with firefox but not
    with IE6. I put a hack in to get it to work but I would like to fix it
    "properly".

    If anyone knows a way round this problem (or a more elegant solution) I
    would grateful to hear from them.

    An example of how I want it to appear can be seen on
    www.longhope.co.uk/home.html (this has the hack in it). A better description
    of the problem (and the hack) can be seen on www.longhope.co.uk/hack1.html.
    The HTML and CSS have been validated by the W3C tools.

    Thanks in anticipation,


    Deryck
     
    Deryck, Jun 12, 2004
    #1
    1. Advertising

  2. Deryck

    Els Guest

    Deryck wrote:

    > Hello,
    >
    > I'm new to this group so please forgive me posting something that may have
    > already been covered in a recent post (if it has, please point me to it).
    >
    > I was experimenting with a way to display an image and make it repeat
    > (horizontally only) without putting it into the background of the body or
    > using a table. I wanted to use CSS. I did this by creating a box and putting
    > a background image into it. This displayed just fine with firefox but not
    > with IE6. I put a hack in to get it to work but I would like to fix it
    > "properly".
    >
    > If anyone knows a way round this problem (or a more elegant solution) I
    > would grateful to hear from them.
    >
    > An example of how I want it to appear can be seen on
    > www.longhope.co.uk/home.html (this has the hack in it). A better description
    > of the problem (and the hack) can be seen on www.longhope.co.uk/hack1.html.
    > The HTML and CSS have been validated by the W3C tools.


    Why don't you change min-height:80px to height:80px?
    IE doesn't support min-height, and I suppose the images
    never are higher than 80px either.
    The min-width causes a scrollbar when the page is narrower
    than 885px. make it width:100%;
    Don't forget to set the body to 100% (or 99%) width too.

    And stopping it to repeat vertically, is done by adding
    background-repeat:repeat-x;


    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 12, 2004
    #2
    1. Advertising

  3. Deryck

    Deryck Guest

    ..
    >
    > Why don't you change min-height:80px to height:80px?
    > IE doesn't support min-height, and I suppose the images
    > never are higher than 80px either.
    > The min-width causes a scrollbar when the page is narrower
    > than 885px. make it width:100%;
    > Don't forget to set the body to 100% (or 99%) width too.
    >
    > And stopping it to repeat vertically, is done by adding
    > background-repeat:repeat-x;
    >

    Thats great Els, thank you very much. I didnt know that min-height was not
    supported on IE. Ive made the changes you suggested and just have to find a
    way to separate the line of links (in another box) from the image (it looks
    fine in firefox but not IE). I can probably figure this out for myself.

    Thanks again for your quick, highly useful and much-valued response.

    Deryck
     
    Deryck, Jun 12, 2004
    #3
  4. Deryck

    Els Guest

    Deryck wrote:

    > Thats great Els, thank you very much. I didnt know that min-height was not
    > supported on IE. Ive made the changes you suggested and just have to find a
    > way to separate the line of links (in another box) from the image (it looks
    > fine in firefox but not IE). I can probably figure this out for myself.


    Probably :)
    But I couldn't resist and had a look. And I just need to
    warn you: you just made your navigation, the only way people
    can navigate your site with, a JavaScript feature. Not only
    don't I see why, but if a person has JavaScript disabled, he
    or she just can't visit your site beyond the first page.

    Using JavaScript to enhance a page or menu is no problem.
    But use it only to enhance, not instead of having a real
    working menu.

    > Thanks again for your quick, highly useful and much-valued response.


    You're welcome :)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 12, 2004
    #4
  5. Deryck

    Deryck Guest

    Youre right about the JS. I was doing that so I could include the navigation
    into sevral files and change the navigation without chnaging all the files
    that used it. I have just realised that I can include this code using PHP
    and will do that instead (but probably not today). I also realise that this
    is the *correct* way to do this. :)

    Incidentally I used to put similar navigation on another site into a file
    called banner.js. Norton's anti-pop up software disabled this, as soon as I
    renamed the file, Norton was happy and the file worked ...pretty simplistic
    software huh, just look at the filename (and not what it does, which in this
    case was NOT producing a pop up).

    Thanks again. I'm learning a lot today. :)


    Deryck
    PS
    I still havent figured out a solution for the clashing borderbox and
    sitenavigation that works on BOTH browsers.

    ----- Original Message -----
    From: "Els" <>
    Newsgroups: alt.html
    Sent: Saturday, June 12, 2004 1:13 PM
    Subject: Re: CSS problem with IE6. Comments and advice appreciated


    > Deryck wrote:
    >
    > > Thats great Els, thank you very much. I didnt know that min-height was

    not
    > > supported on IE. Ive made the changes you suggested and just have to

    find a
    > > way to separate the line of links (in another box) from the image (it

    looks
    > > fine in firefox but not IE). I can probably figure this out for myself.

    >
    > Probably :)
    > But I couldn't resist and had a look. And I just need to
    > warn you: you just made your navigation, the only way people
    > can navigate your site with, a JavaScript feature. Not only
    > don't I see why, but if a person has JavaScript disabled, he
    > or she just can't visit your site beyond the first page.
    >
    > Using JavaScript to enhance a page or menu is no problem.
    > But use it only to enhance, not instead of having a real
    > working menu.
    >
    > > Thanks again for your quick, highly useful and much-valued response.

    >
    > You're welcome :)
    >
    > --
    > Els
    > http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
     
    Deryck, Jun 12, 2004
    #5
  6. Deryck

    Els Guest

    Deryck wrote:

    > PS
    > I still havent figured out a solution for the clashing borderbox and
    > sitenavigation that works on BOTH browsers.


    Just one thing: if you reply to a post in alt.html, please
    reply below the text you're replying to, just like you did
    in your second post.

    The clashing borderbox and navigation:

    #sitenavigation{
    position: absolute;
    width: 128px;
    top: 20px;
    left: 20px;
    font-size: 0.9em;
    border: 1px dashed black;
    background-color: white;
    padding: 10px;
    }

    position:absolute means absolute. You just told it to stay
    20px from the top. It will stay there, no matter what.
    Also, position:absolute takes the element out of the normal
    flow, so whatever comes next, doesn't leave space for it, as
    it was taken away from its own space.

    document.write('<div class="borderbox"></div')

    missing > at the end
    probably resulting in Firefox getting it right by accident ;-)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 12, 2004
    #6
  7. Deryck

    Deryck Guest

    "Els" <> wrote in message
    news:...
    >
    > Just one thing: if you reply to a post in alt.html, please
    > reply below the text you're replying to, just like you did
    > in your second post.
    >
    > The clashing borderbox and navigation:
    >
    > #sitenavigation{
    > position: absolute;
    > width: 128px;
    > top: 20px;
    > left: 20px;
    > font-size: 0.9em;
    > border: 1px dashed black;
    > background-color: white;
    > padding: 10px;
    > }
    >
    > position:absolute means absolute. You just told it to stay
    > 20px from the top. It will stay there, no matter what.
    > Also, position:absolute takes the element out of the normal
    > flow, so whatever comes next, doesn't leave space for it, as
    > it was taken away from its own space.
    >
    > document.write('<div class="borderbox"></div')
    >
    > missing > at the end
    > probably resulting in Firefox getting it right by accident ;-)
    >


    Doh! #1: I hate it when people top-post. I hate it even more when I do it by
    accident.

    The sitenavigation that you were looking at was actually commented out the
    one below it had position: relative set as did the borderbox. You can
    imagine my confusion then that it didnt work.

    Doh! #2: was the missing '>' in the JS file. Another very Good Reason not to
    use that method of inserting html, it cant be checked easily. That missing
    '>' was probably the cause of many problems that I had!

    Thank you again for debugging my code and teaching me soon good practices.


    Deryck
     
    Deryck, Jun 12, 2004
    #7
  8. Deryck

    rf Guest

    "Deryck" <> wrote in message
    news:...
    >
    > "Els" <> wrote in message
    > news:...


    > Doh! #2: was the missing '>' in the JS file. Another very Good Reason not

    to
    > use that method of inserting html, it cant be checked easily. That missing
    > '>' was probably the cause of many problems that I had!


    Somebody over at CLJ said yesterday that he had been producing javascript
    (heavily) enabled pages for many years and has yet to use document.write.

    Seems that adding elements via the more usual DOM manipulation facilities is
    preferable, and far less prone to error.

    Cheers
    Richard.
     
    rf, Jun 12, 2004
    #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. Brad Jones

    Help or comments appreciated.

    Brad Jones, May 18, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    1,263
    Brad Jones \(not CodeGuru Guy!\)
    May 19, 2005
  2. Replies:
    3
    Views:
    426
    Roedy Green
    Sep 22, 2005
  3. windandwaves
    Replies:
    18
    Views:
    708
    Spartanicus
    Mar 19, 2005
  4. planetthoughtful
    Replies:
    6
    Views:
    397
    Kent Johnson
    Dec 14, 2005
  5. DamonChong
    Replies:
    4
    Views:
    95
    Damon Chong
    Dec 29, 2005
Loading...

Share This Page