CSS problem with IE6. Comments and advice appreciated

[Deryck]

Hello,

I'm new to this group so please forgive me posting something that may have
already been covered in a recent post (if it has, please point me to it).

I was experimenting with a way to display an image and make it repeat
(horizontally only) without putting it into the background of the body or
using a table. I wanted to use CSS. I did this by creating a box and putting
a background image into it. This displayed just fine with firefox but not
with IE6. I put a hack in to get it to work but I would like to fix it
"properly".

If anyone knows a way round this problem (or a more elegant solution) I
would grateful to hear from them.

An example of how I want it to appear can be seen on
www.longhope.co.uk/home.html (this has the hack in it). A better description
of the problem (and the hack) can be seen on www.longhope.co.uk/hack1.html.
The HTML and CSS have been validated by the W3C tools.

Thanks in anticipation,


Deryck

 

[Els]

Hello,

I'm new to this group so please forgive me posting something that may have
already been covered in a recent post (if it has, please point me to it).

I was experimenting with a way to display an image and make it repeat
(horizontally only) without putting it into the background of the body or
using a table. I wanted to use CSS. I did this by creating a box and putting
a background image into it. This displayed just fine with firefox but not
with IE6. I put a hack in to get it to work but I would like to fix it
"properly".

If anyone knows a way round this problem (or a more elegant solution) I
would grateful to hear from them.

An example of how I want it to appear can be seen on
www.longhope.co.uk/home.html (this has the hack in it). A better description
of the problem (and the hack) can be seen on www.longhope.co.uk/hack1.html.
The HTML and CSS have been validated by the W3C tools.

Why don't you change min-height:80px to height:80px?
IE doesn't support min-height, and I suppose the images
never are higher than 80px either.
The min-width causes a scrollbar when the page is narrower
than 885px. make it width:100%;
Don't forget to set the body to 100% (or 99%) width too.

And stopping it to repeat vertically, is done by adding
background-repeat:repeat-x;

 

[Deryck]

..

Why don't you change min-height:80px to height:80px?
IE doesn't support min-height, and I suppose the images
never are higher than 80px either.
The min-width causes a scrollbar when the page is narrower
than 885px. make it width:100%;
Don't forget to set the body to 100% (or 99%) width too.

And stopping it to repeat vertically, is done by adding
background-repeat:repeat-x;

Thats great Els, thank you very much. I didnt know that min-height was not
supported on IE. Ive made the changes you suggested and just have to find a
way to separate the line of links (in another box) from the image (it looks
fine in firefox but not IE). I can probably figure this out for myself.

Thanks again for your quick, highly useful and much-valued response.

Deryck

 

[Els]

Thats great Els, thank you very much. I didnt know that min-height was not
supported on IE. Ive made the changes you suggested and just have to find a
way to separate the line of links (in another box) from the image (it looks
fine in firefox but not IE). I can probably figure this out for myself.

Probably
But I couldn't resist and had a look. And I just need to
warn you: you just made your navigation, the only way people
can navigate your site with, a JavaScript feature. Not only
don't I see why, but if a person has JavaScript disabled, he
or she just can't visit your site beyond the first page.

Using JavaScript to enhance a page or menu is no problem.
But use it only to enhance, not instead of having a real
working menu.

Thanks again for your quick, highly useful and much-valued response.

You're welcome

 

[Deryck]

Youre right about the JS. I was doing that so I could include the navigation
into sevral files and change the navigation without chnaging all the files
that used it. I have just realised that I can include this code using PHP
and will do that instead (but probably not today). I also realise that this
is the *correct* way to do this.

Incidentally I used to put similar navigation on another site into a file
called banner.js. Norton's anti-pop up software disabled this, as soon as I
renamed the file, Norton was happy and the file worked ...pretty simplistic
software huh, just look at the filename (and not what it does, which in this
case was NOT producing a pop up).

Thanks again. I'm learning a lot today.


Deryck
PS
I still havent figured out a solution for the clashing borderbox and
sitenavigation that works on BOTH browsers.

----- Original Message -----
From: "Els" <[email protected]>
Newsgroups: alt.html
Sent: Saturday, June 12, 2004 1:13 PM
Subject: Re: CSS problem with IE6. Comments and advice appreciated

 

[Els]

PS
I still havent figured out a solution for the clashing borderbox and
sitenavigation that works on BOTH browsers.

Just one thing: if you reply to a post in alt.html, please
reply below the text you're replying to, just like you did
in your second post.

The clashing borderbox and navigation:

#sitenavigation{
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
}

position:absolute means absolute. You just told it to stay
20px from the top. It will stay there, no matter what.
Also, position:absolute takes the element out of the normal
flow, so whatever comes next, doesn't leave space for it, as
it was taken away from its own space.

document.write('<div class="borderbox"></div')

missing > at the end
probably resulting in Firefox getting it right by accident ;-)

 

[Deryck]

Just one thing: if you reply to a post in alt.html, please
reply below the text you're replying to, just like you did
in your second post.

The clashing borderbox and navigation:

#sitenavigation{
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
}

position:absolute means absolute. You just told it to stay
20px from the top. It will stay there, no matter what.
Also, position:absolute takes the element out of the normal
flow, so whatever comes next, doesn't leave space for it, as
it was taken away from its own space.

document.write('<div class="borderbox"></div')

missing > at the end
probably resulting in Firefox getting it right by accident ;-)

Doh! #1: I hate it when people top-post. I hate it even more when I do it by
accident.

The sitenavigation that you were looking at was actually commented out the
one below it had position: relative set as did the borderbox. You can
imagine my confusion then that it didnt work.

Doh! #2: was the missing '>' in the JS file. Another very Good Reason not to
use that method of inserting html, it cant be checked easily. That missing
'>' was probably the cause of many problems that I had!

Thank you again for debugging my code and teaching me soon good practices.


Deryck

 

[rf]

news:[email protected]...

Doh! #2: was the missing '>' in the JS file. Another very Good Reason not to
use that method of inserting html, it cant be checked easily. That missing
'>' was probably the cause of many problems that I had!

Somebody over at CLJ said yesterday that he had been producing javascript
(heavily) enabled pages for many years and has yet to use document.write.

Seems that adding elements via the more usual DOM manipulation facilities is
preferable, and far less prone to error.

Cheers
Richard.