SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and FF conflict

    In the dropdown menu - its different in ff and IE. I'm TRYING emphasis that as I've been working on it for some time now to have the drop down part of the menu about 2px below the menu creating a "gap" - can someone please help.... test it in both please.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Leo's McCabe Builders</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="yeah">
    <meta name="generator" content="gEdit">
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    img {
    border: 0;
    }

    ul, li {
    list-style: none;
    }

    html, body {
    height: 100%;
    background: url(background.gif)
    }

    #container {
    min-height: 100%;
    width: 849px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
    margin: 0 auto;
    font-family: sans-serif;
    background-color: #7a0000;
    }
    * html #container {height: 100%;} /*no min-height for lte IE6*/

    #header {
    }

    h1 {
    color: #fff;
    height: 105px;
    width: 849px;
    position: relative;
    }
    h1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(logo.jpg) 0 0 no-repeat;
    }


    #menu1 {
    border-top: 1px solid #949494;
    background-color: #37383d;
    width: 100%; /*haslayout so background colour shows in IE6*/
    overflow: hidden;
    }
    #header ul li {
    display: inline; /*some declaration for IE7, otherwise ignore li's*/
    }

    #header ul a, #header p {
    float: left;
    font-family: tahoma;
    font-size: 11px;
    color: #e0e4e7;
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    padding: 0 10px;
    }
    #header ul a:focus, #header ul a:hover {
    background-color: #464d58;
    }

    #header p {
    clear: left;
    background-color: #37383d;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    height: 24px;
    }
    * html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/


    #menu2, #footer {
    background-color: #6B6565;
    color: #e0e4e7;
    overflow: hidden;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;


    }
    * html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/

    #flash {
    clear: left;
    background-color: #949494;
    color: #000;
    padding: 5px;
    margin-top: 0px;
    height: 400px;
    }

    #footer {
    margin-left: 0;
    padding: 0 5px;

    }
    #footer p {
    font-family: tahoma;
    font-size: 11px;
    padding: 5px;
    text-align: left;
    }

















    #menuh {
    background-color: #6C7079;
    border-top: 1px solid #B9C0CA;
    border-bottom: 1px solid #B9C0CA;
    height: 24px;
    color: #626B7E;
    }
    #menuh li {
    list-style: none;
    position: relative;
    float: left;
    }
    #menuh a {
    float: left;
    padding: 0 1em;
    color: #FFFFFF;
    text-decoration: none;
    height: 24px;
    line-height: 24px;
    }
    #menuh a:hover {
    background-color: #37383D;
    }
    #menuh ul {
    position: absolute;
    top: 24px;
    background-color: #6C7079;
    border: 1px solid #B9C0CA;
    width: 100px;
    padding: 0 4px;
    left: -999em;
    }
    #menuh ul li {
    width: 100%;
    padding: 4px 0;
    border-bottom: 1px solid #B9C0CA;
    }
    #menuh ul li.last {
    border-bottom: 0;
    }
    #menuh ul a {
    height: 1.2em;
    line-height: 1.2em;
    padding: 0 0 0 5px;
    text-align: left;
    float: none;
    display: block;
    }
    #menuh li:hover ul, #menuh li.sfhover ul {
    left: 0px;
    }
    -->
    </style>
    <!--[if lt IE 7]><script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("menuh").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script><![endif]-->




    </style>
    </head>








    <body>


    <div id="container">


    <div id="header">
    <h1>Text<span></span></h1>
    <ul id="menu1">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Recruitment</a></li>
    <li><a href="#">McCabe UK</a></li>

    <li><a href="#">Clients</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Home</a></li>
    </ul>

    <p>Menu</p>
    <ul id="menuh">
    <li><a href="#">Homepage</a>
    <ul>
    <li class="last"><a href="#">About</a></li>
    </ul>
    </li>
    <li><a href="#">Gallery 1 </a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="last"><a href="#">Link 3</a></li>
    </ul>
    </li>
    <li><a href="#">Gallery 2</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="last"><a href="#">Link 3</a></li>
    </ul>
    </li>
    <li><a href="#">Gallery 3</a> </li>
    <li><a href="#">Resources</a> </li>
    <li><a href="#">Contact</a> </li>
    </ul>
    </div><!--header-->


    <div id="flash">
    <p>Text text text.</p>

    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>

    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the

    page grow and shrink.<br>
    </div>
    <div id="footer">
    <p>contact</p>
    </div>
    </div><!--container-->
    </body>

    </html>

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the dropdown menu - its different in ff and IE. I'm TRYING emphasis that as I've been working on it for some time now to have the drop down part of the menu about 2px below the menu creating a "gap" - can someone please help.... test it in both please.
    Do you mean between FF and IE6?

    In this case you could try just try with a 2px lower position on the dd list. That is if you can accept a zero gap in IE6.
    Code CSS:
    #menuh ul {
    	position: absolute;
    	top: 26px; /* 2px gap bridged by the overflowing parent. Would usually be 24px, as the parent item's list height */
    	background-color: #6C7079;
    	border: 1px solid #B9C0CA;
    	width: 100px;
    	padding: 0 4px;
    	left: -999em;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then to get the gap in IE6 too, try:
    Code CSS:
    * html #menuh {
    	overflow: hidden; /* for IE6 */
    }
    Then to keep the height in IE6 remove the temporary Menu paragraph between the lists:
    Code:
    		</ul>
    			<p>Menu</p>
    		<ul id="menuh">
    Happy ADD/ADHD with Asperger's

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you want to place the drop down away from the parent list then you need to make the space with padding otherwise you will lose focus and the drop down will disappear before you can reach it.

    One way to do this would be to insert a div before the ul and apply the padding to the div which will leave you to still style the ul as before.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Leo's McCabe Builders</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="yeah">
    <meta name="generator" content="gEdit">
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    img {
    border: 0;
    }
    
    ul, li {
    list-style: none;
    }
    
    html, body {
    height: 100&#37;;
    background: url(background.gif)
    }
    
    #container {
    min-height: 100%;
    width: 849px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
    margin: 0 auto;
    font-family: sans-serif;
    background-color: #7a0000;
    }
    * html #container {height: 100%;} /*no min-height for lte IE6*/
    
    #header {
    }
    
    h1 {
    color: #fff;
    height: 105px;
    width: 849px;
    position: relative;
    }
    h1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(logo.jpg) 0 0 no-repeat;
    }
    
    
    #menu1 {
    border-top: 1px solid #949494;
    background-color: #37383d;
    width: 100%; /*haslayout so background colour shows in IE6*/
    overflow: hidden;
    }
    #header ul li {
    display: inline; /*some declaration for IE7, otherwise ignore li's*/
    }
    
    #header ul a, #header p {
    float: left;
    font-family: tahoma;
    font-size: 11px;
    color: #e0e4e7;
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    padding: 0 10px;
    }
    #header ul a:focus, #header ul a:hover {
    background-color: #464d58;
    }
    
    #header p {
    clear: left;
    background-color: #37383d;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    height: 24px;
    }
    * html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/
    
    
    #menu2, #footer {
    background-color: #6B6565;
    color: #e0e4e7;
    overflow: hidden;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    
    
    }
    * html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/
    
    #flash {
    background-color: #949494;
    color: #000;
    padding: 5px;
    margin-top: 0px;
    height: 400px;
    }
    
    #footer {
    margin-left: 0;
    padding: 0 5px;
    
    }
    #footer p {
    font-family: tahoma;
    font-size: 11px;
    padding: 5px;
    text-align: left;
    }
    
    
    #menuh {
    background-color: #6C7079;
    border-top: 1px solid #B9C0CA;
    border-bottom: 1px solid #B9C0CA;
    color: #626B7E;
    float:left;
    width:100%;
    }
    #menuh li {
    list-style: none;
    position: relative;
    float: left;
    }
    #menuh a {
    float: left;
    padding: 0 1em;
    color: #FFFFFF;
    text-decoration: none;
    }
    #menuh a:hover {
    background-color: #37383D;
    }
    #menuh div{
        padding:5px 0 0 0;
        position: absolute;
        top: 24px;
        width:108px;
        left: -999em;
        background:url(fake.gif) no-repeat 0 0;/* use a 1px x 1px transparent gif*/
    }
    #menuh div ul {
        background-color: #6C7079;
        border: 1px solid #B9C0CA;
        width: 108px;
        padding: 0;
        float:left;
    }
    #menuh ul li {
    width: 100%;
    padding:0;
    border-bottom: 1px solid #B9C0CA;
    }
    #menuh ul li.last {
    border-bottom: 0;
    }
    #menuh ul a {
    padding: 0 4px 0 5px;
    text-align: left;
    float: none;
    display: block;
    }
    #menuh li:hover div, #menuh li.sfhover div {
    left: 0px;
    }
    
    </style>
    <!--[if lt IE 7]><script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("menuh").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script><![endif]-->
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1>Text<span></span></h1>
            <ul id="menu1">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Recruitment</a></li>
                <li><a href="#">McCabe UK</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <ul id="menuh">
                <li><a href="#">Homepage</a>
                    <div>
                        <ul>
                            <li class="last"><a href="#">About</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 1 </a>
                    <div>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li class="last"><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 2</a>
                    <div>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li class="last"><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 3</a> </li>
                <li><a href="#">Resources</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </div>
        <!--header-->
        <div id="flash">
            <p>Text text text.</p>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
        </div>
        <div id="footer">
            <p>contact</p>
        </div>
    </div>
    <!--container-->
    </body>
    </html>
    IE will still lose focus unless you add the fake.gif trick I inserted into the above code (it doesn't even need a real image - but will of course leave missing image messages in your server logs unless you use an image).

    Yu culd style it without the extra div but it gets a little tricky.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for your replies.

    Paul, your way worked perfectly even without the fake.gif - although I will make one just to make sure.

    Can you please style the ul li content though? I want a 4px padding around it like I have in my own design but I can't seem to figure out how to do it with yours......?

    Thanks again,
    Leo

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Can you please style the ul li content though? I want a 4px padding around it like I have in my own design but I can't seem to figure out how to do it with yours......?
    I assumed that was a mistake as most people like the whole row to change color on hover

    So you want 4px padding around the list item including the underline. Something like this:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Leo's McCabe Builders</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="yeah">
    <meta name="generator" content="gEdit">
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    img {
    border: 0;
    }
    
    ul, li {
    list-style: none;
    }
    
    html, body {
    height: 100&#37;;
    background: url(background.gif)
    }
    
    #container {
    min-height: 100%;
    width: 849px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
    margin: 0 auto;
    font-family: sans-serif;
    background-color: #7a0000;
    }
    * html #container {height: 100%;} /*no min-height for lte IE6*/
    
    #header {
    }
    
    h1 {
    color: #fff;
    height: 105px;
    width: 849px;
    position: relative;
    }
    h1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(logo.jpg) 0 0 no-repeat;
    }
    
    
    #menu1 {
    border-top: 1px solid #949494;
    background-color: #37383d;
    width: 100%; /*haslayout so background colour shows in IE6*/
    overflow: hidden;
    }
    #header ul li {
    display: inline; /*some declaration for IE7, otherwise ignore li's*/
    }
    
    #header ul a, #header p {
    float: left;
    font-family: tahoma;
    font-size: 11px;
    color: #e0e4e7;
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    padding: 0 10px;
    }
    #header ul a:focus, #header ul a:hover {
    background-color: #464d58;
    }
    
    #header p {
    clear: left;
    background-color: #37383d;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    height: 24px;
    }
    * html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/
    
    
    #menu2, #footer {
    background-color: #6B6565;
    color: #e0e4e7;
    overflow: hidden;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    
    
    }
    * html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/
    
    #flash {
    background-color: #949494;
    color: #000;
    padding: 5px;
    margin-top: 0px;
    height: 400px;
    }
    
    #footer {
    margin-left: 0;
    padding: 0 5px;
    
    }
    #footer p {
    font-family: tahoma;
    font-size: 11px;
    padding: 5px;
    text-align: left;
    }
    
    
    #menuh {
    background-color: #6C7079;
    border-top: 1px solid #B9C0CA;
    border-bottom: 1px solid #B9C0CA;
    color: #626B7E;
    float:left;
    width:100%;
    }
    #menuh li {
    list-style: none;
    position: relative;
    float: left;
    }
    #menuh a {
    float: left;
    padding: 0 1em;
    color: #FFFFFF;
    text-decoration: none;
    }
    #menuh a:hover {
    background-color: #37383D;
    }
    #menuh div{
        padding:5px 0 0 0;
        position: absolute;
        top: 24px;
        width:108px;
        left: -999em;
        background:url(fake.gif) no-repeat 0 0;/* use a 1px x 1px transparent gif*/
    }
    #menuh div ul {
        background-color: #6C7079;
        border: 1px solid #B9C0CA;
        width: 100px;
        padding: 0 4px;
        float:left;
    }
    #menuh ul li {
    width: 100px;
    padding:4px 0;
    border-bottom: 1px solid #B9C0CA;
    }
    #menuh ul li.last {
    border-bottom: 0;
    }
    #menuh ul a {
    padding: 0 4px 0 5px;
    text-align: left;
    float: none;
    display: block;
    line-height:1.2em!important;
    height:auto!important
    }
    #menuh li:hover div, #menuh li.sfhover div {
    left: 0px;
    }
    
    </style>
    <!--[if lt IE 7]><script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("menuh").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script><![endif]-->
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1>Text<span></span></h1>
            <ul id="menu1">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Recruitment</a></li>
                <li><a href="#">McCabe UK</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <ul id="menuh">
                <li><a href="#">Homepage</a>
                    <div>
                        <ul>
                            <li class="last"><a href="#">About</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 1 </a>
                    <div>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li class="last"><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 2</a>
                    <div>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li class="last"><a href="#">Link 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Gallery 3</a> </li>
                <li><a href="#">Resources</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </div>
        <!--header-->
        <div id="flash">
            <p>Text text text.</p>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
            <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see the
                
                page grow and shrink.<br>
        </div>
        <div id="footer">
            <p>contact</p>
        </div>
    </div>
    <!--container-->
    </body>
    </html>

    Hope that's what you meant

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Paul that is so awesome, thank you dude.

    I still can't see what you did to tailor it but its perfecto now.
    I'm still gunna use a fake.gif even though it's working fine for me in IE

    You the man!

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by le007
    ...
    I want a 4px padding around it like I have in my own design but I can't seem to figure out how to do it
    ...
    Try adding your old code here:
    Code:
    #menuh div ul {
    	background-color: #6C7079;
    	border: 1px solid #B9C0CA;
    	width:100px;
    	padding: 0 4px;
    	float:left;
    }
    #menuh ul li {
    	width: 100&#37;;
    	padding: 4px 0;
    	border-bottom: 1px solid #B9C0CA;
    }
    #menuh ul li.last {
    	border-bottom: 0;
    }
    #menuh ul a {
    	height: 1.2em;
    	line-height: 1.2em;
    	padding: 0 4px 0 5px;
    	text-align: left;
    	float: none;
    	display: block;
    }
    Hope that helps.

    Edit:

    Oops, thought I did a refresh before posting. But not
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh Erik, thanks for your help with this post.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I still can't see what you did to tailor it ...
    Sorry I meant to put the changes in bold but Erik has shown you where to look anyway

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep thanks. I put in the 1x1 "fake" gif and its appearing as a white dot...... can I leave it out do you guys think? It seems to work fine well in FF and IE regardless.....

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by le007
    Heh Erik, thanks for your help with this post.
    I'm glad I missed the refresh then.
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, me too.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    and its appearing as a white dot
    Then you didn't make it fully transparent lol

    Its a 1px x 1px gif that is 100&#37; fully index transparent (which means its invisible).

    The reason you need it in IE is that if you move very slowly between the menu and the sub menu the focus will drop off in the gap. (You have to remove the css that is calling the image to see this in effect).

    As I said above you don't need the actual image to exist as long as you are pretending to refer to an image which is enough to trick IE. Some people don't like to do this because it leaves a missing image message in the server logs. Of course some people don't ever look at their server logs so it's probably a non-issue.

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhhhh ok right, gotcha...... well I'll just leave it be buddy. Its all good - not that concerned about the server logs

    Thank you all again - time to finish the project......

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Major issue again.....


    The drop down part of the menu is going BEHIND a slideshow I have in the main content part of the page?

    It's not seen - its like its a layer behind the slideshow, part of it is seen..... any ideas? Is this to do with the Z-index or something?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you have a link to the current problem as its easier to work with live examples?

    If the slideshow is normal CSS and images then its likely to be just a z-index issue and you need to ensure the parent that holds the slide show has a lower z-index than the parent that holds the drop down menu (assuming they have different parents of course which is likely to be the case).

    In order for z-index to take effect the element concerned must be a positioned element which means for static elements you need to add position:relative or the z-index won't take effect.

    If the slideshow is a flash slideshow then things are more complicated and you should look in the flash forum at the sticky thread which explains about wmode="transparent" (or "opaque").

    If the slideshow is some sort of applet (or media player etc) then you may be out of luck as some controls will always be on top

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a JS slideshow......
    Didn't know you could have a transitional slideshow using css.

    I'll upload a live example now:

  19. #19
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You know when I said this in post #17:
    Quote Originally Posted by me
    you need to ensure the parent that holds the slide show has a lower z-index than the parent that holds the drop down menu
    What part of that didn't you understand lol ?

    Code:
    #header {
    position:relative;
    z-index:99;
    width:100&#37;;
    }
    #flash {
    position:relative;
    z-index:1;
    }

  21. #21
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is too good....... awesome - it works now but not in IE?

  22. #22
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was told by a JS fella I know to do this:

    set your z-index to 1000 on your dropdown divs.

    so
    Quote:
    <div style="z-index:1000">

    But don't know is this the same as your technique?
    Your tip worked in FF but not IE?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

    Your tip worked in FF but not IE?
    Then you did it wrong

    I specifically checked in IE6 and 7 and added a fix for it.

    Did you not copy my code exactly?

    Do you have a link to where its not working.

    I was told by a JS fella I know to do this:

    set your z-index to 1000 on your dropdown divs.
    That's nonsense as you could set a z-index of 1000000000000000 on the drop down but would have no effect if the parent had no z-index set or was z-index:1 and the other element was z-index:2.

    Ultimately (as I have said three times now) it is the parent that dictates the stacking level of its nested children and you need to address the parents as well where there are conflicts in stacking order.

  24. #24
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.....

    I reuploaded - to same directory:

    http://www.clubluna.ie/my/menu20.html

    css file where I put your changes

    http://www.clubluna.ie/my/car.css

    Its still only working for me in FF not IE

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's working in IE7 and it will work in IE6 if you re-instate the conditional comments containing the javascript (that was in the original) that IE needs to work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •