WordPress.org

1. shadowHK
   Member
   Posted 6 years ago #

   Hello, I would like to ask you for a help with my css.

   I have recently installed my new website http://www.shadowblog.cz/ using WordPress 2.0.1 CMS and changed original template for a "dusk" template by Beccary (http://beccary.com/goodies/ ) which I have subsequently modified for my purposes. But I have one problem still left. Under IE: the margin tag defining space between floating images and text does not seem to work or at least the page is not loaded properly under IE - it doesn't show a defined margin around images. There's no gap between images and text and it looks very unaesthetic. Under FF or Opera everything works fine.

   screenshot from IE: http://www.shadowblog.cz/1/IEshot.jpg

   I use standard code in my style.css:

   <!--code-->

   /* Begin Images */

   p img {
   padding: 0;
   max-width: 100%;
   }

   .alignright {
   float: right;
   }

   .alignleft {
   float: left;
   }

   img.alignright, img[align="right"] {
   padding: 0px;
   margin: 3px 3px 1px 10px;
   display: inline;
   }

   img.alignleft, img[align="left"] {
   padding: 0px;
   margin: 3px 10px 1px 3px;
   display: inline;
   }

   img.centered {
   padding: 0px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   }

   /* End Images */
   ----

   Thanks for any suggestions.

   + I have now remembered another thing. I have a problem with horizontal centering of images too. I have to use a following code to center images:

   <div style="text-align: center">
   <img alt="xxxxxxxxx.jpg" id="image40" title="xxxxxxxx.jpg" src="http://www.shadowblog.cz/.............jpg" />
   </div>

   Don't you have any suggestions for a more subtle solution? With img.centered style? Adding class "centered" to img tag doesn't center image for me.

   Again. Thanks in advance for your help and ideas.

2. ladydelaluna
   Member
   Posted 6 years ago #

   img.alignright, img[align="right"]{

   I've never seen it done that way with the square brackets like that... not that you're necessarily wrong, but i've NEVER seen it that way in a stylesheet.

   You also have 22 validation errors... might want to check those out too: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.shadowblog.cz%2F

3. shadowHK
   Member
   Posted 6 years ago #

   thx for reply. I have already resolved that. I had it in front of my eyes :).

   I shortend the code for more classical one:

   img.alignright {
   padding: 0px;
   margin: 3px 3px 1px 10px;
   display: inline;
   }

   img.alignleft {
   padding: 0px;
   margin: 3px 10px 1px 3px;
   display: inline;
   }

   and when writing a new post, i use now a following code:

   <img class="alignleft" alt="xxxxxxxxx.jpg" id="imagexx" title="xxxxxxxx.jpg" src="http://www.shadowblog.cz/.............jpg" />

   or class="alignright".

   I have edited all my posts and it's ok now even under IE.

   BEFORE:

   I used WYSIWYG TinyMCE interface and simply chose to align left/right image (in HTML code: align="left"/"right". And for this align="left"/"right" it used a defined style:

   img.alignright, img[align="right"] {
   padding: 0px;
   margin: 3px 3px 1px 10px;
   display: inline;
   }

   img.alignleft, img[align="left"] {
   padding: 0px;
   margin: 3px 10px 1px 3px;
   display: inline;
   }

   And everything worked fine but IE.

   And as I said above, in order to make it work also in IE, I had to abandon this approach and use a more traditional one, i.e. simply I had to use defined style classes "alignleft" and "alignright" and put them directly in the img tag. And of course I had to delete the part of code in the square brackets.

   So, now it works fine, but without wysiwyg. Maybe it will work in some more sophisticated one than the default one. I will have a look.

   IE doesn't work obviously with more complex CSS codes :)

   (and sorry for my grammar, I am Czech :) ).

Topic Closed

This topic has been closed to new replies.