[CSS Problem] Float makes images disappear – Help Needed

  • Resolved siaush

    (@siaush)


    17 years, 10 months ago

    Hi,

    I’m currently using WordPress 2.0.5 with K2 Beta Two 0.9.1. I have used the following codes in my blog to position images but somehow they make the images disappear into the thin air.


    <div style="float: right;"><img src="sampleimage.jpg" title="Sample Image" /></div>

    I’ve also tried to assign them in the CSS like this:


    div.right {
    float:right;
    }

    Post:

    <div class="right"><img src="sampleimage.jpg" title="Sample Image" /></div>

    Neither way worked out, the image just disappeared to no where. I’ve tested with other K2 schemes including the option ‘No Scheme’. However the images appear correctly if I use other themes like the Default Theme and Cutline.

    Can any one please help me about this? I’ve tried to solve this for a whole day yet I can’t find a solution to this issue.

    Thank you very much,
    Shihao

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter siaush

    (@siaush)

    Ok here am I again, with some screenshots:

    Problem occurs when using K2 Theme
    Worked fine in Cutline Theme

    The codes used behind the scenes are:

    The CSS File:

    div.right {
    float: right;
    }

    div.picdescript {
    font-size: 80%;
    line-height: 160%;
    text-align: center;
    background-color: #fffde5;
    border-top: 1px solid #f2f0d9;
    border-bottom: 1px solid #e6e4cf;
    padding: 6px;
    margin-top: 2px;
    }

    Codes in Post:

    <div class=”right”><img src=”TeshimaAoi.jpg” title=”Teshima Aoi” /><div class=”picdescript”>Teshima Aoi</div></div>

    Please, anyone please help me with this. I am dealing it for since morning until now >.< and I still can’t find a way to solve this ‘mystery’

    Thank you very very much!
    Shihao.

    siaush this is slightly more tricky than it looks but we can get you fixed up.

    First up lets keep the CSS separate and not go inline.

    Next – a floated element must have its width defined.

    SO: In the html

    <img src class="right" width="xxpx" height="xxpx" (url to image) >

    In the CSS

    .right {float: right;}

    NB: Note the dot before right.

    NOW: That fix is not the end of it. You need to clear the float with a clearer.

    Get that bit running first then post again and we can fix it.

    Thread Starter siaush

    (@siaush)

    I need the caption to be floated to the right too.. It seems your code only float the image to the right, am I correct?

    EDIT: My original codes worked in IE 6 & 7 and Opera 9, but not in Firefox 2.

    Is that a possible that the styles conflict with K2’s CSS? Anyone knows it? because in other themes it just worked.

    Well you only asked for code to float the image. :). I would wrap the image and caption in a new div and float them both together.
    You seem to be making good progress on this. Stick with it. Floats are tricky.

    Thread Starter siaush

    (@siaush)

    Resolved. Some styles seems to be conflicting, I’ve used style=”width:186px;” instead of width=”186px” in the div and it worked. Thank you. ^^

    NOTE:

    I’ve used style=”width:186px;” instead of width=”186px” in the div and it worked.

    In HTML, width=”186″ is correct, width=”186px” is incorrect. In html EVERY NUMBER is in pixels, so shouldn’t be added as in CSS (in css [ width: 186px ] is correct, but [ width: 186 ] is NOT:)

    My $ 0.02 ??

    Thread Starter siaush

    (@siaush)

    Thanks for the correction lelion ^^

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[CSS Problem] Float makes images disappear – Help Needed’ is closed to new replies.

Tags