WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS problem (3 posts)

  1. sasa2209
    Member
    Posted 3 years ago #

    Hi, I have a problem with basic CSS positioning. I am working on a site and Mozilla is rendering horizontal space between two divs. On IE6 it loks fine. Here's the code:

    <style type="text/css">
    <!--
    body {
    	margin:0;
    	padding:0;
    }
    div {
    margin:0;
    	padding:0;
    }
    #cont {
    	width: 980px;
    	margin: 0 auto;
    	height: 1200px;
    }
    #header {
    	height: 220px;
    	width: 980px;
    }
    #logo {
    	width: 337px;
    	height: 108px;
    	margin-top: 38px;
    	background-image: url(images/logo.jpg);
    }
    #meni ul {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 900px;
    }
    .linkmargin {
    	margin-left: 10px;
    }
    .linkmarginprvi {
    	margin-left: 2px;
    	width: 140px;
    }
    #meni ul li {
    	float: left;
    	list-style: none;
    	margin-top: 1px;
    }
    #meni ul li a {
    	display: block;
    	padding: .7em 1em;
    	font-family: arial;
    	font-size: 14px;
    	text-decoration: none;
    	color: #868686;
    }
    #meni ul li a:hover {
    	color: #FFF;
    	background-color: #9ED311;
    }
    #meni a:hover {
    	color: #fff;
    	background-color: #9fd30f;
    }
    #meni {
    	margin-top: 33px;
    	width: 978px;
    	height: 38px;
    	border: 1px solid #dadada;
    	padding: 0;
    	background-color: #fff;
    }
    .talantrade {
    	display: block;
    	color: #9FD30C;
    	font-size: 16px;
    	width: 135px;
    	float: right;
    	height: 20px;
    	margin-top: 9px;
    }
    #logo h1 {
    	text-indent: -1000%;
    margin: 0;
    padding:0;
    }
    body {
    	background-color: #f8f8f8;
    	margin: 0;
    	padding: 0;
    	background-image: url(images/pagebgd.jpg);
    	background-repeat: no-repeat;
    	background-position: center bottom;
    }
    #image_rotator {
    	height: 330px;
    	width: 980px;
    	background-position: center bottom;
    	background-repeat: no-repeat;
    	background-image: url(images/naslovna_mainimg_shadow.jpg);
    	clear: both;
    }
    #dobr {
    	height: 100px;
    	width: 560px;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 28px;
    	font-weight: bold;
    	color: #949494;
    	margin-top: 30px;
    }
    h1 {
    	font-size: 16px;
    	color: #9FD30F;
    margin:0;
    padding:0;
    }
    .dobr-tekst {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	font-weight: bold;
    }
    #dobr h1 {
    	margin: 0;
    	padding: 0;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #9fd30f;
    }
    .inter {
    	display: block;
    	width: 290px;
    	margin-left: 320px;
    }
    .inter1 {
    	display: block;
    	width: 480px;
    	margin-top: 20px;
    	margin-left: 20px;
    }
    #image_rotator_inside {
    	width: 978px;
    	height: 300px;
    	background-image: url(images/naslovna_mainimg.jpg);
    	background-repeat: no-repeat;
    	border: 1px solid #dadada;
    }
    .linkmargin-onama {
    	margin-left: 10px;
    	width: 100px;
    }
    .linkmargin-proizvodi {
    	margin-left: 10px;
    	width: 120px;
    }
    .linkmargin-novosti {
    	margin-left: 10px;
    	width: 100px;
    }
    .linkmargin-galerija {
    	margin-left: 10px;
    	width: 100px;
    }
    .linkmargin-kontakt {
    	margin-left: 10px;
    	width: 100px;
    }
    
    -->
    </style>
    </head>
    <body>
    
      <!--cont start-->
    
    <div id="cont">
      <!--header start-->
      <div id="header">
        <!--logo start-->
        <div id="logo"><h1>Poljoprivredna zadruga Talan</h1></div>
        <!--logo end-->
        <!--meni start-->
        <div id="meni">
        <ul>
        <li class="linkmarginprvi"><a href="#">NASLOVNA</a></li>
        <li><a href="o-nama.html" class="linkmargin-onama">O NAMA</a></li>
        <li><a href="proizvodi.html" class="linkmargin-proizvodi">PROIZVODI</a></li>
        <li><a href="novosti.html" class="linkmargin-novosti">NOVOSTI</a></li>
        <li><a href="galerija.html" class="linkmargin-galerija">GALERIJA</a></li>
        <li><a href="kontakt.html" class="linkmargin-kontakt">KONTAKT</a></li>
       </ul>
        </div><!--meni end-->
      </div><!--header end-->
      <!--image_rotator start-->
      <div id="image_rotator">
        <div id="image_rotator_inside">Content for  id "image_rotator_inside" Goes Here</div>
    
      </div><!--image_rotator end-->
      <div id="dobr">
      <h1>proizvodno uslužna zadruga Talan \\</h1> <span class="inter1">Dobrodošli na našu internet stranicu</span></div>
    
    </div>
    <!--cont end-->
    </body>
    </html>

    Help please!

  2. sasa2209
    Member
    Posted 3 years ago #

    Forgot to say that the problem appears between menu div and the image_rotator div.

    Thanks

  3. DigitalSquid
    Member
    Posted 3 years ago #

    Delete:
    height: 220px;

    From the #header div in your CSS

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.