16 replies [Last post]
teresamar2
teresamar2's picture
Offline
Regular
Last seen: 9 years 41 weeks ago
Timezone: GMT-5
Joined: 2007-07-24
Posts: 18
Points: 3

Sucker Tree Horizontal Menu
www.ttcollectiblegifts.com/dynamicdrive.html

I'm satisfied with the way my menu looks in IE browser, but not in Firefox. Using Firefox, as I hover on a top level list item, the background shortens, making the next top list item overlap the top of the top link. Any ideas on why this is happening?

Also, in Firefox, my menu is not nearly as wide as it looks in IE; it's too small. How can I change this?

I would love to be able to center the menu on my webpages, and not have to worry about placing it. How can I do this?

All help is appreciated.

teresamar2

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #CADDCE; /*overall menu background color*/
font: 14px comic sans ms, helvetica, times roman;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
width: 100px; /*Width of top level menu link items*/
padding: 5px 8px;
border: 1px solid white;
text-align: center;
text-decoration: none;
color: #7F7F7F;
}


/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
vertical-align: bottom;

}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 149px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 170px; /*width of sub menu levels*/
color: #5c7a62;
text-decoration: none;
padding: 2px 5px;
border: 1px solid white;
}

.suckertreemenu ul li a:hover{
background-color: #DDE9DF;
color: #5c7a62;
}

ul..suckertreemenu {
width: 820em;
margin: auto;
}
-->

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #caddce url() no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #CADDCE url(arrow_right_black.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i

  • Books

  • Candles
  • Collectibles
  • Figurines
  • Handbags

  • Home Decor
  • Plush

  • thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 4 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    DTD

    Incomplete doctype.

    What say we fix that up first?

    Verschwindende wrote:
    • CSS doesn't make pies

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    Complete Doctype








    dynamic drive menu






    @import url(http://www.homestead.com/~media/elements/Text/font_styles.css);
    div.lpxcenterpageouter { text-align: center; position: absolute; top: 0px; left: 0px; width: 100% }
    div.lpxcenterpageinner { position: relative; margin: 0 auto; text-align: left; width: 1200px; }









    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #CADDCE; /*overall menu background color*/
    font: 14px comic sans ms, helvetica, times roman;
    }

    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    width: 100px; /*Width of top level menu link items*/
    padding: 5px 8px;
    border: 1px solid white;
    text-align: center;
    text-decoration: none;
    color: #7F7F7F;
    }


    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    vertical-align: bottom;

    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    }

    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{
    left: 149px; /* no need to change, as true value set by script */
    top: 0;
    }

    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 170px; /*width of sub menu levels*/
    color: #5c7a62;
    text-decoration: none;
    padding: 2px 5px;
    border: 1px solid white;
    }

    .suckertreemenu ul li a:hover{
    background-color: #DDE9DF;
    color: #5c7a62;
    }

    ul..suckertreemenu {
    width: 820em;
    margin: auto;
    }
    -->

    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #caddce url() no-repeat center right;
    }

    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #CADDCE url(arrow_right_black.gif) no-repeat center right;
    }

    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }

    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */

    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/

    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

    function buildsubmenus_horizontal(){
    for (var i=0; i

  • Books

  • Candles
  • Collectibles
  • Figurines
  • Handbags

  • Home Decor
  • Plush

  • teresamar2,

    Thank you for registering at CSS Creator. You may now log in to http://csscreator.com/user using the following username and password:

    username: teresamar2
    password: 629mNrY9UW

    You may also log in by clicking on this link or copying and pasting it in your browser:


    This is a one-time login, so it can be used only once.

    After logging in, you will be redirected to http://csscreator.com/user/36670/edit so you can change your password.


    --  CSS Creator team
    #C7DDCF
    #DDE9DF
    ')}; //-->

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 31 weeks 4 days ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    DTD

    Verschwindende wrote:
    • CSS doesn't make pies

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    Doctype

    My doctype, as well as all other html is done by Homestead sitebuilder, except for the horizontal drop down menu I'm trying to create. I cannot change this. In creating the menu, I use snippets of html and insert into the webpage. I can't build a website without Homestead, so will I be able to do this or not? Also, why isn't the doctype that Homestead has used not useable?

    SuperRoach
    SuperRoach's picture
    Offline
    Enthusiast
    Ballarat
    Last seen: 9 years 7 weeks ago
    Ballarat
    Timezone: GMT+10
    Joined: 2007-02-26
    Posts: 291
    Points: 6

    I don't know much about

    I don't know much about homesteads hosting itself, but if they can't let you upload clean code yourself, you probably should avoid them and look for another (Free I assume) webhost.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 44 weeks 1 day ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    teresamar2 wrote:My doctype,

    teresamar2 wrote:
    My doctype, as well as all other html is done by Homestead sitebuilder, except for the horizontal drop down menu I'm trying to create. I cannot change this.

    Yes you can, by going elsewhere, as fast as possible. Any ISP that imposes invalid doctypes on you is just evil. Get free.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    Homestead sitebuilder is not

    Homestead sitebuilder is not free, I pay over $300 a year for it, and I think we're getting off the subject here Superoach. I can upload code, I just can't change their code. Doesn't anyone here understand website hosting? Can someone please help me with my problem?

    Triumph (not verified)
    Anonymous's picture
    Guru

    teresamar2 wrote:... Can

    teresamar2 wrote:
    ... Can someone please help me with my problem?

    Yes, your problem is with homestead sitebuilder. Stop using it. Problem solved. You're welcome.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 44 weeks 1 day ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    teresamar2 wrote:Homestead

    teresamar2 wrote:
    Homestead sitebuilder is not free, I pay over $300 a year for it

    You are definitely being ripped off.

    Quote:

    , and I think we're getting off the subject here Superoach. I can upload code, I just can't change their code. Doesn't anyone here understand website hosting? Can someone please help me with my problem?

    The hosting outfit I use charges less than that and doesn't impose a single bit of code of any kind on me.
    Most decent ISP's don't. Ones that do are ones to stay away from, or get free from as soon as possible.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    Invalid code

    Ok, as you can tell, I know nothing about css. What exactly is the meaning of invalid code?

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 44 weeks 1 day ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    teresamar2 wrote:Ok, as you

    teresamar2 wrote:
    Ok, as you can tell, I know nothing about css. What exactly is the meaning of invalid code?

    The first thing you need to know is that all the CSS rules are designed to work with proper valid, and preferably semantic html. So you need to know how to write valid html in order to use CSS successfully. That means you have to start with a standards triggering DTD, preferably html 4.01 strict. And then you have to write your html without even thinking about how it will look. Mark up your content with tags that reflect the meaning or structure of the content. H1 to H6 for headers, P for paragraphs, UL, OL or DL for lists, and so on. A menu is a list of links, so it belongs in a list, generally a UL.

    Get the Web Developer extension for Firefox and use that to submit your page to the W3C validator as you code. At first you'll probably have an error per line, but it doesn't take long to learn to code in a valid way.

    Once you've done marking up your content semantically take a look at the unstyled content in a browser, preferably a good standards compliant one such as Firefox. Could you use the page as it is? If so you are on the right track.

    Once you've got your content marked up then you start composing your stylesheet to style the result. This may involve adding grouping elements such as DIV or SPAN to your html, but it's important not to go overboard on this.

    At every step check that your html is valid, and also your CSS. CSS rules do not apply to invalid html. Every browser will attempt to apply rules to invalid code and, since there is no standard, they will generally all do it differently. That's why you want valid html. You can then hold a browser to the standard and you have a valid complaint when it fails to render according to that standard.

    That's a very bare bones outline of the design process that I generally use.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 6 years 2 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    teresamar2 wrote:My doctype,

    teresamar2 wrote:
    My doctype, as well as all other html is done by Homestead sitebuilder, except for the horizontal drop down menu I'm trying to create. I cannot change this.

    Are you sure about that? Does Sitebuilder interact directly with the server or do you have local copies of your pages saved that you can then upload yourself? If you have local copies of your files, you can edit them easily using any text editor like Notepad.

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    Sitebuilder interacts with

    Sitebuilder interacts with the server; I don't have local copies. I think it's called the "drag and drop" method. I'm able to create a webpage using tools, and when finished, I publish the page. I don't have to know any html, Sitebuilder takes care of that. Code isn't imposed upon me, as someone suggested. I've used sitebuilder for 7 yrs now, and all my webpages are pictured just like I made them. Everyone is not as computer savvy as you all are; some of us need all the help we can get.

    Triumph (not verified)
    Anonymous's picture
    Guru

    teresamar2 wrote:...

    teresamar2 wrote:
    ... Everyone is not as computer savvy as you all are; some of us need all the help we can get.

    Yet you accused everyone here of not understanding "website hosting".

    teresamar2 wrote:
    Homestead sitebuilder is not free, I pay over $300 a year for it, and I think we're getting off the subject here Superoach. I can upload code, I just can't change their code. Doesn't anyone here understand website hosting? Can someone please help me with my problem?

    Now I understand frustration as much as the next guy but let's not take it out on those trying to help you. You've got to understand that if Sitebuilder doesn't let you create valid html then there may not be anything we can say to make it work properly. Everyone that posts here with any regularity is a web standards proponent and if sitebuilder creates bad code and releases invalid markup to the world then sitebuilder is what we stand against.

    I can understand that you've been using this for 7 years and have been paying a lot of money for it all that time so you may not be willing to change but our stance is that change is necessary if you want to do things the correct way.

    teresamar2
    teresamar2's picture
    Offline
    Regular
    Last seen: 9 years 41 weeks ago
    Timezone: GMT-5
    Joined: 2007-07-24
    Posts: 18
    Points: 3

    I haven't accused anyone

    I haven't accused anyone here of anything, you all are the accusing ones. All I've done is spends hrs, not to mention weeks on creating a drop down menu from dynamic drive that is not working properly, so I came here to try to get some help with what I thought to be a simple problem, rather than ditch the menu I have spent so much time on.

    As I'm sure all of you can tell, I don't know much about html, so that is why I depend on Homestead, as I'm sure many, many others do. I would love to know how to build a website without a host, but that would take years to learn, and I don't have time for that. I don't know anything about invalid code, but I do know that Homestead has been around for a long time, and has served thousands of people, and if they weren't on the up and up, I don't think they would still be around, but I could be wrong.

    I didn't come here to defend Homestead, I was simply trying to answer your questions to the best of my knowledge. I have a business website, so I can't just leave Homestead as you have suggested.

    Forgive me for wasting your time.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 44 weeks 1 day ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    teresamar2 wrote:As I'm sure

    teresamar2 wrote:
    As I'm sure all of you can tell, I don't know much about html,

    But you came for advice to a site where folks not only know a fair amount about html but expect the folks asking questions to know quite a bit as well. Now if you'd taken some time to browse the forums before posting you might have realized that and gone somewhere they cater to folks like yourself.

    Quote:
    so that is why I depend on Homestead, as I'm sure many, many others do. I would love to know how to build a website without a host, but that would take years to learn, and I don't have time for that.

    Well sorry, but learning anything new takes time. CSS and html take time to learn and require good levels of understanding to get good results. That's just the way it is and most of the folks around here have taken that time and are willing to take more.

    Quote:
    I don't know anything about invalid code, but I do know that Homestead has been around for a long time, and has served thousands of people, and if they weren't on the up and up, I don't think they would still be around, but I could be wrong.

    Well opinions based on insufficient information are often wrong. In this case yours is wrong, in my personal opinion. There are lots and lots of truly crappy sights out there purporting to make designing web pages "easy". No doubt they make lots of money from the gullible. That doesn't make them anything other than what they are, which is crap. Yet they rake in the money.

    But if you choose and purchase a tool to do something, and that tool advertises itself as being able to do that thing, and you then find it doesn't, isn't your grievance with the folks who sold you that tool? So why aren't you asking them how to do what you want? Why aren't you insisting they give you what they sold you?

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.