Solved

CSS fails

Posted on 2013-01-28
9
126 Views
Last Modified: 2013-04-16
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
Comment
Question by:jensjakobsen
  • 4
  • 4
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38828717
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 38828739
OK - the height I get.

Please tell me more about the doctype.

Thank you for answering.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38828790
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 1

Author Comment

by:jensjakobsen
ID: 38828860
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38828910
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 38828943
All references to 100% height have been remarked. Page looks the same :(
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38831293
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 38838935
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 39085180
OK - I have tried your latest advice, and it works.

Thank you for your patience.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question