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

  2. Deryck

    Els 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;
     
    Els, Jun 12, 2004
    #2
    1. Advertisements

  3. Deryck

    Deryck Guest

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

    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.
    You're welcome :)
     
    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, Jun 12, 2004
    #5
  6. Deryck

    Els Guest

    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, Jun 12, 2004
    #6
  7. Deryck

    Deryck Guest

    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

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.