SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Add new title here.. john's Avatar
    Join Date
    Jul 1999
    Location
    Amsterdam, The Netherlands
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    What am I doing wrong here?

    I decided to redesign my site using the xhtml/css approach without any tables. It will be the classic three column layout. It starts to look the way I want it to look but there are some browser issues.

    The site looks good in Netscape 7.1

    The site almost looks as good in IE 6.0 Only there's a small (like 2px) gap between the top bar and the navigation (links 1 - 7)

    In Opera this navigation is aligned left.

    You can find the template here: http://dev.muijen.nl/

    The CSS can be found here: http://dev.muijen.nl/css/test.css

    What did I do wrong??

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

    The menu in opera is left aligned because you have giving your #navcontainer ul a position absolute which opera has interpreted as left:0.

    If you need it for a stacking contect then use position:relative (without co-ordinates). However I don't think you need it at all.

    The gap in IE can be reduced by setting the content image to display:block.

    Here's the code for both of the above:
    Code:
    #navcontainer ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }
    .content img {display:block}
    Hope that helps.

    Paul

  3. #3
    Add new title here.. john's Avatar
    Join Date
    Jul 1999
    Location
    Amsterdam, The Netherlands
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Hi Paul,

    That did the trick. Thanks so much!

    One more question that you be able to answer:

    The top margin of the left col and right col is similar. It is supposed to have the same top margin as the main col.

    Different browsers display different things here.

    Any suggestions?

    Thanks!

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

    If you color the background of the columns you will see that the top margins are roughly the same.

    It's the content inside the columns that's has different margins. Most elements have default margins set by the browers and this varies between browsers.

    Mozilla seems to put a top and bottom margin on <p> element (1 em i think) whereas ie just puts a bottom margin. The same applies to headings and lists etc to varying degrees. Also some browsers use padding and some use margins.

    Therefore if you have any differences it's always good to set the margin and paddings explicitly and this should even things up.

    You have not wrapped your rightcol content in a <p> element so it will be higher than the leftcol which is in a list. In mozilla the list has deafult top margin but the rightcol will have none.

    Also in the rightcol you have specified a padding of 10;. You have missed the px off the end and mozilla will ignore the size. However IE will take a guess you mean pixels and apply it.

    You have the headings "Breadcrumb" and Header. header is wrapped in a heading tag but Breadcrumb sits alone. Therefore margins will be applied to one and not the other. Again this is only in mozilla and accounts for the differences between browsers.

    Make sure your content is wrapped in semantically correct mark-up.
    Not this:
    <div>Hello</div>
    But This
    <div><p>Hello</p></div>

    Then you can set margins and padding for the <p> element to remain consistent between browsers.

    There is a bug in Mozilla that you have to watch out for and it's called the top margin bug. Occasionally static positioned block elelments will use the top margin of its first child element instead of it's own. You can use something like this to fix it (div > h1 {margin-top:0}

    Paul

  5. #5
    Add new title here.. john's Avatar
    Join Date
    Jul 1999
    Location
    Amsterdam, The Netherlands
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Hi Paul,

    Thanks again for a quick response. I will give your suggestions a try tonight.


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
  •