horizontal navigation - help

[sarb]

Hi,

I have set up a web page with 3 columns using css.

I am trying to place the horizontal navigation bar in the header, but am unable to get it to line up where I want it. I am using a float, but am wondering if absolute positioning wouldn't be better. I've been trying a lot of tweeks (changing margins and paddings) to get it to sit right with no luck. When I do finally get it to sit in the proper place, then the 3 column layout gets completely thrown out of kilter in Firefox. It looks fine in IE. I'm not quite sure why it throws the rest of the layout in FF when I am messing with just the header.

Link to page: http://www.sitesbysarah.com/guru/guru.htm




Thanks for any help you can provide...

Sarb

[Centauri]

Firstly, I would suggest you validate the page - there are a few errors there. Something on that page causes my Firefox to lock up before I can do much - I think it is something to do with the embedded movie - I would suggest swfobject (http://blog.deconcept.com/swfobject/) to implement this better.

What I did see though, was a bottom margin on the <a> elements causing the <li>s to hang out the bottom of the menu, and the floated #leftcol gets caught on this.

[sarb]

Hi Centauri,

I changed the <a> tag padding and that fixed the problem. Thank you. I tried just about everything else but that. Didn't realize that would cause a problem.

That's weird about the video freezing up your computer. My friend, who I'm doing the site for, asked me to embed the Windows Media Player as he thinks it would be assessible to the most people. I really never work with videos so don't have an opinion one way or the other. If I use the flash player you mentioned, is there a chance some people would not have a flash player downloaded to see the video?

Thanks,
Sarah

[Centauri]

Sorry, though it was a flash movie at first. Try embedding using this code:
<object id="MediaPlayer" data="video/MyMovie.wmv" type="video/x-ms-wmv"
width="192" height="190">
<param name="ShowStatusBar" value="0">
<param name="src" value="video/MyMovie.wmv">
<param name="autostart" value="1">
<param name="ShowControls" value="1">
<param name="ShowDisplay" value="0">
</object>

[sarb]

Hi Centauri,

I embedded the code you attached. Can you try viewing it now on your browser to see if it still causes things to freeze up?

Also, I noticed in the code you attached that it was minus the following code (this is the origininal code I used, the web page has been revised with your code).



<OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" >
<PARAM NAME="FileName" VALUE="video/MyMovie.wmv">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<PARAM name="autostart" VALUE="true">
<EMBED TYPE="application/x-mplayer2" SRC="video/MyMovie.wmv" NAME="MediaPlayer"
WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="1">
</EMBED> </OBJECT>


When I scanned the internet for help on embedding video, most of them included the portion that I put in red (at least I hope it appears in red). I didn't see this in the code you provided. Is it necessary to include that?

When I uploaded the revision, it seemed to play ok with out it, but wanted your advice...

http://www.sitesbysarah.com/guru/guru.htm

Thanks,
Sarah

[Centauri]

The embed section is not needed, and is invalid code anyway. Something still causes slow load time in FF and conficts with the Web Developer Toolbar. I note that the imroperly nested <font> tag in the table that the validator throws up is still there, and that may be the cause - the only things can be directly in a table is <th>,<tr>, <td> tags, not <font>. Move that outside the table :<input name="requiredfields" type="hidden" id="requiredfields" value="Name,Email1">
<font color="#b32811" size="1" face="Arial, Helvetica, sans-serif"><strong>*Required
Fields</strong></font> <br>
<br>
<table class="style33">
<tr>

The right column is alos dropped in IE6 but not sure why yet - still trying to work out the unusual structure.

[Centauri]

Found another couple of things that cause issues in IE6, due to it not respecting set widths, and not allowing content to overhang containers. The width of #welcome_box at 165px wide is too wide to fit inside #leftcol - remove the width and negative margin. Also #video_box p is too wide to fit into #video_box. Reduce the width of #video_box p to 280px.