Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS fails

Posted on 2013-01-28
9
Medium Priority
?
135 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: 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 44

Accepted Solution

by:
Chris Stanyon earned 1500 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

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.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

604 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