Small CSS problem

[Paul F. Johnson]

Hi,

Could someone have a look at
http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text and
images appearing above (in part) the ChemiCAL header bar.

Any ideas how to prevent this from happening?

TTFN

Paul

 

[Els]

Hi,
Hello

Could someone have a look at
http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text and
images appearing above (in part) the ChemiCAL header bar.

Any ideas how to prevent this from happening?

Just guessing:
set h1{margin-top:0;} and see if it disappears.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Rocky Horror Picture Show - Touch-a, Touch-a, Touch
Me

 

[Beauregard T. Shagnasty]

Could someone have a look at
http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text
and images appearing above (in part) the ChemiCAL header bar.

Are you aware that IE does not recognize position: fixed and that
your whole page scrolls, including your "header bar?" I don't see any
reason for you to do this, as that area is quite large and takes away
from viewing content space in my other, modern, browser windows.

Any ideas how to prevent this from happening?

Remove position: fixed?

 

[Paul F. Johnson]

Hi,

Just guessing:
set h1{margin-top:0;} and see if it disappears.

Not locally - so I doubt it will on the server :-(

The problem looks like it's in the content div. If I change

h1 {margin-top: -5px;}

The text still appears at the top. I've tried altering content to be
either absolute or relative, but that doesn't seem to be doing the trick.

TTFN

Paul

 

[kchayka]

http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text and
images appearing above (in part) the ChemiCAL header bar.

Per your stylesheet:
#topblock {
height: 160px;
}
#content {
padding-top: 160px;
}

You apparently expect the text in #topblock to stay within the specified
height. That is highly dependent on the actual text and viewport sizes.

When a larger text size than you expect is used, and/or it wraps due to
smaller viewport size, an overflow on #topblock occurs. The padding on
#content does not adjust accordingly and you get overlapping text.

You cannot expect #content to adjust to variables the specs mandate it
must ignore. Abandon the fixed/absolute positioning, leave the elements
staticly positioned and automatically sized, and the problem goes away.

 

[Els]

Hi,


Not locally - so I doubt it will on the server :-(

The problem looks like it's in the content div. If I change

h1 {margin-top: -5px;}

The text still appears at the top. I've tried altering content to be
either absolute or relative, but that doesn't seem to be doing the trick.

#topblock{
top:0;
}
(you used position:fixed without setting a position for it)

Now.. open up any browser that is not called Internet Explorer, narrow
your window till the red text wraps. Then scroll...
Solution:
Change 'height:160px;' to:
min-height: 160px;
_height:160px;

min-height for browser that understand min-height (will expand when
the contents are higher (by font-size change or wrapping), and _height
for WinIE, which will ignore the underscore. Other browsers reckon
_height doesn't exist, and will ignore the line altogether.

 

[Els]

Per your stylesheet:
#topblock {
height: 160px;
}
#content {
padding-top: 160px;
}

You apparently expect the text in #topblock to stay within the specified
height. That is highly dependent on the actual text and viewport sizes.

When a larger text size than you expect is used, and/or it wraps due to
smaller viewport size, an overflow on #topblock occurs. The padding on
#content does not adjust accordingly and you get overlapping text.

You cannot expect #content to adjust to variables the specs mandate it
must ignore. Abandon the fixed/absolute positioning, leave the elements
staticly positioned and automatically sized, and the problem goes away.

Yup - that's better advice than I just gave in my other post - I
hadn't counted with the padding-top on the #content :\

 

[dorayme]

Could someone have a look at
http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text and
images appearing above (in part) the ChemiCAL header bar.

Any ideas how to prevent this from happening?

I could not see your problem in my browsers but there *may* be a few
mistakes in the css, check these out (courtesy of iCab):

CSS Error (23/9): Unknown CSS property ³_height².
CSS Error (51/22): Invalid property value
³url="chemical/mirror/images/chemicalcd.png"².
CSS Error (51/22): Unknown identifier
³="chemical/mirror/images/chemicalcd.png"².
CSS Error (51/62): Invalid property value
³"chemical/mirror/images/chemicalcd.png"².
CSS Error (51/69): Invalid property value ³repeat².
CSS Error (51/76): Invalid property value ³scroll².

And in the HTML check out:

HTML error (4/44): Illegal character ³/² in tag.
HTML error (5/50): Illegal character ³/² in tag.
HTML error (6/50): Illegal character ³/² in tag.
HTML error (7/75): Illegal character ³/² in tag.
HTML error (26/66): Illegal character ³/² in tag.
HTML error (38/66): Illegal character ³/² in tag.
HTML error (39/143): Illegal character ³/² in tag.
HTML error (43/66): Illegal character ³/² in tag.
HTML error (55/66): Illegal character ³/² in tag.
HTML error (56/105): Illegal character ³/² in tag.
HTML error (60/100): Illegal character ³/² in tag.
HTML error (61/102): Can¹t find start tag for end tag </FONT>. Maybe the tag
was implicitly closed before.
HTML error (61/106): Can¹t find start tag for end tag </B>. Maybe the tag
was implicitly closed before.
HTML warning (62/8): The tag <CENTER> is deprecated and should no longer be
used. It is suggested CSS be used instead.
HTML warning (66/46): The tag <FONT> is deprecated and should no longer be
used. It is suggested CSS be used instead.

dorayme

 

[kchayka]

Yup - that's better advice than I just gave in my other post - I
hadn't counted with the padding-top on the #content :\

I've used a similar technique myself, so I spotted the padding right off.

Positioning like the OP is attempting really only works with graphics
(known, fixed dimensions) or setting lengths/dimensions in em units, but
only with short bits of text that aren't likely to cause an overflow,
even at large text sizes. Pretty much anything else is doomed to failure.

 

[windandwaves]

Hi,

Could someone have a look at
http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?

The problem simple - scroll the window and you will see the text and
images appearing above (in part) the ChemiCAL header bar.

Any ideas how to prevent this from happening?

Keep it simple.

There is nothing fancy about your page. It is just a really simple, easy to
understand piece of HTML so why add all the complicated css.

Just like photography css and html are more about leaving things out then
adding them. It is about knowing when not to shoot rather than when to shoot
(or use css for that matter).

Make a page without any formatting at all and then only add what is strictly
necessary to make it look nice.

just my five cents worth

- Nicolaas

 

[Paul F. Johnson]

Hi,

Make a page without any formatting at all and then only add what is strictly
necessary to make it look nice.

I'm trying to make the mirror look and behave like the original - the
only difference being that the original used frames and that is
something I never want to touch.

TTFN

Paul