margin issues & calling javascripts Options

[pat]

Hi... I have two issues to sort out with CSS, and any help would be appreciated. A reference page is at: http://www.dracoblu.com/testindex1.html

The relavant stylesheet is: http://www.dracoblu.com/grass_stains.css

1. The search box in the menu is displaying fine in FireFox, but in IE7 is showing as two line blocks. I suspect this may be a margin issue. It is being called in the following js code:

with(milonic=new menuname("search")){
style=style1;
aI("text=`<form method=get action=http://search.atomz.com/search/><div class=search id=milonic><input type=text size=20 name=sp-q id=sp-q style='color: #010425; background-color: #eeeeee; font-family: arial; font-size: 11px' /> <input type=submit value=Go style='color: #010425; font-family: arial; font-size: 11px; text-align: center' /> <input type=hidden name=sp-a id=sp-a value=sp10015b5a /></div></form>`;type=form;");
}

2. In the menu bar I wish to show the current date to the far right calling the javascripts as follows:

<div class="topnav" "date" id="nav" "date"><script src="embed_main.js"
type="text/javascript"></script><script src="date.js" type="text/javascript"></script></div>

The date appears to be under the menu to the far left.

Thanks in advance. ... Pat

[ShadowyBob]

Pat, can't help you out with your js, but for what it's worth, my IE7 displays your search box just fine when I have JavaScript switched on! Can't see anyway to navigate or search when I have JavaScript disabled, though.

This post has been edited by ShadowyBob: Oct 30 2006, 07:00 PM

[Darin McGrew]

Just a couple comments...

• When JavaScript is disabled/unavailable, all the (working) links are off-site links.
• Why are you testing with such old versions of Firefox & Opera?

[Christian J]

1. The search box in the menu is displaying fine in FireFox, but in IE7 is showing as two line blocks. I suspect this may be a margin issue.

Most likely. Try removing the FORM element's margin in your script example: http://htmlhelp.com/faq/html/forms.html#form-nospace

2. In the menu bar I wish to show the current date to the far right calling the javascripts as follows:

<div class="topnav" "date" id="nav" "date"><script src="embed_main.js"
type="text/javascript"></script><script src="date.js" type="text/javascript"></script></div>

The date appears to be under the menu to the far left.

To get it to the right you may have to use a CSS float or absolute positioning, or perhaps use a layout table.

[pat]

Pat, can't help you out with your js, but for what it's worth, my IE7 displays your search box just fine when I have JavaScript switched on! Can't see anyway to navigate or search when I have JavaScript disabled, though.

Thanks....I managed to fix the two line block display in IE7 with a margin 0px style command in the JS menu regarding the form for the search box.

Still searching for correct display of the current date in the menu bar.

[pat]

Just a couple comments...

• When JavaScript is disabled/unavailable, all the (working) links are off-site links.
• Why are you testing with such old versions of Firefox & Opera?

Thanks Darin... I am current with Firefox 2, and I have not tested in Opera only IE7.

[pat]

1. The search box in the menu is displaying fine in FireFox, but in IE7 is showing as two line blocks. I suspect this may be a margin issue.

Most likely. Try removing the FORM element's margin in your script example: http://htmlhelp.com/faq/html/forms.html#form-nospace

2. In the menu bar I wish to show the current date to the far right calling the javascripts as follows:

<div class="topnav" "date" id="nav" "date"><script src="embed_main.js"
type="text/javascript"></script><script src="date.js" type="text/javascript"></script></div>

The date appears to be under the menu to the far left.

To get it to the right you may have to use a CSS float or absolute positioning, or perhaps use a layout table.

Thanks Christian... I solved the search form display. Still struggling with the CSS to place the date properly to the far right in the same block that occupies the horizontal menu

[pandy]

When JavaScript is disabled/unavailable, all the (working) links are off-site links.

Pat, since you write about an accessibility update of your site you may want to know that the menu isn't accessible even with JS on. Try to navigate without the mouse and you'll find you can't.

Where is the date you talk about? I don't see anywhere.

[pat]

When JavaScript is disabled/unavailable, all the (working) links are off-site links.

Pat, since you write about an accessibility update of your site you may want to know that the menu isn't accessible even with JS on. Try to navigate without the mouse and you'll find you can't.

Where is the date you talk about? I don't see anywhere.

Thanks for your reply Pandy. The menu links are not fully completed as this is only a test page. It is not an issue for me at this time but rather placement of certain items on the page as a template for completing the rest of the site....The date is being called with the following JS:

<div class="topnav" "date" id="nav" "date"><script src="embed_main.js"
type="text/javascript"></script><script src="date.js" type="text/javascript"></script></div>

The date is appearing behind the blue menu navigation bar, and I want to see it display in the same block line to the far right. The portion of CSS script related to the menu and date is as follows. I wish to avoid using a table:

.topnav {
position:relative;
width:780px;
height:19px;
margin:0 0 0 0;
padding:0 0 0 0;
background:#003366;
font-size:.11em;
text-align:left;
}

.date {
position:relative;
width:200px;
height:19px;
margin:0 0 500 0;
padding:0 0 0 0;
background:#003366;
font-size:.11em;
color:#eeeeee;
text-align:right;
}

Any help would be appreciated.