Posted by Nick on 10/31/07 16:21

On Oct 31, 3:13 am, "rf" <r...@invalid.com> wrote:
> "Nick" <maxout2001-nos...@yahoo.co.uk> wrote in message
>
> news:1193792986.476408.308130@o80g2000hse.googlegroups.com...
>
> > I have fixed several things, and now the W3C HTML Code checker tells
> > me that the page is a Valid HTML 4.01 Transitional!
>
> > So the DOCTYPE is right.
>
> > I've also eliminated most of the tables.
>
> > There is a major problem in Firefox though: the search box on the left
> > doesn't work anymore (<input type="text" name="searchbox" size="18"
> > maxlength="25" class="searchbox">
> > </form>), one can't even select it, and neither work the links
> > under Categories. I could not find the reason. These work fine in
> > IE7 and Opera 9.
>
> That'd be the form on the right, right?
>
> There are so many weirdly positioned divs and tables in there that I'll bet
> the browser is simply getting confused. I sure was when I looked at the
> structure using firebug. It is, to say the least, a mess.
>
> As to the non-functional form: It's being covered up by the welcome div
> which has width: 100% specified. I think.
>
> Also, why the javascript skulduggery with that image that is supposed to be
> a "submit" button. Why not just make it a real submit button and let the
> browser do it's work?
>
> > Another problem is that I'd like everything to appear at the centre of
> > the browser, as it does on IE7. In order to achieve this I've added
> > text-align:center to the class: all :
>
> That aligns the content, not the divs that contain that content. margin:
> auto might work but not with all that positioning stuff flying around.
>
> > div.all { position:absolute; left: 0px; top: 0px; width:100%; height:
> > 100%; z-index:1; text-align:center},
>
> > this is the class of the parent <div> that contains all other <div>
> > and everything else. It works on IE7, but not on Firefox or Opera,
> > that is the reason why I had originally done
>
> > <div id="all" class="all" align="center">.
>
> > It did center the content on Firefox in that way, but I know that is
> > has been deprecated in HTML 4.01. Could you help me finding out how
> > to make it work on Firefox and Opera ?
>
> > I have enlarged the font size, but I still have to do that for the
>
> To what? 75% of my preferred font size?
>
> And there is a problem as well. When I increase my font size (as I must to
> be able to put it back to 100% of my preferred size) your navigation bar
> escapes it's absolutely positioned and sized dif.
>
> > I am aware of problems that can appear when once enlarge text, because
> > the size of the <div id="main class="main" which contains the website
> > content is fixed in pixels to 980px.
>
> Ah I see you already know about that problem.
>
> > It might be good to find an
> > alternative to that at some stage, perhaps after the existing problems
> > have been sorted.
>
> Like removing all the absolute positioning and sizing?
>
> > Again, feedback and constructive criticism is appreciated. Negative
> > criticism, sarcasm, and silly jokes about me having a deal with Bill
> > Gates, are obvious, dull, sad, and bring nothing to the discussion, so
> > are best avoided.
>
> Welcome to usenet :-)
>
> --
> Richard.

Thank you very much for your advices about relative and absolute
positioning. At last I understand why the length of <div id="main"
class="main" (that has the leafy background) doesn't stretch to
accomodate the size of <div id="centre" the other two on the right.
You see, I'm quite new to relative positioning, and even though I
underastand it in theory, in practice I often see that the results
differ from what I expected. I took a CIW Qualification as web
designer and web developer 3 years ago, but they taught lots of old
stuff, mainly tables. My previous sites were all about tables, until I
understood it was better to do otherwise.

Could you have a look at these two experimental pages I've done using
Firefox:

I've taken out the header for the moment, just to tackle 1 problem at
a time.

the first is:

alternativeherbal.co.uk/example1.php

this page uses relative positioning for the <div id="centre" element,
but as you can see it doesn't look right, although the automative
sizing of the leafy background contained in <div id="main" is perfect.

in

alternativeherbal.co.uk/example2.php

I've used the absolute positioning, and in fact the middle box (<div
id="centre") is longer than the <div id="main" that was supposed to
contain it, and thanks to your advice now I understand why.

What I needed to ask you if you think there is a way to make the three
boxes look like in example1, but using relative positoning instead.
Obviously the length of <div id="left" class="left" can change in the
other pages, especially because in other pages it contains images of
products, dynamically generated querying a MySql Database, and as I
understood the length of the <div id="left" affects the relative top
positioning of the <div id="centre" element.

So, considered this, do you think there is a way at all to make
example1 look more like example2, but still using relative positioning
instead?

thanks a lot.

PS View this in Fiorefox, not IE. I have found out that IE requires
totally different positioning coordinates when using relative
positioning, so I'll be using a different stylesheet for that, but I
haven't made it yet for this, because it is just an experiment really.

[Back to original message]