getting div to line up

Discussion in 'HTML' started by Troy Piggins, Mar 1, 2006.

  1. Troy Piggins

    Troy Piggins Guest

    I am puzzled by this, although from what I have read I understand
    different browsers render differently, but when I view my home page that
    I am creating it looks fine in firefox (my browser of choice) but in IE
    the left hand menu jumps to the middle of the screen.

    A sub-problem of the above is the search menu becomes a little wider and
    out of line with the other menus when viewed in IE.

    A third issue I have is the icons I've used. They are .png files with
    transparent backgrounds. In firefox the transparency is good, but in IE
    it paints the background white. I think I read somewhere this is known
    for IE, but not sure if I remembered that correctly. Should I make them
    ..gifs?

    Probably best to give a url at this point. Please be gentle, I am a bit
    of a noob and this is my first ever web page (that I am serious about):

    http://members.iinet.net.au/~piggo/troy/index.php

    View it in firefox and that's what I want, view it in IE and you'll see
    what I'm talking about.

    Thanks for any advice on the above, or any other comments.

    If just posting url above is a bit rude of me and you'd prefer the
    actual code to look at, I'll post what I think is relevant below and if
    you need more let me know.

    ##### from the page #####
    <div class="sidebar">

    <div class="menu">
    <div class="menu_title site">Site</div>
    <a class="menu_item" href="index.php">Main</a><br />
    <a class="menu_item" href="blog.php">Blog</a><br />
    <!--<a class="menu_item" href="linux/index.php">Linux tips</a><br />-->
    <a class="menu_item" href="about.php">About</a><br />
    <!--<a class="menu_item" href="pub/">Files</a><br />
    <a class="menu_item" href="pub/photos/">Photos</a><br />-->
    <a class="menu_item" href="thanks.php">Thanks</a><br />
    </div>
    <!--end copy-->

    <div class="menu">
    <div class="menu_title links">Links</div>
    <a class="menu_item" href="http://piggo.com">piggo.com</a><br />
    <a class="menu_item"
    href="http://piggo.dyndns.org/squirrelmail">Mail</a><br />
    <a class="menu_item" href="http://iinet.net.au">iiNet</a><br />
    <a class="menu_item" href="http://csnation.net">CS-Nation</a><br />
    </div>

    <div class="menu">
    <div class="menu_title search">Search</div>
    <form action="http://www.google.com.au/search" method="get">
    <table>
    <tr>
    <td>
    <input accesskey="s" type="text" id="q" name="q" maxlength="255"
    value="" />
    <input type="submit" name="btnG" value="Search" />
    </td>
    </tr>
    </table>
    </form>
    <a class="menu_item" href="http://www.google.com.au">Google</a><br />
    <a class="menu_item"
    href="http://groups-beta.google.com/advanced_search">Google
    Groups</a><br />
    <a class="menu_item"
    href="http://www.whitepages.com.au/wp/search/search_text.jhtml">White
    Pages</a><br />
    <a class="menu_item" href="http://www.yellowpages.com.au">Yellow
    Pages</a><br />
    <a class="menu_item"
    href="http://www.whereis.com/whereis/home.jsp">Whereis</a><br />
    <a class="menu_item"
    href="http://dictionary.reference.com">Dictionary</a><br />
    <a class="menu_item"
    href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br />
    <a class="menu_item"
    href="http://piggo.dyndns.org/cgi-bin/man/man2html">Man2html</a><br />
    </div>

    </div>
    ##### end #####

    ##### from the stylesheet #####

    body {
    color: silver;
    background-color: #123;
    border-style: none;
    border-width: 0px;
    font-family: 'Trebuchet MS', tahoma, verdana, sans-serif;
    font-size: 10pt;
    margin: 0px auto;
    padding: 0px;
    width: 800px;
    }

    div {
    }

    ..sidebar {
    position: absolute;
    top: 116px;
    }

    ..menu {
    background-color: white;
    background-image: url(../images/grad-menu.gif);
    background-repeat: repeat-x;
    border-style: none;
    margin: 20px 20px 0px 20px;
    padding: 10px;
    width: 150px;
    }

    ..menu_item {
    border-style: none;
    font-size: 90%;
    }

    ..menu_title {
    background-repeat: no-repeat;
    color: black;
    font-weight: bold;
    text-indent: 25px;
    }

    ..site {
    background-image: url(../images/home.png);
    }
    ..links {
    background-image: url(../images/link.png);
    }
    ..search {
    background-image: url(../images/search.png);
    }

    ##### end #####

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
     
    Troy Piggins, Mar 1, 2006
    #1
    1. Advertising

  2. Troy Piggins

    josh Guest

    I think its because you don't give the sidebar a horizontal value.
     
    josh, Mar 1, 2006
    #2
    1. Advertising

  3. Troy Piggins

    Toby Inkster Guest

    Troy Piggins wrote:

    > A third issue I have is the icons I've used. They are .png files with
    > transparent backgrounds. In firefox the transparency is good, but in IE
    > it paints the background white. I think I read somewhere this is known
    > for IE, but not sure if I remembered that correctly. Should I make them
    > .gifs?


    No point in making them GIFs. There are two different ways to make IE
    support transparent PNGs. Pick one.

    1. Reduce the colour depth to 8-bit;

    2. Force IE to load the PNG via ActiveX instead of through the normal
    image rendering engine. This is pretty tricky, but there are Javascript
    libraries out there that make it as simple as adding one or two lines of
    code to your page. I like: http://homepage.ntlworld.com/bobosola/index.htm

    Each solution has its own drawbacks.

    1. The image may look crap (you lose millions of the key advantages of
    PNG: colours);

    2. If you're carefully layering various things over the top of other
    things, ActiveX will float at the very top, ignoring your layering
    instructions.

    Choose wisely.

    FWIW, IE7 will have full PNG support.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Mar 1, 2006
    #3
  4. Troy Piggins

    Toby Inkster Guest

    Troy Piggins wrote:

    > If just posting url above is a bit rude of me and you'd prefer the
    > actual code to look at


    Quite the opposite -- a URL is far more useful.

    It lets us open it up in a few different browsers in a matter of seconds
    (CPU speed notwithstanding!).

    If you just posted all the code -- especially if it includes several
    different files (HTML, CSS, etc), then we're all going to have to copy and
    paste it into files, save it and test it, which would take a lot longer.
    Whatsmore, there are several key factors that would be missed out here,
    including HTTP headers.

    Best of all, would be to post a URL to a cut-down example, using just
    enough code to illustrate the problem.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Mar 1, 2006
    #4
  5. Troy Piggins

    Troy Piggins Guest

    * Toby Inkster wrote:
    > Troy Piggins wrote:
    >
    >> A third issue I have is the icons I've used. They are .png files with
    >> transparent backgrounds. In firefox the transparency is good, but in IE
    >> it paints the background white. I think I read somewhere this is known
    >> for IE, but not sure if I remembered that correctly. Should I make them
    >> .gifs?

    >
    > No point in making them GIFs. There are two different ways to make IE
    > support transparent PNGs. Pick one.
    >
    > 1. Reduce the colour depth to 8-bit;
    >
    > 2. Force IE to load the PNG via ActiveX instead of through the normal
    > image rendering engine. This is pretty tricky, but there are Javascript
    > libraries out there that make it as simple as adding one or two lines of
    > code to your page. I like: http://homepage.ntlworld.com/bobosola/index.htm


    Not that I am scared of learning something new, but I don't want to run
    ActiveX on my site.

    > Each solution has its own drawbacks.
    >
    > 1. The image may look crap (you lose millions of the key advantages of
    > PNG: colours);


    But they look so pretty now :)

    I think I will take a third option - I'll give them a background colour
    that matches their position on the page so you don't notice it.

    > 2. If you're carefully layering various things over the top of other
    > things, ActiveX will float at the very top, ignoring your layering
    > instructions.
    >
    > Choose wisely.
    >
    > FWIW, IE7 will have full PNG support.


    Good to know, thanks.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
     
    Troy Piggins, Mar 1, 2006
    #5
  6. Troy Piggins

    Troy Piggins Guest

    [original quoting added for context]
    * josh wrote:
    >> I am puzzled by this, although from what I have read I understand
    >> different browsers render differently, but when I view my home page that
    >> I am creating it looks fine in firefox (my browser of choice) but in IE
    >> the left hand menu jumps to the middle of the screen.
    >>
    >> A sub-problem of the above is the search menu becomes a little wider and
    >> out of line with the other menus when viewed in IE.
    >>
    >> A third issue I have is the icons I've used. They are .png files with
    >> transparent backgrounds. In firefox the transparency is good, but in IE
    >> it paints the background white. I think I read somewhere this is known
    >> for IE, but not sure if I remembered that correctly. Should I make them
    >> .gifs?
    >>
    >> Probably best to give a url at this point. Please be gentle, I am a bit
    >> of a noob and this is my first ever web page (that I am serious about):
    >>
    >> http://members.iinet.net.au/~piggo/troy/index.php
    >>
    >> View it in firefox and that's what I want, view it in IE and you'll see
    >> what I'm talking about.

    >
    > I think its because you don't give the sidebar a horizontal value.


    I figured that, but I want the content to be 800px wide and centered on
    the page. If I give the sidebar a horizontal value it behaves
    differently to the rest of the divs as the window is resized.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
     
    Troy Piggins, Mar 1, 2006
    #6
  7. Troy Piggins

    josh Guest

    I think maybe the problem is that when you take the sidebar out of the
    content flow (by giving it an absolute value) IE asks how to
    horizontally position it and sees that its parent element (the body
    tag) says to give it a auto left and right margin. So I would maybe
    give an extra wrapper around all the content and give it a relative
    position that doesn't change your layout, then give the sidebar a left
    position of 0px.

    Its tricky stuff, and I don't know if that works without playing with
    it.
     
    josh, Mar 1, 2006
    #7
  8. Troy Piggins

    Jim Moe Guest

    Troy Piggins wrote:
    > I am puzzled by this, although from what I have read I understand
    > different browsers render differently, but when I view my home page that
    > I am creating it looks fine in firefox (my browser of choice) but in IE
    > the left hand menu jumps to the middle of the screen.
    >

    I do not know why IE does this.
    I can suggest a workaround, though. Remove the position:absolute from
    #sidebar, add float:left, and place the sidebar div right after the
    header. It does what you wish in both FF and IE6.

    > A sub-problem of the above is the search menu becomes a little wider and
    > out of line with the other menus when viewed in IE.
    >

    Add a "size" attribute to limit the width of the <input>.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Mar 2, 2006
    #8
  9. Troy Piggins

    Troy Piggins Guest

    * Jim Moe wrote:
    > Troy Piggins wrote:
    >> I am puzzled by this, although from what I have read I understand
    >> different browsers render differently, but when I view my home page that
    >> I am creating it looks fine in firefox (my browser of choice) but in IE
    >> the left hand menu jumps to the middle of the screen.

    >
    > I do not know why IE does this.
    > I can suggest a workaround, though. Remove the position:absolute from
    > #sidebar, add float:left, and place the sidebar div right after the
    > header. It does what you wish in both FF and IE6.


    Yes, that'll do. That's what I had originally (not the float though)
    but I wanted to put the sidebar at the end, because I figured I'd be
    updating content more than the menu and so wanted it closer to the
    beginning of the file.

    Never mind, I was probably getting too clever for myself.

    >> A sub-problem of the above is the search menu becomes a little wider and
    >> out of line with the other menus when viewed in IE.
    >>

    > Add a "size" attribute to limit the width of the <input>.


    Yes, that fixed it. Thanks Jim.

    --
    Troy Piggins
    Ubuntu 5.10 pkgs : kernel 2.6.12-9-386, postfix 2.2.4, procmail 3.22
    Compiled from src : slrn 0.9.8.1/rt (score_color patch), mutt 1.5.11i
    vim 6.4
     
    Troy Piggins, Mar 2, 2006
    #9
    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. Hugo
    Replies:
    10
    Views:
    1,403
    Matt Humphrey
    Oct 18, 2004
  2. tomek milewski
    Replies:
    6
    Views:
    1,327
    tomek milewski
    Jun 25, 2007
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    814
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    245
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    362
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page