SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with html 4.01 strict and CSS double background.

    hello, i'm converting my 2 day old website from frames (booo!) to css-only (wooo!) (currently i'm using CSS for style and frames for layout)

    you can view the page with frames here.
    i am using two background images (one in html and one in body), and in order for that to work in IE, i have to use html 4.01 strict. here is the deal, it renders fine in IE, but firefox has a wierd quirk, when i try to load it. it displays a small margin above the background in the body, eventhough in the css, margin : 0;. it is kinda wierd to explain, so i have made two test pages.

    mind you, these are in dutch.

    with html 4.01 strict DTD: http://www.mozaiekfabriek.nl/testdtd.html
    without html 4.01 strict: http://www.mozaiekfabriek.nl/test.html
    the css file: http://mozaiekfabriek.nl/stylesheettest.css

    can anyone tell my why is shows a margin in firefox, and even better, how to fix it?

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was playing with your style in FF with the web developer bar and editing the styles on the fly ......... mind you Im not 100% sure what I see when doing this is what will show up when you edit your files (I havent extensively tested this toy )

    Anyways I changed your html style to this:

    Code:
    html {
    	background-image: url(images/bg2.jpg);
            background-repeat: repeat-y;
            background-attachment: fixed;
            background-position: top right;
    	background-color : #9999cc;
    	height : 100%;
    }
    and it seemed to correct the issue with the top left bg margin...

    I cant find my book to save my LIFE but I THINK you might have had them in the wrong order in the shortcut style background: (CAn someone check me on that ..... where is that DAMN book!)

    I dont use shortcut styles on things like background although I use them for margins and padding extensively so I CANT remember the correct order.

    BTW, using 0% 0% is the same as top left

    try this style & let us know (Ill also find out if editing styles in the web dev bar actually works!)

    OH yeah almost forgot I was using this on the 4.01 strict DTD page you had listed

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is how I see it lol

    The gap at the top is caused by the top margin of the first element on the page which the body is incorrectly inherriting in mozilla (top margin-bug). This element is the paragraph (p) and setting its top margin to zero will kill the gap.

    However you have another problem in that the left image on the body will not stay fixed when content is greater than the page length. You need to set the height of the body to min-height and not height.

    Code:
    body {
    background : url(http://www.mozaiekfabriek.nl/images/bg.jpg) repeat-y fixed top left;
    background-color : transparent;
    color : #330066;
    min-height : 100%;
    font-weight : normal;
    font-style : normal;
    font-size : 11pt;
    font-family : Arial;
    margin : 0;
    padding-left : 120px;
    padding-right : 120px;
    }
    p {margin-top:0}
    That should do what you want in ie and firefox (haven't checked any other browsers though.)

    You might be interested in some more complicated examples of 100% images that may show some other methods of repeating images.

    http://www.pmob.co.uk/temp/hundredpe...lay-table2.htm

    Paul

  4. #4
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dc dalton, didnt work, sorry.

    paul, that did work. thanks alot!

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well so much for editing styles "on the fly" with the web dev bar ..... at least now I know! thanks

  6. #6
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ;_;

    i incorporated the design in the entire website, and it now looks horrible in IE, and i cant find out why

    http://www.mozaiekfabriek.nl/twoframes/
    http://www.mozaiekfabriek.nl/twofram...stylesheet.css

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why are you still using frames?

    This works in the source html outside of a frame but I haven't got the time (or the inclination) to construct frames locally to test out .

    Code:
    * html body {height:100%}
    (don't leave out the asterisk (universal selector))
    Hope it helps anyway.

    Paul

  8. #8
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm still using frames because the no-frames php page i'm working on still isnt behaving like i want it to:

    http://www.mozaiekfabriek.nl/test/index.php

    :/

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    m still using frames because the no-frames php page i'm working on still isnt behaving like i want it to:
    You'll need to be more specific

    Those images need optimising - they are way to big.

    Paul

  10. #10
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, i was more planning on getting it work work through self-study, since i got absolutely stuck with this css problem, but its fixed now.

    thanks for the tip


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •