Stylesheets - Help for a newbie please. Working ok in IE but not in FF or N/scape

Author

Help for a newbie please. Working ok in IE but not in FF or N/scape

Paul Burke

2005-01-23, 7:19 pm

Hi all
I have been making a web site for a friend and was written in html
with a splash of css (for fonts, h1 etc)

I am starting to re-write it (if I can) using as much css as possible
without using too many hacks etc.

Here are two pages that I have done using css.
http://tinyurl.com/5r73f
http://tinyurl.com/4t7yg

- sorry for the "tiny" urls. It is just that I don't want the addy
showing up in forums etc. -

I know I need to do a footer, and the page needs tweaking, but it is
the layout I want to get right first. And it just ain't happening. :(

If you look at the last two links in IE, then you will see that IE is
showing it the way I would like. - box around the "contents" area and
shows wider on screen.

Unfortunately Firefox and Nutscrape do not.
Both of these browsers are placing the border around the top section
only and the text is in a narrower screen.

It is probably something silly like a misplaced div that is the cause
of the problem, but if anybody can help on this please, it will save
me more hours pulling my hair over it.

I hope I have explained it clear enough. Sorry if I haven't

Thank you for any help
Kind Regards
Paul

kchayka

2005-01-24, 7:21 pm

Paul Burke wrote:
>
> http://tinyurl.com/5r73f
> http://tinyurl.com/4t7yg
>
> IE is
> showing it the way I would like. - box around the "contents" area and
> shows wider on screen.
>
> Unfortunately Firefox and Nutscrape do not.

You don't say what version of "Nutscrape" you're referring to. No
matter. Where CSS is concerned, Inept Explorer is a big pile of poo
compared to Netscape 7. NS4 is a different story, of course.

Now that we have the name-calling out of the way... what you see in IE
is the result of its rather broken default overflow behavior. IOW, IE
gets it wrong, FF gets it right. The culprit is in menu.css:

div#content { position: absolute; height: 140px; width: auto; ...}

For an absolutely positioned element, width:auto will often shrink wrap
to fit the widest element within it. Not all browsers behave this way,
though. Some default to 100% of the parent container. You should set an
explicit width if you want more consistent results.

You set the box dimensions to 140px high. Most browsers are only doing
what you told it to do and limit the height accordingly. Any content
that doesn't fit within those confines just spills out. IE is broken, so
it expands the height to fit the content. If you remove the explicit
height, other browsers will probably do the same.

If I were you, I'd dump the absolute positioning as well. Then read up
on the CSS box model and positioning.
<URL:http://www.w3.org/TR/REC-CSS2/box.html>
<URL:http://www.w3.org/TR/REC-CSS2/visudet.html>

You might also install the Firefox web developer toolbar and learn to
use its DOM inspector (in the Tools menu), then maybe you could debug
some of these things yourself.
<URL:http://webdeveloper.mozdev.org/>

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

Paul Burke

2005-01-24, 11:17 pm

On Mon, 24 Jan 2005 16:22:40 -0600, kchayka <usenet@c-net.us> wrote:

Hello

>Paul Burke wrote:
>
>You don't say what version of "Nutscrape" you're referring to. No
>matter. Where CSS is concerned, Inept Explorer is a big pile of poo
>compared to Netscape 7. NS4 is a different story, of course.

Sorry about that, my mistake and I should have known better. Netscape
7.1 and Firefox Version Preview release.

>Now that we have the name-calling out of the way... what you see in IE
>is the result of its rather broken default overflow behavior. IOW, IE
>gets it wrong, FF gets it right. The culprit is in menu.css:

I've always called it Nutscrape ... sorry, old habits, blah blah.
When I re-did this page, I wanted the contents area to have a border,
but to reach about 80% of the width, yet IE wasn't playing game.
As you see, I got it ok on IE, but failed on the others.
So, in a way, IE is showing it (almost) the way I want it even though
it is wrong :/

>div#content { position: absolute; height: 140px; width: auto; ...}
>
>For an absolutely positioned element, width:auto will often shrink wrap
>to fit the widest element within it. Not all browsers behave this way,
>though. Some default to 100% of the parent container. You should set an
>explicit width if you want more consistent results.

I did get it using 600px, but I want it to expand/collapse depending
on size of screen res. Hence I wanted to use 80%

>You set the box dimensions to 140px high. Most browsers are only doing
>what you told it to do and limit the height accordingly. Any content
>that doesn't fit within those confines just spills out. IE is broken, so
>it expands the height to fit the content. If you remove the explicit
>height, other browsers will probably do the same.

The 140px high is referring to the div that holds the header pic
(which is 140 high)

I have 3 div containers, one for main content ( contents area ) one
for the logo and one for the navigation.

>If I were you, I'd dump the absolute positioning as well. Then read up
>on the CSS box model and positioning.
><URL:http://www.w3.org/TR/REC-CSS2/box.html>
><URL:http://www.w3.org/TR/REC-CSS2/visudet.html>

Thank you, I will read them and try and get my head round it.
I don't want to use tables, hence I did the absolute positioning.

>You might also install the Firefox web developer toolbar and learn to
>use its DOM inspector (in the Tools menu), then maybe you could debug
>some of these things yourself.
><URL:http://webdeveloper.mozdev.org/>

I will do..

Thank you for all your help on this.
Take care
plh
Paul

Ali Babba

2005-01-25, 7:23 am

Neal wrote:

> Paul Burke <webmaster@firstpeople.us> wrote:
>
> Replying to the subject line:
>
> If it is one way in IE and another in all other browsers, it is close to
> certainty that IE is wrong.
>
> Get it right in the other browsers first. Then fix for IE.

if over 90% of all people on the net use IE, and the remaining
percentages are fragmented by dozins of other browsers, you are well
adviced to give IE the priority.

kchayka

2005-01-25, 7:23 pm

Ali Babba wrote:
> Els wrote:
>
> http://www.telegraaf.nl/i-mail/1749...ft_groeien.html
> http://www.websidestory.com/pressro...tl=x08x087h29ub

These stats don't change the fact that Els is right. It usually *is*
easier to get it right in other browsers first, then fix it for IE.

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

kchayka

2005-01-25, 7:24 pm

Paul Burke wrote:
>
> when I try to validate the css, I get the following errors on my div#
>
> Invalid number : clipParse Error
>
> Trying to get my head around it and doesn't help when on Dreamweaver 4
> as that uses css1 and afaik, what I am doing is css 2

The real problem is letting Dreamweaver generate any code at all. Make
it stop.

> I've read what it said about clipping, and I sort of get what it is on
> about, but fixing it so it validates, is the problem.

It's easy enough to see the problem, as reported in the CSS validator on
menu.css:

# Line: 27 Context : div#header
Invalid number : clipParse Error - )

Look at menu.css, line 27 where it references 'clip':
clip: rect( )

Dreamweaver is generating crap. Again, make it stop doing that. And
remove all those clip properties altogether. They're useless.

If you get stuck working out the finer points of multi-columned CSS
layouts, you should consider using one of the umpteen templates that are
already out there. Here's a few:
<URL:http://webhost.bridgew.edu/etribou/layouts/>
<URL:http://nemesis1.f2o.org/templates.php>

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

Paul Burke

2005-01-28, 7:42 pm

On Mon, 24 Jan 2005 16:22:40 -0600, kchayka <usenet@c-net.us> wrote:

>Paul Burke wrote:
<snip>

Hi again.
[color=darkred]
>If I were you, I'd dump the absolute positioning as well. Then read up
>on the CSS box model and positioning.

After trying to add a footer to that page what a PITA to do.
I did dump the absolute positioning and redid it using a 2 column
layout.

Here is the new url http://tinyurl.com/58ewa

Problem 1:

When I added my text etc, I had my "contents" at the top of the page,
the menu 2nd, and the header pic last. Then used absolute positioning.

Now I have it as : header then menu then contents. ........ so no
better off than html in that sense.

Problem 2:
I have it working in IE but totally screws up in N/S 7 and FF

The html and css pass validation, but fail to see the problem.

Can you shed any light on this please ?

Thank you kindly.

Paul getting-more-bald-by-the minute Burke