.imgBorder width IE troubles

tonyd · August 22, 2005

I've been trying different borders on my web site and I found that IE has a problem if I change the width to be greater than 1px in the following:

.imgBorder { border: outset 1px #526907; }

I typically use Firefox which handles border widths (such as 5px) with no problem.

In IE, smugmug, smugmug small, and most other layout styles are broken. In the case of smugmug and smugmug small, there are only two colums of thumbnails and landscape oriented photos display at the bottom of the page instead of to the right side of the thumbnails.

Is this something that can be fixed with some additional CSS code or do I wait and hope that MS gets it right in IE7?

{JT} · August 22, 2005

Yes, you will have to increase the width of the DIVs that the thumbnails are inside of. View the CSS include that we have on each page and you will see where we set the width of 750px for the page and then look at .leftColumn to see where to change the width for smugmug and smugmug small.

tonyd wrote:

I've been trying different borders on my web site and I found that IE has a problem if I change the width to be greater than 1px in the following:

.imgBorder { border: outset 1px #526907; }

I typically use Firefox which handles border widths (such as 5px) with no problem.

In IE, smugmug, smugmug small, and most other layout styles are broken. In the case of smugmug and smugmug small, there are only two colums of thumbnails and landscape oriented photos display at the bottom of the page instead of to the right side of the thumbnails.

Is this something that can be fixed with some additional CSS code or do I wait and hope that MS gets it right in IE7?

bwg · August 22, 2005

{JT} wrote:

Yes, you will have to increase the width of the DIVs that the thumbnails are inside of. View the CSS include that we have on each page and you will see where we set the width of 750px for the page and then look at .leftColumn to see where to change the width for smugmug and smugmug small.

or you can decrease the margin around the thumbnails in proportion to how big you're making your borders.

the thumbnails have a margin of 13px on the right side by default for the smugmug template and 9px on the right for smugmug_small...so if you want to have a 5px border you'll have to take the difference in width from a 1px border (1px * 2 sides = 2px) to a 5px border(5px * 2 sides = 10px). 10px - 2px = 8px difference, then subtract that from the 13px or 9px margin...

#elegant #thumbnails .photo {
  margin-right: 5px;
  }
  
  #elegant_small #thumbnails .photo {
  margin-right: 1px;
  }

edit: this was how i got around the problems on the smugmug and smugmug_small templates. I dont know what problems you were running into on the other templates but this may or may not be the solution to them as well.

.imgBorder width IE troubles

Comments