• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

Inline images css problem

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    Inline images css problem

    Never have these problems with tables, css sucks. Just trying to line up a row of images as below but just cannot get rid of spaces between them, in IE anyway.

    <style type="text/css">
    .content {float:left; margin:0px; padding:0px;}
    .content img {float:left; margin:0px; padding:0px;}
    </style>

    blah, blah, head, body, etc

    <div class=content>
    <img src="image_files\gallery1.jpg" border=0 title="">
    <img src="image_files\gallery2.jpg" border=0 title="">
    <img src="image_files\gallery3.jpg" border=0 title="">
    <img src="image_files\gallery4.jpg" border=0 title="">
    <img src="image_files\gallery5.jpg" border=0 title="">
    </div>

    Any ideas? Cheers.

    PS Ok in Firefox. Margin:-3px works in IE, Sucky. Must be better way.
    Last edited by xoggoth; 21 June 2010, 21:13.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

    #2
    Try putting all the images on the same line so there is no whitespace (the carriage return) between them.

    edit: Additionally, try removing the float: left you have in your css, there should be no need to do that with images because they are inline elements. (I just attempted this with your html and it appears to solve the problem).
    Last edited by Jaws; 21 June 2010, 21:35.

    Comment


      #3
      Thanks Jaws but tried that one, no joy. Also tried using inline <li>, putting them in divs and checked got up to date <!DOCTYPE
      bloggoth

      If everything isn't black and white, I say, 'Why the hell not?'
      John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

      Comment


        #4
        Try the note in my edit if you've missed it.

        Comment


          #5
          Originally posted by xoggoth View Post
          PS Ok in Firefox. Margin:-3px works in IE, Sucky. Must be better way.
          That sounds like the infamous three pixel text-jog, a long-standing bug showcasing IE6's pathetic inability to render web pages correctly, in this case triggered by the presence of floated elements. You wouldn't believe that MS actually invented CSS and gave it to the W3C for the benefit of all mankind, given their utter failure to implement a working version of it for years. They claim to have fixed this particular bug in IE7, but I only really trust IE8 (and that only to a certain degree) when it comes to an IE rendering engine doing things correctly. (IE9 looks like a major win, though.)

          Two possible solutions:
          1. Don't bother floating them: images are inline elements by default, and should just appear on the same line anyway when rendered. In a number of ways they're the same as individual characters in a word to the rendering engine ("inline replaced elements" is the technical term used in the CSS spec). If you're setting display: block; on them somewhere, taking that out and only applying it to images that need it is probably the way to go, along with Jaws' suggestion of putting them all on one line in the source, with no whitespace between them. (The whitespace caused by the line-endings will be converted to a space according to the rules for parsing HTML. You'd need to do that anyway whether in Netscape 3 or IE9: to the HTML parser, any contiguous sequence of whitespace characters is collapsed to a single space character. Dem's de rules - well, in most cases )

          2. Alternatively, leave the floating rules in place and add zoom: 1; to the CSS rules applying to those images. IIRC there are additional complexities in this foul IE bug for inline replaced elements, so that might not work: I'll have a play tomorrow, but give zoom a go. I seem to remember that the ugly margin-left: -3px; hack can under some circumstances be the only way to work around IE6's miserable fail, in which case you should be serving that in an IE6-specific stylesheet via conditional comments. (The zoom rules can just be served to everything, as they won't break anywhere.)


          Not actually a problem with CSS, just a problem with IE6 being a donkey-knob-sucking pile of tulipe

          Comment


            #6
            Ta Nick. Putting them inline AND not having float seems to work. Thanks to both of you.

            PS I could have sworn imgs without float appeared one after the other. I've been using tables or align= or css to get them inline for years. Just as well I don't do this stuff for a living.
            Last edited by xoggoth; 22 June 2010, 07:45.
            bloggoth

            If everything isn't black and white, I say, 'Why the hell not?'
            John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

            Comment


              #7
              If tables work for you and you don't do this for a living, just use tables. Just don't tell any web developers I said that
              Originally posted by MaryPoppins
              I'd still not breastfeed a nazi
              Originally posted by vetran
              Urine is quite nourishing

              Comment


                #8
                I do use simple table for the tabs at the top. Can't get css to do that reliably.

                Aaaagh! Just uploaded and I had done the whole website with images\ instead of images/. Fussy flippin Firefox.
                bloggoth

                If everything isn't black and white, I say, 'Why the hell not?'
                John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

                Comment

                Working...
                X