CSS problem - ok in IE, not in Firefox

D

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:

<div id="logo1">
<div id="logo1t">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!</div>
<div id="logo1w">We search the web to find great ski deals for you!</
div>
</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
 
B

Beauregard T. Shagnasty

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/
Click to expand...

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

<http://validator.w3.org/check?verbose=1&uri=http://www.skicandy.com/>
"Failed validation, 158 Errors"

<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http://www.skicandy.com/>
"Sorry! We found the following errors"

Start with a proper DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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.
 
D

dalyea

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

<http://validator.w3.org/check?verbose=1&uri=http://www.skicandy...>
"Failed validation, 158 Errors"

<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&u...>
"Sorry! We found the following errors"

Start with a proper DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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.
Click to expand...

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
 
J

John Hosking

On Aug 22, 8:54 pm, "Beauregard T. Shagnasty" wrote:
Click to expand...
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.
Click to expand...

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.
Click to expand...

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.
 
B

Beauregard T. Shagnasty

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. ;-)
Click to expand...

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

style="margin: 4 0 4 0;

4 what? Hobnobs? Potatoes?
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.
Click to expand...

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.)
 
M

Martin Jay

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:

<div id="logo1">
<div id="logo1t">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!</div>
<div id="logo1w">We search the web to find great ski deals for you!</
div>
</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
Click to expand...

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.
 
R

rf

Beauregard T. Shagnasty said:
John Hosking wrote:
Click to expand...
And somehow I don't associate pink and powder blue with skiing... (no,
I am not a skier.)
Click to expand...

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 :)
 
J

Jonathan N. Little

rf said:
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 :)
Click to expand...
^^^^^^^^^
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.
 
B

Beauregard T. Shagnasty

rf said:
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.
Click to expand...

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 :)
Click to expand...

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...
 
R

rf

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

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?

<searches further>

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".
 
D

dalyea

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. ;-)




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.
Click to expand...

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
 
D

dalyea

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.


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

style="margin: 4 0 4 0;

4 what? Hobnobs? Potatoes?



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.)
Click to expand...

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
 
D

dalyea

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.
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Why is the e.target not working here? 1
Help with my responsive home page 2
Centering a button using flexbox 2
Slideshow not working properly 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Having difficulty with the layout of these images / video for this web page 2
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 25 (members: 1, guests: 24)
Robots: 168

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top