Disappearing container in IE

Question

Member #797727

16 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:

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>
--------------------------------------------------

html-css web-design

Edited 13 Years Ago by mike_2000_17 because: Fixed formatting

1 Contributor
2 Replies
111 Views
10 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by Member #797727

Dani AI

Generated 10 Months Ago

Older IE versions often “lose” content for two reasons: a CSS parsing error and floated children that aren’t contained. ’s follow-up shows the layout stopped failing once the stylesheet problems were fixed. For anyone landing here later, this is a compact checklist and a few small fixes to apply quickly.

Start by validating and simplifying the stylesheet. Run the CSS through the W3C validator and look for syntax problems (bad comments, missing units on sizes). A single parse error can make IE ignore subsequent rules. Confirm the page is served in standards mode (correct DOCTYPE).

If floats are involved (a left-hand list and a main content column, for example), make the float-containing parent actually enclose its children. Two safe, simple options:

Give the parent a clearing mechanism (a modern clearfix).
Or add overflow:auto (watch for unwanted scrollbars) or an IE “hasLayout” trigger like zoom:1 to the parent.

Quick examples to try (adapt names to your HTML):

/* clearfix (modern) */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* IE fallback */
.clearfix { zoom: 1; }

/* make an inline image wrap text */
.innehall img { float: left; margin: 0 10px 10px 0; }

/* simple containment alternative */
.visnings-container { overflow: auto; /* or: zoom:1 for old IE */ }

Notes and cautions: overflow:hidden will clip overflowing content; overflow:auto can add scrollbars. Use zoom:1 only for legacy IE fixes. For more on clearing floats see the clearfix patterns at CSS-Tricks and for float behavior and units see MDN’s float and units guides (float, values & units).

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.

Member #797727 · 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;
			}

Member #797727 · 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