CSS problem - ok in IE, not in Firefox

CSS problem - ok in IE, not in Firefox

am 23.08.2007 05:31:07 von dalyea

This will probably be super easy for some of you CSS pros, but I can't
figure it out
at the moment. I'm going off the definition "floated text is relative
to the block element
containing it" but not having much luck on that front.

The page in question is:

http://www.skicandy.com/

and it's the header graphic and text that I can't figure out. The
header is:


Search our database of 75,000 ski products to find
the best pri
ces on skis, boots, bindings, poles, clothing and all your skiing
needs!

We search the web to find great ski deals for you! div>


and the CSS in the referenced css file is:

div#logo1 {
width: 971px;
height: 134px;
text-align: center;
align: center;
background-attachment: fixed;
background-image: url(/images/logo-971-1.gif);
background-alt: "Ski Search Engine";
background-repeat: no-repeat;
background-position: center top;
}

div#logo1t {
color: #000;
width: 375px;
font-family: "Trebuchet MS", Arial;
font-size: 12px;
font-weight: normal;
line-height: 14px;
position: relative;
top: 48px;
left: 115px;
}

div#logo1w {
color: #6b2a5a;
width: 375px;
font-family: "Trebuchet MS", Arial;
font-size: 14px;
font-weight: bold;
position: relative;
top: 53px;
left: 135px;
}

Thanks in advance!
David

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 05:54:46 von a.nony.mous

dalyea@gmail.com wrote:

> This will probably be super easy for some of you CSS pros, but I can't
> figure it out at the moment. I'm going off the definition "floated
> text is relative to the block element containing it" but not having
> much luck on that front.
> The page in question is:
> http://www.skicandy.com/

I would suggest fixing all the errors first. Who knows? It may solve
your problem.


"Failed validation, 158 Errors"


"Sorry! We found the following errors"

Start with a proper DOCTYPE:

"http://www.w3.org/TR/html4/strict.dtd">

Oh, and see this page as well:
http://k75s.home.att.net/fontsize.html
Your page gets even worse when I increase the font size so it is
legible. "font-size: 9pt;" is way too small, and points are for
printing, not screen.

A glance at your CSS ... it seems overly complicated.

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 08:39:51 von dalyea

On Aug 22, 8:54 pm, "Beauregard T. Shagnasty"
wrote:
> dal...@gmail.com wrote:
> > This will probably be super easy for some of you CSS pros, but I can't
> > figure it out at the moment. I'm going off the definition "floated
> > text is relative to the block element containing it" but not having
> > much luck on that front.
> > The page in question is:
> >http://www.skicandy.com/
>
> I would suggest fixing all the errors first. Who knows? It may solve
> your problem.
>
>
> "Failed validation, 158 Errors"
>
>
> "Sorry! We found the following errors"
>
> Start with a proper DOCTYPE:
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
> Oh, and see this page as well:http://k75s.home.att.net/fontsize.html
> Your page gets even worse when I increase the font size so it is
> legible. "font-size: 9pt;" is way too small, and points are for
> printing, not screen.
>
> A glance at your CSS ... it seems overly complicated.
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck

Thanks for the reply. I fixed all 158 errors and now the page passes
on W3C. That was the right place to start, you're right.

So now - what? The top of the page is still off.

David

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 09:15:46 von John Hosking

dalyea@gmail.com wrote:
> On Aug 22, 8:54 pm, "Beauregard T. Shagnasty" wrote:

>>
>>
>> "Failed validation, 158 Errors"
>>
>>
>> "Sorry! We found the following errors"

>
> Thanks for the reply. I fixed all 158 errors and now the page passes
> on W3C. That was the right place to start, you're right.

Beauregard also pointed you to http://jigsaw.w3.org/css-validator/ where
you will see that you still have 36 errors in your CSS. You're not done
starting. ;-)

>
> So now - what? The top of the page is still off.

If I add 300px to each of your left: values in #logo1t and #logo1w, the
header looks better, though not perfect, and possibly not what you
wanted, and as BTS mentioned, it breaks badly when I upsize the text.


--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 14:16:42 von a.nony.mous

John Hosking wrote:

> dalyea@gmail.com wrote:
>> Thanks for the reply. I fixed all 158 errors and now the page passes
>> on W3C. That was the right place to start, you're right.

I did suggest using HTML 4.01 Strict ("Failed validation, 165 Errors")
but it would be easier, far easier, to rewrite the page(s) from scratch
to move from Transitional to Strict.

> Beauregard also pointed you to http://jigsaw.w3.org/css-validator/
> where you will see that you still have 36 errors in your CSS. You're
> not done starting. ;-)

Not to mention styling errors embedded in the HTML, such as:

style="margin: 4 0 4 0;

4 what? Hobnobs? Potatoes?

>> So now - what? The top of the page is still off.
>
> If I add 300px to each of your left: values in #logo1t and #logo1w,
> the header looks better, though not perfect, and possibly not what
> you wanted, and as BTS mentioned, it breaks badly when I upsize the
> text.

Did you notice how the banner graphic scrolls in IE6, but not anywhere
else? This page is another case of "designed in IE - works ok, now what
to I have to hack to get it to work in better browsers?"

And somehow I don't associate pink and powder blue with skiing... (no,
I am not a skier.)

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 15:08:37 von Martin Jay

On Thu, 23 Aug 2007 03:31:07 -0000, "dalyea@gmail.com"
wrote:

>This will probably be super easy for some of you CSS pros, but I can't
>figure it out
>at the moment. I'm going off the definition "floated text is relative
>to the block element
>containing it" but not having much luck on that front.
>
>The page in question is:
>
>http://www.skicandy.com/
>
>and it's the header graphic and text that I can't figure out. The
>header is:
>
>


>
Search our database of 75,000 ski products to find
>the best pri
>ces on skis, boots, bindings, poles, clothing and all your skiing
>needs!

>
We search the web to find great ski deals for you! >div>
>

>
>and the CSS in the referenced css file is:
>
>div#logo1 {
>width: 971px;
>height: 134px;
>text-align: center;
>align: center;
>background-attachment: fixed;
>background-image: url(/images/logo-971-1.gif);
>background-alt: "Ski Search Engine";
>background-repeat: no-repeat;
>background-position: center top;
>}
>
>div#logo1t {
>color: #000;
>width: 375px;
>font-family: "Trebuchet MS", Arial;
>font-size: 12px;
>font-weight: normal;
>line-height: 14px;
>position: relative;
>top: 48px;
>left: 115px;
>}
>
>div#logo1w {
>color: #6b2a5a;
>width: 375px;
>font-family: "Trebuchet MS", Arial;
>font-size: 14px;
>font-weight: bold;
>position: relative;
>top: 53px;
>left: 135px;
>}
>
>Thanks in advance!
>David

You've still got some very nasty stuff in your CSS. Anyway, IE is
getting all confused because you've centered the body, and you've also
centered 'div#logo1t' and 'div#logo1w.' This leads to it computing
the relative positioning incorrectly.

The 'fix' is simple. In 'div#logo1' change:

text-align: center;

to:

text-align: left;

And in 'div#logo1t' and 'div#logo1w' you simply need to adjust the
'left' attribute.
--
Martin Jay

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 15:12:20 von rf

"Beauregard T. Shagnasty" wrote in message
news:KUezi.454502$p47.229439@bgtnsc04-news.ops.worldnet.att. net...
> John Hosking wrote:

> And somehow I don't associate pink and powder blue with skiing... (no,
> I am not a skier.)

One can wear ski gear of colours that would have you arrested on the streets
of any major city.

You haven't seen the lime green and purple number I sometimes wear during
the Perisher to Charlottes race, with my paisley hat.

Not the lime green nor the hat but you can see Bill and I with our purple
bottoms:
http://192.168.0.4/mulubinba/picture.html?p=312 :-)

--
Richard.

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 15:36:56 von lws4art

rf wrote:
> "Beauregard T. Shagnasty" wrote in message
> news:KUezi.454502$p47.229439@bgtnsc04-news.ops.worldnet.att. net...
>> John Hosking wrote:
>
>> And somehow I don't associate pink and powder blue with skiing... (no,
>> I am not a skier.)
>
> One can wear ski gear of colours that would have you arrested on the streets
> of any major city.
>
> You haven't seen the lime green and purple number I sometimes wear during
> the Perisher to Charlottes race, with my paisley hat.
>
> Not the lime green nor the hat but you can see Bill and I with our purple
> bottoms:
> http://192.168.0.4/mulubinba/picture.html?p=312 :-)
^^^^^^^^^
We better not! That is a *private* LAN IP. It would be a serious error
if your router let that address leak out onto the web.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 15:48:51 von rf

"Jonathan N. Little" wrote in message
news:85e62$46cd8d6a$40cba7c7$12016@NAXS.COM...
> rf wrote:

> We better not! That is a *private* LAN IP. It would be a serious error if
> your router let that address leak out onto the web.

Damn. I was Looking at the local backup site during the URL copy/paste, not
the live one :-(
FWIW: http://mulubinba.com.au/picture.html?p=312

> Take care,

Usually I do :-)

--
Richard.

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 16:00:34 von a.nony.mous

rf wrote:

> "Beauregard T. Shagnasty" wrote:
>> And somehow I don't associate pink and powder blue with skiing...
>> (no, I am not a skier.)
>
> One can wear ski gear of colours that would have you arrested on the
> streets of any major city.
>
> You haven't seen the lime green and purple number I sometimes wear
> during the Perisher to Charlottes race, with my paisley hat.

Heh, I think I am fortunate for that.

> Not the lime green nor the hat but you can see Bill and I with our
> purple bottoms:
> http://192.168.0.4/mulubinba/picture.html?p=312 :-)

Praise &deity; I can't see your purple bottom!

To my eye, the OP's site looks more like a site selling Barbie doll
clothes. It's the pink...

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 16:20:42 von rf

"Beauregard T. Shagnasty" wrote in message
news:6qgzi.454715$p47.263179@bgtnsc04-news.ops.worldnet.att. net...

> To my eye, the OP's site looks more like a site selling Barbie doll
> clothes. It's the pink...

Ah yes. I see. It is very pink. The pink is my default pink background which
shows through because the OP did not specify a background colour. I didn't
notice that at first :-)

Note to OP: your "candy graphic" logo or whatever it is: It's so badly
anti-aliased that I suspect you don't even know what anti-aliasing is.

Oh My &deity. I just clicked on one of the links on the left hand side of
the page. I am presented with a table that is about 100 times as long as I
am prepared to look at. You expect me to buy stuff from that? And what's
with the bloody popups and new tabs?



No thanks. End of interest in this site. Pity, as I am very much in your
demograhic, being a ski instuctor. You are obviously catering to the
amateurs, those who know no better. Good luck with your "shop".

--
Richard.

Re: CSS problem - ok in IE, not in Firefox

am 23.08.2007 16:33:38 von a.nony.mous

rf wrote:

> Damn. I was Looking at the local backup site during the URL
> copy/paste, not the live one :-(
> FWIW: http://mulubinba.com.au/picture.html?p=312

Not as bad as what I was expecting.

Still .... "Nice pants!" (spoken with a wry twist)

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS problem - ok in IE, not in Firefox

am 24.08.2007 08:11:12 von dalyea

On Aug 23, 12:15 am, John Hosking
wrote:
> dal...@gmail.com wrote:
> > On Aug 22, 8:54 pm, "Beauregard T. Shagnasty" wrote:
>
> >>
> >> "Failed validation, 158 Errors"
>
> >>
> >> "Sorry! We found the following errors"
>
> > Thanks for the reply. I fixed all 158 errors and now the page passes
> > on W3C. That was the right place to start, you're right.
>
> Beauregard also pointed you tohttp://jigsaw.w3.org/css-validator/where
> you will see that you still have 36 errors in your CSS. You're not done
> starting. ;-)
>
>
>
> > So now - what? The top of the page is still off.
>
> If I add 300px to each of your left: values in #logo1t and #logo1w, the
> header looks better, though not perfect, and possibly not what you
> wanted, and as BTS mentioned, it breaks badly when I upsize the text.
>
> --
> John
> Pondering the value of the UIP:http://blinkynet.net/comp/uip5.html

Oh crud. Yeah, I'll have to fix those problems, too. Thanks for
pointing it out.

Well, I got up first thing today and dug in on the problem. And it
took
a mere 10 minutes to solve.

In a nutshell, it was 2 things. I am centering the page, but
apparently
(and you all probably know this already) centering in IE and FF is
different. So I added the body text-align center and the margin 0
auto
"trick" as a starting point. Then, I noticed I wasn't declaring a
float
property! As soon as I added "float: left;" it all worked. So that's
that.

Thanks for the responses, I'm in business now.

David

Re: CSS problem - ok in IE, not in Firefox

am 25.08.2007 06:35:39 von dalyea

On Aug 23, 5:16 am, "Beauregard T. Shagnasty"
wrote:
> John Hosking wrote:
> > dal...@gmail.com wrote:
> >> Thanks for the reply. I fixed all 158 errors and now the page passes
> >> on W3C. That was the right place to start, you're right.
>
> I did suggest using HTML 4.01 Strict ("Failed validation, 165 Errors")
> but it would be easier, far easier, to rewrite the page(s) from scratch
> to move from Transitional to Strict.
>
> > Beauregard also pointed you tohttp://jigsaw.w3.org/css-validator/
> > where you will see that you still have 36 errors in yourCSS. You're
> > not done starting. ;-)
>
> Not to mention styling errors embedded in the HTML, such as:
>
> style="margin: 4 0 4 0;
>
> 4 what? Hobnobs? Potatoes?
>
> >> So now - what? The top of the page is still off.
>
> > If I add 300px to each of your left: values in #logo1t and #logo1w,
> > the header looks better, though not perfect, and possibly not what
> > you wanted, and as BTS mentioned, it breaks badly when I upsize the
> > text.
>
> Did you notice how the banner graphic scrolls in IE6, but not anywhere
> else? This page is another case of "designed in IE - works ok, now what
> to I have to hack to get it to work in better browsers?"
>
> And somehow I don't associate pink and powder blue with skiing... (no,
> I am not a skier.)
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck

Thanks for the feedback. Just made more fixes. And I'll continue to
do
more until it's all clean and neat. Pink and blue = skiing, for sure!

David

Re: CSS problem - ok in IE, not in Firefox

am 25.08.2007 06:36:22 von dalyea

On Aug 23, 6:08 am, Martin Jay wrote:
> On Thu, 23 Aug 2007 03:31:07 -0000, "dal...@gmail.com"
>
>
>
>
>
> wrote:
> >This will probably be super easy for some of youCSSpros, but I can't
> >figure it out
> >at the moment. I'm going off the definition "floated text is relative
> >to the block element
> >containing it" but not having much luck on that front.
>
> >The page in question is:
>
> >http://www.skicandy.com/
>
> >and it's the header graphic and text that I can't figure out. The
> >header is:
>
> >


> >
Search our database of 75,000 ski products to find
> >the best pri
> >ces on skis, boots, bindings, poles, clothing and all your skiing
> >needs!

> >
We search the web to find great ski deals for you! > >div>
> >

>
> >and theCSSin the referencedcssfile is:
>
> >div#logo1 {
> >width: 971px;
> >height: 134px;
> >text-align: center;
> >align: center;
> >background-attachment: fixed;
> >background-image: url(/images/logo-971-1.gif);
> >background-alt: "Ski Search Engine";
> >background-repeat: no-repeat;
> >background-position: center top;
> >}
>
> >div#logo1t {
> >color: #000;
> >width: 375px;
> >font-family: "Trebuchet MS", Arial;
> >font-size: 12px;
> >font-weight: normal;
> >line-height: 14px;
> >position: relative;
> >top: 48px;
> >left: 115px;
> >}
>
> >div#logo1w {
> >color: #6b2a5a;
> >width: 375px;
> >font-family: "Trebuchet MS", Arial;
> >font-size: 14px;
> >font-weight: bold;
> >position: relative;
> >top: 53px;
> >left: 135px;
> >}
>
> >Thanks in advance!
> >David
>
> You've still got some very nasty stuff in yourCSS. Anyway, IE is
> getting all confused because you've centered the body, and you've also
> centered 'div#logo1t' and 'div#logo1w.' This leads to it computing
> the relative positioning incorrectly.
>
> The 'fix' is simple. In 'div#logo1' change:
>
> text-align: center;
>
> to:
>
> text-align: left;
>
> And in 'div#logo1t' and 'div#logo1w' you simply need to adjust the
> 'left' attribute.
> --
> Martin Jay- Hide quoted text -
>
> - Show quoted text -

I had changed that in the course of making the fixes the other
morning,
and you were right on the money, center was wrong. Thanks for
checking
it out.

David