Disappearing container in IE

Question

egenart

13 Years Ago

Hello!
I've ran into a possible bug in Internet Explorer, in all versions below IE8.
When testing my CSS work all content between the head of the page and the footer disappeares and I havn't found a workaround solution in my litterature.
Anybody familiar with this bug?

In Safari and Firefox (and IE8) all works fine.

I'm grateful for any suggestions.....

URL: http://www.egenart.info/katalog

CSS:

--------------------------------------------------
body                {
            background-color: #c8bc93;
            margin-top: 0;
            }

p           {
            font-family: verdana, helvetica, sans-serif;
            font-size: 0.7em;
            font-style: normal;
            line-height: 1.5em;
            color: #422;
            }

h6          {
            font-family: verdana, helvetica, sans-serif;
            font-size: 0.5em;
            font-style: normal;
            line-height: 1.5em;
            text-align: right;
            color: #000;
            }

h1          {
            font-family: verdana, helvetica, sans-serif;
            font-size: 1.8em;
            font-weight: bold;
            font-style: normal;
            line-height: 0.8em;
            text-align: center;
            color: #257;
            }

h2          {
            font-family: verdana, helvetica, sans-serif;
            font-size: 1.2em;
            font-weight: bold;
            font-style: normal;
            line-height: 1em;
            text-align: left;
            color: #532;
            }

a:link      {
            color: #f53;
            text-decoration: none;
            }

a:hover     {
            color: #f05;
            text-decoration: none;
            }

a:active        {
            color: #f05;
            text-decoration: none;
            }

a:visited       {
            color: #f53;
            text-decoration: none;
            }

#container  {
            width: 800px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            padding: 0;
            }

#sidhuvud           {
            width: 800px;
            height: 117px;
            background: url(bilder/sidhuvud.gif) no-repeat;
            margin-top: 0px;
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
            margin-top: 0px;
            }

#menyrad            {
            width: 800px;
            height: 32px;
            background-color: #ffe;
            border-top: 4px #dc8 solid;
            border-bottom: 4px #dc8 solid;
            margin-top: 0px;
            margin-left: 0px;
            padding: 0px;
            }

#menyrad p  {
            margin-top: 8px;
            margin-left: 15px;
            }

#visningsfonster    {
            width: 800px;
            background: url(bilder/bglinje.gif);            
            margin-top: 0px;
            margin-bottom: 0px;
            padding: 0px;
            }

.namnlista          {
            width: 180px;
            margin-top: 0px;
            margin-left: 10px;
            padding: 5px;
            float: left;
            }

.innehall       {
            width: 570;
            //background-color: #9c3;
            margin-top: 0px;
            margin-left: 200px;
            margin-right: 0px;
            margin-bottom: 0px;
            padding: 5px;
            }

#sidfot     {
            width: 800px;
            height: 29px;
            background-color: #253;
            clear: both;
            }

#sidfot p       {
            margin-top: 0px;
            margin-left: 10px;
            padding: 5px;
            color: #fff;
            }
--------------------------------------------------

HTML:

--------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Konstn&auml;rskatalog 2010</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="katalog.css" type="text/css" />
</head>
<body>
<div id="container">

    <div id="sidhuvud">
    </div>

    <div id="menyrad">
<p>Kreat&ouml;rer A-&Ouml; | M&aring;lare | Tecknare | Grafiker | Skulpt&ouml;rer | Textilkonstn&auml;rer | Fotografer | Konsthantverkare, formgivare | Sl&ouml;jdare</p>
    </div>

    <div id="visningsfonster">

        <div class="namnlista">
        <p><b>Anders Nilsson<br/>
        Petter Wennberg</b></p><br/>
        </div>

        <div class="innehall">
        <p>Detta fonster ska visa text och alla bilder! Nu ska jag skriva lite mera och se hur det tar sig ut om det blir lite mera text, som tar upp rutan. Jag skulle vilja att texten strecker sig enda ut till hugerkanten!!!<br/><br/><br/><br/><br/><br/><br/></p>
        <img src="bilder/35.jpg" border="0" alt="konstnarer" />
        </div>

    </div>

    <div id="sidfot">
    <p>© Lars Berg Egenart 2010</p>
    </div>

</div>
</body>
</html>
--------------------------------------------------

css web-design

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

1 Contributor
2 Replies
95 Views
10 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by egenart

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

egenart · Answer 1 · 2010-08-20T18:26:35+00:00

Hello again!
Things have happened, while trying different solutions. Now I have succeeded in getting the disappeared text and image to appear on the screen. This means that the code I submitted before is obsolete.
My problem now is not IE related, so I'm probably doing something wrong.
The image in the <div class="innehall"> doesn't wrap around the image, only the text. This also makes the meny on the left to stop "in the air".
Any ideas on what I do wrong?

Here is the new CSS code:
--------------------------

body		{
			background-color: #c8bc93;
			margin-top: 0;
			}
			
p			{
			font-family: verdana, helvetica, sans-serif;
			font-size: 0.7em;
			font-style: normal;
			line-height: 1.5em;
			color: #422;
			}
			
h6			{
			font-family: verdana, helvetica, sans-serif;
			font-size: 0.5em;
			font-style: normal;
			line-height: 1.5em;
			text-align: right;
			color: #000;
			}
			
h1			{
			font-family: verdana, helvetica, sans-serif;
			font-size: 1.8em;
			font-weight: bold;
			font-style: normal;
			line-height: 0.8em;
			text-align: center;
			color: #257;
			}
			
h2			{
			font-family: verdana, helvetica, sans-serif;
			font-size: 1.2em;
			font-weight: bold;
			font-style: normal;
			line-height: 1em;
			text-align: left;
			color: #532;
			}
			
a:link		{
			color: #f53;
			text-decoration: none;
			}
				
a:hover		{
			color: #f05;
			text-decoration: none;
			}
				
a:active		{
			color: #f05;
			text-decoration: none;
			}
				
a:visited		{
			color: #f53;
			text-decoration: none;
			}
		
#container	{
			width: 800px;
			margin-top: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 0;
			}
			
#sidhuvud	{
			width: 800px;
			height: 117px;
			background: url(bilder/sidhuvud.gif) no-repeat;
			margin-top: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
			margin-top: 0px;
			}
			
#menyrad	{
			width: 800px;
			height: 32px;
			background-color: #ffe;
			border-top: 4px #dc8 solid;
			border-bottom: 4px #dc8 solid;
			margin-top: 0px;
			margin-left: 0px;
			padding: 0px;
			}
			
#menyrad p	{
			margin-top: 8px;
			margin-left: 15px;
			}
			
#visningsfonster	{
			width: 800px;
			background-color: #fff;
			/*background: url(bilder/bglinje.gif);*/		
			margin-top: 0px;
			margin-bottom: 0px;
			padding: 0px;
			}
			
.namnlista	{
			width: 170px;
			background-color: #eec;
			border-right: 4px #dc8 solid;
			border-left: 15px #eec solid;
			margin-top: 0px;
			margin-left: 0px;
			margin-right: 10px;
			padding: 0px;
			float: left;
			}
			
.namnlista p	{
			margin-top: 10px;
			}
			
.innehall		{
			width: 570;
			margin-top: 0px;
			margin-left: 200px;
			margin-right: 0px;
			padding: 5px;
			}
			
.innehall p	{
			margin-top: 10px;
			}
			
#sidfot		{
			width: 800px;
			height: 29px;
			background-color: #253;
			clear: both;
			}
			
#sidfot p		{
			margin-top: 0px;
			margin-left: 10px;
			padding: 5px;
			color: #fff;
			}

egenart · Answer 2 · 2010-08-20T19:35:05+00:00

Well folks!
Sometimes it's best to be left alone with your problems, having a chance to work things out on your own :-) I've solved my problems - and thank you for this forum where I can through out my ideas and better catch a reflective eye on what I'm doing...
Regards,
Lars