5 replies to this topic

[madams]

Hi

I have the code below in an external style sheet...

CODE

<style type="text/css">
    .left {
        float: left;
        border: solid 1px grey;
        padding: 5px;
        margin: 5px;
         }</style>
<style type="text/css">
    .right  {
        float: right;
        border: solid 1px grey;
        padding: 5px;
        margin: 5px;
         }</style>

I am calling the script using...

CODE

<img src="http://www.any-site.com/blog/wp-content/uploads/2007/10/turnsmall.jpg" alt="Villa Helena Javea Spain" class="left" />

However, this works in Opera but fails in ME and FF

Any of you code junkies know why this wont work?

(Note: I am using it in Wordpress)

[qwerty]

You're not explaining what aspect of it fails. Does the image fail to float? Is the margin or padding wrong? Does the border not come up?

In any case, one thing you might try is using padding or margins, but not both. IE can usually handle both, but I've seen numerous problems solved just by using one or the other instead.

[madams]

Hi Qwerty

Yeh didn´t explaine enough...

The text wont wrap arround the image.

In any case, one thing you might try is using padding or margins, but not both. IE can usually handle both, but I've seen numerous problems solved just by using one or the other instead.

Tried your sugestion, took out the margin but still wont work

[qwerty]

OK, let me show you how I do it and you can try modifying my code to fit your needs. Here's the CSS:

CODE

img.left
{
    float:left;
    margin:0 1em 1em 0;
}
img.right
{
    float:right;
    margin:0 0 1em 1em;
}

And here's how I insert a floated image into a paragraph:

HTML

<p><img class="left" width="350" height="185" src='http://www.qwertysqoncepts.com/wp-content/uploads/2007/10/rogue.png' alt='Nissan Rogue' />They're at it again, but this time it may be going even further. In the season's premiere episode, Claire's father gives her a Nissan Rogue (the fabulous new crossover the commercials for which whore out the Clash). That episode was presented with "limited commercial interruption" by Nissan, which included three Rogue commercials in a row. One of the features they push about the Rogue is its "intelligent key that never has to leave your pocket."</p>

And it ends up looking like the attached screen cap.

Note that this is in Wordpress, but I don't let it do any of the coding for me, because I've found that it makes changes I don't want, so I type straight HTML into the editor. That setting is under Users > Your Profile. There's a checkbox labeled "Use the visual editor when writing". I keep that unticked.

Attached Thumbnails

• 

Edited by qwerty, 06 October 2007 - 04:53 PM.

[madams]

That did the trick Qwerty, thanks

I typed everything into the editor and saved but for some reason I had to re-tick the "Visual Editor"
to get the pictures to show up online. (When I viewed the blog online)

Maybe I am not doing things correctly but I am still finding my way around the (Wordpress) program.

[chrishirst]

Also, there should be NO <style></style> delimiters in an external style sheet.