CSS Background Firefox?

[arteccentrix]

Please bear with me as I am new to both Firefox and CSS. I have browsed
through a number of groups looking for similar problems to my own but
can't find a definitive answer. If anyone here can help me out I would
appreciate your shared expertise so much.

My background image is displaying fine in IE, and, sometimes in Firefox
until I hit the reload button. It seems as if the browser is unable to
locate the image and throws up a graphic from my webhost regarding
remote
image hosting. It is not a remotely hosted image, it's right there in
my images folder along with the CSS file.

If anyone can take a look and point out any glaring errors the CSS file
is below, and the url is http://www.arteccentrix.5u.com/index3.html

Thanks in advance
Maurice Snell

/* CSS Document */

*{
body:0;
padding:0;
margin:0;

}

body{
background:url(http://www.arteccentrix.5u.com/images/bgstripes.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-top:75px;
text-align:center;
color: #777777;

}

#wrapper{
position:relative;
margin-left: auto;
margin-right: auto;
padding-top:100px;
width:800px;
height:600px;
background-color:#FFFFFF;
border: 2px solid #CE3095;

}

#rgheader{
text-align:right;
width:50%;
position:absolute;
right:15px;
top:-19pt;

}

#rgheader h1{
font-weight:lighter;
font-size:24px;

}

#rglinks{
position:absolute;
padding:10px;
top:0;
left:0;

}

#rglinks ul{
display:inline;
list-style:none;
margin:0px;

}

#rglinks li{
font-weight:bold;
display:inline;

}

#rglinks a{
color:#777777;
text-decoration:none;
margin-right:10px;
border-top:3px solid #CE3095;

}

#rglinks a:hover{
border-top:3px solid #F4C0DA;

}

#content{
width:auto;
height:500px;

}

#content h1{
text-align:right;
margin-right:20px;
margin-left:200px;
font-size:16pt;
border-bottom: 2px solid #F4C0DA;

}

#content p{
text-align:right;
margin:10px 20px 30px 200px;

}

#picturelist {
text-align:right;
list-style-type:none;
margin-right:15px;
margin-left:30px;

}

#picturelist li {
float:right;
margin-right:20px;
margin-bottom:10px;
font-weight:bold;
color:#777777;

}

#picturelist img{
display:block;
border:1px solid #CE3095;

}

#picturelist img:hover{
border:1px solid #F4C0DA;

}

#picturelist a{
color:#777777;
text-decoration:none;

}

#picturelist a:hover{
color:#999999;

[Beauregard T. Shagnasty]

arteccentrix wrote:

Please bear with me as I am new to both Firefox and CSS. I have
browsed through a number of groups looking for similar problems to my
own but can't find a definitive answer. If anyone here can help me
out I would appreciate your shared expertise so much.

My background image is displaying fine in IE, and, sometimes in
Firefox until I hit the reload button. It seems as if the browser is
unable to locate the image and throws up a graphic from my webhost
regarding remote image hosting. It is not a remotely hosted image,
it's right there in my images folder along with the CSS file.

You mean your 5x5 pixel .gif, right? Loads for me, first time in
several browsers.

If anyone can take a look and point out any glaring errors the CSS
file is below, and the url is http://www.arteccentrix.5u.com/index3.html

body{
font-family:Verdana, ...
font-size:9px;

Virtually unreadable in my browsers. See this, and switch to 100%:
http://k75s.home.att.net/fontsize.html

#rgheader{
top:-19pt;

Points are for printing.

#rgheader h1{
font-size:24px;

Use something around 150% or so instead of px.

#content h1{
font-size:16pt;

Use something around 130% or so instead of pt.

And most of all ... you definitely *need* to resize your images to the
exact size in pixels you want to display. Example:

http://www.arteccentrix.5u.com/image...ites_006-2.jpg
is way too large for a thumbnail at 53.85 KB (55,139 bytes)
and you want to display 100px × 99px
of a physically sized 480px × 342px file.
Never resize an image via HTML attributes.
This thumbnail should be maybe 5 to 8 KB at most.

The really wide pictures suffer greatly.

Right-justified English text is very hard to read.
Low-contrast text is hard to read.

Didn't look at any other pages.

--
-bts
-Warning: I brake for lawn deer

[Chris F.A. Johnson]

On 2006-07-05, arteccentrix wrote:

Please bear with me as I am new to both Firefox and CSS. I have browsed
through a number of groups looking for similar problems to my own but
can't find a definitive answer. If anyone here can help me out I would
appreciate your shared expertise so much.

My background image is displaying fine in IE, and, sometimes in Firefox
until I hit the reload button. It seems as if the browser is unable to
locate the image and throws up a graphic from my webhost regarding
remote
image hosting. It is not a remotely hosted image, it's right there in
my images folder along with the CSS file.

If anyone can take a look and point out any glaring errors the CSS file
is below, and the url is http://www.arteccentrix.5u.com/index3.html

You have more problems than that; see how it appears in my system
in Firefox 1.5.0.4 (380K):
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.jpg>.

/* CSS Document */

*{
body:0;
padding:0;
margin:0;

}

body{
background:url(http://www.arteccentrix.5u.com/images/bgstripes.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;

That's far too small. It is legible in my browser only because I
have a minimum size set.

There is no need to set the font size for the main text at anything
other than 100% or 1em; user should have their default font sizes
set at an appropriate size.

margin-top:75px;
text-align:center;
color: #777777;

}

#wrapper{
position:relative;
margin-left: auto;
margin-right: auto;
padding-top:100px;
width:800px;
height:600px;
background-color:#FFFFFF;
border: 2px solid #CE3095;

}

#rgheader{
text-align:right;
width:50%;
position:absolute;
right:15px;
top:-19pt;

}

#rgheader h1{
font-weight:lighter;
font-size:24px;

As noted above, use relative sizes.

}

#rglinks{
position:absolute;
padding:10px;
top:0;
left:0;

}

#rglinks ul{
display:inline;
list-style:none;
margin:0px;

}

#rglinks li{
font-weight:bold;
display:inline;

}

#rglinks a{
color:#777777;
text-decoration:none;
margin-right:10px;
border-top:3px solid #CE3095;

}

#rglinks a:hover{
border-top:3px solid #F4C0DA;

}

#content{
width:auto;
height:500px;

}

#content h1{
text-align:right;
margin-right:20px;
margin-left:200px;

200px could be anything from half the window (or more) to one
tenth (or less) of the window.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

[Ben Bacarisse]

arteccentrix <mo*****@btinternet.comwrote:
<snip>

My background image is displaying fine in IE, and, sometimes in Firefox
until I hit the reload button. It seems as if the browser is unable to
locate the image and throws up a graphic from my webhost regarding
remote
image hosting. It is not a remotely hosted image, it's right there in
my images folder along with the CSS file.

I suspect that something in the site's configuration is stopping the
server from treating the background image as a local file. Try:

background:url("/images/bgstripes.gif");

instead. BTW, I've always put quotes inside url(...) but they are not
required.

--
Ben.

[Neredbojias]

To further the education of mankind, "arteccentrix"
<mo*****@btinternet.comvouchsafed:

Please bear with me as I am new to both Firefox and CSS. I have browsed
through a number of groups looking for similar problems to my own but
can't find a definitive answer. If anyone here can help me out I would
appreciate your shared expertise so much.

My background image is displaying fine in IE, and, sometimes in Firefox
until I hit the reload button. It seems as if the browser is unable to
locate the image and throws up a graphic from my webhost regarding
remote
image hosting. It is not a remotely hosted image, it's right there in
my images folder along with the CSS file.
...snip
body{
background:url(http://www.arteccentrix.5u.com/images/bgstripes.gif);

If in same folder, just:

background:black url(bgstripes.gif);

--
Neredbojias
Infinity has its limits.

[arteccentrix]

Thanks for this Ben. I have tried what you suggest but still the
background is fine in IE and not showing in Firefox.

Maurice
Ben Bacarisse wrote:

I suspect that something in the site's configuration is stopping the
server from treating the background image as a local file. Try:

background:url("/images/bgstripes.gif");

instead. BTW, I've always put quotes inside url(...) but they are not
required.

--
Ben.

[arteccentrix]

Thanks Neredbojias. Again, I have tried your suggestion with the same
net result - still no bg in Firefox although works fine in IE.

Thanks for the help though.

Maurice

Neredbojias wrote:

If in same folder, just:

background:black url(bgstripes.gif);

--
Neredbojias
Infinity has its limits.

[arteccentrix]

>Beauregard T. Shagnasty wrote:

You mean your 5x5 pixel .gif, right? Loads for me, first time in
several browsers.

Thanks for confirmation but Firefox is the main culprit - not sure if
you tried FF.

body{
font-family:Verdana, ...
font-size:9px;

Virtually unreadable in my browsers. See this, and switch to 100%:
http://k75s.home.att.net/fontsize.html

This was a great help, thanks for teaching me. I have amended the CSS
as you suggest. It was a third party template I used as I thought it
would make things simpler Ha! Now I have a set of new problems to deal
with as larger text causes much of the content to spill over outside
the pink page margin/frame in Firefox (again)

And most of all ... you definitely *need* to resize your images to the
exact size in pixels you want to display. (snip)

Yes, I realize that I need to make proper thumbnails and am working on
them right now. Thanks for the advice, it's all been a big help.

Maurice

[arteccentrix]

Chris F.A. Johnson wrote:

You have more problems than that; see how it appears in my system
in Firefox 1.5.0.4 (380K):
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.jpg>.

Ouch, what an unholy mess! I see I have a long way to go before getting
this right don't I? Thanks for the heads up Chris, I'm glad I checked
things out before going any further.

All advice re text sizes has been incorporated now, although it throws
up new problems within FF.

#content{
width:auto;
height:500px;

}

#content h1{
text-align:right;
margin-right:20px;
margin-left:200px;

200px could be anything from half the window (or more) to one
tenth (or less) of the window.

Not wishing to sound too dumb (and failing) but what would you suggest
would be better on this point?

I thank you again Chris for your time and input, which has been
invaluable to me.

Maurice

[Beauregard T. Shagnasty]

arteccentrix wrote:

>>Beauregard T. Shagnasty wrote:
You mean your 5x5 pixel .gif, right? Loads for me, first time in
several browsers.

Thanks for confirmation but Firefox is the main culprit - not sure if
you tried FF.

Yes, Firefox, as that was your subject. The others were Opera,
SeaMonkey, IE, OffByOne as I recall. Still loads right away.

>>body{
font-family:Verdana, ...
font-size:9px;

Virtually unreadable in my browsers. See this, and switch to 100%:
http://k75s.home.att.net/fontsize.html

This was a great help, thanks for teaching me. I have amended the CSS
as you suggest. It was a third party template I used as I thought it
would make things simpler Ha! Now I have a set of new problems to
deal with as larger text causes much of the content to spill over
outside the pink page margin/frame in Firefox (again)

I removed this from the content style,
margin:10px 20px 30px 200px;
and the pink-bordered box expanded to fit the thumbnails.

I think the majority of the problems are due to all the margins set in
varying amounts of pixels. Why not remove all of them, and start over.

>And most of all ... you definitely *need* to resize your images to
the exact size in pixels you want to display. (snip)

Yes, I realize that I need to make proper thumbnails and am working
on them right now. Thanks for the advice, it's all been a big help.

You also have spaces in filenames. That is not always a good idea.
Recommend using all lower-case and either hyphens or underscores if you
think they are necessary (for all filenames, not just images).

Best of luck.

--
-bts
-Warning: I brake for lawn deer

[Chris F.A. Johnson]

On 2006-07-06, arteccentrix wrote:

>
Chris F.A. Johnson wrote:

> You have more problems than that; see how it appears in my system
in Firefox 1.5.0.4 (380K):
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.jpg>.

Ouch, what an unholy mess! I see I have a long way to go before getting
this right don't I? Thanks for the heads up Chris, I'm glad I checked
things out before going any further.

All advice re text sizes has been incorporated now, although it throws
up new problems within FF.

#content{
width:auto;
height:500px;

}

#content h1{
text-align:right;
margin-right:20px;
margin-left:200px;

200px could be anything from half the window (or more) to one
tenth (or less) of the window.

Not wishing to sound too dumb (and failing) but what would you suggest
would be better on this point?

Don't specify any more than you need to, and avoid fixed px sizes.
How about:

#content{
margin-left: 38%;
margin-right: 3%;
padding-bottom: 55px;
}
I've done a bit of mucking around with your stylesheet, and put it
up here:
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index3.html>

I don't know whether it's what you are looking for, but perhaps it
will give you some ideas. There are still problems with scaling the
heading and the links at the top.

I thank you again Chris for your time and input, which has been
invaluable to me.

You're welcome.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

[Neredbojias]

To further the education of mankind, "arteccentrix"
<mo*****@btinternet.comvouchsafed:

Thanks Neredbojias. Again, I have tried your suggestion with the same
net result - still no bg in Firefox although works fine in IE.

Thanks for the help though.

Hmm, in that case it's probably being covered by something in FF.

--
Neredbojias
Infinity has its limits.

[Chris F.A. Johnson]

On 2006-07-07, Chris F.A. Johnson wrote:

>
I've done a bit of mucking around with your stylesheet, and put it
up here:
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index3.html>

Or are you looking for something like this:

<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index4.html>
P.S. Centred text is even harder to read than flush right.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

[arteccentrix]

Hi Chris and thanks again

I like what you have done with
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index4.html>

More importantly, so does the artist!

I think I'm beginning to understand a little more about how it pulls
together but the last time I got involved with HTML of any kind was a
lot of years ago when it seemed simpler!
I would certainly appreciate the tweaked CSS. (All I need to work out
then is why FF keeps throwing my text out of the pink border instead of
resizing it to accommodate it).

Steep learning curve but you have been a wonderful help - I'd like to
credit you on the finished pages - perhaps with a link or something.
Let me know.

Maurice

On 2006-07-07, Chris F.A. Johnson wrote:

I've done a bit of mucking around with your stylesheet, and put it
up here:
<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index3.html>

Or are you looking for something like this:

<http://cfaj.freeshell.org/www/www.arteccentrix.5u.com/index4.html>
P.S. Centred text is even harder to read than flush right.

[arteccentrix]

Beauregard T. Shagnasty wrote:

Yes, Firefox, as that was your subject. The others were Opera,
SeaMonkey, IE, OffByOne as I recall. Still loads right away.

Thanks again, I'm relieved but still puzzled :-)

(snip)......larger text causes much of the content to spill over
outside the pink page margin/frame in Firefox (again)

I removed this from the content style,
margin:10px 20px 30px 200px;
and the pink-bordered box expanded to fit the thumbnails.

I think the majority of the problems are due to all the margins set in
varying amounts of pixels. Why not remove all of them, and start over.

More good advice for which I am indebted to you. Filenames comments
also noted - and I will rectify these along with all my other messy
HTML. Thanks for helping out someone who is very far from an expert.
Your good self, Chris, and all other respondents have been amazingly
generous. I will do my best to make the site worthy of all your efforts
:-)

Maurice