Solved

CSS fails

Posted on 2013-01-28
9
123 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
Comment Utility
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
Comment Utility
OK - the height I get.

Please tell me more about the doctype.

Thank you for answering.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 1

Author Comment

by:jensjakobsen
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
All references to 100% height have been remarked. Page looks the same :(
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
OK - I have tried your latest advice, and it works.

Thank you for your patience.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now