IE6problem.

[bryceray1121]

Take a look at my website in IE6. www.principlewebdesign.com/TubaReDesign/index.html

Any suggestions on how to fix this? I know you can apply separate stylesheets for ie6 but i can't seem to get that to work. I use this stylesheet link reference in my html and it doens't seem to affect the site at all in ie6:
<!-- [if le IE 6] <style type="text/css"> @import ("ie.css"); </style> -->

Any suggestions on other ways to solve my problems or how to get this alt. stylesheet to work?

All suggestions will be greatly appreciated.

[Centauri]

Server not found error on your link.....

[bryceray1121]

works perfectly for me...

www.principlewebdesign.com/TubaReDesign/index.html

[drhowarddrfine]

I guess I'll have to drive on over from St. Charles and fix this for you.

I don't have IE available on this machine. You probably have the widths of your elements equal to the total width of the main container. IE tends to screw this up so try and play with margins and widths, making the inside elements smaller or the container a little wider and see if it drops in. (This IE bug is called 'float drop'.)

Another problem you have is with floats escaping out the bottom of their containers. This is because parent elements are not to expand to contain them because they are not part of the normal flow. You may need to use 'overflow:auto' or somesuch to get them contained.

But if you buy me lunch in Kingdom City I might do it for free.

[WebJoel]

<!-- [if le IE 6] <style type="text/css"> @import ("ie.css"); </style> --> Is this a proper conditional?

gt: greater than
lte: less than or equal to

[bryceray1121]

Ok,
i've reversed the problem which is hopefully a step closer to fixing the problem. By switching up the placement of my html code and switching the floats the site works perfectly in ie6.... but now it doesn't work in firefox. It is having the same problem in firefox as it did in ie... except instead of the leftcolumn being below the main content the maincontent is below the left column.

-------------------------

Original Code (summary) - Problem occurs in IE
maincontent: float: right;
leftcolumn had no float.

main content came before the right column in html.

--------------------------

Secondary Code(summary) - Problem occurs in Firefox
maincontent:float: right;
leftcolumn float: left;

Leftcolumn comes before maincontent in html.

--------------------------

Now i just need to figure out a happy medium to get this to work out... but i just cant seem to get it to work in both browsers.

[WebJoel]

#rightcolumn .nav {
background-image: url(../images/navbg.gif);
width: 1em;
padding: 0 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #fba70b;
font-size: 15px;
font-weight:600;
color: #000;
width: 192px;
text-align:left;
letter-spacing: 3px;
margin-top: -2px;
} Not the problem, as the second "width" over-writes the first one ("1em" is about 10px wide)...

<a href="http://www.hickeys.com"><img src="images/links/hickeys.gif" class="link" alt="" width="125" style="opacity: 0.75;" onmouseover="high(this)" onmouseout="low(this)"/></a> You implicitly-closed this anchor, then followed it with a proper-closure tag..

Also (see Screenshot) : "Announcements"

[bryceray1121]

<a href="http://www.hickeys.com"><img src="images/links/hickeys.gif" class="link" alt="" width="125" style="opacity: 0.75;" onmouseover="high(this)" onmouseout="low(this)"/></a>

You implicitly-closed this anchor, then followed it with a proper-closure tag..

I'm not sure what you mean by this. the /> at the end of the img tag closes the img tag as demanded by xhtml. </a> closes the <a href> tag. Sorry if i'm missing something.


Also (see Screenshot) : "Announcements"
Yea... spelling is my strongest skill, but i'll do more spell check and testing when i get this other problem fixed.

#rightcolumn .nav {
background-image: url(../images/navbg.gif);
width: 1em;
padding: 0 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #fba70b;
font-size: 15px;
font-weight:600;
color: #000;
width: 192px;
text-align:left;
letter-spacing: 3px;
margin-top: -2px;
}

I did this, but i dont believe it will really affect anything. the second width is the one it is supposed to be, since it was overwritting the first width it was not much of a problem. Just unnecesary code to try to confuse myself i guess.

The main problem with the floats and the leftcolumn/main content not being next to each other still exsists.
See the attatched ss for a pic of the problem.

[WebJoel]

This is better. You were stating the class for the UL before the UL
Your code:
#rightcolumn .nav ul {
list-style: none; float:left;
margin: 0;width:auto;
padding: 0;
border: none;
}
---------- and ----------------

<div id="rightcolumn">
<img src="images/navheader.png" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.htm">About Us</a></li>
<li><a href="calender.htm">Calender</a></li>

<li><a href="contacts.htm">Contact Us</a></li>
<li><a href="audition.htm">Auditions</a></li>
<li><a href="audio.htm">Audio</a></li>
<li><a href="pictures.htm">Pictures</a></li>
<li><a href="xmas.htm">Tuba X-Mas</a></li>
</ul>

You state the heirarchy wrong. It is not #rightcolumn .nav ul, but instead, it is #rightcolumn ul.nav. As soon as I changed this, things started falling into place. :D


The musicplayer, form or whatever that is, is off a bit in Fx, and some of the text boxes are 'line dropped' due to widths too wide, again, shown in Fx. Easily fixable

re:I'm not sure what you mean by this. the /> at the end of the img tag closes the img tag as demanded by xhtml. </a> closes the <a href> tag. Sorry if i'm missing something. omg! (gulp!) -My opps! :o I didn't see that this was an
IMG, -I thought that this was all 'anchor'. You are correct. Sorry! :o

Try the attached ZIP-file. It seems to work nicely for IE and Fx. In Fx I think it was, some text 'boxes' are wider than they need to be, and the 'drop' below... but I was at one point using a 1px border on many elements to identify their location, so again, -this might be an opps on me if, when I remved them, the content-drop dissappears..