Re: [WSG] Traitor unmasked! (Pete's layout fixed)
Well kids, once again I am completely gobsmacked by this truly excellent list. If I had any hair this list would have definitely saved it. Hugh, can't thank you enough for going to all that trouble. Especially since I was such a pain at the last writing club meeting. ;) Only thing is, now I've got to go back and redo the site *again*, after getting it right with tables. Damn you! (Joke ..!) Great work matey. Now get back to work! ;) Thanks again everybody. Peter * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
JG, Deep down I am very grateful. ;) Seeing your first email did not fill me with joy, I have to say! I couldn't believe that something that had worked fine in Opera 6 would break in Opera 7. Hence the initial reaction. But these are the things we need to know. Thanks for taking the time to point it out. You've prompted me to download Opera 7 for my test PC. So thanks! -Hugh Hugh, hope you didn't mind me showing you how the re-design first looked in Opera 7? @ http://lc55.co.uk/test/jazz.jpg Just to let you know, it is now working fine in same browser. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
Hugh, hope you didn't mind me showing you how the re-design first looked in Opera 7? @ http://lc55.co.uk/test/jazz.jpg Just to let you know, it is now working fine in same browser. Regards, JG --- Hugh Todd <[EMAIL PROTECTED]> wrote: OK, Looks as thought Opera 7 does not like the ul to be positioned absolutely. A bug? It turns a horizontal list into a vertical one, for some reason that I'm sure the list gurus could work out. So, I remove the position: absolute from the ul. Now what to do? If the tab text is resized, the top section will break apart. Solution. (See http://members.ozemail.com.au/~hughtodd/gifford2/ ) The graphic at top right needs to be able to expand vertically. Since it is (now) a background graphic it can be anchored at the bottom of the div surrounding the top elements. In Peter's original code, however, the top section was not a float, so the "innertop" div either had a defined height or none at all. A defined height would not allow for stretching, and no height is useless. So to get this div to wrap around the enclosed floats, it really needs to be a float itself. Because there is not "float: center", it needs a new enclosing div to keep it from drifting to the left margin of the viewport. I've called this #top. To allow the rh graphic to 'stretch' if required, I have added another 70px or so of height to its top. The advantage of this revised version is that it is slightly more flexible than the earlier one, which is in my way of thinking more in line with a web standards approach. Cheers! -Hugh Todd > A big well done to Hugh for taking time to work on Pete's CSS. > Hope this helps also: http://lc55.co.uk/test/jazz.jpg > This is how Hugh's re-design looks in Opera 7 * The discussion list for http://webstandardsgroup.org/ * _ Why Pay $35 for a .COM, .NET or .ORG Web Address? iDotz.Net offers Cool Domains @ Great Prices! Starting @ $8.75 Go: http://www.idotz.net * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
OK, Looks as thought Opera 7 does not like the ul to be positioned absolutely. A bug? It turns a horizontal list into a vertical one, for some reason that I'm sure the list gurus could work out. So, I remove the position: absolute from the ul. Now what to do? If the tab text is resized, the top section will break apart. Solution. (See http://members.ozemail.com.au/~hughtodd/gifford2/ ) The graphic at top right needs to be able to expand vertically. Since it is (now) a background graphic it can be anchored at the bottom of the div surrounding the top elements. In Peter's original code, however, the top section was not a float, so the "innertop" div either had a defined height or none at all. A defined height would not allow for stretching, and no height is useless. So to get this div to wrap around the enclosed floats, it really needs to be a float itself. Because there is not "float: center", it needs a new enclosing div to keep it from drifting to the left margin of the viewport. I've called this #top. To allow the rh graphic to 'stretch' if required, I have added another 70px or so of height to its top. The advantage of this revised version is that it is slightly more flexible than the earlier one, which is in my way of thinking more in line with a web standards approach. Cheers! -Hugh Todd A big well done to Hugh for taking time to work on Pete's CSS. Hope this helps also: http://lc55.co.uk/test/jazz.jpg This is how Hugh's re-design looks in Opera 7 * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
JG, This is how Hugh's re-design looks in Opera 7 Thanks for that! Makes me want to join Pete in apostasy! -Hugh * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
Great to see such a forum, where individuals try so hard to help each other.
A big well done to Hugh for taking time to work on Pete's CSS.
Hope this helps also: http://lc55.co.uk/test/jazz.jpg
This is how Hugh's re-design looks in Opera 7
Regards, JG
--- Hugh Todd <[EMAIL PROTECTED]> wrote:
Pete,
I've taken the liberty of rejigging your style sheets to get this thing
to work. I did change the doctype to strict. Don't know what --if any
-- that had to do with the final outcome.
http://members.ozemail.com.au/~hughtodd/gifford/
Here's what I did.
In the top section, I made the rh masthead item a background image
instead. This left the other two elements free to float left in an
uncomplicated way.
To get rid of the space before the graphics started in Opera 6.03 Mac,
I added "padding: 0;" to the body.
To ensure that the navbar doesn't push the top section apart
(vertically) if the tab text is increased in size, the top float is
positioned relatively and the ul inside it positioned absolutely at its
bottom. (To make it expand up instead of down.)
In the lower section I discovered (late in the piece, and it was --
bizarrely -- causing the main image to float in the wrong place) that
the HTML for second of the h1s was in uppercase (H1). Something to
watch, at least in strict XHTML, which I know you weren't using.
I added an extra centred div ("mid") in which I floated *both* the text
block and the image to the *left*. (You had the image floated right,
which necessitated putting it before the text div in the HTML, which
led to clearing problems for your footer.)
There was a bug in IE 6 Win that pushed the picture down, and this
seemed to be related somehow to this bug:
http://www.positioniseverything.net/explorer/escape-floats.html . The
gist of the problem is that IE resizes a DIV if it thinks that it is
not large enough to hold its content. Which means, as here, it was
adding another 2px to the floated DIV with the img inside it and
pushing it down to the next line. [No idea why. It seemed to be the
correct width.] Simplifying the code by stripping out the DIV and
applying the id to the image itself fixed the problem!
The footer sits after the floated "innermid" but before the close of
the new "mid" wrapper.
For some reason the middle section is pushed a few pixels down in the
IE Wins (5-6) -- surprise, surprise -- but I'll leave someone else to
sort that out. Otherwise it looks mighty fine in Safari, Mozilla 1.6,
IE5 Mac and Opera 6.3 Mac.
Took me quite a lot longer than your half an hour, probably because I
was having to go backwards through your code, but it's satisfying to
have it done!
-Hugh Todd
> Here's the other one that was giving me so much grief last night,
> finally working with the help of a few two column tables:
>
> http://www.universalhead.com/clients/test
>
> The Homepage and the 'Classes' page layouts are currently done (text
> styling to do yet).
>
> Comments welcome
*
The discussion list for http://webstandardsgroup.org/
*
_
Why Pay $35 for a .COM, .NET or .ORG Web Address? iDotz.Net offers Cool Domains @
Great Prices! Starting @ $8.75 Go: http://www.idotz.net
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Traitor unmasked! (Pete's layout fixed)
Pete,
I've taken the liberty of rejigging your style sheets to get this thing
to work. I did change the doctype to strict. Don't know what --if any
-- that had to do with the final outcome.
http://members.ozemail.com.au/~hughtodd/gifford/
Here's what I did.
In the top section, I made the rh masthead item a background image
instead. This left the other two elements free to float left in an
uncomplicated way.
To get rid of the space before the graphics started in Opera 6.03 Mac,
I added "padding: 0;" to the body.
To ensure that the navbar doesn't push the top section apart
(vertically) if the tab text is increased in size, the top float is
positioned relatively and the ul inside it positioned absolutely at its
bottom. (To make it expand up instead of down.)
In the lower section I discovered (late in the piece, and it was --
bizarrely -- causing the main image to float in the wrong place) that
the HTML for second of the h1s was in uppercase (H1). Something to
watch, at least in strict XHTML, which I know you weren't using.
I added an extra centred div ("mid") in which I floated *both* the text
block and the image to the *left*. (You had the image floated right,
which necessitated putting it before the text div in the HTML, which
led to clearing problems for your footer.)
There was a bug in IE 6 Win that pushed the picture down, and this
seemed to be related somehow to this bug:
http://www.positioniseverything.net/explorer/escape-floats.html . The
gist of the problem is that IE resizes a DIV if it thinks that it is
not large enough to hold its content. Which means, as here, it was
adding another 2px to the floated DIV with the img inside it and
pushing it down to the next line. [No idea why. It seemed to be the
correct width.] Simplifying the code by stripping out the DIV and
applying the id to the image itself fixed the problem!
The footer sits after the floated "innermid" but before the close of
the new "mid" wrapper.
For some reason the middle section is pushed a few pixels down in the
IE Wins (5-6) -- surprise, surprise -- but I'll leave someone else to
sort that out. Otherwise it looks mighty fine in Safari, Mozilla 1.6,
IE5 Mac and Opera 6.3 Mac.
Took me quite a lot longer than your half an hour, probably because I
was having to go backwards through your code, but it's satisfying to
have it done!
-Hugh Todd
Here's the other one that was giving me so much grief last night,
finally working with the help of a few two column tables:
http://www.universalhead.com/clients/test
The Homepage and the 'Classes' page layouts are currently done (text
styling to do yet).
Comments welcome
*
The discussion list for http://webstandardsgroup.org/
*
