By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

works with IE but not Firefox

P: n/a
hi there,

I used css for a page, it worked but only in IE not in firefox.

What DOCTYPE whould I use for firefox.

the external stylesheet contains the following:
body {
background-color: AEB4C0;
border-width:thin;
text-align:left;
}

#container {
margin-left: 0px;
margin-top:30px;
text-align:center;
width: 95%;
}

#work{
height:400 px
}
..overlap {
float:right;
width: 450px;
height: 350px;
background-image:url(../images/background2.gif);
}
..sw {
position: relative;
top: -315; left: 0; z-index: 2;
}

..center {
margin-top: 37.5px;
margin-left:0px;
text-align:center;
}
..box2 {
float: right;
width: 450 px;
height: 170 px;
background-image:url(../images/background3.gif);
background-repeat:no-repeat;
text-align:center;
margin-left:0px;
margin-top:0px;
margin-right:0 px;
margin-bottom:10px;
}
..box {
display:inline;
width: 390 px;
height: 170 px;
background-image:url(../images/background.gif);
background-repeat:no-repeat;
text-align:center;
margin-left:0px;
margin-top:0px;
margin-right:0 px;
margin-bottom:10px;
}
..box, p {
padding:10px;
text-align:justify;
}
..send {
position:relative;
top:15px;
left:7px;
display:inline;

Thanks

Mar 26 '07 #1
Share this Question
Share on Google+
23 Replies


P: n/a
dangerd schrieb:
I used css for a page, it worked but only in IE not in firefox.
Validate your CSS!

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Mar 26 '07 #2

P: n/a
On 26 Mar, 11:16, Johannes Koch <k...@w3development.dewrote:
dangerd schrieb:
I used css for a page, it worked but only in IE not in firefox.

Validate your CSS!

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Thanks for your reply Johannes, can you explain what you mean by
'validate your css'.

thanks

Mar 26 '07 #3

P: n/a
dangerd schrieb:
Thanks for your reply Johannes, can you explain what you mean by
'validate your css'.
Use the W3C's validation tool for CSS
(<http://jigsaw.w3.org/css-validator/>) to find errors in your code.
Errors in code are one of the main reasons why code is not rendered
similarly in browsers.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Mar 26 '07 #4

P: n/a
On 26 Mar, 11:29, "dangerd" <duncanell...@breathe.comwrote:
I used css for a page, it worked but only in IE not in firefox.
IE silently corrects errors (HTML and CSS) that better browsers
correctly reject. Fix these errors first.

What DOCTYPE whould I use for firefox.
You don't, you use a doctype for web authoring in general. Start to
think about "coding for a particular browser" and you're already lost.
So use the right doctype declaration, but do it because it's the right
one, not just because FF wants you to.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd" >

Also you'll get better results by posting URLs, not snippets.

Mar 26 '07 #5

P: n/a
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 26 Mar, 11:29, "dangerd" <duncanell...@breathe.comwrote:
I used css for a page, it worked but only in IE not in firefox.

IE silently corrects errors (HTML and CSS) that better browsers
correctly reject. Fix these errors first.
What DOCTYPE whould I use for firefox.

You don't, you use a doctype for web authoring in general. Start to
think about "coding for a particular browser" and you're already lost.
So use the right doctype declaration, but do it because it's the right
one, not just because FF wants you to.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd" >

Also you'll get better results by posting URLs, not snippets.
thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.

Mar 26 '07 #6

P: n/a
"dangerd" <du**********@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
>>
Also you'll get better results by posting URLs, not snippets.

thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.
Security might prevent you from pointing to the actual page you're working
on. But *nothing* prevents you from creating a publicly-visible page with
the minimum code necessary to illustrate the problem you're having, and
posting the URL for that page.

Creating such a "problem page" is a useful debugging technique in any case,
even if it's for your own use only. In my experience, narrowing down a
problem so as to recreate it often leads to the solution. It's easy to lose
the forest in the trees, and creating the "problem page" helps bring the
problem into focus.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net
Mar 26 '07 #7

P: n/a
On Mar 26, 8:48 pm, Sherm Pendley <spamt...@dot-app.orgwrote:
"dangerd" <duncanell...@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
Also you'll get better results by posting URLs, not snippets.
thanks for ur input, much appreciated. I could not post URL for
security reasons but I take your point.

Security might prevent you from pointing to the actual page you're working
on. But *nothing* prevents you from creating a publicly-visible page with
the minimum code necessary to illustrate the problem you're having, and
posting the URL for that page.

Creating such a "problem page" is a useful debugging technique in any case,
even if it's for your own use only. In my experience, narrowing down a
problem so as to recreate it often leads to the solution. It's easy to lose
the forest in the trees, and creating the "problem page" helps bring the
problem into focus.

sherm--

--
Web Hosting by West Virginians, for West Virginians:http://wv-www.net
Cocoa programming in Perl:http://camelbones.sourceforge.net
Ok guys,

my eyes are bloodshot and I am slowly rendering myself bold, there is
the URL:

http://multidome.co.uk/test/gallery.php

Does anybody know why this works with IE but not with Firefox.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.

I would really appreciate if someone cracks this.

Duncs

Mar 26 '07 #8

P: n/a
In article
<11**********************@y80g2000hsf.googlegroups .com>,
"dangerd" <du**********@breathe.comwrote:
On Mar 26, 8:48 pm, Sherm Pendley <spamt...@dot-app.orgwrote:
"dangerd" <duncanell...@breathe.comwrites:
On Mar 26, 2:47 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
>Also you'll get better results by posting URLs, not snippets.
Ok guys,

my eyes are bloodshot and I am slowly rendering myself bold, there is
the URL:

http://multidome.co.uk/test/gallery.php

Does anybody know why this works with IE but not with Firefox.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.

I would really appreciate if someone cracks this.

Perhaps you could look the 13 errors showing at:

<http://validator.w3.org/check?verbos...%2F%2Fmultidom
e.co.uk%2Ftest%2Fgallery.php>

for the html.

BTW, when the width of the window is narrowed in FF, all hell
breaks loose.

Why have you got:

<body>
</body>
</html>

immediately after the head element ends?

Why are your eyes so bloodshot, you should know by now how to
live a good, clean, wholesome life.

--
dorayme
Mar 26 '07 #9

P: n/a
dangerd wrote:
>
http://multidome.co.uk/test/gallery.php

Does anybody know why this works with IE but not with Firefox.
It will never "work" as long as you set the dimensions of text elements
in px units. All it takes is for the visitor to use a different font
than you to make it fall apart. A larger font size makes matters worse.

When an explicit height is set, IE6 erroneously treats it as min-height
and expands the element to fit whatever text there is. Other browsers,
including IE7 in standards mode, limit the height as you set it so the
contents overflow. Your DOCTYPE is triggering quirks mode, though, so
IE7 does the same bad things IE6 does.
http://www.hut.fi/u/hsivonen/doctype.html

If you are trying to keep the same vertical height of the text boxes and
the image, I suggest giving it up now. Accept the fact that you have no
control over the visitor's display and just let text boxes size
themselves as needed. You'll get more consistent (and usable) results
across browsers and save yourself a load of frustration.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.
Not really.
http://www.bergamotus.ws/screenshots...dome.co.uk.png

BTW, that is my default font and font size you see there, as well as my
usual window width.

--
Berg
Mar 26 '07 #10

P: n/a
On 27 Mar, 01:04, Bergamot <berga...@visi.comwrote:
dangerd wrote:
http://multidome.co.uk/test/gallery.php
Does anybody know why this works with IE but not with Firefox.

It will never "work" as long as you set the dimensions of text elements
in px units. All it takes is for the visitor to use a different font
than you to make it fall apart. A larger font size makes matters worse.

When an explicit height is set, IE6 erroneously treats it as min-height
and expands the element to fit whatever text there is. Other browsers,
including IE7 in standards mode, limit the height as you set it so the
contents overflow. Your DOCTYPE is triggering quirks mode, though, so
IE7 does the same bad things IE6 does.http://www.hut.fi/u/hsivonen/doctype.html

If you are trying to keep the same vertical height of the text boxes and
the image, I suggest giving it up now. Accept the fact that you have no
control over the visitor's display and just let text boxes size
themselves as needed. You'll get more consistent (and usable) results
across browsers and save yourself a load of frustration.
Incidently the boxes align correctly on Firefox when the width of the
window is narrowed.

Not really.http://www.bergamotus.ws/screenshots...dome.co.uk.png

BTW, that is my default font and font size you see there, as well as my
usual window width.

--
Berg
Berg,

Thanks for your input, I have a questions:
>"it will never "work" as long as you set the dimensions of text elements in px units"
How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?

by the way, the stylesheet is here:

http://multidome.co.uk/css/gallery2.css
Thanks

Mar 27 '07 #11

P: n/a
On 27 Mar, 10:02, "dangerd" <duncanell...@breathe.comwrote:
"it will never "work" as long as you set the dimensions of text elements in px units"

How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?
Test is always sized relative to em units, because that's pretty much
their definition. Text has a varying size relationship to the size of
a pixel. This text/pixel ratio varies widely between different users,
or for a user changing default text sizes.

So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text. As text / pixel ratio varies, the
box changes in (pixel-) size to keep up.

If you have a box that's more intimately connected with an image, then
you might want to size it in pixels, as that tracks the image size. If
there's text in there too, expect it to grow and expand downwards.
Placing pixel-sized and em-sized units side-by-side under the same
parent can get awkward.

In general, don't size things at all. Try to avoid sizing things you
don't care that much about. Size things you _do_ care about (such as
narrow margins) and let the browser's renderer sort the rest out for
you upon display. If you set the image container size and the spacing
between the boxes, then you can probably just let thee other boxes
expand to fill the remaining space.
Read http://brainjar.com/css/positioning/ before using float:,
position: or negative units.

Mar 27 '07 #12

P: n/a
On 27 Mar, 10:20, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 10:02, "dangerd" <duncanell...@breathe.comwrote:
>"it will never "work" as long as you set the dimensions of text elements in px units"
How else am i supposed to make sure that the text and forms do not
spill out of the background image(the light grey boxes)?

Test is always sized relative to em units, because that's pretty much
their definition. Text has a varying size relationship to the size of
a pixel. This text/pixel ratio varies widely between different users,
or for a user changing default text sizes.

So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text. As text / pixel ratio varies, the
box changes in (pixel-) size to keep up.

If you have a box that's more intimately connected with an image, then
you might want to size it in pixels, as that tracks the image size. If
there's text in there too, expect it to grow and expand downwards.
Placing pixel-sized and em-sized units side-by-side under the same
parent can get awkward.

In general, don't size things at all. Try to avoid sizing things you
don't care that much about. Size things you _do_ care about (such as
narrow margins) and let the browser's renderer sort the rest out for
you upon display. If you set the image container size and the spacing
between the boxes, then you can probably just let thee other boxes
expand to fill the remaining space.

Readhttp://brainjar.com/css/positioning/before using float:,
position: or negative units.
Thanks for your insight,

you mentioned that:

"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."

How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?

Thanks

Mar 27 '07 #13

P: n/a
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:

First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.

Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."

How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
There are several questions hiding in here:

* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.

Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).

The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.

* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".

* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.

* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.

* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.

Mar 27 '07 #14

P: n/a
On Mar 27, 3:14 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:

First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.

Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?

There are several questions hiding in here:

* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.

Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).

The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.

* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".

* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.

* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.

* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.
Thanks Andy,

If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?

Duncs

Mar 27 '07 #15

P: n/a
On Mar 27, 9:24 pm, "dangerd" <duncanell...@breathe.comwrote:
On Mar 27, 3:14 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 11:57, "dangerd" <duncanell...@breathe.comwrote:
First of all, fix the invalid markup, especially the spurious </body></
html>
You can't expect to make efficient progress with layout without
clearing this sort of issue out of the way first. It _might_ work, but
you lose the ability to expect it to work reliably.
Use meaningful class names too, not just "box"
"So if you size the "things that are connected with text" (i.e. your
text container boxes) using ems, then they will re-size themselves to
always contain that amount of text."
How am I supposed to make sure that text never flows out of a 450px
width by 170 px height box containing a background image which is just
that size?
There are several questions hiding in here:
* To stop text flowing out, just don't set the height of the box. Let
the browser work it out for itself and it will expand the box
vertically as necesary. Don't mess with this until you're
knowledgeable about CSS! It'll work better if you just leave it alone.
Browsers set box heights better than any author can. They know how big
the local text size is today, you don't (and can't).
The _results_ of "text flowing out" are controlled by the overflow
property. For images this might have an effect sideways, for text it's
usually wrapped and so only appears on the bottom edge. This is some
sort of trimming though, so it's best avoided by letting the box
expand.
* Don't set images as backgrounds. If it's an important image (i.e.
it's worth printing) then use an <imgtag instead. Leave the CSS
background-image property for "wallpaper", not "content".
* Don't use "dumbnails". Your image is 400px wide and ought to be
about 30k in size. It's actually 2/3rd of a MB and you're resizing it
in the browser. This looks ugly and takes an age to download.
* If the box is intended to contain an image (your class "overlap"),
then set it to a width in pixels (as you're doing). Then throw text
into it, sized in ems, and let the browser work out the best height.
* If the box is intended to contain text (classes "box" and "box2"),
then set the width in ems. Let the browser work out the height.

Thanks Andy,

If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?

Duncs
I am beginning to lose faith in CSS;

I simplified it massively and it I still does not work.

Can anyone point out why the two bottom boxes don't align properly in
FF?

url: www.multidome.co.uk/test/gallery.php

css: www.multidome.co.uk/css/gallery2.css

Many thanks.

Mar 27 '07 #16

P: n/a
dangerd wrote:
>
I am beginning to lose faith in CSS;
Understanding CSS doesn't happen overnight. It takes study, practice and
patience to become proficient. You have to work at it, though. Don't
give up when you're just getting started.
Can anyone point out why the two bottom boxes don't align properly in
FF?

url: www.multidome.co.uk/test/gallery.php
Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.

--
Berg
Mar 28 '07 #17

P: n/a
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
dangerd wrote:
I am beginning to lose faith in CSS;

Understanding CSS doesn't happen overnight. It takes study, practice and
patience to become proficient. You have to work at it, though. Don't
give up when you're just getting started.
Can anyone point out why the two bottom boxes don't align properly in
FF?
url:www.multidome.co.uk/test/gallery.php

Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.

--
Berg
Thanks for the moral support Berg! I am resigned to the fact that CSS
is not as easy as I thought (I now view it as equally challenging as
PHP, never would have thought so a week ago). I bought myself the Eric
Meyer book and will be giving it some time.
Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).
Duncs

Like this:

o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo

o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo

Mar 28 '07 #18

P: n/a
On 27 Mar, 21:24, "dangerd" <duncanell...@breathe.comwrote:
If I am not to use pictures for the boxes' background, how am i
supposed to overlay the text onto <imelements?
Excuse my foul mood. I wrote you a beatifully detailed reply, then
Google ate it.

You don't do this.

If you want to caption a picture then you have an <img>, then you
stick text over it in a <por <divand use CSS to control the z-
index to place it over the image. position:relative; is likely to be
useful too.

If you want a box background, then you might use the CSS background-
image property. This is just for "eye candy" images and they usually
won't get printed.

If you're trying to achieve borders, then don't use a single image
overlay. That's equivalent to setting the box size in pixels, with all
the limitations we've already discussed. If you must, I think Eric
Meyer's website has the best example code to look at (using border
images sliced into strips and corners).

If you're trying to do the "rounded corners" effect, then re-design
things. It doesn't look _that_ good, it looks very dated in web design
terms, and it's famously a right pain in the arse to code. CSS 3
(manyana) will do it easily, but anything in the present day is a
painful hack and just not worth the trouble.

Mar 28 '07 #19

P: n/a
On 27 Mar, 22:20, "dangerd" <duncanell...@breathe.comwrote:
Can anyone point out why the two bottom boxes don't align properly in
FF?
Hard to say without knowing what you're expecting them to do. I assume
that you mean they look correct for windows between 900 and 960 px
wide (with my settings), but badly broken otherwise.

You're trying to control something in 2 dimensions simultaneously.
Don't do that, it's too hard. It's inherently hard, because it doesn't
cope easily with resizing windows. In particular, it leads to
implementations based around position:absolute and pixel positioning.
This is easy to do, but inflexible (and thus bad).

If you want 2d control of positioning, then this is a "grid" layout
and is best done using a <table>. You can use CSS simultaneously with
it, the two aren't mutually exclusive.

Grid layouts are fashionable with graphic designers, particularly the
more pretentious. The popular book is Tim Samsara's "Making and
Breaking the Grid"
<http://www.amazon.com/exec/obidos/ASIN/1564968936/codesmiths-20>
(aka "Pointy-bearded Twattery for Fun and Profit")
Really this whole bunch of worthless Nathans should go and read the
'20s and '30s German texts that are the original source material for
the whole style, particularly Jan Tschichold, or even the medieval
canons of page layout.
In web design, we care a great deal about resizing behaviour. It's
easiest to manage this if we split a 2d problem into two stages with
one dimension each.

Structure your page as 2 columns, as 2 <div>s with float.
Embed 5 <div>s inside these, 3 on the left and 2 on the right.
Your alignment problems are now handled easily and reliably by
containment alone.

Use appropriate margins and you've probably got most of the widths
under control too.
Mar 28 '07 #20

P: n/a
In <11**********************@d57g2000hsg.googlegroups .comon 27
Mar 2007 14:20:17 -0700, "dangerd" <du**********@breathe.com>
wrote:
>I am beginning to lose faith in CSS;
Don't.

I don't know if it'll help at all but the biggest problem I had -
and most problems I've seen other people have - with learning to
use CSS are based, not on the difficulties of learning/writing CSS
in itself (which is no more difficult than learning anything else)
but on the mindsets of the person learning/writing. Most people
start out by thinking "how can I reproduce my tables-based layout
using CSS?" Short answer - don't even try, it'll break your heart.

Trying to port across static page layout concepts to CSS-based
dynamic presentation just doesn't work. Been there, tried it,
learned through harsh painful experience :)

The first thing anyone has to get permanently lodged into their
brain is that trying to achieve absolutely uniform pixel-perfect
layout across the huge variety of platforms that visitors may be
using is a futile task guaranteed to end in tears. If you have a
reason why it must look absolutely identical to every visitor,
turn it into a .pdf; it simply doesn't work on a page for the www.

Once people learn to let go of old static concepts about
layout/presentation, they begin to realise the quite astonishing
power and flexibility of CSS.

Persevere. It's worth it, and the satisfaction you'll gain once it
all finally starts falling into place is immense.

--
DG
--
DG

mail to us****@gaelweb.co.uk goes to a black hole
news@ is valid for the time being but may not remain so
Mar 28 '07 #21

P: n/a
On 28 Mar, 14:14, "Andy Dingley" <ding...@codesmiths.comwrote:
On 27 Mar, 22:20, "dangerd" <duncanell...@breathe.comwrote:
Can anyone point out why the two bottom boxes don't align properly in
FF?

Hard to say without knowing what you're expecting them to do. I assume
that you mean they look correct for windows between 900 and 960 px
wide (with my settings), but badly broken otherwise.

You're trying to control something in 2 dimensions simultaneously.
Don't do that, it's too hard. It's inherently hard, because it doesn't
cope easily with resizing windows. In particular, it leads to
implementations based around position:absolute and pixel positioning.
This is easy to do, but inflexible (and thus bad).

If you want 2d control of positioning, then this is a "grid" layout
and is best done using a <table>. You can use CSS simultaneously with
it, the two aren't mutually exclusive.

Grid layouts are fashionable with graphic designers, particularly the
more pretentious. The popular book is Tim Samsara's "Making and
Breaking the Grid"
<http://www.amazon.com/exec/obidos/ASIN/1564968936/codesmiths-20>
(aka "Pointy-bearded Twattery for Fun and Profit")
Really this whole bunch of worthless Nathans should go and read the
'20s and '30s German texts that are the original source material for
the whole style, particularly Jan Tschichold, or even the medieval
canons of page layout.

In web design, we care a great deal about resizing behaviour. It's
easiest to manage this if we split a 2d problem into two stages with
one dimension each.

Structure your page as 2 columns, as 2 <div>s with float.
Embed 5 <div>s inside these, 3 on the left and 2 on the right.
Your alignment problems are now handled easily and reliably by
containment alone.

Use appropriate margins and you've probably got most of the widths
under control too.
Andy,

You are a King amongst men, thank you for taking the time to share
your knowledge. I will let you know how I get on.

Duncs

Mar 28 '07 #22

P: n/a
dangerd wrote:
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
>>dangerd wrote:
>>Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.

--
Berg
If Google Groups doesn't trim signatures automatically, please get in
the habit of doing it manually.

>>Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
You don't have to quote twice; just insert your comments on a line
following what your talking about. Delete the rest
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).

Like this:

o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo

o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo
Ah! Finally, a description of the problem! (Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)

So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
know what your reasons for the design are). One element is a Sidebar,
containing Box 1 and Box 2, positioned upper left. A second element is
the Picture box, your Box 3, positioned upper right. Lastly you have a
Command Bar (which I could have called a Footer, but you might
eventually have a real footer somewhere below). The Command Bar contains
your Box 4 and Box 5, "underneath all of these items."

So try this basic form:
<div class="sidebar">My sidebar: Boxes 1 and 2</div>
<div class="picture">My picture: Box 3</div>
<div class="commandBar">My command bar: Boxes 4 and 5</div>

..picture, .sidebar, .commandBar {background-color:#ECEDEE; margin:2em;}
..picture { float:right; }
..sidebar { float:left; }
..commandBar { clear:both; }

The clear on .commandBar keeps Boxes 4 & 5 together, always beneath the
other two elements. That's probably enough to solve your problem right
there. (But I'm too stupid to stop.) So: just fill in the elements you
already have, something like this:

<div class="sidebar">
<div>Box 1 test text
<form action="../admin/storealt.php etc.></form>
</div>
<div>Box 2 test text
<form action="../admin/storealt.php etc.></form>
</div>
</div>
<div class="picture"><img src="../admin/getpicture.php?id=16"
alt="Longdome model 17" width="400" height="275"></div>

<div class="commandBar">
<div class="addNewPic">
<a href="yadda">
<img src="../button/delete.gif" alt="Deletes the current picture
from the database">
</a>
</div>
<div class="deletePic">
Add new picture to the database.
<form method="post" action="" etc.>yadda</form>
</div>
</div>

with CSS like:

..picture, .commandBar { background-color:#ECEDEE; margin:2em;}
..picture { float:right; padding:20px; -moz-border-radius:2em; }
..picture img { width:400px; height:275px; }
..sidebar { float:left; padding:0 2em;}
..sidebar div { margin:0 0 1em 0; background-color:#ECEDEE; margin:2em;}
..commandBar { clear:both; }
..addNewPic { float:left; background-color:#ECEDEE; }
..deletePic { float:right; background-color:#ECEDEE; }

Note that -moz-border-radius is invalid, and used only for mozilla
browsers, ignored by others. Square corners in IE isn't so bad, though,
as Andy says.

Note also that I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">, not XHTML transitional. If
you insist on staying with XHTML, you'll have to tweak the closing tags.

--
John
Mar 28 '07 #23

P: n/a
On Mar 28, 4:54 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
dangerd wrote:
On 28 Mar, 05:16, Bergamot <berga...@visi.comwrote:
>dangerd wrote:
>Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.
>--
Berg

If Google Groups doesn't trim signatures automatically, please get in
the habit of doing it manually.
>Please define "align properly". It doesn't adapt so well to smaller
windows, but I don't know if that's what you mean.

You don't have to quote twice; just insert your comments on a line
following what your talking about. Delete the rest
What I am looking for is two small boxes on top of each other to the
left of the page with a large image box floated to the right the two
smaller boxes. Underneath all of three of these items, there should be
two small boxes aligned horizontally (that is where the problem is).
Like this:
o oooo o oooooooooooo
o box1 o oooooooooooo
o oooo o ooo box3 ooo
oooooooooooo
o oooo o oooooooooooo
o box2 o oooooooooooo
o oooo o oooooooooooo
o oooo o oooooooooooo
o box4 o ooo box 5oooo
o oooo o oooooooooooo

Ah! Finally, a description of the problem! (Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)

So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
know what your reasons for the design are). One element is a Sidebar,
containing Box 1 and Box 2, positioned upper left. A second element is
the Picture box, your Box 3, positioned upper right. Lastly you have a
Command Bar (which I could have called a Footer, but you might
eventually have a real footer somewhere below). The Command Bar contains
your Box 4 and Box 5, "underneath all of these items."

So try this basic form:
<div class="sidebar">My sidebar: Boxes 1 and 2</div>
<div class="picture">My picture: Box 3</div>
<div class="commandBar">My command bar: Boxes 4 and 5</div>

.picture, .sidebar, .commandBar {background-color:#ECEDEE; margin:2em;}
.picture { float:right; }
.sidebar { float:left; }
.commandBar { clear:both; }

The clear on .commandBar keeps Boxes 4 & 5 together, always beneath the
other two elements. That's probably enough to solve your problem right
there. (But I'm too stupid to stop.) So: just fill in the elements you
already have, something like this:

<div class="sidebar">
<div>Box 1 test text
<form action="../admin/storealt.php etc.></form>
</div>
<div>Box 2 test text
<form action="../admin/storealt.php etc.></form>
</div>
</div>
<div class="picture"><img src="../admin/getpicture.php?id=16"
alt="Longdome model 17" width="400" height="275"></div>

<div class="commandBar">
<div class="addNewPic">
<a href="yadda">
<img src="../button/delete.gif" alt="Deletes the current picture
from the database">
</a>
</div>
<div class="deletePic">
Add new picture to the database.
<form method="post" action="" etc.>yadda</form>
</div>
</div>

with CSS like:

.picture, .commandBar { background-color:#ECEDEE; margin:2em;}
.picture { float:right; padding:20px; -moz-border-radius:2em; }
.picture img { width:400px; height:275px; }
.sidebar { float:left; padding:0 2em;}
.sidebar div { margin:0 0 1em 0; background-color:#ECEDEE; margin:2em;}
.commandBar { clear:both; }
.addNewPic { float:left; background-color:#ECEDEE; }
.deletePic { float:right; background-color:#ECEDEE; }

Note that -moz-border-radius is invalid, and used only for mozilla
browsers, ignored by others. Square corners in IE isn't so bad, though,
as Andy says.

Note also that I used <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">, not XHTML transitional. If
you insist on staying with XHTML, you'll have to tweak the closing tags.

--
John
Thanks John, I really appreciate all your effort and am amazed by the
time people have spent replying.
>Although I will snidely
remark that if you can't even get the diagram right with little o's, you
probably won't be immediately successful with CSS.)
I had 2 min to do it at the end of my lunch break.

So, from your written description you really want three elements (for
some still-unknown reason), which I will name arbitrarily (since I don't
I am doing this for training purposes, this page will not even be
accessible to members of the public.
I am a new to programming and am just trying to get my head round
CSS.

I will try and implement your solution now.

Duncs

Mar 28 '07 #24

This discussion thread is closed

Replies have been disabled for this discussion.