#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    7
    Rep Power
    0

    CSS and wrapping


    Hi there,

    couldn't find any threads here that solve my current CSS problems.

    Anyway, I've got a DIV with 3 images which is 400px wide for example. As soon as I resize the browser to below 400px width the images inside the DIV begin to shift downwards.

    CSS :

    Code:
    #header {
    position: absolute;
    top : 26px;
    left: 0px;
    width: 400px;
    height: 98px;
    border-bottom: 1px solid #777777;
    border-top : 1px solid #777777;
    }
    How can I turn this off, i.e. I want the images to stay where they are.


    Also, writing HTML like this :

    <div>
    <img src="file1" />
    <img src="file2" />
    </div>

    produces gaps between the images. To get rid of the gaps I have to write it like :

    <div><img src="file1 /><img scr="file2 /></div>

    But this is of course not as readable as the first method.

    Is there a fix for this


    thanks alot
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    I'm not sure (without some code) exactly what's going on, but I think you could get around what you describe by putting a small, wide transparent gif some where in your doc - effectively setting a minimum width for the doc...
    Code:
    <img src=clear.gif width=400 height=1 border=0 alt=0>
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    7
    Rep Power
    0
    cheers,

    but I'm trying to write W3C compliant pages and I've read that with CSS there is no need for transparent pixels anymore

    Anyway here's the code:

    Code:
    #header {
        position: absolute;
        top : 26px;
        left: 0px;
        width: 100%;
        height: 98px;
        border-bottom: 1px solid #777777;
        border-top : 1px solid #777777;
    }
    ---------------------------------
    <div id="header" class="gray"><img src="images/header_img.jpg" alt="" /><img src="images/logo.gif" alt="" /><img  src="images/tags.gif" alt="" /></div>
    As soon as I resize the browser window the images shift to fit in the browser width. Also notice that I wrote the <div> all on one line, otherwise the div doesn't render properly, i.e. the gaps between the images.

    Is this a bug or isn't any whitespace allowed between the <img> tags, if you want the images to appear one after the other ( horizontally without any gaps )

    thanks again
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    7
    Rep Power
    0
    OK,

    found some answers. Basically I have to use following style :

    white-space: nowrap

    But this doesn't work in IE5. So in IE5 I have to use
    <nobr></nobr>

    But this on the other hand isn't HTML4.01 compliant. Is there another workaround that is still W3C compliant ?


    Also still haven't found an answer to my 2nd problem, i.e. the need to write a <div> which contains <img> all on one line, to avoid gaps between the images.


    cheers

IMN logo majestic logo threadwatch logo seochat tools logo