bookpage wrote:
> This is my first post and I hope I am requesting help in the correct
>  way.

You have hijacked someone else's thread, and messed up the list-archives
a bit. You should really, really, start a new thread from scratch, and
not just copy and change subject-line in an existing one.

> I am trying to replace tables with a CSS and try to also use float 
> left and float right and they do not seem to work correctly. Could 
> someone take a look [http://wacowebdesigns.com/test.html] and see 
> what I am doing wrong?

You forgot to check the quality of the source-code for one...

<http://validator.w3.org/check?uri=http://wacowebdesigns.com/test.html>

...and there are too many meaningless flaws in the stylesheets...

<http://jigsaw.w3.org/css-validator/validator?uri=http://wacowebdesigns.com/test.html&warning=1&profile=css21>


> Verse of the Day is supposed to float right and text should go to the
>  left and under it.

Which sounds more like this...

<http://www.gunlaug.no/tos/alien/bp/test_07_1207.html>

(top-part didn't cooperate, so that's left out.)


First: you must move the "Verse of the day" container before the text,
as it'll otherwise stay down below the text-container. Floats can't
float upwards and the text can not adjust to anything that follows it in
the source-code.

Second: at least delete the 'width' and 'float' on #f-left so its
content can truly adjust. You probably don't need that #f-left div at
all since the paragraphs will behave fine on their own, and those
border-width values don't make sense - see CSS validation.

Third: make .content expand to contain float and text in all browsers no
matter what, as only IE/win is buggy enough to do so with your existing
styles. You won't see much of this correction, simply because the now
"unfloated" text is taller than the "floating verse".

New and corrected styles:

#f-left {
        /* width: 500px;
        float: left; delete these commented-out styles */
        margin: 15px 0 15px 15px;
        padding: 10px;
        color : #663300;
        background-color : #D9D1C4;
}

.content {
        padding: 10px;
        width: 750px;
        color : #663300;
        background-color : #D9D1C4;
        border : #786658 solid;
        border-width : 0px 1px: .65;
        overflow: hidden; /* added */
}

* html .content { /* added for older IE-versions */
        overflow: visible;
}


regards
        Georg
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to