SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small Layout Problem (IE6)

    URL: http://www.andreas-kraus.net/blog/
    Stylesheet: http://www.andreas-kraus.net/blog/wp...d-10/style.css

    Everything is allright on Firefox, but on IE6 the second sidebar (the one including search) is not aligned correctly.

    "search" and the input field have no space on the left like on Firefox. I played around with the margins and paddings but can't get it aligned correctly.

    #noindent2 {
    margin: 0;
    padding: 0;
    }
    That works on the first sidebar without probs but on the second one IE6 seems to take it too serious..

    Thanks for any help!

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

    It's the double margin bug on the side of a float (see faq on floats for the explanation for this fix).

    Code:
    #sidebar2 {
        color: #333333;
        float: right;
        font-size: x-small;
     letter-spacing: 0.03em;
        margin: 0 12px 10px 0;
        text-align: left;
        width: 155px;
    display:inline
    }
    There is no point in adding a div around an element and then applying margin:0;padding:0 to that element because a div has no margins or padding anyway and it will not affect the existing margins of inner elements. Its just a wasted div cluttering up your mark-up. If you need to adjust the margins and padding of something the address the element concerned specifically.

    As a matter of course you should address the margins and padding of every element you use html,body, p, h1, h2,hn..,ul,ol,form etc......... Every element has a default padding and margin and you need to control this and not rely on what the browser has applied because all browers apply different defaults. (See the faq tips for a global reset).

    You have also used id's more than once and you can only use an ID uniquely once per page. Use a class if you need to re-use a style more than once.

    Validate your code also as you have wrapped your form element up in a p tag and this is not allowed. A form is a block element and can only be inside another block element such as a div. Remove the p tag from around the form and use a div instead. You can apply margins and padding to the div if need be but I suspect you won't need it.

    Hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That helps me a lot, thanks Paul O'B!


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
  •