homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

text overflows to left of window, is unreachable
and an NN4 background color problem

WebmasterWorld Senior Member 10+ Year Member

Msg#: 1034 posted 5:23 am on May 14, 2003 (gmt 0)

My goal is a centred menu, in a 40em wide color stripe (itself centred on the page), followed by a single text column, 30ems wide and also centred (but left-aligned).

I have the following CSS

BODY {width: 40em; margin: 0 auto; background: #FFFFFF;}
.menu {text-align: center; background-color: #FFCC99;}
.main {margin-left: 5em; width: 30em;}

This works in IE 6, IE 5.2 on the Mac, and Konqueror/Safari, and almost works in Netscape 4 and Gecko (Netscape 7/Mozilla).

The problem in Gecko is that if the window is resized so it's very narrow, some of the text is pushed to the left of the window, where it can't be reached even using the horizontal scroll-bar. I'm not sure if this is a serious problem, but I suspect it might be on devices such as mobile phones with small displays.

In Netscape 4, the background color is applied only to the immediate background of the menu text, rather than extending in a 40em stripe across the page.

Any advice on how to fix either of these problems would be appreciated.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 1034 posted 9:56 am on May 14, 2003 (gmt 0)

Aaarrrrgh. I've just discovered that in IE 5.0 the menu is page-centred but the body of the review text is not.

I thought at least my book reviews would be easy to CSS, but this is getting complicated -- or am I missing something really obvious? (As I was when I was trying to use max-width, which was the wrong approach entirely.)


10+ Year Member

Msg#: 1034 posted 8:18 pm on May 12, 2003 (gmt 0)

I have done what you're trying to do, but I am NOT supporting Netscape 4x and below.
I used a main div which had 100% height and width. In that div, I made a table that had two rows, three cells. (one cell for the top row, two for the second row) I set the div to be centered, which of course makes all the elements contained therein centered. I know, I don't like tables either, but sometimes they are a necessary evil.

As to the Netscape 4 issue, the background will only stretch as far as the text/images etc. contained within. I hate doing it (largely cause its extra coding) but you can add a spacer pic that will take up the rest of the space after text.


WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 1034 posted 8:46 pm on May 12, 2003 (gmt 0)

To make the background color extend in NN4, just add border:none


WebmasterWorld Senior Member 10+ Year Member

Msg#: 1034 posted 1:57 am on May 13, 2003 (gmt 0)

{border: none;} gives me a rectangle... but stops the text being centered! I think I'll give up on NN4 looking nice and just make sure it's usable.

I'm more worried about the Gecko/Mozilla problem, though - the NN4 one is just aesthetics, but Gecko may be used on some mobile phones etc. with very small displays, and having text that is actually impossible to get to is kind of catastrophic.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved