Posted by Troy Piggins on 03/01/06 10:39

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

[Back to original message]