Images appear huge in Firefox

  • Resolved Foliferous

    (@revs)


    10 years, 10 months ago

    I decided to make my own gallery by using a table, nothing too complicated. 4 rows with an image in each of them.

    In Safari everything looks fine, in Firefox, however, the images are much bigger and go over the border of the site.

    In another thread I was reminded that I should always keep sizes in both formats, px and rem, to make sure the site looks the same on all browsers.

    So that’s what I did, I converted the px to rem and entered that in my CSS (BTW, I am using a child theme of twenty tele), but the images still appear very big.

    My site is in localhost, so I can only post the code snippet here. Maybe someone finds the mistake:

    <table class="gallerie-bilder">
<th colspan=“4”>Title here</th>
<tr>
<td><a href="bilder/1000.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1000.jpg" /></a></td>
<td><a href="bilder/1001.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1001.jpg" /></a></td>
<td><a href="bilder/1002.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1002.jpg" /></a></td>
<td><a href="bilder/1003.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1003.jpg" /></a></td>
</tr>
<tr>
    .gallerie-bilder {
    width: 258px;
    width: 20.35714286rem;
    height: 193px;
    height: 13.78571429rem;
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)

    10 years, 10 months ago

    I decided to make my own gallery by using a table

    You shouldn’t be using table markup for layout purposes. Table markup is for data tables – not positioning images. You should use CSS for the latter.

    Thread Starter Foliferous

    (@revs)

    10 years, 10 months ago

    Well, that’s what people suggested me. Too bad because it looked perfect in Safari.

    Can I not make the table for “stable” somehow, so it appears the same everywhere?
    Or how else would I make 4 images appear besides each other? It’s not that easy, especially not in WordPress…

    esmi

    (@esmi)

    10 years, 10 months ago

    Why not just use CSS?

    Thread Starter Foliferous

    (@revs)

    10 years, 10 months ago

    Sure, I’m not against it 🙂

    Do you know what I could try? I always failed at putting images side by side. Same with DIV’s and anything else. Grrr!

    esmi

    (@esmi)

    10 years, 10 months ago

    4 images in a row. Should be possible with 4 divs – each 25% wide and floated left -eg:

    <div class="my-gallery">
<div><a href="bilder/1000.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1000.jpg" alt="image-alt_text_goes_here" /></a></div>
<div><a href="bilder/1001.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1001.jpg" alt="image-alt_text_goes_here" /></a></div>
<div><a href="bilder/1002.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1002.jpg" alt="image-alt_text_goes_here" /></a></div>
<div><a href="bilder/1003.jpg" rel="lightbox[roadtrip]"><img src="bilder/miniaturen/1003.jpg" alt="image-alt_text_goes_here" /></a></div>
</div>
    .my-gallery div {
	float:left;
	width:25%;
}
/* clear floats */
.my-gallery:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

    If you’re feeling semantically minded, you could use an unordered list instead of divs. The CSS would be pretty much the same.

    Thread Starter Foliferous

    (@revs)

    10 years, 10 months ago

    Cool, it works! I added a little margin to the first CSS part code and decreased the width to have a little space between the images. Works in Firefox too now — much appreciated 🙂

    What do you use content: “.”; for, by the way?

    Thread Starter Foliferous

    (@revs)

    10 years, 10 months ago

    Resolved by the way!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images appear huge in Firefox’ is closed to new replies.