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
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <link href="style/help.css" rel="stylesheet" type="text/css" />
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Hilfeseite</title>
- </head>
- <body>
- <div class="content">
- <div class="top">
- <div class="topMessage"><h1>Hilfeseite der Fehlerseite</h1></div>
- <ol class="toc">
- <li><span>Filter</span> <a href="#filter">Hilfe 1</a></li>
- <li class="sub"><span>ID-Filter</span> <a href="#idfilter">Hilfe 1.1</a></li>
- <li class="sub"><span>Queue-Filter</span> <a href="#queuefilter">Hilfe 1.2</a></li>
- <li class="sub"><span>Kommando-Filter</span> <a href="#commandfilter">Hilfe 1.3</a></li>
- <li class="sub"><span>Exception-Filter</span> <a href="#exceptionfilter">Hilfe 1.4</a></li>
- <li class="sub"><span>Zeit-Filter</span> <a href="#timefilter">Hilfe 1.5</a></li>
- <li class="sub"><span>Verarbeitet-Filter</span> <a href="#verarbeitetfilter">Hilfe 1.6</a></li>
- <li class="sub"><span>Buttons</span> <a href="#buttons">Hilfe 1.7</a></li>
- <li class="sub"><span>Detailansicht</span> <a href="#detailansicht">Hilfe 1.8</a></li>
- <li><span>Fehleranzeige</span> <a href="#fehleranzeige">Hilfe 2</a></li>
- <li><span>Conclusion</span> <a href="#">Page 4</a></li>
- <li><span>Discussion</span> <a href="#">Page 5</a></li>
- </ol>
- </div>
- <div class="helpEntry">
- <div class="outerLabel">
- <a name="filter">Filter</a>
- <p>►</p>
- </div>
- <div class="helpEntryContent">
- <h1>Über die Filter</h1>
- <img src="style/img/filter.PNG" alt="Filterübersicht" />
- <p>
- Anhand der Filter kann man die angezeigten Fehler einschränken.<br/>
- Es stehen dazu 7 verschiedene Filter zur Auswahl die in den nachfolgenden Punkten beschrieben werden.<br/>
- 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
- ist auch verfügbar.
- </p>
- </div>
- </div>
- <div class="helpEntry">
- <div class="outerLabel">
- <a name="idfilter">ID-Filter</a>
- <p>►</p>
- </div>
- <div class="helpEntryContent">
- <h1>Der ID-Filter</h1>
- <img src="style/img/idfilter.PNG" alt="Bild des ID-Filters" />
- <p>
- Mit dem ID-Filter kann man nach der eindeutigen ID eines Fehler suchen.<br/> Somit ist letztendlich nur ein Eintrag davon betroffen.<br/>
- <b>Die ID eines Fehlers besteht nur aus Zahlen.</b>
- </p>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- </div>
- </body>
- </html>
CSS:
Expand|Select|Wrap|Line Numbers
- html, body {
- font-family: 'Arial', sans-serif;
- background-color: #DEDCDD;
- padding:5px;
- }
- ol.toc
- {
- width:50%;
- border:1px solid black;
- margin:auto;
- padding:10px;
- }
- ol.toc li {
- clear:left;
- border-bottom:dashed 1px #aaa;
- height:1.05em;
- margin-top:10px;
- position:relative;
- }
- ol.toc a, ol.toc span {
- background:#fff;
- padding:0 3px 0 0;
- float:left;
- position:absolute;
- text-decoration:none;
- }
- ol.toc a {
- padding:0 0 0 3px;
- right:0;
- }
- ol.toc li.sub {
- list-style:none;
- margin:0.2em 0 0em 5%;
- padding:0;
- background:#fff;
- width:95%;
- }
- .top{
- padding:0px 0px 5px 0px;
- width:100%;
- margin:0px;
- float:left;
- }
- .topMessage
- {
- text-align:center;
- margin:0px;
- padding:6px;
- }
- .content
- {
- width:50%;
- min-width:470px;
- background-color: white;
- margin:auto;
- padding:auto;
- }
- .helpEntry
- {
- width:100%;
- position:relative;
- border:2px solid red;
- margin:20px 0px 0px 0px;
- padding-right:219px;
- left: -220px;
- }
- .outerLabel
- {
- z-index:1;
- position:relative;
- margin:0px;
- padding:0px;
- width:220px;
- height:35px;
- background-color:white;
- float:left;
- left:-1px;
- border-left: 1px solid black;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
- }
- .outerLabel a
- {
- position:absolute;
- font-size: 24px;
- left:5px;
- top:5px;
- }
- .outerLabel p
- {
- position:absolute;
- font-size:20px;
- top:5px;
- right:0px;
- }
- .helpEntryContent
- {
- position:relative;
- z-index:0;
- border: 1px solid black;
- left:219px;
- margin:0px;
- padding:0px;
- width:100%;
- }
- .helpEntryContent h1
- {
- text-decoration:underline;
- }
- img {
- max-width:100%;
- display: block ;
- margin: 0 auto;
- }
Hope somebody can help me, thanks :)