Announcement

Collapse
No announcement yet.

HTML in IE - table/layer width query

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    HTML in IE - table/layer width query

    I am wanting to have a section at the top of a page which takes up the entire width of the screen. For an example of what I mean see the purple section on the top of this site.

    If you set a table, a layout table or a layer to 100% width then it still has some white space at each end. If you make a layer with an absolute position of 0px from the top and left and width 100% then it will fill the whole width in Firefox but in IE there will still be a gap on the right.

    So how do I make a layer or a table fill the whole width?
    Tags: None
    #2
    stick this within your <HEAD> tags (or stylesheet if you are using one without the <style> tag):

    <style type="text/css">
    body {
    top: 0px;
    left: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;

    }
    </style>

    Comment

      #3
      <pedant>

      You just need to say

      margin: 0; padding: 0;

      If a css value is 0 then the unit is superfluous. When you specify a tlbr (top-left-bottom-right) css value, then if all 4 are the same then you only need specify the value once. If the top and bottom are the same and the left and right are the same then you can specify it like this:

      margin: 0 1em;

      0 is top and bottom, and 1em is left and right.

      Oh, and there isn't really such a thing as a "layer" anymore. It's a block element (div) or an inline element (span).

      </pedant>

      Comment

        #4
        cheers guys, I worked it out now.

        edit - also, is there any way to get the border colour of an image to change when the mouse hovers over it without using quite a bit of javascript?

        is there a css for this like there's a hover css for text?

        thanks
        Last edited by Oh! My Car!; 22-12-2005, 15:09.

        Comment

          #5
          Tables and certain other things do all sorts of weird **** depending on which browser you use, coz you'll often get different results in IE, Netscape and later Mozilla-based browsers.
          There are discussion topics on this subject in this forum here, so I'd recommend you give those a read if you're after more info

          Comment

            #6
            img:hover.highlight {
            border: 1px solid red;
            }

            <img class="highlight" .../>

            It won't work in IE though, which only recognizes pseudo-classes (:hover, :active, :visited) on the anchor tag. 'Cos it's ****.

            Comment

              #7
              What about the other way around? Form the class called "highlight" and then specify img:hover as being part of it in the stylesheet?

              eg.

              .highlight img:hover {
              border: 1px solid red;
              }

              I do something similar in the Retro Survival project CD code regarding changing an image when the cursor is over it. Works fine in Firefox, Opera, Safari and IE6.
              Lie with passion and be forever damned...

              Comment

                #8
                thanks guys although I couldn't actually get your one to work Mayhem!?

                although maybe I phrased the original question badly, I meant can you get the border of an image to change colour when you hover over it ie: the image already has a border but its colour changes on hover?

                Comment

                Previous template Next
                Working...
                X