getting div to line up

[Troy Piggins]

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 #####

 

[josh]

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

 

[Toby Inkster]

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 Inkster]

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.

 

[Troy Piggins]

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]

[original quoting added for context]

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.

 

[josh]

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.

 

[Jim Moe]

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>.

 

[Troy Piggins]

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.

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

Yes, that fixed it. Thanks Jim.