Announcement

**jont** · 10-Feb-2006, 01:51 PM

Hi Bill,

have you checked the <div> hierachy is closing properly - if the other <div> are nesting inside the top bar then it should extend down.

You can bodge it putting in a height: "N"px; but that should be unecessary if the <div> structure is correct

**fergusw** · 10-Feb-2006, 02:02 PM

Hi Bill,
This issue is due to the different CSS float models each browser utilises.

A simple fix would be to add a
<div id="clear"></div> just before the closing </div> of the <div id="topbar"></div>

e.g.
<div id="clear"> </div>
</div></BODY></HTML>

and in the CSS set the following

#clear{
clear:both;
}

This should remedy the situation.
It tells other browsers that there is more 'after' teh two floated divs and to extend the background to this extra <div id="clear> div.

**wjcampbe** · 10-Feb-2006, 02:46 PM

@jont - Yes the first div has the others fully nested inside.

@fergus - I have a div id="spacer" set up with those properties and used in the file - let me try adding yet another of those to the page template - no - no change.

**jont** · 10-Feb-2006, 02:52 PM

It should work without the "clear" div.

Bill - if you want to email me the bare template over I will have a play to see if I can spot anything

**fergusw** · 10-Feb-2006, 02:53 PM

Hi Bill,

I have just tested my method and it works in IE, Firefox and Opera.
To reiterate, it is not a spaced DIV you need.
I recommend you create a new DIV ID style in the css called clear

Code:

#clear{
clear:both;
}

and in your HTML add in this empty DIV at the end of your HTML, just before the closing </div> of the containing topbar div.

Code:

<div id="clear">&nbsp;</div>
</div></BODY></HTML>

If you try this and you find it still does not work then keep it online and I'll have a look at the HTML and CSS live

**wjcampbe** · 10-Feb-2006, 02:53 PM

Problem solved

Fergus - my apologies - your solution did contain the answer, once I corrected my own stupid mistake.

The spacer id I had set up in the css file as # spacer

See that SPACE

Once I corrected the css to read #spacer AND added the spacer div immediately before the final tag which closes the topbar div - Robert married your father's sister.

**jont** · 10-Feb-2006, 03:09 PM

I still maintain the need for a clearing <div> is not necessary if the XHTML and CSS is set up properly - I have a single page (awaiting customer approval) over at "link now removed to stop spammers" that works in a similar vein albeit using a repeated image for the background and not a colour - the menu divs simply stop inside the main "container" div and the background runs all the way through - expanding and shrinking to suit the amount of content.

Anyhows - you have it working which is the main thing

**wjcampbe** · 10-Feb-2006, 03:22 PM

I wonder if the fact that I have content in my "container" div is having an effect - don't see why it should.

@jont - yes, your test page is set out as I originally was and it works in FF and Opera. Now I am even more confused. I had to change the topbar margin to 0 auto; to get it to centre in FF and Opera, it centred fine in IE with just margin: 0;

I expected css to be more consistent, not less -

**jont** · 10-Feb-2006, 03:30 PM

I had a nightmare with a Actinic CSS template that was a centred design in the end I used the text-align="center" in the <body> tag and in the container <div> margin 0 auto text-align="left" to get it to centre in both IE and FF... it worked in the real world but once integrated into Actinic something just would not make it centre align in IE

You should really put another <div> for the header inside the container - at the moment you are not using the container for its real purpose which is to create a central design layout - create a new <div> with an id="header" and you can then set the fonts, colours etc for that and let the container do its own thing

**fergusw** · 10-Feb-2006, 03:44 PM

Ahh, the joys of CSS.
The sooner the folks at Richmond, amongst others, start adhering to the W3C CSS2 and CSS3 standards the better.
{wishful thinking}

**jont** · 10-Feb-2006, 03:54 PM

Think MS are slowly realising they do not own the internet and falling into line... albeit very very slowly and at their own pace. Not tried IE7 as of yet so may reserve judgement on that

Thankfully they seem to have dropped all the nasty propriatary code they loved so much in the late 90's

**wjcampbe** · 10-Feb-2006, 05:10 PM

OK - I have implemented the encompassing container div and set the topbar text colour in the css, but without the "clear" div before the final closing div for the container, at least one browser broke.

I was hoping that IE7 would bring consistency - let's hope the final release does.

**ks_visa** · 14-Feb-2006, 10:15 AM

corporate relocation firm

Now FF have more than 10% users.
IE7 is verry new, and are not a lot of users for it.

I test all my html/css in IE + FF + Opera! Are many diferences between this browsers. To design a page for all require a little bit experience.

_______________
corporate relocation
Link Exchange Database

**Kermy** · 14-Feb-2006, 10:13 PM

With regards to IE7 (besides it eating through system resources), is seems to support some CSS rules and not others. For example, they have fixed the height/width property to work as it should, but haven't included support for min-height / min-width - meaning the current IE6 hack doesn't work anymore. Aargh! One can only hope its a beta issue, but I very much doubt it...

Announcement

CSS differences

CSS differences

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment