Drupal View with Grid option problems in Firefox

Question

I recently created a drupal view for a image gallery (clickable thumbnails) from a set of files. This is a 'view' Format:Grid with 3 columns. I loaded in File:Path, Caption, & Title and accomplished the view by "Rewriting Results" from "File:Title" using the following:

<div style="width:200px;"><td width="200px" ><a href="[uri]" style="max-width: 200px;">[field_title]<img src="[uri]" alt="ITSO" width="200px" style="width: 200px; max-width: 200px;" />[field_caption]</a></td></div>

So this works great in Chrome and Safari, however my downfall is Firefox. I've tried to define width with -moz but Firefox ignores EVERYTHING I put in. It displays the title, an image so large it goes off the window and caption, no resizing at all. My latest try was to use border-box but no luck, the following showed no changes.

<div style="width:200px; max-width: 200px; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -moz-box-sizing: border-box; display: inline-block; float: left;"><td width="200px" > <a href="[uri]" style="text-decoration:none; max-width: 200px;">[field_title]<img src="[uri]" alt="ITSO" width="200px" style="width: 200px; max-width: 200px;" />[field_caption]</a></td></div>

When I change it to a % instead of px definition I get resizing in Chrome of image and column width but no change in Firefox.

<div style="width:20%; max-width: 20%; -webkit-column-width: 20%; -moz-column-width: 20%; column-width: 20%; -moz-box-sizing: 20%; display: inline-block; float: left;"><td width="20%" > <a href="[uri]" style="text-decoration:none; max-width: 20%;">[field_title]<img src="[uri]" alt="ITSO" width="20%" style="width: 20%; max-width: 20%;" />[field_caption]</a></td></div>

I also noticed that when I specify "text-decoration:none" it is ignored by both Chrome & Firefox. Isn't inline supposed to overrule? Any suggestions would be much appreciated. I don't have full drupal permissions so I'm not allowed to add classes or access administrator drupal areas, so I'd love to find a way just to tell all browsers to use the same width on my images.

Answer 1

Ok, so Firefox is the problem. ALL style width commands are straight up ignored. The way to do this & use Views Format: Grid is to rewrite the output with:

<div class="craxypic"><a href="[uri]">[field_title]<img src="[uri]"  />[field_caption]</a></div>

Then you have to put class craxypic in your css file with:

.craxypic {
<td width="200px" > 
width: 200px;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-moz-box-sizing:border-box;
display: inline-block;
float: left;
text-decoration:none;
max-width: 200px;
</td>}

This is the only way to get all the browsers to acknowledge your width command. I am still learning drupal, and I have to say at this point it is reminding me alot of iraf. Thanks for the discussion.