Need solution for using two classes in IE

  • fabrian

    (@fabrian)


    19 years, 7 months ago

    I’m using HighSlide ( http://vikjavev.no/highslide/ )for a thumbnail viewer on my blog. Assuming your going to use a class for aligning an image in a post “left”, there will already be a class defined for it. You need to include the highslide class as well, so you wind up with the highslide class and your left class associated with the same image. IE does not seem to play nice with two classes, FF has no problem.

    See here: http://thefabhouse.com/testwp

    The highslide border around the thumb does not display on my test blog for some reason, but my private blog will display only half of the border on mouse over.

    Here’s the css for highslide that I’m using:

    <style type="text/css">
    {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    }
    .highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    }
    .highslide img {
    border: 2px solid gray;
    }
    .highslide:hover img {
    border: 2px solid white;
    }
    .highslide-image {
    cursor: pointer; /* opera */
    cursor: url(highslide/graphics/zoomout.cur), pointer;
    border: 2px solid white;
    }
    .highslide-image-blur {
    cursor: pointer;
    cursor: hand;
    }
    .highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
    }
    .highslide-display-block {
    display: block;
    }
    .highslide-display-none {
    display: none;
    }
    .highslide-loading {
    display: block;
    color: white;
    font-style: 'MS Sans Serif';
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    opacity: 0.60; /* w3c */
    filter: alpha(opacity=60); /* ie */
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    }
    a.highslide-credits,
    a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
    }
    a.highslide-credits:hover,
    a.highslide-credits:hover i {
    color: white;
    background-color: gray;
    }
    </style>
    </head>
    <body style="background-color: silver">
    <!--
    4) Create an empty container for the Highslide popups to live in. This container
    must be defined directly after the body tag.
    -->
    <div id="highslide-container"></div>
    <!--
    5) This is how you mark up the thumbnail image with an anchor tag around it.
    The anchor's href attribute defines the URL of the full-size image.
    -->
    <a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="images/thumbnail.jpg" alt="Highslide JS" id="thumb1"
    title="Click to enlarge" height="120" width="107" />
    </a>
    <!--
    6 (optional). This is how you mark up the caption. The id contains the words 'caption-for-',
    then the id of the img tag above.
    -->
    <div class='highslide-caption' id='caption-for-thumb1'>
    This caption can be styled using CSS.
    </div>

    How can I use both classes, highslide and alignment, without screwing up IE?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘Need solution for using two classes in IE’ is closed to new replies.

Tags