Hej!
Har ett problem med en sida jag håller på med. Bordern på vänster sida försvinner när jag lägger till mer text eller andra element (typ en div till eller en bild)(har kommenterat en bild samt en div i koden), men det ser bra ut om jag endast har lite text.
Sidan visas korrekt i Firefox men det blir fel i Internet Explorer.
Har letat och sökt efter lösningar, har hittat svar såsom att använda inline:block eller använda zoom:1, men har inte fått detta och fungera. Är inte riktigt säker på vart jag ska använda detta heller, men har försökt på olika ställen.
I koden nedan vissas problemet, tar ni bort två av de tre dummytexterna så visas sidan korrekt, men jag vill kunna ha hur mycket text som helst utan att vänstra bordern ska försvinna...
Koden validerar korrekt med W3C?s Markup Validation Service.
Koden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel på sidan</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Description " />
<meta name="keywords" content=" keyword,keywords,keywords" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
font-size: 100%;
font-family: Verdana, Arial,Sans-Serif;
}
/* FotoGalleri-Layout */
.bildbox {
height:300px;
width:300px;
border:1px solid;
background-color:#F06;
margin:0em 1em;
padding:0px;
float:left;
display:inline;
}
.bildbox_bild{
height:240px;
width:300px;
margin:0px;
padding:0px;
/*position:absolute;*/
background-color:#F6F;
}
.bildbox_text{
height:50px;
width:290px;
background-color:#AAA;
margin:0px;
padding:5px;
font-size:70%;
/*position:absolute;*/
}
/* Text-Layout */
p.citat {
font-size:110%;
}
.citatbox {
width:200px;
height:auto;
margin:0em 0em 2em 2em;
}
/* Menyn: */
/* Box/container som innehåller meny "knapparna"/boxarna". Ändrar utseendet bakom/runt knapparna osv. */
#menycontainer ul{
padding: 0.5em 0;
margin: 0;
list-style-type:none;
background-color:#3CF;
color: #FFF;
width:auto;
height: auto;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}
li {
display:inline;
}
/* Varje "knapp". Ändrar utseendet i knapparna osv. */
li a{
text-decoration:none;
background-color:#3CF;
color:#000;
padding: 0.4em 0.6em;
border-right: 2px solid #FFF;
margin:0 0.2em;
}
li a:hover{
background-color:#F99;
color:#000;
}
li a#current{
background: #939;
color:#FFF;
}
/* Layouten: */
.center {
margin: 0px auto;
width: 46.875em; /* 750 / 16 = 46.875. */
padding:0em;
height: auto;
/* 750 + 2 x 0 + 2 x 1 = 752px */
}
.top {
margin: 0px;
width: 46.875em; /* 750pix / 16 = 46.875em. */
/*width: auto;*/ /* 750 - (2 x 5 ( padding center) + 2 x 1 (border) ) */
height: 12.5em;
overflow:hidden;
}
.text{
border: 0.0625em solid; /* 1 / 16 = 0.0625em */
margin: 0px;
width: 46.75em; /* 750 - (2 x 5 ( padding center) + 2 x 1 (border) ) */
height: auto;
padding:0px;
/*overflow:hidden;*/
/* Gör runda hörn i Firefox och Safari, fungerar ej i IE. (CSS3) */
/*-moz-border-radius: 4px;*/
/*-webkit-border-radius: 4px;*/
}
.top_left{
border-top: 0.0625em solid; /* 1 / 16 = 0.0625em */
border-left: 0.0625em solid; /* 1 / 16 = 0.0625em */
border-right: 0.0625em solid;
margin-top: 6.25em;
width: 46.75em; /* 748 / 16=46.75em */
height: 6.1875em; /* 66 / 16 = 6,1875em */
position:absolute;
z-index:1;
}
.top_logga{
border: 0.0625em solid; /* 1 / 16 = 0.0625em */
background: #FFC;
width: 22.25em; /* 356 / 16 = 22.25em */
height: 11.5625em;
position:relative;
z-index:2;
margin: 0.3125em auto;
overflow:hidden;
}
.text_meny{
border-bottom: 0.0625em solid; /* 1 / 16 = 0.0625em */
width: auto;
height: 2.125em;
padding: 0px;
margin:0px;
overflow:hidden;
}
.text_text{
padding:1.5em; /* 1.5625em; 25 / 16 = 1.5625em */
background: #FFC;
width: auto;
height: auto;
overflow:auto;
}
.text_sidfot{
padding-top: 0.625em;
border-top: 0.0625em solid; /* 1 / 16 = 0.0625em */
width: auto;
height: 1.875em;
text-align:center;
font-size: 70%;
}
</style>
</head>
<body>
<!-- Centrerar sidan -->
<div class="center">
<!-- Boxen med "top delen" dvs. loggan samt de två osynliga boxarna -->
<div class="top">
<div class="top_left"></div>
<div class="top_logga">
Loggotype
</div>
</div>
<!-- Boxen med "text delen" dvs. menyn, innehållet(text_text) samt det sk. sidfot fältet. -->
<div class="text">
<!-- MENYN: -->
<div class="text_meny">
<div id="menycontainer">
<ul>
<li><a href="index.htm" id="current">Hem</a></li>
<li><a href="#">Meny2</a></li>
<li><a href="#">Meny3</a></li>
<li><a href="#">Meny4</a></li>
<li><a href="#">Meny5</a></li>
<li><a href="#">Meny6</a></li>
</ul>
</div>
</div>
<!-- Sidans text-inehåll. -->
<div class="text_text">
<h3>Välkommen till denna sidan!</h3>
<!--
<img src="bilder/rubicc.gif" align="right" alt="Kub" />
<div class="citatbox">
<p class="citat">" Ett citat<br /> med radbrytning<br /> i en div " </p>
</div>
-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique ante et lectus lacinia eget pulvinar quam lacinia. Suspendisse pharetra nisl eget justo commodo commodo. Nulla porta, orci et egestas sollicitudin, enim ipsum vulputate tortor, nec varius tortor metus eget lectus. In hac habitasse platea dictumst. Praesent mauris dolor, vulputate a suscipit vitae, gravida ac velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique ante et lectus lacinia eget pulvinar quam lacinia. Suspendisse pharetra nisl eget justo commodo commodo. Nulla porta, orci et egestas sollicitudin, enim ipsum vulputate tortor, nec varius tortor metus eget lectus. In hac habitasse platea dictumst. Praesent mauris dolor, vulputate a suscipit vitae, gravida ac velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique ante et lectus lacinia eget pulvinar quam lacinia. Suspendisse pharetra nisl eget justo commodo commodo. Nulla porta, orci et egestas sollicitudin, enim ipsum vulputate tortor, nec varius tortor metus eget lectus. In hac habitasse platea dictumst. Praesent mauris dolor, vulputate a suscipit vitae, gravida ac velit.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- Sidfoten -->
<div class="text_sidfot"> Sidan | mail | address | land </div>
</div>
</div>
</body>
</html>