Stylesheets - Internet Explorer not rendering CSS properly

Author

Internet Explorer not rendering CSS properly - fine in Firefox

2005-10-28, 6:40 pm

IE 6
Firefox looks just fine.
I have run my html and css through the W3C validator. The html is fine
and the css gets the following:

"Line : 3 (Level : 1) You have no color with your background-color :
body Line : 23 (Level : 1) You have no background-color with your color
: div#content h1 Line : 25 (Level : 1) Family names containing
whitespace should be quoted. If quoting is omitted, any whitespace
characters before and after the name are ignored and any sequence of
whitespace characters inside the name is converted to a single space. :
div#content h1 Line : 28 (Level : 1) Family names containing whitespace
should be quoted. If quoting is omitted, any whitespace characters
before and after the name are ignored and any sequence of whitespace
characters inside the name is converted to a single space. :
div#content h2 Line : 31 (Level : 1) Family names containing whitespace
should be quoted. If quoting is omitted, any whitespace characters
before and after the name are ignored and any sequence of whitespace
characters inside the name is converted to a single space. :
div#content h3 Line : 36 (Level : 1) You have no background-color with
your color : em.emRed "
These do not seem like they would cause my issue, which is, text over
text. The following works fine in Firefox but looks like this in IE6:
http://home.cfl.rr.com/jmartin104/uhf/
I'm new to CSS and learning. What is going on?

kchayka

2005-10-28, 6:40 pm

TC wrote:
>
> The following works fine in Firefox but looks like this in IE6:
> http://home.cfl.rr.com/jmartin104/uhf/

If you're going to absolutely position something, you should set the
top, left, right and/or bottom properties as well. Suggest you start
with top:0 and left:0 then adjust to taste.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Beauregard T. Shagnasty

2005-10-28, 6:40 pm

TC wrote:

> IE 6
> Firefox looks just fine.
> I have run my html and css through the W3C validator. The html is fine
> and the css gets the following:
<snip errors>

Fix the errors, because browsers have the right to ignore bad CSS.

> These do not seem like they would cause my issue, which is, text over
> text. The following works fine in Firefox but looks like this in IE6:
> http://home.cfl.rr.com/jmartin104/uhf/

404. It will help greatly if you give a URL to the page in question.

> I'm new to CSS and learning. What is going on?

Can't tell until we can see the page.

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

2005-10-28, 6:40 pm

kchayka wrote:

> TC wrote:
>
> If you're going to absolutely position something, you should set the
> top, left, right and/or bottom properties as well. Suggest you start
> with top:0 and left:0 then adjust to taste.

That seems to fix that problem. Thanks!

2005-10-28, 6:40 pm

Jim Moe

2005-10-28, 6:40 pm

TC wrote:
> IE 6
> Firefox looks just fine.
> I have run my html and css through the W3C validator. The html is fine
> and the css gets the following:
>
As kchayka mentioned, you must supply positioning information when
using position:absolute: top, bottom, left, right. Otherwise you leave it
to the browser's imagination about where to put the block.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Beauregard T. Shagnasty

2005-10-28, 6:40 pm

Beauregard T. Shagnasty wrote:

>
> 404. It will help greatly if you give a URL to the page in question.

Ah, now it's working...

I don't see any need for the absolute positioning at all. Float the nav
div left, and give a suitable left margin to the content div. Use em
instead of px, so when I increase the text, the divs expand with it.

font-family:times new roman, arial, sans-serif;
should be:
font-family: "Times New Roman", arial, sans-serif;
font names with spaces need quoted.

but why you want to mix serif and sans-serif fonts remains a mystery.

Consider also not using the color name in the selector.
em.emRed {color:red;}
Try em.emhot {color:red;}
because next week you may want to use .. green .. and it will look
strange to have a style called .emred that displays green.

Whenever you assign a color, or background color, you need to assign the
other as well.

185.72 KB (190181 bytes) for the background image is waaay to heavy. At
Width: 1199px, Height: 801px. The edge where it repeats isn't pretty
either. It needs more fading as I think it interferes with reading the
content.

Your logo is 44.42 KB (45485 bytes) and is resized in the HTML. Fix
that. Same for the photo of the boys: 182.36 KB (186741 bytes) and
resized from Physical Width: 592px, Physical Height: 400px

Otherwise, it's pretty good.

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

2005-10-28, 6:40 pm

Beauregard T. Shagnasty wrote:

> TC wrote:
>
> <snip errors>
>
> Fix the errors, because browsers have the right to ignore bad CSS.
>
>
> 404. It will help greatly if you give a URL to the page in question.
>
>
> Can't tell until we can see the page.

Try again. The upload failed the first time. The validator actually
called them Warnings. Not sure if that makes a difference to IE.

2005-10-28, 6:40 pm

Beauregard T. Shagnasty wrote:

> Beauregard T. Shagnasty wrote:
>
>
> Ah, now it's working...
>
> I don't see any need for the absolute positioning at all. Float the
> nav div left, and give a suitable left margin to the content div. Use
> em instead of px, so when I increase the text, the divs expand with
> it.

I'll remove this. It came from my book but I think it had to do with
some example.

>
> font-family:times new roman, arial, sans-serif;
> should be:
> font-family: "Times New Roman", arial, sans-serif;
> font names with spaces need quoted.

That's what the CSS validator was complaining about.

>
> but why you want to mix serif and sans-serif fonts remains a mystery.

Even to me. It was another example. I have a book on fonts but can't
seem to find it.

>
> Consider also not using the color name in the selector.
> em.emRed {color:red;}
> Try em.emhot {color:red;}
> because next week you may want to use .. green .. and it will look
> strange to have a style called .emred that displays green.
>

Agreed.

> Whenever you assign a color, or background color, you need to assign
> the other as well.

How do you make the background color clear? I mean, if the text is
going over an image, you don't really want to SEE a background color.
Transparent? Is that a color?

>
> 185.72 KB (190181 bytes) for the background image is waaay to heavy.
> At Width: 1199px, Height: 801px. The edge where it repeats isn't
> pretty either. It needs more fading as I think it interferes with
> reading the content.
>

Oh yeah, I have to go back over the images for sure. Right now, they
are being used as ideas for design.

> Your logo is 44.42 KB (45485 bytes) and is resized in the HTML. Fix
> that. Same for the photo of the boys: 182.36 KB (186741 bytes) and
> resized from Physical Width: 592px, Physical Height: 400px
>
> Otherwise, it's pretty good.

Thanks! I need to read up some more. My book is not real clear on the
use of em.

Beauregard T. Shagnasty

2005-10-28, 6:40 pm

TC wrote:

> How do you make the background color clear? I mean, if the text is
> going over an image, you don't really want to SEE a background color.
> Transparent? Is that a color?

background-color: transparent; is legal. The reason is your visitor may
have a default black background, and your black text would be invisible
on it.

> Thanks! I need to read up some more. My book is not real clear on the
> use of em.

For most things, you can use some value of em instead of px, except
maybe for borders. Play with it, maybe starting with your nav div at
somewhere around 13em wide, and the content with a left margin of 14em.

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

2005-10-28, 6:40 pm

Beauregard T. Shagnasty wrote:

> Beauregard T. Shagnasty wrote:
>
>
> Ah, now it's working...
>
> I don't see any need for the absolute positioning at all. Float the
> nav div left, and give a suitable left margin to the content div. Use
> em instead of px, so when I increase the text, the divs expand with
> it.
>
> font-family:times new roman, arial, sans-serif;
> should be:
> font-family: "Times New Roman", arial, sans-serif;
> font names with spaces need quoted.
>
> but why you want to mix serif and sans-serif fonts remains a mystery.
>
> Consider also not using the color name in the selector.
> em.emRed {color:red;}
> Try em.emhot {color:red;}
> because next week you may want to use .. green .. and it will look
> strange to have a style called .emred that displays green.
>
> Whenever you assign a color, or background color, you need to assign
> the other as well.
>
> 185.72 KB (190181 bytes) for the background image is waaay to heavy.
> At Width: 1199px, Height: 801px. The edge where it repeats isn't
> pretty either. It needs more fading as I think it interferes with
> reading the content.
>
> Your logo is 44.42 KB (45485 bytes) and is resized in the HTML. Fix
> that. Same for the photo of the boys: 182.36 KB (186741 bytes) and
> resized from Physical Width: 592px, Physical Height: 400px
>
> Otherwise, it's pretty good.

Thanks for the help! I got it looking much better now.

2005-10-28, 6:40 pm

kchayka

2005-10-28, 10:27 pm

TC wrote:
>
> When would you want to use absolute over floating?

I'd be very cautious about using absolute positioning if you don't
really understand how it works, or the implications of using it.

There are already way too many sites out there that think absolute
positioning is a great way to make a pixel-perfect design. It isn't.

That's not to say floats don't have their own issues. They do.

A short list of some pros and cons can be found at
<URL:http://css-discuss.incutio.com/?pag...teOrFloatLayout>

You can't really make an informed decision until you understand how
these positioning models work. You could go read the specs, even though
they aren't all that easy to digest for a relative newbie.
<URL:http://www.w3.org/TR/CSS21/visuren.html>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.