Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

menu icons (offset wrong) FF & Opera 5

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
hello guys,

Right last problem with this pesky statement function and I have a working (100%) cross browser compatible & w3c validated page - ohh it's getting exciting.

the problem is the java/css menu icons don't align correctly, they look fine in IE but not in FF or Opera.
please see

the old nested table vesrion displayed correctly in all three browsers so i have to assume it's something to do with all the nice new div's i'm using, but no doubt you will correct me if i'm wrong.

the JS used to update this menu has the following offset for the icon positioning.

Code: 
	this.main_expand_image = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_main_arrow.gif';[/URL]
	this.main_expand_image_hover = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_main_arrow.gif';[/URL]
	this.main_expand_image_width = '7';
	this.main_expand_image_height = '5';
	this.main_expand_image_offx = '0';
	this.main_expand_image_offy = '5';

	this.sub_expand_image = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_sub_arrow.gif';[/URL]
	this.sub_expand_image_hover = '[URL unfurl="true"]http://www.homeloanpartnership.co.uk/images/Drop_Menu/sample3_sub_arrow.gif';[/URL]
	this.sub_expand_image_width = '5';
	this.sub_expand_image_height = '7';
	this.sub_expand_image_offx = '0';
	this.sub_expand_image_offy = '4';

the two 'Y' offsets are the ones in question, to get it to display correctly in FF or Opera i set them to 0 , for i.e. they need to be 5 & 4, but as said before set to 5 & 4 on the old page works fine in I.E, FF & Opera.

here is the HTML
Code: 
<!-- Main Content -->
<body onload="<tmpl_var NAME='onload'>">
<table><tr><td valign="top" align="center">
   <div id="leftside">
       <div id="menu">
        <div class="titlecell">Select Statement</div>
            <table width="100%"><tr><td align="center">
            <div><div><div style="display:none;">
            <ul id="imenus0" style="width:100px;">
                    <!--tmpl_loop name="month"-->
                        <li  style="width:95px;"><a style="text-decoration:none;"><!--tmpl_var name='month'--></a><div><div style="width:65px;top:-18px;left:80px;"><ul style="">
                                <!--tmpl_loop name="year"-->
                                <li><a><!--tmpl_var name='year'--></a><div><div style="width:140px;top:-18px;left:50px;"><ul style="">                                
                                    <!--tmpl_loop name="stat"-->
                                        <li><a onclick="getAjax('url','vars')">Period Ending <!--tmpl_var name='period'--></a></li>
                                    <!--/tmpl_loop-->
                                    </ul></div></div></li>
                               <!--/tmpl_loop-->
                       </ul></div></div></li>
                    <!--/tmpl_loop-->
               </ul>
              </div></div></div>
            </td></tr></table>
        </div>       
        <div id="printButton">
            To print statement use the button below.<br />
            <img src="<tmpl_var name='url_to_domain'>/images/printstat1.png" id="printit" onmouseover="document.getElementById('printit').src='<tmpl_var name='url_to_domain'>/images/printstat2.png'" onmouseout="document.getElementById('printit').src='<tmpl_var name='url_to_domain'>/images/printstat1.png'" title="Print Current Statement" onclick='print();' alt="Print Statement" style="cursor:pointer" />
        </div>
        <div id="instructionstable">
            <table id="instructions" style="border:none;">
                <tr>
                    <td valign="middle">
                        Use the menu above to navigate your commission statements.<br /><br />The menu will only show an option if a statement is available.<br /><br />Your latest statement is displayed by default.
                    </td>
                </tr>
            </table>           
        </div>
   </div>
   </td>
   <td>
    <div id="rightside">
        <div id="CurStat"><!--tmpl_var name="cstat"--></div>
        <div id="statement">No statements available!</div>
    </div>
    </td></tr></table>
<script type="text/javascript" src="<tmpl_var name='url_to_domain'>/scripts/draw_menu.js"></script>
</body>

regards,
1DMF


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
Dunno. It all looks amazingly complicated to produce quite a simple result. I suggest you throw away all that tables-inside-divs-inside-more-tables stuff and start again from first principles. Start simple, add complexity only if you need it.

Also, start with a static HTML file (with dummy data) to get it looking right, then apply the template markup to get the proper data in there. When you've lots of experience you can try to do everything at once. Till then, take it step by step.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
lol - there are only 3 tables, and if I remove them it doesn't line up right, i've removed around 20 nested tables to get this far, so i'm pleased with what i have acheived.

I've decided the easiest thing is to simply set the offset according to which browser is beng used via javascript.

i've only got to check for I.E. else default.

maybe one day i'll manage to get rid of the last 3 tables but getting this released is more important.

I'm unsure why you think it is complicated, can you expand on this please.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
You don't think <div><div></div><table><tr><td><div><div><div><ul><li><a>Month is complicated? Just for a box, a title and a list of three options?

Start SIMPLE. Forget how it's going to look for a minute and concentrate on marking it up with the minimum of divs, classes and other impedimenta:
Code: 
<div id="menu">
  <h2>Select Statement</h2>

  <ul>
    <li><a href="#">March</a></li>
    <li><a href="#">October</a></li>
    <li><a href="#">December</a></li>
  </ul>
</div>
Now you can use CSS to style the document as required:
Code: 
  #menu {
    width: 10em;
    border: 1px solid #3851A1;
  }

  #menu h2 {
    font-size: large;
    color: #FFF;
    background: #3851A1;
    margin: 0;
    padding: 0;
  }

  #menu ul {
    list-style: none;
    margin: 30px auto;
    padding: 0;
    width: 8em;
  }

  #menu ul li {
     margin: 0;
     padding: 0;
  }

  #menu ul a {
     display: block;
     font-size: small;
     border: 1px solid #DDD;
     padding-right: 10px;
     background: #FFF url(/images/Drop_Menu/sample3_sub_arrow.gif) right center no-repeat;
   }
Now, I suppose this is actually part of some fly-out menu setup. Well that doesn't need to be much more complex, at least not in the HTML part. Take a look at or , for examples.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Great post Chris - totally star-worthy.

ChrisHunt said:
Start SIMPLE. Forget how it's going to look for a minute and concentrate on marking it up with the minimum of divs, classes and other impedimenta
Click to expand...

This is probably some of the best advice you are going to get in this world of web development. It also serves to promote the seperation of content and presentation... which is one of the cornerstones of strict (doctype) standards compliance.

If you can craft minimal and clean markup... with a doctype... then you can focus on CSS only to style it (and because you have a doctype, it'll be a LOT easier to make it look the same across browsers etc).

You may need to revisit your markup and add classes and ids as you go... and you may make a few false starts... but start simple and build from there... testing on multiple browsers at the early stages until you have the "skeleton" right.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
all those divs are required for the Javascript to work (which i didn't write)

if there isn't two div's nested it doesn't work,
Code: 
 <div><div><div style="display:none;">

this how the menu works, I'm not capable of understanding the JS enough to change it, so i'm stuck with it, unless I find a different menu to use.

as for the tables, i've not found anyway other than 3 nested divs (which you don't seem to like) and some supposed CSS I.E hack to valign text, which I tried and couldn't get it to work.

see here :
also things like
background: #FFF url(/images/Drop_Menu/sample3_sub_arrow.gif) right center no-repeat;
Click to expand...
isn't going to work , maybe if you looked at the JS files

it might make a little more sense why the menu part is the way it is.

I appreciate what your saying, but i want to use the menu/JS i'm using, if it means having <div><div><div> that's fine by me, the same as <table><tr><td valign=middle></td></tr></table> works for me and looks like far less hastle (and no hacks!) than
Code: 
<div class="greenBorder" style="display: table; height: 400px; _position: relative; overflow: hidden;">
    <div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" _position: relative; _top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

of course if you can explain a better and easier way to center text in a div tag please let me know, as I've drawn a blank in my search and attempts to implement it.

thanks for replying, regards 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I'm not capable of understanding the JS enough to change it
Click to expand...
When did cargo-cult programming! come back into fashion?

I'm sure you're capable, you just need to learn what it's doing. In fact, before you dive into JavaScript, you should probably dive into Mark and have a read through a list apart to learn about HTML and CSS.

if it means having <div><div><div> that's fine by me, the same as <table><tr><td valign=middle></td></tr></table> works for me
Click to expand...
But it doesn't work for you - or you wouldn't be asking the question here.

far less hastle (and no hacks!)
Click to expand...
In web programming 'hack' isn't a dirty word, it's not considered bad practice. Browser 'hacks' are ways of phrasing (valid) code so that it's hidden from particular browsers - it's fundamental to most cross-browser code.


Start simple. There's a very good reason we're not advising you how to integrate some JavaScript we've never seen with this code - we wouldn't touch code like this ourselves with a bargepole.

ChrisHunt gave you a great example for menu code, and a link to an excellent dropdown menu - you can see the suckerfish dropdown menu in action.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Upvote 0 Downvote
wow - thanks for a really great post Marcus, you've explained things really well to me although I have a couple of questions.
cargo-cult programming!
Click to expand...
what does that mean?

In web programming 'hack' isn't a dirty word,
Click to expand...
how come, a hack is a hack is a hack, (hackers are bad!), how is TABLE the baddest word i've ever said yet Hack is acceptable practice? why is it a hack, is it CSS2 valid syntax is that what your saying?, isn't this an issue with all browsers NOT being fully CSS compliant in the way they apply it? what happens when the browser behaviour is changed, will these hacks then cause problems?


maybe I shall use a different menu, when i took the code, I didn't realise it was so poorly written, the site looked like a really respectable and good quality DHTML site, you guys along with the JS forum have taught me better, but I have a live production site using it, it takes a lot of time out of my other duties as it is learning the correct way of doing things and my boss doersn't even pay enough let alone send me on courses, so I fly by the seat of my pants, picking up what I can from the great fols on Tek-Tips.

I understand what most people are saying, but in the real world I cant tell our 2,000 members, sorry you can't check your statements for the next 3 months, because the markup isn't symantically correct and so i'm pulling the site until I get it right.

Most people couldn't care as long as it works (which it does!) one little image line up issue is not enough to say it doesn't.

I've got w3c valid XHTML in template format (1st valid code i've ever had!), validated CSS and 99% of my tables (for this page at least) are gone.

So please accept my sincere thanks for all you help and to everyone who replies to my posts.

A merry Christmas to you all




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
You have to check out the Wikipedia entry for Cargo Cult (and the act of Cargo Cult Programming)... they are a great read.

a hack is a hack is a hack, (hackers are bad!), how is TABLE the baddest word i've ever said yet Hack is acceptable practice?
Click to expand...
The word "Hack" has been given different meanings by people with different agendas over time (read: popular media have demonised the word). You can "hack" a branch off a tree... that's not bad.

The word hack (in our CSS context) refers to creating validating CSS that utilising the different ways that browsers parse CSS to deliver different CSS values (based on the browser). Like selectively changing the padding on a DIV in a specific browser (using CSS - not using Javascript).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
You can "hack" a branch off a tree... that's not bad.
Click to expand...

i see , great analogy, thanks for all your help jeff, it's all becomming clearer now.

you know the last two weeks have left me so drained and tired more than i've been in a long time (thank god it's nearly christmas), years of bad habits and crap code, have come back to bite me in the ass.

it's going to take time, and i'm determined to get it right, i've used this statements page as a starting block to rewrite the whole application, thousands of lines of code all needing re-writing and changing to the right tool for the right job, in the right way, and you guys have given me a great start to that process, repsect and thanks!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
1DMF said:
in the real world I cant tell our 2,000 members, sorry you can't check your statements for the next 3 months, because the markup isn't symantically correct and so i'm pulling the site until I get it right.
Click to expand...

In the real world, most people hire professional web developers to do a job.

Now - don't take that the wrong way - I'm certainly not trying to put you down because you're new to this... I'm just saying that if people are hiring you to do a professional job, but you're not an experienced professional, wouldn't it be better to tell them this, rather than string them along?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
they get what they pay for :) , I never started here as a web developer, just Membership Co-ordinator (office admin), they didn't have a network, a server, a website or members area let along an in house working DB.

my training / background is Mainframe Operator, IBM 4381, with DOS/VSE , CICS, Gener/ol, REXX etc...

the rest is self taught with a crash course (3days) with MS Access.

I am the IT department, from Network Administrator, Technical Support, DB Programmer (using VBA) and Web Developer using what i've taught myself, through pride in my work and a sense of wanting to do things right, is why i'm here on Tek-Tips, doing my best to improve and change.

the first couple of years here i spent, learning PERL to a reasonable proficency, now i'm concentrating on the grass roots XHTM/CSS/JS (though i find JS hard going and will never be an expert, Java is difficult period)

I accept your comment in the way it was meant to be, but I never pretended to be anything when I came here my CV does not lie! , I've fallen into a role that i'm trying my hardest to be good at, don't punish me for trying!!

I would like to be concidered I hope one day "professional", it's not wrong to have dreams and aspirations, and I thank all on Tek-Tips, who are actually helping me to get closer to that dream.




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Java is difficult period
Click to expand...

Java isn't any more difficult then any other programing languageonce you get to know it.

he problem you are having is the way you are learning things. You think that you can learn things in bits and pieces, the problem with that is that you will use the things you know to do the things you need to know, passing by on the things that you need to do the job. While your method will work in the beginning (we have all been there), somewhere in the middle you will get in to trouble, ask advice and then see that you have to do the same thing all over again but then better. Perhaps you should do a new project and ask all those questions before you begin. Or let the original project for what it is and start all over again and then copying it over when you think it's ready.

I don't know if evening schools exist in your area and if you can do some higher level schooling (bachelor, master, or something less) but it would help you and your company a lot.

Just my 2 cents.



Christiaan Baes
Belgium

I just like this --> [Wiggle] [Wiggle]
 
Upvote 0 Downvote
I have concidered school, but my spare time is taken up with my record company, writing music, DJing on the Radio, my house/garden, my wife and family.

there isn't much time left for it.

It's not fair to say i'm not a professional, i was a professional and trained Mainframe Operator, this job doesn't exist anymore, the only place you will see a 2400ft tape these day is on footage from "Mission Imposible (the series)" or "Man from uncle"

I wouldn't agree
Java isn't any more difficult then any other programing languageonce you get to know it
Click to expand...
, you may be the best web developer in the word, that doesn't give the knowledge, experience or aptitude to be a professional C++ programmer.

your comparing apples with pears. I know my limits C++ / Assembler, will never be something I will ever be capable of learning, going to school for the next 20 years will never change that.

I am also a registerd system builder with MS, and so am also the companies PC Engineer, I have many talents some i'm extemely good at and some, not so, if you saw my PERL code when I first came to Tek-Tips, you would have died, now, it's of an acceptable level, that's not down to me going to school, that's from my tenacity and Tek-Tips.

Never underestimate the power of self learning and Tek-Tips.

But I hear you and it is a ver valid point, I learn how to do something, then cross that over to something else to achieve a goal, and that might not be the right thing to do for the circumstance.

The hardest part is knowing what to use when, that's what i think i understand is the key, anyone can help you get the syntax right, but if it's the wrong tool for the job, valid and correct syntax is not the answer.

A bit like a mechanic not having to look at the spanner sizes, instinctivly knowing the right tool to use, but having said that they might not be any good at using the spanner!, i'm no good at parking, doesn't mean I shouldn't be allowed to drive a car!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Something to bear in mind in your developing life...

It's human nature to want to hang on to work that we spent lots of time on. You've got some code and it was 80% right when you got it, and after a lot of chopping and changing and fiddling and, ahem, hacking it's now 95% right. You focus on finding the one little thing you need to do to get it to 99.9% (hey, nothing's perfect!)

We've all been there. We've all done that. But sometimes you need to take a step back and look at the big picture. Are you really better off patching the patches on the patches of your program? Will you understand any of it when you look at it in 6 months time? Might it be quicker to sweep it all aside and start again?

It bites to throw away all that work, but that's the wrong way to think about it. You're not throwing anything away - you've gained experience, learned some new skills, maybe learned what not to do (always valuable), and you've built a prototype. Now's the time to apply that skill and experience in building the finished product.

That may still involve using other people's code. I'm no great Javascript programmer (don't confuse it with Java, by the way, they're totally different things) so I slot in code from the web when I need it. However, I try to do so on one of two ways - I take a complex lump of code as a black box, and I don't tinker with it beyond whatever configuration options the orignal writer made available; or I take the code (maybe bits of it from several sources) as a guideline, and write my own code from scratch that does the same thing. I try not to mess with Mr Inbetween, since it's usually the worst of both worlds.

Oh, and don't feel you have to do everything at once. I good thing about the web is that you can enhance and polish your pages as you go. Just try to keep your design modular, so it's easy to change and upgrade one area without impacting others. Sometimes easier said than done, I know, but who said this job was easy?...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
thank you, very helpfull and enlightening.

as always i have a few "yeah but's" to add - lol

Are you really better off patching the patches on the patches of your program?[/code] isn't this the way of computers, how many patches a week does Microsoft release, or any other software/bios/OS/application provider etc.. , there will always be a bug to fix, nothing is perfect, as you say!

It bites to throw away all that work
Click to expand...
However I don't think you realise, i am going to throw away everything and start again with a blank canvas, I had to "patch" the live version first, i can't pull it and leave nothing!!!!

stepping back and building everything from the ground up is exactly what i'll be doing in the new year.

Oh, and don't feel you have to do everything at once.
Click to expand...

exaclty, so people don't be so hard on me when I do try to patch something, i can't do eveything at once, and seings the whole thing needs re-writting from scratch, keeping the current system working is the priority.

In the new year, I will afford the luxury to, "one step at a time", re-build the whole application.

this includes getting HTML out of PERL code into Templates, to then validate, so there is much more work to do than i think some people realise.

i'm hoping the move to templates will give me that separation of code enough to focus on valid and correct XHTML/CSS.

again thanks for a very insighfull discussion





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
Click to expand...
 
Upvote 0 Downvote
1DMF,

I've read a couple of books in the Head First series and so, without reading this one, I feel like I can recommend it: Head First HTML with CSS & XHTML.

If you like, you can read a sample chapter.

Fun, engaging, and a great way to learn!

Happy Holidays!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Upvote 0 Downvote
excellent, not sure i have time to add it to my christmas list, but i'm sure i will get some money for christmas, I promise everyone, i will buy it and read it, but me understanding it, that i cannot promise :p

thanks for the post.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
hey Manarth I just read up on Cargo Cult Programming, I'm insulted - lol.

a very interesting read, which actually helped me to see some of things i'm doing wrong and why.

I wouldn't say i'm completely incompetent, but can accept i do suffer from
Cargo cult programming can also refer to the practice of (over)applying a design principle blindly without understanding the reasons behind that design principle in the first place.
Click to expand...

Though I would say on this point
An example would be a novice being taught that commenting code is good, and then commenting every line with comments such as "increment i by 1";
Click to expand...

it's better to over comment than undercomment your code, maybe having a comment "increment i by 1" is not needed for a line "i++;" or "i=i+1", but a comment saying why you are making this increment might be beneficial!

but without a doubt you got me on this one
Voodoo programming (a term derived from 'voodoo economics') is a tongue-in-cheek term for using a programming device, system or language which you do not fully understand.
Click to expand...

I put my hands up and take my punishment ;-)

Have a great christmas
regards,
1DMF



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
787
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
623
PeDa
PeDa
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
243
ChrisHirst
ChrisHirst
AzizKamal
  • Locked
  • Question
center-align menu item text 1
Replies
8
Views
374
vacunita
vacunita
Blueie
  • Locked
  • Question
Menu position
Replies
3
Views
105
Blueie
Blueie

Part and Inventory Search

Sponsor

Back
Top