Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

CSS fails

There is something wrong with this CSS - once you scroll down you can see that the page content stops being white.

Any help would be appreciated a lot.

Take a look at: http://www.bs-el.dk/referencer.html

Below I have provided the HTML and the CSS:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Borop & Sommer Electric</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">

<!--Wellrounded MAIN-->
<div id="top">
<div class="headerLogo"><img src="images/logo.gif" border="0" width="160" height="80" /></div><!--EOF headerLogo-->
<div class="header">Erhvervslivets installatør af belysning og netværk</div><!--EOF header-->
</div><!--EOF top-->
<!--Wellrounded MAIN end-->

<div id="topInfo">
<div class="topInfo">
Borop & Sommer Electric I/S, Adresse: Capellas Allé 6, 2770 Kastrup, Telefon: 32 51 82 82, Fax: 32 51 81 83, Mail: info@bs-el.dk
</div><!--EOF topInfo-->
</div><!--EOF topInfo-->


<!--Wellrounded TOC-->
<div id="toc">
<div class="toc"><a class="S" href="index.html">Forside</a></div>
<div class="toc"><a class="S" href="ydelser.html">Ydelser</a></div>
<div class="toc"><a class="S" href="referencer.html">Referencer</a></div>
<div class="toc"><a class="S" href="leverandoer.html">Leverandører</a></div>
<div class="toc"><a class="S" href="galleri.html">Galleri</a></div>
<div class="toc"><a class="S" href="kontakt.html">Kontakt</a></div>
</div><!--EOF toc-->
<!--Wellrounded TOC end-->

<!--Wellrounded MAIN-->
<div id="main">
<div class="mainHeader">Referencer, der sætter en solid streg under kvaliteten</div><!--EOF mainHeader-->
<div class="main">
<p>Her er et udvalg af vores referencer på de forskellige områder, hvor vi leverer installationer af belysning og netværk. Du er velkommen til at få flere.</p>
  <ul>
<li> FDM Test og Bilsyn - Etablering samt renovering af 25 stk. test og synshaller. </li>
<li> FORM3 A/S</li>
<li> Blend Stockholm</li>
<li> B-Young Rødovre Centrum</li>
<li> B-Young Ballerup Storcenter</li>
<li> B-Young Bryggen Vejle</li>
<li> B-Young Metropol Hjørring</li>
<li> Fransa Hillerød</li>
<li> Fransa Hundige</li>
<li> Fransa Lyngby</li>
<li> Fransa Glostrup</li>
<li> Fransa Herlev</li>
<li> Fransa Århus</li>
<li> SAND Østergade</li>
<li> SAND Kbh. Luftehavn</li>
<li> SAND Illum</li>
<li> SAND Lyngby</li>
<li> Soaked In Luxury Spinderiet</li> 
<li> Soaked In Luxury Toves Galleri</li> 
<li> Par nr. 1 A/S.:</li>
<li> Isay Fisketorvet</li>
<li> Danza Kbh. Lufthavn</li>
<li> Hound Fisketorvet</li>
<li> baukreativ AG Tyskland.:</li>
<li> Mango Fisketorvet</li>
<li> Flos Scandinavia A/S.:</li>
<li> Montana mobile København</li>
<li> BIK BOK Jønkøbing</li>
<li> BIK BOK Stockholm</li>
<li> BIK BOK Østergade</li>
<li> Flos Show Room</li>
<li> Pieces Amagercenteret</li>
<li> Pieces Fisketorvet</li>
<li> Pieces Herning</li>
<li> Scala Design</li>
<li> Butik Abelone Holte</li>
<li> Designer ferielejlighed Færøske Bank</li>
<li> KABS Gentofte</li>
<li> Show Room </li>
<li> NeoNor A/S.:</li>
<li> AMK Cloating Rødovre Centrum</li>
<li> A/B Vejlegårdsparken</li>
<li> Berendsen Textil Service A/S</li>
<li> Bolig Selskabet Strandparken</li>
<li> Café´Centralhjørnet  I/S</li>
<li> Dragør Bådeværft ApS</li>
<li> Dragør Museum</li>
<li> Eiler Thomsen Ejendomme</li>
<li> Ejerforeningen Havnegade 43-47</li>
<li> Ejerforeningen Scoutgården</li>
<li> Ejerforeninger Lodsgården</li>
<li> Harevænget daginstitution  </li>
<li> HOME Amager</li>
<li> Hovedstadens Tag entreprise A/S</li>
<li> John Fabian Trading ApS</li>
<li> Jack and Jonens København 15 butikker</li>
<li> Jette Riis sko</li>
<li> Jønsson Grafisk A/S</li>
<li> København Lufthavn Indkøbsforening</li> 
<li> Malerfirmaet Jørgen Varup</li>
<li> MJH-Entreprise A/S</li>
<li> Restaurant Noma</li>
<li> Rødtjørnen daginstitution </li>
<li> Stielund & Tækken ApS</li>
<li> Wiedergården Plejehjem </li>
  </ul>
  </div><!--EOF class.Main-->
</div><!--EOF id.Main-->
<!--Wellrounded MAIN end-->
</div><!--EOF content-->
</div><!--EOF container-->
</body>
</html>

Open in new window


CSS:
A.S{color : #020173;text-decoration: none}
A:link.S{color : #020173;text-decoration: none}
A:visited.S{color : #020173;text-decoration: none}
A:active.S{color : #fa0000;text-decoration: none}
A:hover.S {color : #fa0000;Text-Decoration:none}

* {
padding: 0px;
margin: 0px;
}
html { height: 100%; }
body {
font: x-small verdana;
color: #000;
height: 100%;
min-height: 100%;  /* for firefox og opera */
background-color:#020173;
/*background-image:url(images/template/line.gif);
background-repeat:repeat-x;*/
}
#container {
position: relative;
height: 100%;
min-height: 100%;  /* for firefox og opera */
width: 800px;
margin-right: auto;
margin-left: auto;
/*border-left: solid 1px #BBBEC9;
border-right: solid 1px #BBBEC9;*/
}
#header { /*Header er blot et lag OVENPÅ container - bemærk dette i content-tag når du placererer DIV elementer*/
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
background-color:#FF0000;
border-bottom:solid 5px #020173;
height: 50px;
color: #000000;
}

.headerLogo {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #020173;
float:left;
}

.header {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #020173;
position:relative;
left: 40px;
padding-top:30px;
width:600px;
}

.headerLogoRight {
po
}

#content{ /*For at få indhold vist SKAL TOP værdien være højere end HEADER's HEIGHT værdi*/
z-index: 1;
position: relative;
top: 0px;
left: 0px;
height: 100%;
min-height: 100%;  /* for firefox and opera */
width: 800px;
background-color: #ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#top {
z-index:2;
float:left;
position:relative;
left:10px;
top: 10px;
width: 780px;/* -- edit width here! -- */
padding: 0;
margin: 0;
/*border: solid 1px #000000;*/
 }

#topInfo {
z-index:2;
float:left;
position:relative;
left:10px;
top: 10px;
width: 780px;/* -- edit width here! -- */
padding: 0;
margin-top: 10px;
background-color:#C1D9E5;
height:25px;
border-top: solid 5px #020173;
/*border: solid 1px #000000;*/
 }

.topInfo {
padding-top:5px;
padding-left:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
text-align:center;
}

#toc {
z-index:2;
float:left;
position:relative;
left:10px;
top: 20px;
width: 160px;/* -- edit width here! -- */
padding: 0;
margin: 0;
/*border: solid 1px #000000;*/
 }

.toc {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	color: #020173;
	text-decoration: none;
	background-color: #FFFFFF;
	text-align: left;
	display: block;
	width: 150px;
	padding-top: 13px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #020173;
	border-left-color: #000000;
}


#main {
z-index:2;
float:left;
position:relative;
left:20px;
top: 20px;
width: 608px;/* -- edit width here! -- */
padding: 0;
margin: 0;
/*border: solid 1px #000000;*/
 }
 
 .main {
 padding-top:15px;
 padding-left:10px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 color:#000000;
 }
 
 .mainHeader {
 padding-top:15px;
 padding-left:10px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:24px;
 color:#000000;
 }
 
 .links {
	text-decoration: none; 
 }
 
 .picture {
 border: solid 1px #a0a0a0;
 padding: 5px;
 background-color: #C1D9E5;
 }

Open in new window

0
jensjakobsen
Asked:
jensjakobsen
  • 4
  • 4
1 Solution
 
COBOLdinosaurCommented:
Get rid of height:100% and let the divs figure out their height.  Then go to a strict doctype so you don't render in quirksmode.

Cd&
0
 
jensjakobsenAuthor Commented:
OK - the height I get.

Please tell me more about the doctype.

Thank you for answering.
0
 
COBOLdinosaurCommented:
If you want to work to the old XHTML standard then you should use the strict doctype to reduce cross-browser differences:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
      <title></title>
      <meta http-equiv="content-type"
            content="text/html;charset=utf-8" />

Personally I prefer to use HTML5 to give better forward compatibility:

<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />
   

Cd&
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jensjakobsenAuthor Commented:
Sorry - the advice about the doc type seems odd

And even more odd that the charset should be related to that specific error.

I tested all - to make sure no stones are left unturned. And now it looks even worse - most of the page is now dark blue :(
0
 
COBOLdinosaurCommented:
The charset was just the one I use.  You need the iso-8859-1 for the characters you need to use.  The doctype makes a difference because it specifies for the browser what rules to use for rendering.

All I see is the original link which still has height 100% all over the place.  If I remember correctly Height 100% in XHTML gets interpreted as 100% of the viewport in some browsers and 100% of the initial length of the page in others, and in older browsers it is infinity.

Cd&
0
 
jensjakobsenAuthor Commented:
All references to 100% height have been remarked. Page looks the same :(
0
 
COBOLdinosaurCommented:
container is still 100% and that is the element that is being overflowed.  when it was rendered it had no content, so 100% was equal to the height of the viewport.

Cd&
0
 
Chris StanyonCommented:
Remove min-height and height from #container and #content and add overflow:hidden to #content:

#content {
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    overflow: hidden;
}
0
 
jensjakobsenAuthor Commented:
OK - I have tried your latest advice, and it works.

Thank you for your patience.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now