109 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi there...Duck #5 seems to have 2 heads...

Weeell...things do seem to be going from bad to worse Sad

I have a problem on the "content" div in that when I shrink the browser it will drop below the 4th little box on the left in IE6 - but I don't know how to fix it because it isn't a float and I can't put height: or width: on it...at least that's what I'm thinking the problem is, then again at this stage I really have no idea! I'm very confused about this and I really have tried to make sure everything had layout.

Edit: Or is it the fault of the "elastic" image js in the .html?

On the other hand at full screen in IE, that is how the page should look - in FF2 the building picture and little box on the right are halfway down the page - ohdearohdearohdear

http://nasmsite.com

...and it's taking forrevah to load! Why? This isn't complicated and all my images are tiny...

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Please forgive the

Please forgive the "bump"...but I am truly stuck on this, I've been reading and trying all sorts of things.

The main issues are that:

1) in IE the home page looks right at full screen but the * html "elastic" kicks in the bottom scrollbar at the right place (480px), but it doesn't stop anything wrapping - so the Content box drops.

2) The min-width: works but the inline images are in the wrong place.

*sigh* and I've really been quite patient, really I have... Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You haven't accounted for IE

You haven't accounted for IE double margin bug on the floats, the boxes in the left column are the problem and if you follow some basic troubleshooting you can see this; always remove elements until things work then add back in until things go pear shapped again, if you display:none those boxes you'll find the right side doesn't collapse.

adding display:inline cures the left margin doubling but doesn't solve the problem so there may be other float doubling happening somewhere.

Bear in mind that fluid layouts are tricky to get right, you may simply be best off just widening the minimum width, which is quite narrow.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Good news and bad news...

Hi Hugo...the good news is after a week, Google tells me I'm still not indexed good-oh! However, I'm simply out of ideas now on D#5, need another hint please Smile

I changed the background to white so I could see what I was doing. Discovered what I thought was a wider than should be menu space is in fact a gap between the banner and menu and margin-top: 0; doesn't close it.

Hugo wrote:
You haven't accounted for IE double margin bug on the floats, the boxes in the left column are the problem and if you follow some basic troubleshooting you can see this;

So I commented out all the boxes, and after putting overflow: hidden; on the container, the picture and boxrt move to the right place in FF. So I moved the comment down a box and the first left hand box is fine – layout stays in FF. However if I move the comment down another box, the picture and boxrt drop again in FF. Sad So I tried putting zoom on the "content" but it doesn't help.

Hugo wrote:
...if you display:none those boxes you'll find the right side doesn't collapse.

Ummm... this is absolutely true. However I do find that then the boxes don't show either... Tongue Which rather defeats the purpose, ne? Figure I'm actually going to have to "display" something. Tongue

Hugo wrote:
Bear in mind that fluid layouts are tricky to get right, you may simply be best off just widening the minimum width, which is quite narrow.

Fair enough - I've increased the width to 600px, but it hasn't solved anything - I wanted to keep it at about half the screen width for those who, like me, often work with a couple of things alongside each other. At least that was the reasoning at the time. Is it worth pursuing? Should I "fix" it? The screen still doesn't stop wrapping/shrinking in IE. *sigh*

http://nasmsite.com

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

smee wrote:Hugo wrote:

smee wrote:
Hugo wrote:

...if you display:none those boxes you'll find the right side doesn't collapse.

Ummm... this is absolutely true. However I do find that then the boxes don't show either... Tongue Which rather defeats the purpose, ne? Figure I'm actually going to have to "display" something. Tongue

Smile it wasn't intended as a fix " idea, remove content, see no problem now , all solved, problem sorted" Smile :rolleyes:

It was by way of pointing out where the problem seemed to occur, to give one something to focus attention on.

With debugging css layouts removing elements, taking things back to bear bones allows one to find the point at which the problem goes away, it helps identify the elements giving rise to issues, as does using borders or backgrounds to see where elements actually are within a layout.

I'll try and have a look in a while.

p.s just a quickie Wink the gap on the top of the strapline is a collapsing margin and it's the 'p' element that's the culprit, put this somewhere suitable:
div.center p {margin-top:0;}

or add padding-top:1px; to div.center

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote:it wasn't

Hugo wrote:
it wasn't intended as a fix " idea, remove content, see no problem now , all solved, problem sorted" Smile :rolleyes:

Oh bother! And here I thought we were on to something Laughing out loud
I did understand the intended "take-away"process Hugo - and it did help Smile

A collapsing margin tooooo! So that's what it looks like. Gotta run...backatcha later.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry...being dense

Sorry...being dense again.

Hugo wrote:
p.s just a quickie Wink the gap on the top of the strapline is a collapsing margin and it's the 'p' element that's the culprit, put this somewhere suitable:
div.center p {margin-top:0;}

or add padding-top:1px; to div.center

"Somewhere suitable" just doesn't compute for me in relation to where it is - and is that #center or .center (one of which I have, which is .center { text-align: center; } for text.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Just figured it out after

:blushing: double post

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Just figured it out after

:bigoops: Just figured it out after numerous tries Smile

Now about the boxes - the first one on the left behaves but none of the following ones don't...

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I'll try and restate the

I'll try and restate the problem –

1. The #content1 div has a float: right box (pink border) and a photo.

2. The photo is a liquid image fed to the javascript found here http://www.michelf.com/weblog/2005/liquid-image/ .

3. The picture of the font is a static size and not fed to the javascript so stays put.

4. Everything displays in the right place in IE6.

5. In FF2, the pink box and the building photo are in the correct place with only one float: left; box in the flow and the others commented out.

6. As soon as I add in the second float: left; box (Rosa's Books) , the building photo and pink box drop.

I've been fiddling with this for 2 nights and I'm having no luck at all here. Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smee to be honest I think

Smee to be honest I think that for starters I would simply remove the float:left from the #floatbuild, at the moment it doesn't look great in FF with the way the text is trying to wrap, and I'm never too keen on layouts shifting around that much, with the float removed the image just sits nicely in between the text blocks.

I know this doesn't deal with the main problem but that will need looking at later.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote:Smee to be honest

Hugo wrote:
Smee to be honest I think that for starters I would simply remove the float:left from the #floatbuild,

Done! It's alright Hugo, I'd rather have an honest comment on the layout and any suggestions you or others have are more than welcome. I've been so bl**dy-minded, obstinate, obsessive, focussed on this problem that I can't see the wood for the trees. Smile

Hugo wrote:
...at the moment it doesn't look great in FF with the way the text is trying to wrap, and I'm never too keen on layouts shifting around that much,

You're right of course, it's the word "non-denominational" with or without the hyphen it's just too big, once you start to shrink the browser window, it makes large gaps. I just haven't concentrated on rewording that bit to make it fit. Of course, now I want the piccy in the middle rather than have either a large picture or a large gap on the right, and float; center; doesn't have any effect. :rolleyes:

Sooooo...if you take a peek, we actually have the same rendering in both browsers with one left box. Yeay! One step forward...

Hugo wrote:
I know this doesn't deal with the main problem but that will need looking at later.

Hmmm...when's "later"? unfortunately, we're back where we started when I add in another float:left box, the pink box drops (in FF) to the gap on the right of the picture.... so I still have a float drop. I'm so disappointed with this, I've read soooo many articles and tried to get it into my head, it was the last thing I wanted to come to the forum with. I just feel I have to get this squared away before moving on or it's only going to crop up somewhere else on another page. Any more suggestions?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmm, for whatever reason the

Hmm, for whatever reason the site isn't responding t the moment to take a look.

If you have tried to center the image with float:center you can't as it doesn't exist only left and right.

I can't recall the image make up off top of my head but you can try auto margins (no floating) or if it's still an inline display element then text-align:center on it's immediate parent with possibly text-align left needed to re-set paragraph text.

Sorry about 'later' at the moment and at that point I was and am slightly wrapped up in things , and under slight pressure so couldn't really break off to look at things in the detail that it requires, but will do so.

One thing can you can check through are any properties using clear: both; or clear:left/right that may be in use as these may be causing clearance problems inadvertently forcing clearing on other elements.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Thanks Hugo Sorry you're

Thanks Hugo Smile Sorry you're under the pump there, didn't mean to pester...site should be up and okay thought. What you've given me should give me some avenues to go on with tonight and I can always go and play with those pesky colours to try and find something that renders decently on LCD screens Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You're not at all pestering,

You're not at all pestering, just at the moment I divert to the forum as and when I'm stuck and having to think (painful at the best of times) but am sort of in the thick of some rather awkward documenting of work which I find difficult and it's having to explain the workings of 8 different but linked by common elements and markup, layouts, my head does hurt with it Smile

I will find time a bit later (I know I've said that Smile ) to have a look at where things stand.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ooeerk!! Better you than me

Ooeerk!! Better you than me then! Smile Hope the forum provides the diversion and restarts you need...cheers. And...whenever....

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well image is inline so this

Well image is inline so this will center the image:

#content1{text-align:center;}
#content1 p {text-align:left;}

As for the boxes on the left I think it's as I suspected you have clear:both on some, try changing that to clear:left as that should be the only direction you need to clear in and then pop in the other boxes so we can see what is happening.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yup...image centred. But

Yup...image centred. But float:left didn't work on the second left box - the pink box still dropped and my UL list line-up went all wonky. I'll load it up to the site but it will take a couple of minutes.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Boxes 3,4,5 and the white

ignore these remarks, but comment out elements in the markup so they don't upset layouts and cause simple minds like mine confusion Smile

Boxes 3,4,5 and the white background:

I'm having trouble with this as it's not really too clear what content is being described here.


You need to get out of the habit of calling elements such as these 'boxes3' etc it's somewhat meaningless.


I would prefer that that group of elements is somehow better grouped within perhaps it's own parent and that parent div placed inflow inside and at the start of #content1 then the items that look to be links? can be placed in a list with perhaps the newsletter image floated left in the last list element, this may not work but at the moment the layout structure does not look correct and those mentioned elements areunconstrained and escaping the white background?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smee wrote:Yup...image

Smee wrote:
Yup...image centred. But float:left didn't work on the second left box - the pink box still dropped and my UL list line-up went all wonky. I'll load it up to the site but it will take a couple of minutes.

Not float I was discussing the 'clear' property as a possible problem, however upload the site with all boxes so that the problem can be seen.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Reloaded and then I put the

Reloaded and then I put the text:align: left on the UL LI which worked.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

sorry didn't take into

sorry didn't take into account re-aligning the list as well

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I did do clear: I just wrote

I did do clear: I just wrote float:

Reloaded

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Question; do you really want

Question; do you really want the 'April newsletter' box down that far and to the side of the centred image?

and why do the left boxes start so far down?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hmmm...I've taken out the

Hmmm...I've taken out the comments but the rest of the boxes aren't showing.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Question; do you

Quote:
Question; do you really want the 'April newsletter' box down that far and to the side of the centred image?

Laughing out loud No...that's the problem - it's supposed to be at the top level with "Welcome" NOT next to the picture.

I started the left boxes down a bit so it wouldn't be all "boxy" at the top and to give some "teasers" as people get further down the page since it's so text intensive.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I've just seen that I missed

I've just seen that I missed your "call the boxes something else" ...let me go read...

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay - I've attached a

Okay - I've attached a screenshot of how it's supposed to look (even though this is IE). What do you want to call the boxes then? When I did it I couldn't think of anything short and pithy.

I had a feeling you were going to say I needed another wrapper for the boxes on the left. I think the reasoning was:

1. container
2. paint left column in with pattern (a la Russ Weakly)
3. Put "teaser" boxes on left pattern
4. Main #content1 just snuggles in there - and I think this could be the problem - it isn't really defined, is it?

5. Sit the April Newsletter right box and the picture in the #content1

AttachmentSize
IE_Float&2boxes.png 390.92 KB

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ignore the comments about

Ignore the comments about boxes although later you should use a single class .boxes and any properties that are unique put in a different class that can be added to the other.

Funnily enough I was thinking of suggesting that a column be created for the left side as at present you don't have a two column layout and it may well be easier with a containing div to the left side boxes, if widthed then your unlikely to need to use the clear property at all.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yes, I understand what

Yes, I understand what you're saying about the .boxes - I know the code is bloated to billy-oh at the moment but I was leaving the short-handing and streamlining until I had everything working as it was easier for me to add/delete a line and know (roughly) what I was doing.

Quote:
...as at present you don't have a two column layout and it may well be easier with a containing div to the left side boxes,

:rolleyes: Is that the answer then? I have to rewrite the layout?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

At the moment there is

At the moment there is something not right somewhere as it's seemingly impossible to gain control of the 'april news' box which should by rights be in the top right corner.

Can you go through the markup and remove ALL line breaks '<br>' you shouldn't be using them except maybe within the paragraph to gain the anchor a newline.

You don't have to rewrite the layout but maybe improve it slightly, but the cause of the disruption must be found, as the things are not working correctly.

I'm off out or an hour but will pick up again when I get back.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

No problem...this will keep

No problem...this will keep me busy for a while because I can't for the life of me see why the rest of the boxes won't show now that I've taken out the comments.

And thanks Hugo Smile


Edit: 'twas the ultimate fix of course - display: none; Tongue

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote:Can you go

Hugo wrote:
Can you go through the markup and remove ALL line breaks '
' you shouldn't be using them except maybe within the paragraph to gain the anchor a newline.

I did my best Smile You will find some on the newsletter page where I have used them for a New Line - I figured whenyouneedaspace you use a space, when you need a
New Line
you use a
New Line
...the old CR as it were....or not? What else do you use for a New Line? It seems a bit excessive to keep styling paras with no spaces, because it isn't a para - it's a New Line, function not styling.

The red text is to remind me to go back and link to pages that don't exist yet, however there are 3 links on the first page to the second page (newsletter), and the bottom left box on the newsletter page leads to the third.

Off to bed...

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I agree on the linebreak

I agree on the linebreak issue I did say earlier "other than the linebreaks within a paragraph" there are instances where a linebreak is applicable.

To the layout it's impossible to control in it's present format so lets turn it into a more conventional two column layout. Create a div call it ? #sidebar start and finish it before #content1 starts, float it left with a width to suit ~100px

In that #sidebar you will place the box2, box3 etc however this time remove the float on those boxes and just use auto margins to center within #sidebar.

#content1 will be margined away from the the sidebar much as you have it know.

If you feel up to it try declaring '.boxes' and on that rule put all styles common to each of the boxes and where individual rules are required declare them on '.box2' etc then just add them to the html class 'class="boxes box2".

Then when that's done lets look at things.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote:To the layout

Hugo wrote:
To the layout it's impossible to control in it's present format so lets turn it into a more conventional two column layout.

Well, isn't that a tricky thing. I originally chose that layout because I thought "that's clean and simple and does just what I want" - who would have thought that I could get into so much trouble with it?

Thanks for the clear instructions. I won't be able to get to it till later today, but then again it'll be just in time for you Smile

Hugo wrote:
If you feel up to it try declaring '.boxes' and on that rule put all styles common to each of the boxes and where individual rules are required declare them on '.box2' etc then just add them to the html class 'class="boxes box2".

I will try this - I would like to get them properly sorted and now I have not one but two 4.0 Strict examples by a well-known and respected designer who is a model of brevity and I figure if he leads me too far astray, you can beat him up for me Laughing out loud But it really does help to see the working model as it were, sooo...I shall return.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well that was good timing!

Well that was good timing! I've just loaded the site with my changes.

1. There's a problem with the way I've specified .tbox3 and .tbox4 because they're glued together - so I glued them all together - are they better like that and up the top?

2. On the newsletter page you will see a 1px gap between the #sidebar and #contentx - scroll to the bottom and it disappears on #content4. It's always been like that - it's just the gap isn't noticed when the violet background is painted in, though the bump is.

3. newsbox and piccy staying put!!!!!!!!!!!!!! :thumbsup:

What do you think?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looks better so far (FF that

Looks better so far (FF that is)

1. Not sure why you are setting tb5 so far down? I would remove all rules for the individual boxes and just change the margin on the teaser general rules to :0 auto 1em;

2. is the problem an IE one?

It's all feeling a whole lot more stable now Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

1. tbox5 is supposed to show

1. tbox5 is supposed to show when you have scrolled to the bottom, so that there is something on the left to follow without going back to the top (the sparkle gif will be a "top" link as well as having something in the footer that I haven't decided on yet.

2. Yes

Good-oh, we aim to please Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 4 years 51 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

did you check on firefox..

The liquidity seems to be not working on Firefox..
atleast at my end its..not working..in IE is ok..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smee you need to look at the

Smee you need to look at the news page in IE, in respect to the min/max expression, I dont understand how it's meant to be working? what is this element #elementToGetMinWidth? In IE things aren't right as you seem to be fixing min width on the wrwong element while others are still allowed to reduce.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

.teaserbox with these you

.teaserbox with these you are simply running into literal space for text problems, you have a lot of padding on the main teaserbox which probably isn't a great idea, usually it would be better to pad inner elements in this case the paragraph.

Look at the word 'development' in the first box it's simply (at it's font-size) too wide for the space it has allocatted The normal behaviour in this circumstance is that the extra is overflowed out of it's parent, however IE6 doesn't overflow correctly it expands a parent to accomodate the extra width, thus you see the top box as being slightly wider. The simple solution is to actually make the boxes a bit wider to cope with this, say ~80px which should still look ok.

The same basic theory will probably apply to the elements to the right side where the same problem is seen , check what padding and widths you have in the elements that look to be wider, try display none on the child elemnts in those sections and see if the widths correct themselves, add back the elements until one of them breaks the width again then look at that elements properties.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote:what is this

Hugo wrote:
what is this element #elementToGetMinWidth?

Laughing out loud Laughing out loud Laughing out loud Oh Hugo! I know it's a while ago Sunshine, but you gave me this - AND you made me work for it...read the D#3 thread to refresh your memory...

http://csscreator.com/node/23037

You gave me that as a fix for the "elastic" layout I wanted (read the thread, I'm not repeating it all here). I keep bleating that IE is still not fixing at 600px (as I have finally decided). The elastic layout works in FF because the min-width: stops it. I still want IE to stop wrapping text and have the scrollbar kick in at 600px. This is not happening, and has never happened despite your *html thingy.

The javascript takes care of the photo (home page) and the dividers on other pages.

Those gaps on the newsletter page have come and gone a bit - again only in IE - but they're back with a vengeance today since my nice new code. Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smee wrote:Hugo wrote:what

Smee wrote:
Hugo wrote:
what is this element #elementToGetMinWidth?

Laughing out loud Laughing out loud Laughing out loud Oh Hugo! I know it's a while ago Sunshine, but you gave me this - AND you made me work for it...read the D#3 thread to refresh your memory...

http://csscreator.com/node/23037

You gave me that as a fix for the "elastic" layout I wanted (read the thread, I'm not repeating it all here). I keep bleating that IE is still not fixing at 600px (as I have finally decided). The elastic layout works in FF because the min-width: stops it. I still want IE to stop wrapping text and have the scrollbar kick in at 600px. This is not happening, and has never happened despite your *html thingy.

Laughing out loud Smee smee smee No I didn't give you that that was actually Tyssen and he used that as an example element, it's not real and is supposed to be replaced #byTheElementWhichActuallyNeedsMinWidth

You need to replace it with the element that reuires the min width which is likely #container or the main wrapping div for the layout.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

P.S. - to the *html - I want

P.S. - to the *html - I want it to operate on the "container"

Quote:
Look at the word 'development' in the first box it's simply (at it's font-size) too wide for the space it has allocatted

Yes, I know. It was one reason I set the font in the boxes to 10px even though I agree that the niceties could be improved. IE of course, does what I want and won't change it with text increases. I thought this was one thing that FF would also do - keep the text in the boxes at 10px. However it doesn't, it increases the text even though I've set it to a particular pixel size.

Bear in mind there are a lot of little things like this that I know about but haven't mentioned because I thought some of them might well be a ricochet effect from my bad layout/code.

You've lost me on the last paragragh though, "elements on the right side" - I don't know which ones you mean, sorry.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hugo wrote: Smee smee smee

Hugo wrote:
Laughing out loud Smee smee smee No I didn't give you that that was actually Tyssen and he used that as an example element, it's not real and is supposed to be replaced #byTheElementWhichActuallyNeedsMinWidth

Laughing out loud Laughing out loud Laughing out loud :rolleyes: Well I tried to tell you at the time I didn't understand it!!! Laughing out loud Laughing out loud Laughing out loud :rolleyes:

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ooooh...there you go...I

Ooooh...there you go...I just changed the first bit to this...

* html #container { width: expression(document.documentElement.clientWidth < 600 ? "600px" : document.documentElement.clientWidth > 800 ? "800px" : "80%"); }

...and the gaps on the newsletter page have gone!! But it puts a bottom scrollbar on almost immediately and still isn't working as it should.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:IE of course, does

Quote:
IE of course, does what I want and won't change it with text increases. I thought this was one thing that FF would also do - keep the text in the boxes at 10px. However it doesn't, it increases the text even though I've set it to a particular pixel size.

Smee this is extremely bad practise and frowned upon , You do not decide font sizes displayed the user does you must never do anything to attempt to alter this , it breaks a fundemental accessibility principle, all browsers allow the user to adjust font sizes it is only IE that won't re-size px font values.

Always state font values in em or %.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I said wrote:You've lost me

I said wrote:
You've lost me on the last paragragh though, "elements on the right side" - I don't know which ones you mean, sorry.

Okay, the penny has dropped. You meant the containers and the "bump" which interestingly enough has moved up 2 containers. :? I

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If this is a concern and

If this is a concern and unless the reason can be found why on this page the jog is happening and not the other I think the best solution is to float right the right side content, but much as was done with the #sidebar a single grouping element is needed (basic principle is to group your elements into sections which is what a div is for so all right side elements would sit within #content then within #content are your semantic elements these will likely not need furthe divs but can just be alowed to sit within the parent if certain areas do relate and consist of a few elements then that might be reason then to group them in a further div which you could specify specific width or margings to and the nested elements as a whole.

With this new div you can then try floating it to the right and removing the left margin, or see if the present arrangement works any better on a single element.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 34 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry I had to run out on you...

Sorry I had to run out on you...

Hugo wrote:
Smee this is extremely bad practise and frowned upon , You do not decide font sizes displayed the user does you must never do anything to attempt to alter this...

Aaaw...don't growl. I'm sorry - I've read enough about it in this forum to know that setting font px values is a no-no. They were originally ems and I won't bore you with the Mulberry bushes I went round that led to changing it, just call it the aberration of a desperate woman.

Quote:
Always state font values in em or %.

I have everywhere else and yes, I'll change them back Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 5 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The font sizing is a minor

The font sizing is a minor issue at the moment , don't worry wasn't growling Smile but just concerned it was clear it's a, 'not good thing', you know this though.

Attend to my other and more pertinent comments Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me