CSS problem (pri zoomiranju)

3 naročniki

4531

8. dec 2009 ob 11:38

Pozdravljeni.

Pri izdelavi spletne strani (html/css) sem naletel na problem, ki ga ne znam rešiti. Kadar spletno stran zoomiram (+ ali -), se mi na povsem naključnih % (120, 85, 145,..) zgodi, da ozadje strani prekrije tanka bela črta. Nisem prepričan, zakaj se to dogaja, ampak verjamem da bo kdo izmed vas vedel za problem in pomagal pri rešitvi :)

.CSS koda

body {
    background-color: #A6BBDD;
}

#wrapper {
    width: 800px;
    position: relative;
    margin: auto;
    background: white;
}

#crta_levo {
    background: url('/design/line.gif') repeat-x;
    height: 2px;
    width: 673px;
    float: left;
    margin-top: 10px;
    margin-left: 1px;
    visibility: visible;
}

#button_top {
    float: left;
}

#crta_desno {
    background: url('/design/line.gif') repeat-x;
    height: 2px;
    width: 77px;
    float: left;
    margin-top: 10px;
    visibility: visible;    
}

#header {
    background: url('/design/meni_bg.gif') no-repeat bottom;
    height: 320px;
    visibility: visible;
}

#meni a {
    background: url('/design/button.gif') no-repeat;
    display: block;
    width: 105px;
    height: 33px;
    padding-top: 6px;
    text-decoration: none;
    text-align: center;
    color: white;
    font-weight: bolder;
    font-size: 15px;
    float: left;
    position: relative;
    visibility: visible;
}

#meni a.opened {
    background: url('/design/button_active.gif') no-repeat;
    visibility: visible;
}

#meni a:hover {
    background: url('/design/button_active.gif') no-repeat;
    visibility: visible;
}

#logo {
    width: 91px;
    height: 90px;
    margin-left: 660px;
    margin-top: 30px;
    float: left;
    position: absolute;
}

#animacija {
    float: left;
    width: 630px;
    margin-top: 20px;
    position: absolute;
}

#content {
    background: #245194;
    min-height: 350px;
    height: auto;
    color: white;
    padding: 10px;
}

HTML koda

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Naslov</title>
        <meta name="keywords" content="ključne besede">
        <meta name="description" content="Opis spletne strani">

        <link rel="stylesheet" type="text/css" href="design/style.css" />
        <script language="JavaScript1.1" type="application/javascript">
            <!--

            //Pixelating Image slideshow
            //Copyright Dynamic Drive 2001
            //Visit http://www.dynamicdrive.com for this script

            //specify interval between slide (in mili seconds)
            var slidespeed = 10000
            //specify images
            var slideimages = new Array("design/animacija/slika1.png", "design/animacija/slika2.png", "design/animacija/slika3.png", "design/animacija/slika4.png", "design/animacija/slika5.png", "design/animacija/slika6.png")
            //specify corresponding links
            var slidelinks = new Array("")

            var imageholder = new Array()
            var ie55 = window.createPopup
            for (i = 0; i < slideimages.length; i++) {
                imageholder*= new Image()
                imageholder*.src = slideimages*}

            function gotoshow(){
                window.location = slidelinks[whichlink]
            }

            //-->
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="crta_levo"></div>
            <div id="button_top">
                <a href="index.html"><img src="/design/home.png" border="0" alt="" /></a>
                <a href="kontakt.html"><img src="/design/mail.png" border="0" alt="" /></a>
            </div>
            <div id="crta_desno"></div>
            <div id="animacija">
                <img src="design/animacija/slika1.png" name="slide" alt="" border=0 width="630" height="246">
                <script language="JavaScript1.1" type="application/javascript">
                    <!--
                    var whichlink=0
                    var whichimage=0
                    var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
                    function slideit(){
                    if (!document.images) return
                    if (ie55) document.images.slide.filters[0].apply()
                    document.images.slide.src=imageholder[whichimage].src
                    if (ie55) document.images.slide.filters[0].play()
                    whichlink=whichimage
                    whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
                    setTimeout("slideit()",slidespeed+pixeldelay)
                    }
                    slideit()

                    //-->
                </script>
            </div>
            <div id="logo">
                <a href="index.html"><img src="design/logotip.png" border="0" alt="" /></a>
            </div>
            <div id="header">
                <div id="meni">
                    <a style="margin: 250px 0 0 25px;" href="podjetje.html">PODJETJE</a>
                    <a style="margin: 250px 0 0 25px;" href="dejavnost.html">DEJAVNOST</a>
                    <a style="margin: 235px 0 0 25px;" href="kontakt.html">KONTAKT</a>
                    <a style="margin: 216px 0 0 25px; font-size: 12px; padding-top: 8px;" href="strokovnjaki.html">STROKOVNJAKI</a>
                    <a style="margin: 185px 0 0 25px;" href="reference.html">REFERENCE</a>
                    <a style="margin: 150px 0 0 25px;" href="vizitka.html">VIZITKA</a>
                </div>
            </div>
            <div id="content">
                <font face="Arial"><b><center>vsebina</center></b>
            </font>
            </div>
        </div>
    </body>
</html>***