First of all, please excuse me for my not so good english. I'm not sure whether this question should be in CSS or HTML forums.
I have a Wordpress-based website, but sometimes I'm contributing on someone else's Drupal site. Some things are different there and I'm trying to make posts look like on my site. But I'm not allowed to edit the Drupal site's CSS.
I'm particulary interested in making image captions with borders on the Drupal site in a same way as they appear on the WP site (please see the printscreen).
On the Drupal site, the captions below the images are produced automatically from img title (class img_description), but I don't like the way they look. I preffer the WP look (plz see the picture for comparison).
I tried to solve the problem by adding
tags to my posts, so I can design them the way I want. I know that overriding the default CSS is not right and it is untidy, but I have no other options.
I took the HTML of my WP posts, I edited them a little bit and I pasted it into the Drupal posts. I was able to (more or less) recreate the design of my WP posts on the Drupal site.
However, this looks good only in Chrome and Firefox, but when I open the posts in Internet Explorer, it says that there are errors and it switches to Compability Mode and it displays them in a messed up way.
Also, the page looks messed up when viewed on a smartphone (I guess it's because it loads the Drupal site's mobile.css).
In WP, the image captions are produced by the shortcode, like:
[caption id="attachment_number here" align="" width=""]<img src="image url" alt="" title="" width="" height="" class=" " /> Caption text blah-blah[/caption]
When you check the HTML code of that post, it shows a div:
<div id="attachment_number here" class="wp-caption aligncenter" style=" "><a href="image url"><img class=" " alt=" " src="img url" width=" " height=" " /></a><p class="wp-caption-text">Caption text blah-blah.</p></div>
I pasted this div into the Drupal post, I edited it and added
on top and it looks fine in Chrome and FF, but not in IE and on mobile, so it seems that I'm near the solution, but I'm missing something. Please tell me, what would be a better way to do this?
And is there a way to stop mobile.css from loading for a particular post by adding a certain line in it?
Thank you very much.