Help with a CSS-P problem (floats etc.)

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Dariusz - 31 Oct 2003 15:01 GMT

I am trying out a fully CSS-P layout (first time with floats) and am having
problems with getting certain DIV's from displaying properly - or rather -
they are being completely ignored.

Below is a copy of the code I have written. It is arranged as follows:
Header
Left Middle Right
Footer

The "Left" and "Right" DIV's are fixed width and the "Middle" DIV takes the
remaining space in the middle. There is _NO_ problem with the displaying
of these DIV's positions and their respective content.

However, in the "Header" DIV, I have two further DIV's called "Date" and
"Menu_choice", and it is these DIV's that are not being rendered in terms
of positioning or style.

The text for these two DIV's do show in the "Header" DIV, but it shows them
(position approx top:0px left:0px) as the "Date" then underneath
"Menu_choice" without any text style or positioning ("Menu_choice" does
have some style given to it because of the "A:link" property).

If I move the "Date" and "Menu_choice" DIV declarations to be underneath
the "Header" declaration - the entire design breaks in all browsers.

Does anyone know how to fix the code so the two DIV's do get the styles
they are supposed to be getting? This problem has got me perplexed for
days.

Dariusz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<HEAD><TITLE>TEST</TITLE></HEAD>

<STYLE TYPE="text/css">

</STYLE>

<BODY BGCOLOR="FFFFFF">

<DIV ID="Container">

<DIV ID="Header">

<DIV ID="Date">

</DIV>
<DIV ID="Menu_choice">
<a class="val" href="welkom.shtml">Welkom</A>   <a
class="val" href="hosting.shtml">Hosting</A>   <a class="val"
href="domeninen.shtml">Domeinen</A>   <a class="val"
href="faq.shtml">FAQ</A>   <a class="val"
href="login.shtml">Login</A>   <a class="val"
href="contact.shtml">Contact</A>
</DIV>
</DIV>

<DIV ID="LEFT_RIGHT">

<DIV ID="Left">
<DIV ID="left-text">
<img src="img/package-starter.gif" width="240" height="149"
alt="" border="0"><BR>
<BR>
<img src="img/package-standaard.gif" width="240"
height="149" alt="" border="0"><BR>
<BR>
<img src="img/package-zakelijk.gif" width="240"
height="149" alt="" border="0"><BR>
<BR>
<img src="img/package-extreme.gif" width="240" height="149"
alt="" border="0"><BR>
</DIV>
</DIV>

<DIV ID="Right_news">
<DIV CLASS="Text">

</DIV>
</DIV>

</DIV>

<DIV ID="Middle">
<DIV CLASS="Text">

</DIV>
</DIV>

</DIV> 

<DIV ID="Footer">
Copyright 2002 / 2003
</DIV>

</BODY>
</HTML>

Reply to this Message

Lauri Raittila - 31 Oct 2003 16:09 GMT

In article Dariusz wrote:

> I am trying out a fully CSS-P layout (first time with floats) and am having
> problems with getting certain DIV's from displaying properly - or rather -
> they are being completely ignored.

> Below is a copy of the code I have written. It is arranged as follows:
> Header
> Left Middle Right
> Footer

Since your clueless use of position:absolute and position:relative
everywhere, I get footer that is behind first image. Get rid all of them
unless you really need one.

> However, in the "Header" DIV, I have two further DIV's called "Date" and
> "Menu_choice", and it is these DIV's that are not being rendered in terms
> of positioning or style.

Well, I see no reason using positioning here.

> The text for these two DIV's do show in the "Header" DIV, but it shows them
> (position approx top:0px left:0px) as the "Date" then underneath
[quoted text clipped - 9 lines]
>
> Dariusz

Hard to say without URL. I don't have your images, nor SSI. Looked
anyway, and noticed you hadn't bothered to chaec your CSS for errors:
#Date ( position:absolute; left:350px; z-index:3;
^^^^^^^^^^^^
You have copy pasted lot of stuff together, whitout really understanding
what you do? I see parts of tantek hack, and an empty comment that is
only needed if elements would be in reversed order etc.

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">

You use strict. That's good.

> <STYLE TYPE="text/css">
> <!--
> body { margin: 0; padding: 0; background: #fff; color:
> #000; }
> /*for Opera*/
> html>body { width:100%; }

Other part of Tantek hack (nice to opera rule), this also does nothing.

> DIV.Text { text-align:justify; margin-left:10px;
> margin-right:10px; color:#000000; font-size:0.9em; font-family:zapf
> chancery, sans-serif; }

http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

> /*** Setup the header, 3 columns and footer ***/
> #Container { margin:0px auto; padding:0px; voice-family:
> "\"}\""; voice-family:inherit; }

What is this hack trying to do? Currently it does nothing.

> #LEFT_RIGHT { padding:0px; }
>
> #Left { position:absolute; float:left; z-index:1;
> width:255px; padding:0; margin:0;
> background:url("img/Funhost_nl-left.gif"); background-repeat:no-repeat;
> background-color:rgb(255,255,255); }

Why do you position this absolutely? And then float it? Doesn't make
sence.

> #left-text { position:relative; left:10px; top:20px; z-index:2;
> padding-bottom:20px; margin-bottom:20px; }

Don't use relative positioning instead top and left margin. It doesn't
make sence 99% of times.

> #Date ( position:absolute; left:350px; z-index:3;

^^^^ shoudl be {

> font-size:10px; font-family:zapf chancery, sans-serif; color:#000000; }
> #Menu_choice { position:relative; top:50px; left:300px;
> z-index:3; font-size:1em; font-family:zapf chancery, sans-serif;
> color:#000000; }

Also not used, as selector doesnt make sence (whole thing since #Date is
that is)

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Reply to this Message

Dariusz - 31 Oct 2003 20:17 GMT

>> However, in the "Header" DIV, I have two further DIV's called "Date" and
>> "Menu_choice", and it is these DIV's that are not being rendered in terms
>> of positioning or style.
>
>Well, I see no reason using positioning here.

I do, because I wanted to position these two DIV's within the Header block.

>Hard to say without URL. I don't have your images, nor SSI. Looked
>anyway, and noticed you hadn't bothered to chaec your CSS for errors:
>#Date ( position:absolute; left:350px; z-index:3;
> ^^^^^^^^^^^^

Ah, I missed that one, thanks for that "(" instead of an {.

>> #LEFT_RIGHT { padding:0px; }
>>
[quoted text clipped - 5 lines]
>Why do you position this absolutely? And then float it? Doesn't make
>sence.

Again, didn't notice this one - I was amending my standard code for the
float layout and didn't think to take out the positioning statements.

>> #left-text { position:relative; left:10px; top:20px; z-index:2;
>> padding-bottom:20px; margin-bottom:20px; }
>
>Don't use relative positioning instead top and left margin. It doesn't
>make sence 99% of times.

In this case, taking out the positioning for this DIV breaks the design
idea and works in none of the browsers as I intend.

Anyway, with your extra "eyes" on my code, removing the redundant
positioning declarations in the Left and Right DIV's fixed the design and
all the elements now display as I intended to.

Thanks for your help.

Dariusz

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

Help with a CSS-P problem (floats etc.)