14 replies [Last post]
moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

I've worked on a change of lay-out of my professional website all evening and it's starting to get blurry for me right now. The link is: http://www.denkwatjewilt.nl

My problem is that the positioning of two divs (#Navleft and #Content) is perfect in Internet Explorer but in Firefox it is all wrecked...

I've looked and looked but I can't solve my problem. I'm sure it is very easy to detect, but I need someone with a clear and new eye to look at the stylesheet, please...

Goal: I want the Navleft and the Content to be under the menubar (javascript) and I want the Navleft (of course) to be positioned left within the container (which is centered) and the Content to be on the right of the Navleft. In IE it is clear how my goal looks like. In FF the Content is at the same spot as the Navleft.

This is the part of the stylesheet considering the two divs:

#Header
{
align:left;
margin:0;
padding: 0;
border:0;
}

#Navup
{
margin-top:0px;
}

#Navleft
{
float:left;
width:240px;
margin:10px 0 0 0px;
padding: 10px;
padding-left:0px;
background-color: transparent;
border: 0;
}

#Content
{
align:right;
border:1px solid #339900;
background-color:#FFFFFF;
width: 525px;
margin:20px 0 0 270px
padding-left:0px;
padding: 10px;
}

this is the HTML:

Denk wat je wilt, therapeutische trainingen



Denk wat je wilt,
doe wat je droomt...

Therapeutische trainingen en workshops voor particulieren en bedrijven door psychologen Monique Samsen en Gijs Jansen (auteur van het onlangs bij uitgeverij Nieuwezijds verschenen zelfhulpboek: "Denk wat je wilt, doe wat je droomt", en het nieuw verschenen boek: "Achter de wolken, daar ben jij" klik op de boeken voor meer informatie).

Boeken door Gijs Jansen

    

waar, wanneer

Trainingen voor particulieren vinden plaats in Nijmegen (universiteit) op donderdagavonden tussen 19:30u. en 21:30u.

Bij voldoende animo kan er ook een training op vrijdagavond (zelfde tijd) georganiseerd worden. Geef dit dan duidelijk aan.

De eerstvolgende training start op: 29-03-2007 er is nog plaats in de groep, maar reageer snel!

<\/a>");
// -->

Doel van de training en workshop:

De training voor particulieren heeft tot doel om mensen te leren hoe ze boven de negatieve invloed van hun verstand uit kunnen stijgen. Op basis van de nieuwste technieken binnen de psychologie wordt er structureel geoefend om de negatieve invloed van gedachten en gevoelens te verkleinen. Ook wordt de nadruk gelegd op het ervaren van het moment, en hoe het voelt om los van je gedachten in het heden te staan. Op deze manier wordt duidelijk wie de persoon is die achter al die gedachten schuil gaat, en wat hij of zij werkelijk kan doen om een waardevol en gelukkig leven te leiden.

In de workshop voor bedrijven zal de nadruk meer liggen op de preventie van bijvoorbeeld werkstress. Vragen die aan bod zullen komen zijn onder andere: "Wat is de beleving van de werknemer in de werksituatie?" en "Welke verbale regels leiden tot werkstress?" Duidelijk zal worden hoe de werknemer op zijn eigen en waardevolle manier zal kunnen werken. Daarnaast zullen er in de toekomst ook workshops gehouden worden over arbeids reïntegratie.

NIEUWS!

17/03/2007

Naast de reguliere training voor particulieren, biedt Denk Wat Je Wilt nu ook de mogelijkheid om deel te nemen aan een zeer exclusieve twee-daagse workshop: "Terug in het nu" een weekend lang ongebonden voelen en ervaren op basis van mindfulness!

In een prachtig hotel in een bosrijke omgeving in Nijmegen, kunt u nu kennismaken met het uit Amerika overgevlogen en aan populariteit winnende Minfulness, tijdens een tweedaagse workshop onder leiding van psychologen drs. G. Jansen en drs. G.M. Samsen. Tussen de workshop door overnacht u in een luxe kamer, geniet u een vier-gangendiner, kunt u de in de workshop opgedane kennis meteen in praktijk brengen door in het nu te genieten in het Thermenlandschap en staat er 's ochtends een heerlijk ontbijtdiner klaar. Meer informatie over de workshop Terug in het nu.

Meer nieuws...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

> My problem is that the

> My problem is that the positioning of two divs (#Navleft and #Content) is perfect
> in Internet Explorer but in Firefox it is all wrecked...

Yes of course it is because your DTD puts IE into it's old rendering mode where it calculated sizes for screen boxes wrongly. You need a full doctype with a url in it. It should be strict, not transitional, as well.

If you'd read the sticky messages posted at the top of all the forum message lists, which you are asked to read before posting, you'd already know this.

Any time IE shows it differently than Firefox, then you can be about 95% sure that it is IE that is lying to you, not FF. That's why you should never use IE as a development or test browser. It will lie to you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

Thanks for your reply! I

Thanks for your reply!

I already knew that I should rely on FF, but still then I don't know what's going wrong in the stylesheet... I looked at it again, and it didn't appear to me.. sometimes it happens, I've been so hard looking and looking that I just can't see the mistakes anymore...

What do you exactly mean by a full doctype, strict and transitional? I'm dutch so my English on computer-talking is a bit..eh..off Smile Do you mean that I have to show the complete stylesheet?

in that case:
body
{
text-align: center;
}

#container
{
background-color:transparent;
font-family:verdana;
font-size:10px;
line-height: 140%;
text-align: left;
width:800px;
margin-left: -400px;
left: 50%;
position: absolute;
}

p
{
font-family:verdana;
font-size:12px;
color: #000000;
line-height: 140%;

}

h3
{
border-bottom:2px dashed #339900;
font-family:verdana;
font-size:14px;
color: #000000;
line-height: 140%;
}

h2
{
font-weight:600;
color: #228400;
font-size:10px;
line-height: 80%;
}

a
{
font-size:12px;
text-decoration:none;
font-weight:600;
font-family:verdana;
}

b
{
font-size:12px;
font-weight:600;
text-decoration:none;
font-family:verdana;
color:#000000;
}

.link1
{
color:#228400;
visited:#228400;
hover:#FFCC33;
}

.link2
{
color:#FFFFFF;
visited:color:#FFFFFF;
hover:color:#FFFFFF;
font-size:15px;
line-height: 140%;
}

.link3
{

color:#FFCC33;
visited:color:#FFCC33;
hover:color:#FFFFFF;
font-size:15px;
line-height: 140%;
}

.button
{
background:#228400;
border-style:solid;
border-width:0;
font-size:12pt;
color:#FFFFFF;
}

.tekst
{
margin: 5px;
font-family:verdana;
font-size:12px;
color: #000000;
line-height: 140%;
}

form
{
font-family:verdana;
font-size:12px;
color: #000000;
line-height: 140%;
}

table
{
font-family:verdana;
font-size:10px;
color: #000000;
}

ul
{
margin: 40px;
font-family:verdana;
font-size:12px;
color: #000000;
line-height: 140%;
}

h4
{
font-family:verdana;
font-size:12px;
color: #339900;
line-height: 120%;
}

hr
{
border: 0;
color:#339900;
background-color:#339900;
width:200px;
height:1px;
align:center;
}

.block
{
margin:0px 0px 20px 0px;
padding: 10px;
background: #FFF;
border: 1px solid #339900;
}

.block h3
{
background: #CC9900;
color: #FFFFFF;
margin: -4px -4px 4px -4px;
padding: 4px;
border-bottom: 1px solid #999;
font-size: 11px;
text-transform: uppercase;
}

.block P
{
margin: 0px;
}

#Header
{
align:left;
margin:0;
padding: 0;
border:0;
}

#Navup
{
margin-top:0px;
}

#Navleft
{
float:left;
width:240px;
margin:10px 0 0 0px;
padding: 10px;
padding-left:0px;
background-color: transparent;
border: 0;
}

#Content
{
align:right;
border:1px solid #339900;
background-color:#FFFFFF;
width: 525px;
margin:20px 0 0 270px
padding-left:0px;
padding: 10px;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

moniquesamsen wrote: What do

moniquesamsen wrote:

What do you exactly mean by a full doctype, strict and transitional?

"How to" messages for this information are posted on this message forum. Take a look. Can't help you with your language problems I'm afraid, though I am definitely certain that your English is already much better than my Dutch!

But knowing how to do a correct DTD declaration is an essential skill that you must learn before going much further or you will continue to have these troubles.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

after you correct your

after you correct your doctype (see here), change the centering method as follows:

#container
{
background-color:transparent;
font-family:verdana;
font-size:10px;
line-height: 140%;
text-align: left;
width:800px;
margin-left: -400px;
left: 50%;
position: absolute;
}


should become:

#container
{
background-color:transparent;
font-family:verdana;
font-size:10px;
line-height: 140%;
text-align: left;
width:800px;
margin: 0 auto;
}

and there's a problem with this:

#Content { align:right; <-- should be float - not align border:1px solid #339900; background-color:#FFFFFF; width: 525px; margin:20px 0 0 270px padding-left:0px; padding: 10px; }

that should get you started.

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

I got the doctype changed

I got the doctype changed and after altering the position of the #Content from 'align' into 'float' it is working fine! (I had to alter the top-margins of the two divs also).

The suggestion of changing the settings for the #container did mess up everything, so I kept away from that. I have used these same settings for another website and it always works fine.
Nevertheless thanks for the tips! Imagine it was that simple, just changing the align into float! But I was too blind to see it...

I still have only one problem and that is that after altering the doctype, in Firefox the menubar isn't showing anymore... it is javascript.. it could be that this is only on my pc, do you guys see it? http://www.denkwatjewilt.nl (again the link)
I have never stumbled across this problem..

the doctype I'm using is:
because of the xhtml, but inserting the html-variant doesn't do the trick either. I'm not even sure if this has something to do with it...

I'm sorry if this is too little information, but I have no-one else to ask, I have to find out things on my own and hope to find a little bit of help here Smile I don't know what more I have to show (HTML is in the first post, that is still the same, apart from the doctype) I want to show the .js files, but I don't know if there is the problem, since the menubar disappeared after altering the doctype, I'm sensing it is because of that..

Help! Smile

Thanks a lot so much in advance!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

when you tried the alternate

when you tried the alternate centering method did you remove the absolute positioning? The AP essentially takes your entire page out of the document flow.

The use of javascript driven menus is not a good thing for this very reason. Anyone visiting that doesn't have js installed or has it turned off can not navigate your site. Javascript can be used to add behavior to the menu, like dropdown submenus, but the top most levels really need to be anchors in the html. As to why it's not showing, I'm afraid I don't know.

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

yes, I did remove the

yes, I did remove the absolute positioning, I merely copied/paste the piece of css that was typed here as an alternative. What happened was that the whole container ligned up at the left, and the several divs appeared under eachother (instead of postioning next to eachother)..

I also don't know why I have to alternate the positioning of the container-div, as there is no problem with that...why did you suggest that? Is it a better way of centering the container?
This piece of css about the container-div was made for me by a friend who does this (designing) for a living, so I always thought that it was well-done.. (in the past I didn't know how to center the container, and he just made that piece of css for me, because it would be easier and less time-consuming for him to write it, than to explain the whole thing to me so I could figure it out myself... looking back, it would've been better to figure it out myself, since I still don't know the essentials of it.. I do this for a hobby, the website I'm making is for my professional psychologist practice, and I thought it would be nicer to make it myself than to let some-one else do it for us, since that can cost up to over 5000 euros - and I don't have that money Smile )

About the Javascript: I don't know anyone who had turned it off, so I don't think that would be a problem... I searched here for a CSS based drop-down menu and boy, I have to dig into that for like five evenings before I have figured it all out..it is not compatible for IE really well, and I saw some tricks to make it compatible, but actually, it's all algebra for me... maybe in the future when I have time, I'll figure it out... for now, I'd really like the javascript to be running on my site...

Anyhow: thanks for your reply!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There are good and

There are good and compelling reasons not to use the absolute position centering method. The important one being that should anyone view your page in a viewport smaller than the set width, would lose half the overflow on the left. It is unscrollable: simply lost.

The method Wolfie suggested is pretty much best practice. Any space in the viewport beyond the container width will be split to either side.

As to the javascript:

It is best practice to be sure the bare html is fully functional. Javascript is added as an enhancement whose disablement should not disable the page. From a legal standpoint, the EC has strong (well, stronger than the US's) accessibility laws, and Nederland has its own that are even more strict. A site that is not functional without javascript enabled may violate your home country's laws.

As a psychologist, I assume you're aware of the special needs of the handicapped. Screen readers cannot respond to scripted dynamics. Nor can Braille pads. Consider the motility handicapped who must use a plain text browser. He cannot tab through scripted menus.

Think on how an inaccessible web site reflects on your professional image.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

Ehm, I don't know what laws

Ehm, I don't know what laws have to do with my website? You mean I can get a fine for this???? Because the way it is now, in Firefox, the menubar isn't showing, so it isn't functional??? My god, I never knew that (and actually, I find that a bit...exaggerated...are you sure that this is true??)

Then: I know that you have your own ideas about not having a javascript menubar on my site, but that won't get me helped Smile (I also don't know why you bring up the blinds or otherwise handicapped, since I'm not specialized in helping the blinds or anything like that, so as a psychologist I don't know anything about that... Wink )

I think that mentioning that is beyond my question... besides, our website is not the only way to contact us, it's merely a digital folder, as we also have paper folders... I realy don't know what this has to do with my question of the javascript bar not showing..

Maybe I'm on the wrong forum, maybe it's not a css-question, maybe people who are experienced in the implementation of javascript are more equiped to answer this one.
Sorry for bothering Smile and of course: thanks for answering

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

As to legality. Section 508

As to legality.

Section 508 in the USA, various Disability Discrimination Acts in all EU countries, Canada, Australia, New Zealand and probably many other countries. Has anyone been taken to court?

I believe someone is currently pursuing a large online retailer in the USA. In the UK, the RNIB (the main campaigning group for the blind) has been pursuing many organisations.

But, why shouldn't you help the blind? Are you saying you don't care? I find that kind of response distasteful. I shall be teaching a delightful young girl later this year who cannot read anything under 36pt high, and even that is a struggle because she has to be within an inch or two of the screen to see that. She uses a screen reader for the Internet. A few minutes with her would tell you how frustrated she is at meeting the wall of indiference that you seem to wish to perpetuate.

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

Dear ClevaTreva,

Dear ClevaTreva,

I think you are reacting out of too much emotion, without properly reading my post?
You are so jumping to conclusions to suggest I don't care to help the blind. I think you are great helping that little girl, but in my profession you'd better specialise yourself and I'm not specialised to help the blind or otherwise disabled with their psychologic problems.

That's why my website is not especially for the blind or disabled. If I could I would implement a completely HTML and CSS based dropdownmenu, but I can't. I'm still searching for one simple enough for me to understand, and I guess I have found one on htmldogs.com, but I'm struggling with the lay-out of it, so be patient.

I can't believe how you make the association from me asking why the javascript doesn't seem to work on my website to blaming me for being discriminating!

And I can't believe I have to explain this on a forum about css, but to settle things straigt I am, I don't like to be called distasteful either, but that's pretty normal also I think. I truly hope this is not the way you are used to greet new people on this forum, because that would be even discriminating as to not wanting to help the blind (and as far as I know, I never said I wouldn't..I just can't) but that you just misread everything I wrote and made a mistake.. (I can't explain it any other way...)

I'm realy surprised by your reply...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I apologise if you took

Hi

I apologise if you took exeption to my comments.

But, whether you perceive you have an audience of visually impaired persons, it cannot hurt to take their needs into account.

I get a little (!) upset when the tools and methods exist to do this but are not used.

So, if the spirit of reconcilliation, here's a quick demo css only menu to look at:

siteunderconstruction.net/designs/css3drops/css3drops.html

moniquesamsen
moniquesamsen's picture
Offline
newbie
Nijmegen, the Netherlands
Last seen: 14 years 36 weeks ago
Nijmegen, the Netherlands
Timezone: GMT+2
Joined: 2007-03-25
Posts: 7
Points: 0

thanks so much! It looks

thanks so much!

It looks much like the one I stumbled on across (Suckerfish menu), but now I have an example with coloured backgrounds which I could more easily adjust..that was the thing I found difficult before, so I think this is a great help!

I totally agree with you, that if you have the means, why not use them. For me it was just too hard to aply the means, I already looked in the sources of many websites to figure out how to adjust the pure CSS dropdownmenus, but in the forest of all the ul ul ul's I got lost Wink
It's great that this demo had only the menu and nothing else, it makes it easier to see what is what Smile

Thanks again!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

You are welcome. I would

You are welcome. I would never say don't do this but do that and then not give you a hand up.

The code was first posted by stu nichols on his site, but in a forest of code (as you say).

It isn't suckerfish as that uses javascript.

I have changed some of the code to show it in more sensible use.

You can paste this straight into a header. Any rows you put above the menu-space div (the pagecontainer div is juts to show how if you have a page margin/padding IE needs a quick fix to look right) must be of fixed height (overflow:hidden) in pixels. Add this extra height to the top position (currently 1px to sit below the black border) of the menu class (the one with the absolute position).

CT