Solved

CSS fails

Posted on 2013-01-28
9
128 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

730 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