8 replies [Last post]
tushar707
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

okay. I decided to start a new post to clear everything up. I have edited my css menu a lot, and it works perfectly in firefox. except it looks very, very bad in internet explorer. can someone help me out again. here is my code:


body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 153px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
width: 153px;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 148px;
margin-top : -30px;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 153px;
w\idth : 112px;
display : block;
color : #1463a5;
font-family: Monotype Corsiva;
font-weight : 100;
font-size: 22;
text-decoration : none;
background-image : url(images/button.jpg);
border : none;
padding : 0 0.5em;
padding-left: 25px;
}

#nav li a:hover {
color : white;
background-image : url(images/button_rollover.jpg);
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : auto;
}

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, if you have loads of

hi,
if you have loads of problem and dont have the patience to check each one out, just put in a conditional comment and make the necessary changes to other css. I am gonna ask you to search google to find that, as it is easily available.

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

tushar707 wrote:here is my

tushar707 wrote:
here is my code:

er, d'ya think you could do what the forum rules state and post ALL your code? That includes the HTML.

Verschwindende wrote:
  • CSS doesn't make pies

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 10 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

See see see...... mihir

See see see...... Laughing out loud

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

tushar707
Offline
Regular
Last seen: 12 years 22 weeks ago
Joined: 2007-05-12
Posts: 15
Points: 0

okay here is everything.

okay here is everything. The CSS and the html. Please let the rollover image is not working mihir after what you told me to do.


body {
font-family: VladimirScrD;
font-size: 24px;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 153px;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 29px;
margin-bottom : -1px;
background-image : url(images/button.jpg);
width: 149px;

}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 149px;
margin-top : -30px;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 149px;
w\idth : 112px;
display : block;
color : #1463a5;
font-family: Monotype Corsiva;
font-weight : 100;
font-size: 22;
text-decoration : none;
border : none;
padding : 0 0.5em;
padding-left: 25px;

}

#nav li:hover {
background-image : url(images/button.jpg);
height: 29px;
width: 149px;

}


#nav li a:hover {
color : white;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : auto;
}



  • Home
  • Our Programs

    • Climbing perches

    • Labyrinthfishes

    • Kissing gouramis

    • Pike-heads

    • Giant gouramis


  • Resources

    • My Articles

    • Newsletters

    • Useful Links



  • Events

    • Burrowing gobies

    • Dartfishes

    • Eellike gobies

    • Gobies



  • Testimonials

  • About Me

  • Contact Us

  • Please let me know what i need to fix and what I should do to center it. Finally in IE, the submenu are way too far apart from the parent menu while in firefox they are attached. WTF? . I really appreciate your help.

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 8 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    thepineapplehead wrote:er,

    thepineapplehead wrote:
    er, d'ya think you could do what the forum rules state and post ALL your code? That includes the HTML.

    We need everything. All the HTML from the doctype to the end HTML tag.

    Verschwindende wrote:
    • CSS doesn't make pies

    tushar707
    Offline
    Regular
    Last seen: 12 years 22 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    full code

    okay here it is. Sorry for all the trouble, and I a again appreciate all the help.

    Untitled Document


    body {
    font-family: VladimirScrD;
    font-size: 24px;
    }

    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    float : left;
    width : 153px;
    }

    #nav li { /* all list items */
    position : relative;
    float : left;
    line-height : 29px;
    margin-bottom : -1px;
    background-image : url(images/button.jpg);
    width: auto;

    }

    #nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 149px;
    margin-top : -30px;
    }

    #nav li ul ul { /* third-and-above-level lists */
    left: -999em;
    }

    #nav li a {
    width: 149px;
    w\idth : 112px;
    display : block;
    color : #1463a5;
    font-family: Monotype Corsiva;
    font-weight : 100;
    font-size: 22;
    text-decoration : none;
    border : none;
    padding : 0 0.5em;
    padding-left: 25px;

    }

    #nav li:hover {
    background-image : url(images/button.jpg);
    height: 29px;
    width: 149px;

    }


    #nav li a:hover {
    color : white;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }

    #content {
    margin-left : auto;
    }


    Again please let me know how to center the text, why the rollover is not working and finally why does it look different in IE and Firefox.

    tushar707
    Offline
    Regular
    Last seen: 12 years 22 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    I am remaking the menu again

    I am remaking the menu again using the step by step tutorial at http://www.seoconsultants.com/css/menus/vertical/
    I have made a lot so far, but am having few problems.

    This is my CSS style file. I cant make the images appear for some reason. Please let me know how i can fix that:
    @charset "utf-8";

    /* For Menu Testing Only */

    body, html{margin:0;padding:0;}
    body{height:203px;}
    .hand{cursor:pointer;}
    .help{cursor:help;}

    /* CSS Popout Menu */

    #menu a, #menu h2{
    display:block;
    font:bold 11px/16px arial,helvetica,sans-serif;
    text-indent:0px;
    width:149px;
    height: 29px;
    }

    #menu a{
    background:#edeef6 url(/nav/images/tile-silver-3.gif) repeat-x;
    text-decoration:none;
    }

    #menu a, #menu a:visited{
    color:#494c59;
    }

    #menu a:hover{
    color:#000;
    background:#e2e2ec url(/nav/images/tile-blue-over-3.gif) repeat-x;
    }

    #menu li{
    list-style-type:none;
    }

    #menu ul li{
    position:relative;
    }

    #menu li ul{
    position:absolute;
    top:0;
    left:149px;
    display:none;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html #menu ul li{float:left;height:1%;}
    * html #menu ul li a{height:1%;}
    /* End */

    div#menu ul, #menu ul ul, div#menu ul ul ul{
    margin:0;
    padding:0;
    list-style-image:none;
    width:149px;
    }

    div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul{
    display:none;
    }

    div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul{
    display:block;
    }

    /* Styling for Expand */

    #menu a.x, #menu a.x:visited{
    font-weight:bold;
    text-indent:2px;
    color:#494c59;
    background:#edeef6 url(/nav/images/tile-silver-3-x.gif) repeat-x;
    }

    #menu a.x:hover{
    color:#000;
    background:#edeef6 url(/nav/images/tile-blue-over-3.gif) repeat-x;
    }

    This is my html file:

    SEO Consultants Directory - CSS Mother Menu

    @import url("menu2.css");

  • Resource Library
  • Industrial Marketing
  • Subdomains in IIS
  • Questions to Ask SEO
  • Resources
  • Events
  • Testimonials
  • About Me
  • Contact Us
  • Can someone please help me out in fixing my css menu. I want a background image, and when I rollover it, it should change. However, this new css is different. please let me know how to fix this.

    tushar707
    Offline
    Regular
    Last seen: 12 years 22 weeks ago
    Joined: 2007-05-12
    Posts: 15
    Points: 0

    anybody who can help me?

    anybody who can help me?