8 Replies Latest reply on Mar 29, 2010 8:15 AM by martcol

    Image dimensions in CSS or HTML; or a Bit of Both?

    martcol Level 4

      I'm asking this because I have a site with several pages with small images illustrating text either floated left or right.  I want each image to be the same width but not the same height.  I want to use the same CSS or as much as I can, on each left or each right image.

       

      Usually, I try not to declare the width in the HTML but put it in the CSS.  Is there much difference?

       

      One compromise would be to declare the width in the CSS and the height in the HTML.  That seems OK to me but I just want to check if there's a right way to achieve what I'm after.

       

      Thanks

       

      Martin

        • 1. Re: Image dimensions in CSS or HTML; or a Bit of Both?
          370H55V Level 4

          Unless it's a background image, I try to keep my image dimensions in HTML.

           

          That's just me.

          1 person found this helpful
          • 2. Re: Image dimensions in CSS or HTML; or a Bit of Both?
            martcol Level 4

            Thanks for that.

             

            I'm guessing that your position is that it's pretty much a matter of personal choice?

             

            Martin

            • 3. Re: Image dimensions in CSS or HTML; or a Bit of Both?
              pziecina Level 6

              Hi Martin

               

              To be compliant, any images in xhtml should have a height and width value, (and relevant alt text). But if you are doing any dom manipulation on them it is easier to provide the values in the css.

               

              PZ

              www.pziecina.com

              1 person found this helpful
              • 4. Re: Image dimensions in CSS or HTML; or a Bit of Both?
                martcol Level 4

                Hello PZ

                 

                I guess the question isn't should I put the height/width in but what's the most economic option in my situation.

                 

                Say I have 4 small images on my page.  Two float left and two float right.  All the images have the same width but different height.

                 

                The left images are in a <div class="leftimage"> and the right in their own <divs>  so I can have one rule for left or right with the float but I will need different rules to cover the image height.

                 

                So do I can take the image width out of the HTML and cover that in my CSS.  I'd always presumed that the best way to go was to keep your HTML as light as possible.  If I only cover the width of the image in those two rules, I either:

                 

                     1) write a rule for each image to cover the unique height and put an id on each image in the HTML

                     2) put all height/width declarations back in the HTML

                     3) put the width in the CSS and the height in the HTML

                 

                Or go have a glass of red wine!

                 

                Martin

                • 5. Re: Image dimensions in CSS or HTML; or a Bit of Both?
                  osgood_ Level 8

                  martcol wrote:

                   

                  Hello PZ

                   

                  I guess the question isn't should I put the height/width in but what's the most economic option in my situation.

                   

                  Say I have 4 small images on my page.  Two float left and two float right.  All the images have the same width but different height.

                   

                  The left images are in a <div class="leftimage"> and the right in their own <divs>  so I can have one rule for left or right with the float but I will need different rules to cover the image height.

                   

                  So do I can take the image width out of the HTML and cover that in my CSS.  I'd always presumed that the best way to go was to keep your HTML as light as possible.  If I only cover the width of the image in those two rules, I either:

                   

                       1) write a rule for each image to cover the unique height and put an id on each image in the HTML

                       2) put all height/width declarations back in the HTML

                       3) put the width in the CSS and the height in the HTML

                   

                  Or go have a glass of red wine!

                   

                  Martin

                  humm...... for me I'd always put the width and height in the html. I think you can become a little obsessive when trying to keep the html as light as possible. Also if I need to change the width/height of the image at anytime its easier in the html than to go looking for it in the css rules.

                  • 6. Re: Image dimensions in CSS or HTML; or a Bit of Both?
                    pziecina Level 6

                    Hi Martin

                     

                    Right now I would recommend the option  'have a glass of wine', but if you have to work on the site then option 2.

                     

                    The reason I say this is that if you should ever have to change the images then the html attributes will be easier to update in dreamweaver, (one click in the properties panel). Also, (depending on the layout) the floated images div's will automatically resize to accommodate them if done in html.

                     

                    PZ

                    • 7. Re: Image dimensions in CSS or HTML; or a Bit of Both?
                      martcol Level 4

                      Thanks Osgood,

                       

                      I'm beginning to think I should agree with you.

                       

                      The first site I ever built was an image gallery and with a bank or grid of thumbs I guess it makes sense to put the width/height in the CSS.

                       

                      In this situation, it's looking like it should go in the HTML.

                       

                      Regards

                       

                      Martin

                      • 8. Re: Image dimensions in CSS or HTML; or a Bit of Both?
                        martcol Level 4

                        pziecina wrote:

                         

                        Hi Martin

                         

                        Right now I would recommend the option  'have a glass of wine', but if you have to work on the site then option 2.

                         

                        The reason I say this is that if you should ever have to change the images then the html attributes will be easier to update in dreamweaver, (one click in the properties panel). Also, (depending on the layout) the floated images div's will automatically resize to accommodate them if done in html.

                         

                        PZ

                         

                        That settles it!

                         

                        The red wine is breathing....

                         

                        Martin