Layout headaches...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

OK, I'm trying to make a simple web page. I know that one shouldn't expect too
much of browsers in terms of layout, but this is a simple task and I don't even
know where to start.

Point your browser to: and find a directory
listing. Look at layout_start.png in that directory, which is what my colleagues
think the web site should look like.

Pretty much the only important thing is that the contents of the left and right
columns should be flush at the top AND at the bottom (with no exaggerated
expectation of bottom flushedness ).

So I've done this simple page, start.html, and it already looks pretty good in
opera, but in Firefox it sucks dicks (see screenshot pngs in that directory). I
haven't even got started on IE and other crap browsers.

The people who did the original layout are sort of print people. I'm sure all of
you know the conflicts stemming from that combination. When I tell them that
HTML isn't print and you can't tell how web pages are rendered on different
browsers, they tell me they know but it couln't be possibly THIS fucked up. And
I think they're right. There's got to be a better approximation of the target
layout using HTML and CSS than what I've managed so far.


Re: Layout headaches...

Robert Latest wrote:

Quoted text here. Click to load it

There is a white border around the logo image.  That is throwing the top
off to the viewer, because it is invisible on a white page.  Instead of
trying to compensate for that by trying to adjust the text, crop the top
white border off the image.  Since text _should_ be allowed to have its
size changed by the visitor, you will never get anywhere by trying to
adjust it's start point down with line-height, etc..
If both text and image are too close to the top, adjust them both with CSS.

 > ..........AND at the bottom (with no exaggerated
 > expectation of bottom flushedness ).

Forget it.  You're creating horizontal scroll bars on any but the
largest browser window -- awkward to use, you can't read the text
without scrolling to the right.  Allow the text in the right column to
reformat itself.  Kill the "width:367px".  Do not set the font size and
the line height.  The whole left column doesn't need so much
space.  Make it narrower.

The <td><div>.......</div></td> markup is legal but it is also overkill.
  Having both a style sheet and a lot of inline styles is unnecessary
here.  Push all the style stuff into the style sheet.

Look at the page with .
Alt tag is missing for image, end tag for <head> is unfinished, there is
no doc type declaration, and some character data is not allowed on line
62 where you have it.

Quoted text here. Click to load it

Explain to them that even people with very large viewscreens usually
don't surf with the browser window maximized.  They need to give it up
or get used to irritating visitors with horizontal scrollbars.
mbstevens /

Site Timeline