Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Small CSS problem

Reply
Thread Tools

Small CSS problem

 
 
Paul F. Johnson
Guest
Posts: n/a
 
      07-08-2005
Hi,

Could someone have a look at
http://www.all-the-johnsons.co.uk/ch.../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
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      07-08-2005
Paul F. Johnson wrote:

> Hi,


Hello

> Could someone have a look at
> http://www.all-the-johnsons.co.uk/ch.../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
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      07-08-2005
Paul F. Johnson wrote:
> Could someone have a look at
> http://www.all-the-johnsons.co.uk/ch.../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?

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
Paul F. Johnson
Guest
Posts: n/a
 
      07-08-2005
Hi,

Els wrote:

> 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

 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      07-08-2005
Paul F. Johnson wrote:

> http://www.all-the-johnsons.co.uk/ch.../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.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      07-08-2005
Paul F. Johnson wrote:

> Hi,
>
> Els wrote:
>
>> 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.


#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 http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Nazareth - Bad, Bad, Boy
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      07-08-2005
kchayka wrote:

> Paul F. Johnson wrote:
>
>> http://www.all-the-johnsons.co.uk/ch.../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.


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

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Stranglers - Golden Brown
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-08-2005
> From: "Paul F. Johnson" <(E-Mail Removed)>

> Could someone have a look at
> http://www.all-the-johnsons.co.uk/ch.../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/: 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

 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      07-09-2005
Els wrote:

> kchayka wrote:
>
>> Abandon the fixed/absolute positioning,

>
> 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.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
 
Reply With Quote
 
windandwaves
Guest
Posts: n/a
 
      07-10-2005
Paul F. Johnson wrote:
> Hi,
>
> Could someone have a look at
> http://www.all-the-johnsons.co.uk/ch.../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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Use .css to insert small "Donate" one-liner on top of all pages? I.N. Galidakis HTML 36 11-25-2011 04:46 AM
Small cameras getting too small? GRL Digital Photography 50 02-03-2006 03:12 AM
Small Square with small red X Peter Coddington Computer Support 4 01-03-2006 06:58 AM
<<CSS>> Menu for Opera small screen Stuart J. Shillinglaw HTML 2 06-07-2005 11:34 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments