Stylesheets - Works on Firefox not IE Why?

Author

Works on Firefox not IE Why?

News

2006-04-19, 6:44 pm

I am trying to create a header and a menu using CSS, my idea is sort of
working on FF but IE it looks gross. I cannot tell why, could anyone help
me.

Also why is there a space between all the <div> shown when the page is
render (if that is the correct term) by a browser? How can I fix that?

Here is the URL
http://www.wyght.com/warren/tmbanner.html

--

Totus possum, totum Deum.
Totus ero, totum meum.
WSW

News

2006-04-19, 6:44 pm

"News" <warren@no_S_P_A_M_wyght.com> wrote in message
news:VCx1g.28$FY1.27@clgrps12...
>I am trying to create a header and a menu using CSS, my idea is sort of
>working on FF but IE it looks gross. I cannot tell why, could anyone help
>me.

That was poorly written. Let me try again.

first here is my CSS file
http://www.wyght.com/warren/Warren/TMBanner.css
here is the url
http://www.wyght.com/warren/tmbanner.html

First question

Why are there spaces between the <div> tags with the word 'Home' in the tag?
If you look on IE there is a space between each tag on Fire Fox there is a
space between two different tags. Could someone please tell me why.

Second question

One IE the "yellow" line crowds out the purple line and there is a gap
between the the top <div> tag and the second line <div> tags. the width was
set for 100% in my css file yet that does not seem to be working either.

Could someone please explain what I have done wrong here?

Thanks

--

Totus possum, totum Deum.
Totus ero, totum meum.
WSW

frederick@southernskies.co.uk

2006-04-20, 3:42 am

News wrote:
> first here is my CSS file
> http://www.wyght.com/warren/Warren/TMBanner.css
> here is the url
> http://www.wyght.com/warren/tmbanner.html

Please get your XHTML to validate before posting! You have an unclosed
link element, and two script elements in illegal positions.

I'm afraid your code is rather a dog's dinner, particularly the CSS.
Just try changing the font size in your browser, and you'll see what I
mean...

Here's what you need to do to overhaul your code, and in the course of
things fix the problems that you knew about, the problems that you
probably knew about but hadn't yet dealt with, and the problems that
you perhaps didn't know were there:
1. Set your body margins to zero.
2. Delete the stray character between "</script>" and "<body>". If
you leave it in and follow the next few steps, you'll soon see why this
is important!
3. Wrap everything that you currently have in the body in a new div
with an id of (say) "HeaderBlock".
4. Remove the rules for font-family, font-size, font-style,
text-align, and color from all of your elements, and put them in as a
rules for "HeaderBlock". Note that "ITC Avant Garde Gothic" should be
in quotes. Also, it's not sensible to only specify a single font name,
(Google "web-safe fonts"), so add a couple of alternatives, and make
sure that you end the list with a generic catch-all such as "serif"
(except make sure you don't use quote marks for it!).
5. Add a height in pixels for "BannerPurple", and add a height for
"BannerGold".
6. Wrap menu1 through menu10 with a <ul> element, and change the
individual divs into li elements. In your stylesheet, set the margin
and padding for <ul> to zero; you need to set both to get the two
browsers doing the same thing.
7. Get rid of all the rules for classes .tbPos and .space, and those
for classes menu1 through menu10.
8. Remove the absolute positioning for all elements, as well as all
remaining rules for "left", "top", "bottom", and "width". Remove all
the height rules (except for the two mentioned in item 5 above). Set
the margin for "BannerPurple" and "BannerGold" to "0% 2.5%".
9. Add the following style rules for <li>: "float: left", "width:
10%", "list-style-type: none". Consider adding appropriate left and
right padding and margins for the element.
10. Move "SomeSite" to a new div within "BannerGreen"; let's call it
"BannerText", so that the text is in a sibling div to the rest of
"BannerGreen".
11. Set the font-size for <li> at 125%, for "BannerText" at 250%, and
for "BannerGold" at "0px". The last of these avoids height problems
with the gold bar in IE.
12. Set the background-color for <li> and "HeaderBlock" to #004401.
13. Remove the redundant commented-out table from your XHTML source
code.

If you do the above your stylesheet will go from 196 to 43 lines of
code, your design will be flexible, it'll look identical* in IE and
Firefox, and it should be a darned sight easier to maintain than it is
at present.

You might also want to finesse things further by using conditional
commenting, so that Firefox and Opera and so on can use ":hover" for
the <li> boxes, but that the external JavaScript file is downloaded for
IE 6 and under; you would then avoid the need for browser-sniffing and
could pare your script down accordingly.

Finally, if you're not already using them, I'd strongly recommend the
Web Developer extension for Firefox, and the Internet Explorer
Developer Toolbar. You'll be able to use these to make experimental
changes on the fly with your CSS, as well as being able to understand
better some of the things that the two browsers do behind the scenes.

Hope that the above was of use. No refunds offered for any errors,
omissions, or howlers!

* Usual disclaimers apply.

--
AGw.

News

2006-04-20, 7:25 pm

frederick@southernskies.co.uk wrote:
> News wrote:
>
> Please get your XHTML to validate before posting! You have an
> unclosed link element, and two script elements in illegal positions.
>
>
> I'm afraid your code is rather a dog's dinner, particularly the CSS.
> Just try changing the font size in your browser, and you'll see what I
> mean...
>
> Here's what you need to do to overhaul your code, and in the course of
> things fix the problems that you knew about, the problems that you
> probably knew about but hadn't yet dealt with, and the problems that
> you perhaps didn't know were there:
> 1. Set your body margins to zero.
> 2. Delete the stray character between "</script>" and "<body>". If
> you leave it in and follow the next few steps, you'll soon see why
> this is important!
> 3. Wrap everything that you currently have in the body in a new div
> with an id of (say) "HeaderBlock".
> 4. Remove the rules for font-family, font-size, font-style,
> text-align, and color from all of your elements, and put them in as a
> rules for "HeaderBlock". Note that "ITC Avant Garde Gothic" should be
> in quotes. Also, it's not sensible to only specify a single font
> name, (Google "web-safe fonts"), so add a couple of alternatives, and
> make sure that you end the list with a generic catch-all such as
> "serif" (except make sure you don't use quote marks for it!).
> 5. Add a height in pixels for "BannerPurple", and add a height for
> "BannerGold".
> 6. Wrap menu1 through menu10 with a <ul> element, and change the
> individual divs into li elements. In your stylesheet, set the margin
> and padding for <ul> to zero; you need to set both to get the two
> browsers doing the same thing.
> 7. Get rid of all the rules for classes .tbPos and .space, and those
> for classes menu1 through menu10.
> 8. Remove the absolute positioning for all elements, as well as all
> remaining rules for "left", "top", "bottom", and "width". Remove all
> the height rules (except for the two mentioned in item 5 above). Set
> the margin for "BannerPurple" and "BannerGold" to "0% 2.5%".
> 9. Add the following style rules for <li>: "float: left", "width:
> 10%", "list-style-type: none". Consider adding appropriate left and
> right padding and margins for the element.
> 10. Move "SomeSite" to a new div within "BannerGreen"; let's call it
> "BannerText", so that the text is in a sibling div to the rest of
> "BannerGreen".
> 11. Set the font-size for <li> at 125%, for "BannerText" at 250%, and
> for "BannerGold" at "0px". The last of these avoids height problems
> with the gold bar in IE.
> 12. Set the background-color for <li> and "HeaderBlock" to #004401.
> 13. Remove the redundant commented-out table from your XHTML source
> code.
>
> If you do the above your stylesheet will go from 196 to 43 lines of
> code, your design will be flexible, it'll look identical* in IE and
> Firefox, and it should be a darned sight easier to maintain than it is
> at present.
>
> You might also want to finesse things further by using conditional
> commenting, so that Firefox and Opera and so on can use ":hover" for
> the <li> boxes, but that the external JavaScript file is downloaded
> for IE 6 and under; you would then avoid the need for
> browser-sniffing and could pare your script down accordingly.
>
> Finally, if you're not already using them, I'd strongly recommend the
> Web Developer extension for Firefox, and the Internet Explorer
> Developer Toolbar. You'll be able to use these to make experimental
> changes on the fly with your CSS, as well as being able to understand
> better some of the things that the two browsers do behind the scenes.
>
> Hope that the above was of use. No refunds offered for any errors,
> omissions, or howlers!
>
>
> * Usual disclaimers apply.

Greif I am thinking I have just enough knowledge to destroy myself.

Thanks for this I am going to print it out and go over everything you have
pointed out to me.

Have a great day

--

Totus possum, totum Deum.
Totus ero, totum meum.
WSW

frederick

2006-04-20, 7:25 pm

News wrote:
> frederick@southernskies.co.uk wrote:
> [detailed advice snipped]
>
> Greif I am thinking I have just enough knowledge to destroy myself.
>
> Thanks for this I am going to print it out and go over everything you have
> pointed out to me.

If you have any questions, just post them to this thread.

I could probably have put it all in a better sequence, so that you
could have seen incremental improvements with each step. Anyhoo, I
hope it proves useful.

> Have a great day

Well, it's raining here, which I don't mind... but it's too damned
cold!!

--
AGw.