margins in IE6

Discussion in 'HTML' started by Mark, Nov 10, 2007.

  1. Mark

    Mark Guest

    Hi

    I'm working on a website with a similar feel to this:

    http://www.oreilly.com/catalog/9780596515836/

    What I have so far can be viewed here:

    http://www.lester1.eclipse.co.uk/test/

    (I'm going to change the colours, honest!)

    This appears to render identically in FF 2, Opera 9, Safari 3.0.3 and
    SeaMonkey 1.1.5 (all Windows), with each of these browsers applying
    margin to the top of the h2 element at the beginning of the content, and
    to the bottom of the p element at the end of the content, creating a
    nice bit of whitespace between the subnav and the footer respectively.
    However, for some reason, IE5 and IE6 do not apply this margin, so the
    text is directly adjacent to the subnav and the footer. Is this because
    I have done something to trigget an IE bug?

    I've floated both the navbar and subnav divs left and given them a width
    of 100% to prevent them from collapsing once I floated the a elements
    inside -- I then clear these with the following div, mbody.

    I have given mbody a minimum height to prevent the container from
    becoming too short on pages with sparse content. In FF etc., mbody
    appears to be 300pixels high no matter what, with the floated sidebar
    and content divs growing out of it, but in IE5/6, mbody stretches to
    contain the divs. Why is this? I've demonstrated this by putting a pinky
    background colour on the mbody div.

    Finally, I saw this technique somewhere as a way to have a graphical
    logo while still having a h1 element for SEO purposes:

    <h1><a href="homepage"><span>My company name</span></a></h1>

    You put display:block on the a, give it a fixed pixel width to match
    your logo image, then use the logo as a background for the a element.
    You then put a display:none on the a span to hide the text.

    As well as this, I've noticed that some sites use text-indent: -9999px
    on the span instead of display:none but this has the side effect that
    the dotted border you get when clicking the logo in Firefox stretches
    all the way to the left edge of the viewport (although the hotspot is
    still constrained to the image).

    Are any of you using these techniques? Are they considered OK?
    Mark, Nov 10, 2007
    #1
    1. Advertising

  2. Mark wrote about a top margin of h2 and a bottom margin of p:

    > However, for some reason, IE5 and IE6 do not apply this margin, so the
    > text is directly adjacent to the subnav and the footer.


    Why would it? You didn't specify any H2 or P margin in your CSS. The CSS
    recommandation doesn't require any specific default (or user) CSS.

    > Is this because I have done something to trigget an IE bug?


    No, there're no bug involved here. However, it doesn't matter much. If you
    *really* want to have the same layout in all browsers (without user CSS),
    then, you should explicitly specify margins.

    > I have given mbody a minimum height to prevent the container from
    > becoming too short on pages with sparse content.


    But you fixed the height to 300px.
    To avoid problems, use 'min-height', not 'height'.
    (IE may not support it, because IE isn't conforming to the CSS
    recommandation)

    >
    > Finally, I saw this technique somewhere as a way to have a graphical
    > logo while still having a h1 element for SEO purposes:
    >
    > <h1><a href="homepage"><span>My company name</span></a></h1>
    >
    > You put display:block on the a, give it a fixed pixel width to match
    > your logo image, then use the logo as a background for the a element.
    > You then put a display:none on the a span to hide the text.
    >


    It's a CSS hack. Typical of people who think that author's CSS (without
    user CSS) is the only way to see/render/use HTML documents.
    As all CSS hacks, it works only for two or three extremely specific cases,
    but is broken in the general case.
    For example, when I activate one of the accessibility layout user CSS of
    my browser (Opera), background images are disabled (by an !important rule)
    so that I see a hole in place of your logo.
    Is it a SEO? Not sure, but I could think that some hypotetical search
    engine could give a low rank to background images as they're decorations,
    but not part of the content of a site. A CSS-unaware search engine may
    simply ignore the image as it's not contained in the HTML code.
    To be SE friendly, please, just write normal non-obfuscated HTML code, as
    people did before SE existed. SE were designed to work with existing code.
    No need to adopt a specific coding style (but POSH) to be viewed by SE.

    Logically, the logo isn't a background image, it's part of the content of
    the page, so you should specify it as an image, with the IMG element.

    e.g. Use:

    <h1><img src="path/to/logo" alt="My company name"></h1>

    Most of the problems are due to the fact that you lie by claiming it's a
    background image.

    > As well as this, I've noticed that some sites use text-indent: -9999px
    > on the span instead of display:none but this has the side effect that
    > the dotted border you get when clicking the logo in Firefox stretches
    > all the way to the left edge of the viewport (although the hotspot is
    > still constrained to the image).


    The text-indent hack surely is much worse.


    --
    If you've a question that doesn't belong to Usenet, contact me at
    <>
    André Gillibert, Nov 10, 2007
    #2
    1. Advertising

  3. Mark

    Mark Guest

    André Gillibert wrote:
    <snip>
    >> I have given mbody a minimum height to prevent the container from
    >> becoming too short on pages with sparse content.

    >
    > But you fixed the height to 300px.
    > To avoid problems, use 'min-height', not 'height'.
    > (IE may not support it, because IE isn't conforming to the CSS
    > recommandation)


    That's why there is a height property for IE, then a

    html>body #mbody {
    height: auto;
    min-height: 300px;
    }

    rule for conforming browsers.

    >>
    >> Finally, I saw this technique somewhere as a way to have a graphical
    >> logo while still having a h1 element for SEO purposes:
    >>
    >> <h1><a href="homepage"><span>My company name</span></a></h1>
    >>
    >> You put display:block on the a, give it a fixed pixel width to match
    >> your logo image, then use the logo as a background for the a element.
    >> You then put a display:none on the a span to hide the text.
    >>

    >
    > It's a CSS hack. Typical of people who think that author's CSS (without
    > user CSS) is the only way to see/render/use HTML documents.
    > As all CSS hacks, it works only for two or three extremely specific
    > cases, but is broken in the general case.
    > For example, when I activate one of the accessibility layout user CSS of
    > my browser (Opera), background images are disabled (by an !important
    > rule) so that I see a hole in place of your logo.
    > Is it a SEO? Not sure, but I could think that some hypotetical search
    > engine could give a low rank to background images as they're
    > decorations, but not part of the content of a site. A CSS-unaware search
    > engine may simply ignore the image as it's not contained in the HTML code.
    > To be SE friendly, please, just write normal non-obfuscated HTML code,
    > as people did before SE existed. SE were designed to work with existing
    > code. No need to adopt a specific coding style (but POSH) to be viewed
    > by SE.


    But surely a search engine crawler will just see:

    My company name

    in a h1 element, which is about as POSH as you can get (plus I'd expect
    a textual h1 element to have more SEO weight than the text in an img alt
    attribute).

    > Logically, the logo isn't a background image, it's part of the content
    > of the page, so you should specify it as an image, with the IMG element.


    That is what I see on a lot of sites and and I don't disagree with your
    argument. At the same time, the h1 'hack' (as you call it) seems to be
    gaining ground. I've just noticed that it's used on the O'Reilly home
    page (www.oreilly.com):

    <h1>O’Reilly Media</h1>

    #header h1 {
    width:293px;
    height:98px;
    margin:0 0 0 180px;
    padding:0;
    background:url(/images/oreilly/oreilly_large.gif) no-repeat 0 0;
    font-size:0;
    text-indent:-9999px;
    text-align:center;
    }

    I'm not claiming www.oreilly.com is any kind of authority on HTML, but
    presumably the developers of the site aren't total hacks either, and
    there must be some advantage to doing it this way?
    Mark, Nov 10, 2007
    #3
  4. Mark wrote:

    > That is what I see on a lot of sites and and I don't disagree with your
    > argument. At the same time, the h1 'hack' (as you call it) seems to be
    > gaining ground. I've just noticed that it's used on the O'Reilly home
    > page (www.oreilly.com):
    >


    Yes, this is becoming increasingly annoying.
    Back in time, in 2004, I could right-click on any non-background image and
    save it on disk, copy its address, open it in a new window, reload it,
    copy it to clipboard, or see its properties, etc.

    I see more and more sites displaying those "fake" images.
    My favorite browser don't provide such a context menu for background
    images. (I'll fill a wish request to the development team of this browser).


    > But surely a search engine crawler will just see:
    > My company name
    > in a h1 element, which is about as POSH as you can get


    No, it isn't as POSH as you can get, because there're these DIV and SPAN
    things that are semantically non-sense.
    SPAN can usually be safely ignored, which is a Good Thing(TM), but DIV
    render a web page very difficult to interpret by alternative non-CSS
    renders and processors. Must a DIV be interpreted as a wrapper that must
    be ignored or as enclosing an entity very separate from the sibling
    elements? It depends on the DIV. I cannot find a way to automate that.

    Anyway, this (most probably) doesn't affect (current) SE.

    > (plus I'd expect a textual h1 element to have more SEO weight than the
    > text in an img alt attribute).


    This isn't proven, but it's possible that primitive SE ignore ALT
    attributes.
    Anyway, condemning your logo to disappear or be lower ranked on images SE
    to hypotetically improve the visibility of your company name on HTML SE,
    all that based on very hypotetical unproven knowledge of SE, is not
    necessarily good. Most probably, your company name appears elsewhere in
    the page, so that its presence at the top of the site isn't that much
    useful for SEO.

    The point is that you've very tiny arguments to prove that it's a SEO. It
    could be as well a SE pessimization.
    Just stick to one guideline: Don't try to be clever with SE. Write normal
    HTML, and you'll be indexed correctly.
    I noticed that the current evolution with SE is to *penalize* pages that
    try to be clever (e.g. by adding keywords written blank on blank and
    similar hacks to improve their page rank), while they improve their
    indexation of normal pages. Don't go on the side of spammers!


    > <h1>O’Reilly Media</h1>
    >
    > #header h1 {
    > width:293px;
    > height:98px;
    > margin:0 0 0 180px;
    > padding:0;
    > background:url(/images/oreilly/oreilly_large.gif) no-repeat 0 0;
    > font-size:0;
    > text-indent:-9999px;
    > text-align:center;
    > }
    >
    > I'm not claiming www.oreilly.com is any kind of authority on HTML, but
    > presumably the developers of the site aren't total hacks either, and
    > there must be some advantage to doing it this way?


    <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.oreilly.com%2Fcatalog%2F9780596515836%2F&charset=%28detect+automatically%29&doctype=Inline&group=0>
    Excerpt from this page:
    | <link rel="stylesheet" rev="stylesheet"
    | href="http://www.oreillynet.com/styles/all.css"
    | type="text/css"/>

    This rev relation is clearly wrong.
    Is this enough to convince you that their XHTML design isn't a reference?
    Moreover XHTML Transitional served as text/html is a bad choice.


    When doing a weird thing, you must understand the reasons for doing it.
    The argument: "Others do it, so it's right." will lead to the spread of
    bad design. (Bad design has already been spread in 99.99% of the web).

    (BTW, the text-indent:-9999px is very ugly)

    Strangely, at <http://www.oreilly.com/catalog/9780596515836/> I see:
    | <h1><a target=_top href="http://www.oreilly.com"><img
    | src="/images/oreilly/oreilly.gif" width="228"
    | height="67" alt="O'Reilly" /></a></h1>

    Which isn't consistent with the hack used for the logo of the main page.

    > Are any of you using these techniques? Are they considered OK?


    Invalid tag soup is considered OK on the web by almost all web developers.

    --
    If you've a question that doesn't belong to Usenet, contact me at
    <>
    André Gillibert, Nov 10, 2007
    #4
  5. Mark

    Mark Guest

    André Gillibert wrote:
    <snip>
    > The point is that you've very tiny arguments to prove that it's a SEO.
    > It could be as well a SE pessimization.
    > Just stick to one guideline: Don't try to be clever with SE. Write
    > normal HTML, and you'll be indexed correctly.


    You've convinced me here. I think I will just stick to an <img> element
    inside a h1.

    This is much easier than doing all the CSS for the <h1> hack.

    Thanks.
    Mark, Nov 11, 2007
    #5
    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. Keith

    Setting margins on an ASP.NET page

    Keith, Nov 4, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    775
    Natty Gur
    Nov 4, 2003
  2. Ivor O'Connor
    Replies:
    4
    Views:
    842
    Isofarro
    Nov 25, 2003
  3. Peter Mount
    Replies:
    4
    Views:
    946
    Peter Mount
    Jan 31, 2006
  4. Pugi!
    Replies:
    0
    Views:
    237
    Pugi!
    Feb 5, 2007
  5. timothytoe
    Replies:
    4
    Views:
    151
Loading...

Share This Page