|
Convenient web based access to our favorite web design Usenet groups
|
 |
This is Interesting: Free Magazines for Graphics designers and webmasters
| Author |
| Thread |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
Re: Small simple page validates, works fine in everything except |
 |
|
 |
|
|
|
 12-28-05 - 12:01 AM 
|
Melanie Avids wrote:
>
> When I switched the float:left to the float:right, some wierd things
> happened.
> http://resume.mle4hire.sent.com/bk/badtest.html
Looks like you changed more than the float. Your DOCTYPE is triggering
quirks mode rather than standards mode, so results can be even more,
well, quirky. ;)
> CSS isn't new to me, but pure css layouts are. This is a frustrating
> beginning,
You will have a lot less frustration if you give up the notion of
pixel-perfect layouts and fixed-px-size elements (images excepted).
<URL:http://www.allmyfaqs.net/faq.pl?AnySizeDesign>
There is no reason why your left column must be exactly 250px wide, or
the content area in general must be exactly 750px wide (or whatever).
Consider your visitors that use large windows and/or large text. Your
layout does not accommodate them at all. :(
BTW, IE's overflow behavior is very broken, both Win and Mac versions.
It often ends up doing exactly what you're complaining about (or
something even worse) if the content overflows its box boundaries by
even 1 pixel.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
Re: Small simple page validates, works fine in everything except |
|
|
|
|
|
|
|
12-28-05 - 12:01 AM
|
Melanie Avids wrote:
>
>
> Hm. Nope. Tried it, caused extra problems, fixed the extra problems,
> original problem is still there. Except maybe in reverse? Content of
> left column is dropped? At home without a windows machine, I forget.
>
> Originally I used the layout found here:
> http://www.nysfirm.org/documents/ht...lumn/fixed.html
> (how can I put that in so it just shows up as [link]??)
>
> When I switched the float:left to the float:right, some wierd things
> happened. The photo stuck out the bottom of the div. I added on the
> original footer div with the navbar, and that solved the photo sticking
> out just fine, but the navbar was on two lines. I needed to resort to
> the html tag of 'br clear="all"' to get it to sit right, which I had
> thought (??) was replaced by the 'clear:both' tag in the navbar div. It
> cleared in the first version, but not in the second. And after all
> that, as I said, the content is still sunk, so the same problem is
> there. Oh yeah, and it looks insanely bad in IE/mac, but at this point
> that's beside the point, because the original problem page is still
> less flawed and needs fewer fixes than the new flawed page. Here's the
> link if you're currious:
> http://resume.mle4hire.sent.com/bk/badtest.html
>
> CSS isn't new to me, but pure css layouts are. This is a frustrating
> beginning, because it would be so easy to fix with a table. I want to
> be converted to the other side. If I can't make such a simple layout
> work, I'm terrified of bigger ones.
>
Melanie,
OK, here's what I did, starting with the URL you posted above:
1. Replace the obsolete Transitional DOCTYPE with (on one line):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
That (in IE 6) brought the picture back up alongside the text. It also
gave me an error in the HTML validator, so...
2. Deleted '<BR clear=all>'. That satisfied the validator, but, using
Netscape 7.1, caused the nav line to be stair-stepped onto two levels.
3. I removed 'margin-top: -8px' from the '#navcontainer UL' selector.
This fixed the stair-stepped navigation.
4. I removed 'position: relative' from the same selector, 'cause I
didn't understand why it was there. This had no apparent visible effect.
At this point the page looked clean, however the spacing between the
bottom of the image border and the double-line above the navigation was
much larger in IE than in NN (where the two actually touched). It
wasn't clear what you intended here, so I didn't feel confident trying
anything more.
[Whenever IE is different, I suspect an IE bug. If the difference is
tolerable, i.e. it doesn't prevent communication of the page content, I
let it go. I see no reason to exert effort to make IE look good when it
clearly is not.]
I do note a lot of pixel-specific properties in the CSS. That's seldom
a good idea, because what looks good in one user environment may look
horrible in another. You will be less stressed if you take a more
casual approach to the relationships between on-screen objects (Example:
'X should be to the right of Y, unless the window is narrow, in which
case X should follow Y', rather than 'X should be 4px to the right of Y').
Chris Beall
|
|
|
| [
Post Follow-Up to this message ]
|
|
|
|
|
|
|
|
|
| All times are GMT. The time now is 02:21 PM. |
|
|
|
|
|
| |
|
Web Design > Web Design > Stylesheets > Re: Small simple page validates, works fine in everything except
