473,320 Members | 1,949 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

CSS seconds divs padding expands over the first one

Hey,
im new to CSS and just tried to make a small help page with a, well, "special" design.

I developed it and used IE to check. Well everything was working fine but in FF everything was just well flying around on the page.

I edited my code and well, its nearly fixed now for firefox but sth really strange is happening and i cant find the problem myself.

I cant really describe it.. There are 2 divs next to each other. The second one has a border. But the border isnt only around the second div, it expands to the first.

What..? Hehe I attached an image, probably shows my problem better than i can describe it.


Here some parts of the code

HTML
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <link href="style/help.css" rel="stylesheet" type="text/css" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Hilfeseite</title>
  7. </head>
  8. <body>
  9.     <div class="content">
  10.  
  11.  
  12.          <div class="top">
  13.              <div class="topMessage"><h1>Hilfeseite der Fehlerseite</h1></div>
  14.  
  15.             <ol class="toc">
  16.     <li><span>Filter</span> <a href="#filter">Hilfe 1</a></li>
  17.  
  18.         <li class="sub"><span>ID-Filter</span> <a href="#idfilter">Hilfe 1.1</a></li>
  19.         <li class="sub"><span>Queue-Filter</span> <a href="#queuefilter">Hilfe 1.2</a></li>
  20.         <li class="sub"><span>Kommando-Filter</span> <a href="#commandfilter">Hilfe 1.3</a></li>
  21.         <li class="sub"><span>Exception-Filter</span> <a href="#exceptionfilter">Hilfe 1.4</a></li>
  22.         <li class="sub"><span>Zeit-Filter</span> <a href="#timefilter">Hilfe 1.5</a></li>
  23.         <li class="sub"><span>Verarbeitet-Filter</span> <a href="#verarbeitetfilter">Hilfe 1.6</a></li>
  24.         <li class="sub"><span>Buttons</span> <a href="#buttons">Hilfe 1.7</a></li>
  25.         <li class="sub"><span>Detailansicht</span> <a href="#detailansicht">Hilfe 1.8</a></li>
  26.     <li><span>Fehleranzeige</span> <a href="#fehleranzeige">Hilfe 2</a></li>
  27.     <li><span>Conclusion</span> <a href="#">Page 4</a></li>
  28.     <li><span>Discussion</span> <a href="#">Page 5</a></li>
  29. </ol>
  30.  
  31.         </div> 
  32.  
  33.  
  34.  
  35.         <div class="helpEntry">
  36.             <div class="outerLabel">
  37.                 <a name="filter">Filter</a>
  38.                 <p>&#x25ba;</p>
  39.             </div>
  40.             <div class="helpEntryContent">
  41.             <h1>&Uuml;ber die Filter</h1>
  42.                 <img src="style/img/filter.PNG" alt="Filter&uuml;bersicht" />
  43.                 <p>
  44.                     Anhand der Filter kann man die angezeigten Fehler einschränken.<br/>
  45.                     Es stehen dazu 7 verschiedene Filter zur Auswahl die in den nachfolgenden Punkten beschrieben werden.<br/>
  46.                     Außerdem gibt es einige Buttons mit denen man bestimmte Funktionen aufrufen kann und eine Checkbox für die Anzeige der Fehler in einer Detailansicht
  47.                     ist auch verf&uuml;gbar.
  48.                 </p>
  49.             </div>
  50.         </div>
  51.  
  52.         <div class="helpEntry">
  53.             <div class="outerLabel">
  54.                 <a name="idfilter">ID-Filter</a>
  55.                 <p>&#x25ba;</p>
  56.             </div>
  57.             <div class="helpEntryContent">
  58.             <h1>Der ID-Filter</h1>
  59.             <img src="style/img/idfilter.PNG" alt="Bild des ID-Filters" />
  60.                 <p>
  61.                     Mit dem ID-Filter kann man nach der eindeutigen ID eines Fehler suchen.<br/> Somit ist letztendlich nur ein Eintrag davon betroffen.<br/>
  62.                     <b>Die ID eines Fehlers besteht nur aus Zahlen.</b>
  63.                 </p>
  64.             </div>
  65.         </div>
.... ( some other helpEntries which work perfectly )

Expand|Select|Wrap|Line Numbers
  1. </div>
  2. </body>
  3. </html>
--------------------------

CSS:

Expand|Select|Wrap|Line Numbers
  1. html, body {
  2.     font-family: 'Arial', sans-serif;
  3.     background-color: #DEDCDD;
  4.     padding:5px;
  5. }
  6.  
  7. ol.toc 
  8. {
  9.     width:50%;
  10.     border:1px solid black;
  11.     margin:auto;
  12.     padding:10px;
  13. }
  14.  
  15. ol.toc li {
  16.     clear:left;
  17.     border-bottom:dashed 1px #aaa;
  18.     height:1.05em;
  19.     margin-top:10px;
  20.     position:relative;
  21. }
  22. ol.toc a, ol.toc span {
  23.     background:#fff;
  24.     padding:0 3px 0 0;
  25.     float:left;
  26.     position:absolute;
  27.     text-decoration:none;
  28. }
  29. ol.toc a {
  30.     padding:0 0 0 3px;
  31.     right:0;
  32. }
  33.  
  34. ol.toc li.sub {
  35.     list-style:none;
  36.     margin:0.2em 0 0em 5%;
  37.     padding:0;
  38.     background:#fff;
  39.     width:95%;
  40. }
  41.  
  42. .top{
  43.     padding:0px 0px 5px 0px;
  44.     width:100%;
  45.     margin:0px;
  46.     float:left;
  47. }
  48.  
  49. .topMessage
  50. {
  51.     text-align:center;
  52.     margin:0px;
  53.     padding:6px;
  54. }
  55.  
  56. .content
  57. {
  58.     width:50%;
  59.     min-width:470px;
  60.     background-color: white;
  61.     margin:auto;
  62.     padding:auto;
  63. }
  64.  
  65.  
  66.  
  67. .helpEntry
  68. {
  69.     width:100%;
  70.     position:relative;
  71.     border:2px solid red;
  72.     margin:20px 0px 0px 0px;
  73.     padding-right:219px;
  74.     left: -220px;
  75. }
  76.  
  77.  
  78.  
  79. .outerLabel
  80. {
  81.     z-index:1;
  82.     position:relative;
  83. margin:0px;
  84. padding:0px;
  85. width:220px;
  86.     height:35px;
  87.     background-color:white;
  88.     float:left;
  89.     left:-1px;
  90.     border-left: 1px solid black;
  91.     border-top: 1px solid black;
  92.     border-bottom: 1px solid black;
  93. }
  94.  
  95. .outerLabel a
  96. {
  97.     position:absolute;
  98.     font-size: 24px;
  99.     left:5px;
  100.     top:5px;
  101. }
  102.  
  103. .outerLabel p
  104. {
  105.  
  106.     position:absolute;
  107.     font-size:20px;
  108.     top:5px;
  109.     right:0px;
  110. }
  111.  
  112.  
  113. .helpEntryContent
  114. {
  115.     position:relative;
  116.     z-index:0;
  117.     border: 1px solid black;
  118.  
  119.     left:219px;
  120.     margin:0px;
  121.     padding:0px;
  122.     width:100%; 
  123.  
  124. }
  125.  
  126. .helpEntryContent h1
  127. {
  128.     text-decoration:underline; 
  129. }
  130.  
  131. img {
  132.     max-width:100%;
  133.     display: block ; 
  134.     margin: 0 auto; 
  135. }

Hope somebody can help me, thanks :)
Jun 25 '13 #1
1 1560
Solved: .top had float:left;
Adding a clearing div or adding clear:both to .helpEntry fixed it.

Or just remove that float:left. Because its unnecessary lol.

Thought i did that before.
Jun 25 '13 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Aaron | last post by:
Hi, I'm trying to use style sheets instead of tables for layout, but I'm not sure on how to do something... I have a div (100% width) containing 3 other divs. Each needs to be lined up next to...
7
by: kaeli | last post by:
I've been trying to get away from using tables as a layout tool, but I've just come across what I consider to be a serious liability. If I specify a width (minimum, really) in a div, such as ...
3
by: Bob Graham | last post by:
This code: txRate.Text = Format(payRate, "C") (payRate is already succesfully set to a value such as 15D) takes about 3-4 seconds to run the first time, after that it's plenty fast. What...
28
by: ramu | last post by:
Hi all, I understand that some compilers pad some bytes to the aggregate data types in order to access the members of the aggregate data types(i.e. structure) fast. This depends on the...
5
by: Mike | last post by:
I am having a problem with padding. I have three boxes and I want them all to be the same width. In IE it looks like the outside of the DIV stays put and the padding is placed on the inside, so the...
9
by: SAL | last post by:
I have an ASP.NET 2.0 app that takes about 17 seconds to load on first startup but then is very fast after that. As I understand it from some posts in June, this is caused by the loading of the App...
3
by: James | last post by:
Hi, I have built a windows app that makes calls to a webservice. Both webservice and windows apps are built with .net 2.0. The problem is... when I run the client Windows app on the dev machine,...
4
by: beary | last post by:
Hi, Below is a small piece of html. I'm using FF 3. It's of two divs. Inside the first Div are three divs: div A, div B and div C. Everything does what I need except that div B appears below div A...
0
gauchomatt
by: gauchomatt | last post by:
I have a liquid site which expands perfectly when the browser window is larger than the actual content. However, when I decrease the browser window size to a point that it's smaller horizontally than...
4
damir
by: damir | last post by:
http://cl.ly/0U353b321v0Z2I1G3Q0v/scheme.png I have a situation as drawn above. - Container contains undefined number of boxes. - #container expands to entire browser width and can contain...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.