SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 27 of 27
  1. #26
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmm, well yes and no. Browsers have their own stylesheets, yes, but when we say IE has a default margin of x on the body, that is different than the stylesheet. I say this because the browser's stylesheet is controlled by the surfer, and has ultimate priority. Meaning, our CSS could never override it. But we always override the browsers' default margins and paddings with * {margin:0; padding: 0;} which we could not do if the margins and paddings were set on the browser's stylesheet.

    This is, if I remember correctly, how it goes:

    External CSS sheet has the lowest priority.
    An internal CSS sheet will override an external (internal is the one in <style> tags in the <head>)
    inline CSS will override both of those (div style="blah" in the HTML)
    The user's own stylesheet has ultimate precedence. This is the one we're calling the browser's stylesheets.

    The specs don't say which margins and paddings things are supposed to have, so the browser makers were free to have their own defaults. It's a rendering default, not a stylesheet per se.

    I'd thought of it as just relatively positioned from top left or whatever container it was within
    We all do at first. So we all get confused when we're told it's not relative to its container, it's relative to where it is.

    great stuff, huh? When you move something that's positioned relatively, it's like you're moving the metal plate on the ocean floor--- the plate is the visual representation of the block, and the block itself doesn't move. So when you say top: 10px, that's 10 px from the top of the element's proper place in the flow. Not 10px from the top of the container element. This gets more confusing when you see that absolutely positioned things really do move, not just visually, and they really do take their reference from the nearest positioned relative. But relative positioning is different.

    It's too bad that the majority of tutorials out there aren't explaining defaults of things. It would save newbies a lot of code. Though occasionally we still add something like width: 100&#37; for triggering Haslayout or something.

    *edit, that's not a bad link. A few things to quibble about (like loose text in the footer), but it's a lot like HTML Utopia: starts with a template, and HTML, and starts styling.

    For his hint on installing the IE standalones, I'm not sure how old his site is, but the Tredosoft Multiple IE's is very nice, and unlike the Evolt versions, do better job rendering as natives (but still not the javascripts etc, just CSS).
    Last edited by Stomme poes; Apr 4, 2008 at 03:06. Reason: added tredosoft link

  2. #27
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hmm, well yes and no. Browsers have their own stylesheets, yes, but when we say IE has a default margin of x on the body, that is different than the stylesheet. I say this because the browser's stylesheet is controlled by the surfer, and has ultimate priority. Meaning, our CSS could never override it. But we always override the browsers' default margins and paddings with * {margin:0; padding: 0;} which we could not do if the margins and paddings were set on the browser's stylesheet.

    This is, if I remember correctly, how it goes:

    External CSS sheet has the lowest priority.
    An internal CSS sheet will override an external (internal is the one in <style> tags in the <head>)
    inline CSS will override both of those (div style="blah" in the HTML)
    The user's own stylesheet has ultimate precedence. This is the one we're calling the browser's stylesheets.

    The specs don't say which margins and paddings things are supposed to have, so the browser makers were free to have their own defaults. It's a rendering default, not a stylesheet per se.
    I see, I'm a little confused now but only in concept. I know that browser style sheets are editable depending on your knowledge of browser technologies but I thought that a user's sheet had the lowest priority. I don't know, I must just have my wires crossed somewhere along the line here. CSS obviously works every day, in the sense that every sheet we create as web designers overrides the user's (browser's) default stylesheet doesn't it or otherwise there would be no point in us styling sites at all.

    I'm confused about how we could never over override the browser's stylesheet. I can't seem to make sense of it right now. The rendering default, if not a stylesheet within the browser, is separate somehow then?

    We all do at first. So we all get confused when we're told it's not relative to its container, it's relative to where it is.

    great stuff, huh? When you move something that's positioned relatively, it's like you're moving the metal plate on the ocean floor--- the plate is the visual representation of the block, and the block itself doesn't move. So when you say top: 10px, that's 10 px from the top of the element's proper place in the flow. Not 10px from the top of the container element. This gets more confusing when you see that absolutely positioned things really do move, not just visually, and they really do take their reference from the nearest positioned relative. But relative positioning is different.

    It's too bad that the majority of tutorials out there aren't explaining defaults of things. It would save newbies a lot of code. Though occasionally we still add something like width: 100&#37; for triggering Haslayout or something.

    *edit, that's not a bad link. A few things to quibble about (like loose text in the footer), but it's a lot like HTML Utopia: starts with a template, and HTML, and starts styling.

    For his hint on installing the IE standalones, I'm not sure how old his site is, but the Tredosoft Multiple IE's is very nice, and unlike the Evolt versions, do better job rendering as natives (but still not the javascripts etc, just CSS).
    I'm going to read as much as I can about position: relative I think, it's an idea that I like the sound of in principle as it implies some sort of elasticity within a layout if I remember correctly. As I say, this one is going to need more research I think : ) I like that link a lot as it told me things like the H1 element has default margins and/or padding applied by the browser I think it was. I didn't know this which surprised me actually as though I lack 'real world' skills in working with CSS I'm fairly well read, or at least I thought I was.

    I suppose in my case I like to know (need to know) how in control I am and why. It's important to me to sort of know all the ins and outs of my layouts. This is why I was pleased to read in the tutorial that DIVs stretch 100% width by default, just seeing it happen on my screen wasn't good enough, I needed to know if it was a style rule doing it or not. Same for the default margins/padding that we set to zero at the beginning of our sheets. I like this idea as it gives us a clean slate to work with, no random browser discrepancies to consider, no black holes in the code that we're not fully in control of.

    This has been a major problem for me, trying to understand 100% of my code, but only as I'm still learning, still making that mental encyclopaedia of code. The loose text in the footer on that tutorial, do you mean this?

    Code:
    <div id="copyright">
    Copyright &#169; Enlighten Designs<br />
    Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
    <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
    </div>
    I spotted this myself and instinctively knew it should at least be inside H1/2/3 or <p></p> tags, I'm learning

    EDIT - And thanks for the multiple IEs too.


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
  •