CSS problem

Discussion in 'HTML' started by Wipkip, Dec 1, 2003.

  1. Wipkip

    Wipkip Guest

    I am trying to come close to duplicating a page that is a mess of tables with a page
    that uses no tables. I have gotten close enough but only in IE6. It is a big broken
    mess in Netscape 7 & Opera 7. Both the old & new pages & their css files validate.

    New page & css
    http://wipkip.us/guide/index_new.html
    http://wipkip.us/guide/styles/handyguide.css

    Old page & css
    http://wipkip.us/guide/index.php
    http://wipkip.us/guide/styles/hg_style.css

    Would some kind soul point out my errors on the new page.

    --
    Duende
     
    Wipkip, Dec 1, 2003
    #1
    1. Advertising

  2. Wipkip

    m Guest

    Wipkip wrote:

    > I am trying to come close to duplicating a page that is a mess of tables
    > with a page that uses no tables. I have gotten close enough but only in
    > IE6. It is a big broken mess in Netscape 7 & Opera 7. Both the old & new
    > pages & their css files validate.
    >
    > New page & css
    > http://wipkip.us/guide/index_new.html
    > http://wipkip.us/guide/styles/handyguide.css
    >
    > Old page & css
    > http://wipkip.us/guide/index.php
    > http://wipkip.us/guide/styles/hg_style.css
    >
    > Would some kind soul point out my errors on the new page.
    >


    Instead of floating the leftside menu, try :
    position:absolute;
    width:25%;

    and with the right side content,
    instead of floating right, try:
    position:absolute;
    left: 30%;

    This seems to work very stably across standards browsers
    and IE. IE will handle it a bit differently than the others,
    so you can either use a (yucch) hack, or just leave a bit
    of extra room for it to roam, as I did with the 5% here.
    --
    Cheers, m -- mbstevens.com
     
    m, Dec 1, 2003
    #2
    1. Advertising

  3. Wipkip wrote:
    > I am trying to come close to duplicating a page that is a mess of tables with a page
    > that uses no tables. I have gotten close enough but only in IE6. It is a big broken
    > mess in Netscape 7 & Opera 7. Both the old & new pages & their css files validate.


    I was bored, so I decided to redo the design instead of fixing it. It
    doesn't look quite the same, but should be similar enough.

    The address is http://tw.ecritters.biz/for_wikip/. The HTML validates,
    and the CSS would if not for the validator border-right bug.
     
    Leif K-Brooks, Dec 1, 2003
    #3
  4. Leif K-Brooks wrote:
    > I was bored, so I decided to redo the design instead of fixing it. It
    > doesn't look quite the same, but should be similar enough.
    >
    > The address is http://tw.ecritters.biz/for_wikip/. The HTML validates,
    > and the CSS would if not for the validator border-right bug.


    Hmm, doesn't seem to work right in IE. I'll fix it when I have more than
    10 seconds access to a Windows machine.
     
    Leif K-Brooks, Dec 1, 2003
    #4
  5. Wipkip

    Wipkip Guest

    Leif K-Brooks wrote:
    > Leif K-Brooks wrote:
    >> I was bored, so I decided to redo the design instead of fixing it. It
    >> doesn't look quite the same, but should be similar enough.
    >>
    >> The address is http://tw.ecritters.biz/for_wikip/. The HTML
    >> validates, and the CSS would if not for the validator border-right
    >> bug.

    >
    > Hmm, doesn't seem to work right in IE. I'll fix it when I have more
    > than 10 seconds access to a Windows machine.


    What do you mean 10 seconds. It took me half day to get it wrong. :(
    You sure shrunk my messy css file. :)

    Thanks for your help

    --
    Duende
     
    Wipkip, Dec 1, 2003
    #5
  6. Wipkip

    Eric Bohlman Guest

    "Wipkip" <> wrote in
    news:XKAyb.28456$:

    > I am trying to come close to duplicating a page that is a mess of
    > tables with a page that uses no tables. I have gotten close enough but
    > only in IE6. It is a big broken mess in Netscape 7 & Opera 7. Both the
    > old & new pages & their css files validate.
    >
    > New page & css
    > http://wipkip.us/guide/index_new.html
    > http://wipkip.us/guide/styles/handyguide.css


    A few immediate problems (BTW, if you haven't validated both your HTML and
    your CSS, do so first, and fix any reported problems):

    1) You have a style defined for "#menu lu" which, I'm guessing, should be
    "#menu ul".

    2) The style for #menu specifies both float and relative positioning.
    Generally, floated elements shouldn't be positioned; you wind up creating a
    tug-of-war that ends up with different winners in different browsers.

    3) Floated elements need an explicit width.

    4) Specifiying "margin: auto" for #footer fixes the footer alignment
    problem.

    5) You've got your fonts, widths and margins specified in pixels, resulting
    in an inflexible design. Use percentages instead.

    Take a look at <http://www.omsdev.com/dawnas/index_new.html> for some fixes
    that make it look OK in Opera 7.22 (I just changed the CSS file, not the
    HTML or the GIF). Let me know when you're done with it and I'll take it
    down. There are still some problems with the footer in Mozilla; for some
    reason that I don't quite understand, it's being moved up into the body.
     
    Eric Bohlman, Dec 1, 2003
    #6
  7. Leif K-Brooks wrote:
    > Hmm, doesn't seem to work right in IE. I'll fix it when I have more than
    > 10 seconds access to a Windows machine.


    Or so I thought. Ended up getting it to look reasonable, but not quite
    as cool.
     
    Leif K-Brooks, Dec 1, 2003
    #7
  8. Wipkip

    Wipkip Guest

    m wrote:
    > Wipkip wrote:
    >
    >> I am trying to come close to duplicating a page that is a mess of
    >> tables with a page that uses no tables. I have gotten close enough
    >> but only in IE6. It is a big broken mess in Netscape 7 & Opera 7.
    >> Both the old & new pages & their css files validate.
    >>
    >> New page & css
    >> http://wipkip.us/guide/index_new.html
    >> http://wipkip.us/guide/styles/handyguide.css
    >>
    >> Old page & css
    >> http://wipkip.us/guide/index.php
    >> http://wipkip.us/guide/styles/hg_style.css
    >>
    >> Would some kind soul point out my errors on the new page.
    >>

    >
    > Instead of floating the leftside menu, try :
    > position:absolute;
    > width:25%;
    >
    > and with the right side content,
    > instead of floating right, try:
    > position:absolute;
    > left: 30%;
    >
    > This seems to work very stably across standards browsers
    > and IE. IE will handle it a bit differently than the others,
    > so you can either use a (yucch) hack, or just leave a bit
    > of extra room for it to roam, as I did with the 5% here.



    Thanks Mr Stevens but I'm still seeing it badly broken in Netscape but better in
    Opera & looks the same on IE.

    --
    Duende
     
    Wipkip, Dec 1, 2003
    #8
  9. Wipkip wrote:
    > What do you mean 10 seconds. It took me half day to get it wrong. :(


    I only had about 10 secondsn for testing it on Windows IE, it took more
    than that (a lot more :) to make it on my Linux box.

    > Thanks for your help


    No problem.
     
    Leif K-Brooks, Dec 1, 2003
    #9
  10. Wipkip

    Wipkip Guest

    Eric Bohlman wrote:
    > "Wipkip" <> wrote in
    > news:XKAyb.28456$:
    >
    >> I am trying to come close to duplicating a page that is a mess of
    >> tables with a page that uses no tables. I have gotten close enough
    >> but only in IE6. It is a big broken mess in Netscape 7 & Opera 7.
    >> Both the old & new pages & their css files validate.
    >>
    >> New page & css
    >> http://wipkip.us/guide/index_new.html
    >> http://wipkip.us/guide/styles/handyguide.css

    >
    > A few immediate problems (BTW, if you haven't validated both your
    > HTML and your CSS, do so first, and fix any reported problems):


    All css & html files validated.
    >
    > 1) You have a style defined for "#menu lu" which, I'm guessing,
    > should be "#menu ul".


    Now that helped. :)
    >
    > 2) The style for #menu specifies both float and relative positioning.
    > Generally, floated elements shouldn't be positioned; you wind up
    > creating a tug-of-war that ends up with different winners in
    > different browsers.



    >
    > 3) Floated elements need an explicit width.


    Didn't know that but when I tried that it broke in IE.
    >
    > 4) Specifiying "margin: auto" for #footer fixes the footer alignment
    > problem.


    I made it different.
    >
    > 5) You've got your fonts, widths and margins specified in pixels,
    > resulting in an inflexible design. Use percentages instead.


    Ya, I used px for the footer font size & menu widths. Also I wanted to keep
    everything within a 750px wide box because there isn't much content. Looks better to
    me than 3 or 4 lines of text on a wide screen. Other pages have even less content,
    >
    > Take a look at <http://www.omsdev.com/dawnas/index_new.html> for some
    > fixes that make it look OK in Opera 7.22 (I just changed the CSS
    > file, not the HTML or the GIF). Let me know when you're done with it
    > and I'll take it down.


    Ok, I've saved it.

    > There are still some problems with the footer
    > in Mozilla; for some reason that I don't quite understand, it's being
    > moved up into the body.


    I saved your css file.
    Thanks four time & help.

    --
    Duende
     
    Wipkip, Dec 1, 2003
    #10
  11. Wipkip

    Wipkip Guest

    Leif K-Brooks wrote:
    > Leif K-Brooks wrote:
    >> Hmm, doesn't seem to work right in IE. I'll fix it when I have more
    >> than 10 seconds access to a Windows machine.

    >
    > Or so I thought. Ended up getting it to look reasonable, but not quite
    > as cool.


    That's ok. I like Darna better than Dawna. :) Damna might be better yet.

    --
    Duende
     
    Wipkip, Dec 1, 2003
    #11
  12. Wipkip

    Wipkip Guest

    Wipkip, Dec 2, 2003
    #12
  13. Wipkip

    picayunish Guest

    Re: CSS problem Part 2

    Wipkip wrote:
    > Ok I'm closer.
    > I have gotten close enough in IE6 and Opera 7 but it is still broken in Netscape 7.
    > I stuck a <hr> in just before the </body> tag trying to understand what Netscape was
    > doing, didn't help.
    >
    > The page & css files validate.
    >
    > New page & css
    > http://wipkip.us/guide/index_new.html
    > http://wipkip.us/guide/styles/handyguide.css


    Add 2 break with clear=both before the end div tag (above the footer)
    and before the last end div tag.
    Like this:
    <br>

    </div>
    <div id="footer">
    <div id="copy">
    &copy; Dawna Sawatzky All rights reserved
    </div>
    <div id="siteby">
    <a href="#">Site by Tom D. Hay</a>
    </div>

    <br>

    </div>

    In the style sheet
    br {clear: both;}

    The <hr> can be removed.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
     
    picayunish, Dec 2, 2003
    #13
  14. Wipkip

    Wipkip Guest

    Re: CSS problem Part 2

    picayunish wrote:
    > Wipkip wrote:
    >> Ok I'm closer.
    >> I have gotten close enough in IE6 and Opera 7 but it is still broken
    >> in Netscape 7. I stuck a <hr> in just before the </body> tag trying
    >> to understand what Netscape was doing, didn't help.
    >>
    >> The page & css files validate.
    >>
    >> New page & css
    >> http://wipkip.us/guide/index_new.html
    >> http://wipkip.us/guide/styles/handyguide.css

    >
    > Add 2 break with clear=both before the end div tag (above the footer)
    > and before the last end div tag.
    > Like this:
    > <br>
    >
    > </div>
    > <div id="footer">
    > <div id="copy">
    > &copy; Dawna Sawatzky All rights reserved
    > </div>
    > <div id="siteby">
    > <a href="#">Site by Tom D. Hay</a>
    > </div>
    >
    > <br>
    >
    > </div>
    >
    > In the style sheet
    > br {clear: both;}
    >
    > The <hr> can be removed.


    Works great. Thanks Picky van der Vaart. Now if the would all treat my menu the same
    there would be much joy in my world.

    --
    Duende
     
    Wipkip, Dec 2, 2003
    #14
  15. Wipkip

    picayunish Guest

    Re: CSS problem Part 2

    Wipkip wrote:
    > picayunish wrote:
    >
    >>Wipkip wrote:
    >>
    >>>Ok I'm closer.
    >>>I have gotten close enough in IE6 and Opera 7 but it is still broken
    >>>in Netscape 7. I stuck a <hr> in just before the </body> tag trying
    >>>to understand what Netscape was doing, didn't help.
    >>>
    >>>The page & css files validate.
    >>>
    >>>New page & css
    >>>http://wipkip.us/guide/index_new.html
    >>>http://wipkip.us/guide/styles/handyguide.css

    >>
    >>Add 2 break with clear=both before the end div tag (above the footer)
    >>and before the last end div tag.
    >>Like this:
    >> <br>
    >>
    >> </div>
    >> <div id="footer">
    >> <div id="copy">
    >> &copy; Dawna Sawatzky All rights reserved
    >> </div>
    >> <div id="siteby">
    >> <a href="#">Site by Tom D. Hay</a>
    >> </div>
    >>
    >> <br>
    >>
    >> </div>
    >>
    >>In the style sheet
    >>br {clear: both;}
    >>
    >>The <hr> can be removed.

    >
    >
    > Works great. Thanks Picky van der Vaart. Now if the would all treat my menu the same
    > there would be much joy in my world.


    You're welcome
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
     
    picayunish, Dec 4, 2003
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    747
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    483
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    451
    Bertilo Wennergren
    Dec 10, 2003
  4. Noozer
    Replies:
    10
    Views:
    2,157
    Mitja
    Oct 13, 2004
  5. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    668
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
Loading...

Share This Page