Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble with Nav Headers in Firefox

    I'm having a bit of trouble with my nav headers. In Firefox/Camino, my nav headers are quite a bit below where they should be in my header bar. The strange thing is, in Opera and Safari, they line up just fine. What am I missing? Code is below. Any help would be greatly appreciated.

    ****

    html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background-image: url(images/webbackground.jpg);
    background-repeat: no-repeat;
    font-size:76%;
    font-family:georgia, palatino linotype, times new roman, serif;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
    }

    body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
    background-image: url(images/webbackground.jpg);
    background-repeat: no-repeat;
    }

    #content {
    display:block;
    overflow:auto;
    position:absolute;
    z-index:3;
    top:75px;
    bottom:64px;
    width:1000px;
    margin-left:-500px;
    left:50%;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom 0px solid #000;
    background: url(images/background.png);
    background-repeat: no-repeat;
    }

    * html #content {
    top:0;
    bottom:0;
    height:100%;
    width:875px;
    border-top:154px solid #fff;
    border-bottom:50px solid #fff;
    }

    #head {
    position:absolute;
    margin-left:-500px;
    left:50%;
    top:0px;
    width:994px;
    min-width:640px;
    height:80px;
    background-image: url(images/header.jpg);
    font-size:13px;
    z-index:5;
    border:0px solid #000;
    }

    * html #head {
    top:2px; width:875px; height:75px;
    }


    a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {width:120px; height:80px; display:block; float:right; background:url(images/heading.jpg); text-align:center; font-size:13px; font-weight:bold; color:#edeae4; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:5px; overflow:hidden;}
    #head a .pad {display:block; width:40px; height:50px; background:transparent; border-bottom:0px solid #000;}

    a.nav1 {background-position:0 150px;}
    a.nav2 {background-position:-80px 150px;}
    a.nav3 {background-position:-160px 150px;}
    a.nav4 {background-position:-240px 150px;}
    a.nav5 {background-position:-320px 150px;}
    a.nav6 {background-position:-400px 150px;}
    a.nav7 {background-position:-480px 150px;}

    a.nav1:hover {background-position:0 0;}
    a.nav1:hover .button {color:#90151c;}
    a.nav2:hover {background-position:-80px 0;}
    a.nav2:hover .button {color:#90151c;}
    a.nav3:hover {background-position:-160px 0;}
    a.nav3:hover .button {color:#90151c;}
    a.nav4:hover {background-position:-240px 0;}
    a.nav4:hover .button {color:#90151c;}
    a.nav5:hover {background-position:-320px 0;}
    a.nav5:hover .button {color:#90151c;}
    a.nav6:hover {background-position:-400px 0;}
    a.nav6:hover .button {color:#90151c;}
    a.nav7:hover {background-position:-480px 0;}
    a.nav7:hover .button {color:#90151c;}

    #foot {
    text-align:right;
    position:absolute;
    margin-left:-500px;
    left:50%;
    bottom:0;
    width:1000px;
    min-width:640px;
    height:55px;
    background:url(images/heading.jpg);
    background-position:0 100px;
    font-size:1em;
    z-index:5;
    border:0px solid #000;
    font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
    font-weight:bold;
    color:#000;
    }

    * html #foot {
    bottom:2px; width:875px; height:48px;
    }


    #content p {
    padding:5px; text-align:justify;
    }
    .boldhead {
    font-size:1.5em;
    font-weight:bold;
    }
    .bold {font-weight:bold;}
    .left {float:left; margin:10px; border:1px solid #000;}
    .right {float:right; margin:10px; border:1px solid #000;}
    .lefttext {float:left; width:300px; text-align:justify;}
    .righttext {float:right; width:300px; text-align:justify;}

    * html .lefttext {float:left; width:310px; text-align:justify;}
    * html .righttext {float:right; width:310px; text-align:justify;}

    </style>
    </head>

    <body>

    <div id="head">
    <a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" width="" height="" border="0px" /></a>
    <a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
    <a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
    <a class="nav3" href="http://www.detonics.ws/products.html" title="Products" /><span class="pad"></span><span class="button">Products</span></a>
    <a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
    <a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
    <a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
    <a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
    </div>

  • #2
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put it up on my personal site to make it easier to see my problems:

    http://pantonality.com/test.html

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Wow silentsid1,
    That's a very complicated page for only having a couple images and a menu...
    Validator finds a few errors but nothing that's causing your problem.
    I'm not sure what .pad is for?

    Missing background:url(images/heading.jpg);

    Very confusing way of doing this ...

    This should sort it out for you though:
    Code:
    <div id="head">
    <a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
    <a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
    <a class="nav3" href="http://www.detonics.ws/products.html" title="Products"><span class="pad"></span><span class="button">Products</span></a>
    <a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
    <a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
    <a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
    <a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
    
    <a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" border="0" height="" width=""></a></div>
    Either float:left; that bit in red or present it in the markup AFTER your floats. That way they'll be side by side.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took the basic layout from a CSS Layout page (free to use and modify without permission).

    I made your suggested changes in the Div Head. The problem stemmed from the #head a .pad. Adjusting the height and width of that lined up the Header choices to where I wanted them.

    Appreciate all the help. I'll definitely be visiting this site in the future to learn more.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As with all things in HTML and CSS, I've learned that everyone codes for Firefox then recodes/hacks for IE. While my page looks great in FF, Safari, and Opera, it looks pretty interesting in IE 6 and 7. Here is the link for a screenshot I took of the home page in IE6 using CrossOver:

    http://pantonality.com/images/homeonie.png

    For those interested in the website to pull up in IE, it is http://www.detonics.ws. I'll copy the style sheet from the home page as well as link it at the bottom. Again, I'm still getting my feet weet with all this so any help would be greatly appreciated.

    html {
    height:100&#37;;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background-image: url(images/webbackground.jpg);
    background-repeat: no-repeat;
    font-size:76%;
    font-family:georgia, palatino linotype, times new roman, serif;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
    }

    body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
    background-image: url(images/webbackground.jpg);
    background-repeat: no-repeat;
    }

    #content {
    display:block;
    overflow:auto;
    position:absolute;
    z-index:3;
    top:75px;
    bottom:64px;
    width:1000px;
    margin-left:-500px;
    left:50%;
    border-left:0px solid #000;
    border-right:0px solid #000;
    border-bottom 0px solid #000;
    background: url(images/detonicsbackground.png);
    background-repeat: no-repeat;
    }

    * html #content {
    top:0;
    bottom:0;
    height:100%;
    width:875px;
    border-top:154px solid #fff;
    border-bottom:50px solid #fff;
    }

    #head {
    position:absolute;
    margin-left:-500px;
    left:50%;
    top:0px;
    width:994px;
    min-width:640px;
    height:80px;
    background-image: url(images/header.jpg);
    font-size:13px;
    z-index:5;
    border:0px solid #000;
    }

    * html #head {
    top:2px; width:875px; height:75px;
    }


    a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {width:120px; height:80px; display:block; float:right; text-align:center; font-size:13px; font-weight:bold; color:#edeae4; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:5px; overflow:hidden; }
    #head a .pad {display:block; width:100px; height:50px; background:transparent; border-bottom:0px solid #000;}

    a.nav1 {background-position:0 0;}
    a.nav2 {background-position:-80px 150px;}
    a.nav3 {background-position:-160px 150px;}
    a.nav4 {background-position:-240px 150px;}
    a.nav5 {background-position:-320px 150px;}
    a.nav6 {background-position:-400px 150px;}
    a.nav7 {background-position:-480px 150px;}

    a.nav1:hover {background-position:0 0;}
    a.nav1:hover .button {color:#90151c;}
    a.nav2:hover {background-position:-80px 0;}
    a.nav2:hover .button {color:#90151c;}
    a.nav3:hover {background-position:-160px 0;}
    a.nav3:hover .button {color:#90151c;}
    a.nav4:hover {background-position:-240px 0;}
    a.nav4:hover .button {color:#90151c;}
    a.nav5:hover {background-position:-320px 0;}
    a.nav5:hover .button {color:#90151c;}
    a.nav6:hover {background-position:-400px 0;}
    a.nav6:hover .button {color:#90151c;}
    a.nav7:hover {background-position:-480px 0;}
    a.nav7:hover .button {color:#90151c;}

    #foot {
    text-align:right;
    display:inline;
    position:absolute;
    margin-left:-500px;
    left:50%;
    bottom:40px;
    width:1000px;
    min-width:640px;
    height:75px;
    background:url(images/heading.jpg);
    background-position:0 100px;
    font-size:1em;
    z-index:5;
    border:0px solid #000;
    font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
    font-weight:bold;
    color:#000;
    }

    * html #foot {
    bottom:2px; width:875px; height:48px;
    }


    #content p {
    padding:5px; text-align:justify;
    }
    .boldhead {
    font-size:1.5em;
    font-weight:bold;
    }
    .bold {font-weight:bold;}
    .left {float:left; margin:10px; border:1px solid #000;}
    .right {float:right; margin:10px; border:1px solid #000;}
    .lefttext {float:left; width:300px; text-align:justify;}
    .righttext {float:right; width:300px; text-align:justify;}

    * html .lefttext {float:left; width:310px; text-align:justify;}
    * html .righttext {float:right; width:310px; text-align:justify;}

    http://pantonality.com/images/stylehomeie.css

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello again silentsid1,
    Have a look at a little different method. Copy/paste this into a new .html and see what you think. It's valid CSS and XHTML 1.0 Strict, LOTS less code and probably works in all browsers. I say probably because I only looked at in IE7 and FF2.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <style type="text/css">
    html, body {
    	width: 100&#37;;
    	height: 100%;
    	background: url(http://www.detonics.ws/images/webbackground.jpg) no-repeat;
    	font: 76% Georgia, palatino linotype, "Times New Roman", Times, serif;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 1000px; 
    	margin: 0 auto;
    }	
    #head { 
    	height: 80px;
    	background-image: url(http://www.detonics.ws/images/header.jpg); 
    }
    		a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
    			width:120px; 
    			height:80px; 
    			display:block; 
    			float:right; 
    			background:url(images/heading.jpg); 
    			text-align:center; 
    			font-size:13px; 
    			font-weight:bold; 
    			color:#edeae4; 
    			text-decoration:none; 
    			font-family:verdana, arial, sans-serif; 
    			line-height:5px; 
    			overflow:hidden; 
    		}
    		#head a .pad {
    			display:block; 
    			width:100px; 
    			height:50px; 
    			background:transparent; 
    			border-bottom:0px solid #000;
    		}		
    		a.nav1 {background-position:0 0;}
    		a.nav2 {background-position:-80px 150px;}
    		a.nav3 {background-position:-160px 150px;}
    		a.nav4 {background-position:-240px 150px;}
    		a.nav5 {background-position:-320px 150px;}
    		a.nav6 {background-position:-400px 150px;}
    		a.nav7 {background-position:-480px 150px;}
    		
    		a.nav1:hover {background-position:0 0;}
    		a.nav1:hover .button {color:#90151c;}
    		a.nav2:hover {background-position:-80px 0;}
    		a.nav2:hover .button {color:#90151c;}
    		a.nav3:hover {background-position:-160px 0;}
    		a.nav3:hover .button {color:#90151c;}
    		a.nav4:hover {background-position:-240px 0;}
    		a.nav4:hover .button {color:#90151c;}
    		a.nav5:hover {background-position:-320px 0;}
    		a.nav5:hover .button {color:#90151c;}
    		a.nav6:hover {background-position:-400px 0;}
    		a.nav6:hover .button {color:#90151c;}
    		a.nav7:hover {background-position:-480px 0;}
    		a.nav7:hover .button {color:#90151c;}
    #content {
    	height: 643px;
    	background: url(http://www.detonics.ws/images/detonicsbackground.png);
    }
    #foot {
    	height:75px; 
    	background:url(images/heading.jpg);
    	background-position:0 100px;
    	font: 1em trebuchet MS, tahoma, verdana, arial, sans-serif;
    	text-align:right;
    	font-weight:bold;
    	color:#000;
    	}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="head">
                <a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
                <a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
                <a class="nav3" href="http://www.detonics.ws/products.html" title="Products"><span class="pad"></span><span class="button">Products</span></a>
                <a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
                <a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
                <a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
                <a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
                <a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" height="82" width="122" /></a>
            <!--end head--></div>
            	<div id="content">
                <!--end content--></div>
            <div id="foot">
                <h3>
                    This page is best viewed in 
                    <a href="http://www.mozilla.com/en-US/firefox/"><b>Firefox</b></a>, 
                    <a href="http://www.apple.com/safari/"><b>Safari</b></a> and 
                    <a href="http://www.opera.com/"><b>Opera</b></a>
                </h3>
                    <p>
                        &copy; 2007-2008 Detonics and Double Nickel LLC.
                    </p>
            <!--end foot--></div>
        <!--end container--></div>
    </body>
    </html>
    When posting long sections of code like you have been, it makes life a lot easier when you use the code tags so we don't have to scroll down so far.
    Last edited by Excavator; 01-08-2008 at 01:31 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,

    I really appreciate all the assistance you've given me so far. It's really helped clean up a lot of the code I had. I'm still having some issues with IE6 and 7. The navigational headers in the head are still being cut off and on a few pages. Some images are not showing up on the pages as well. Here is the code from the media page:

    http://www.detonics.ws/media.html


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Detonics Media Files</title>
    <style type="text/css">

    html, body {
    width: 100%;
    height: 100%;
    background: url(http://www.detonics.ws/images/webbackground.jpg) no-repeat;
    font: 76% Georgia, palatino linotype, "Times New Roman", Times, serif;
    }
    * {
    margin: 0;
    padding: 0;
    border: none;
    }
    #container {
    width: 1000px;
    margin: 0 auto;
    }
    #head {
    height: 80px;
    background-image: url(http://www.detonics.ws/images/header.jpg);
    }
    a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
    width:120px;
    height:80px;
    display:block;
    float:right;
    background:url(images/heading.jpg);
    text-align:center;
    font-size:13px;
    font-weight:bold;
    color:#edeae4;
    text-decoration:none;
    font-family:verdana, arial, sans-serif;
    line-height:5px;
    overflow:hidden;
    }
    #head a .pad {
    display:block;
    width:100px;
    height:80px;
    background:transparent;
    border-bottom:0px solid #000;
    }
    a.nav1 {background-position:0 0;}
    a.nav2 {background-position:-80px 150px;}
    a.nav3 {background-position:-160px 150px;}
    a.nav4 {background-position:-240px 150px;}
    a.nav5 {background-position:-320px 150px;}
    a.nav6 {background-position:-400px 150px;}
    a.nav7 {background-position:-480px 150px;}

    a.nav1:hover {background-position:0 0;}
    a.nav1:hover .button {color:#90151c;}
    a.nav2:hover {background-position:-80px 0;}
    a.nav2:hover .button {color:#90151c;}
    a.nav3:hover {background-position:-160px 0;}
    a.nav3:hover .button {color:#90151c;}
    a.nav4:hover {background-position:-240px 0;}
    a.nav4:hover .button {color:#90151c;}
    a.nav5:hover {background-position:-320px 0;}
    a.nav5:hover .button {color:#90151c;}
    a.nav6:hover {background-position:-400px 0;}
    a.nav6:hover .button {color:#90151c;}
    a.nav7:hover {background-position:-480px 0;}
    a.nav7:hover .button {color:#90151c;}
    #content {
    height: 663px;
    font: 13px Georgia, palatino linotype, "Times New Roman", Times, serif;
    background: #cccbcd;
    padding-left:20px;
    }
    #foot {
    height:75px;
    background:url(images/heading.jpg);
    background-position:0 100px;
    font: 1.2em Georgia, palatino linotype, "Times New Roman", Times, serif;
    text-align:center;
    font-weight:bold;
    color:#000;
    }
    </style>
    </head>
    <body>

    <div id="container">
    <div id="head">
    <a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
    <a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
    <a class="nav3" href="http://www.detonics.ws/products.html" title="Products" /><span class="pad"></span><span class="button">Products</span></a>
    <a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
    <a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
    <a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
    <a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
    <a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" width="" height="" border="0px" /></a>
    <!-- End of head --></div>

    <div id="content">
    <br>
    <h2><b>Media Files</b></h2>
    <br>
    <p>
    This first video shows...
    </p>
    <br>
    <p>
    <a href="http://www.detonics.ws/video/applegate.mpg"><img src="http://www.detonics.ws/images/burroughsapplegate.jpg" alt="burroughsapplegate" width="" height="" border="0" /></a>
    </p>
    <br>
    <p>
    In the second video...
    </p>
    <br>
    <p>
    <a href="http://www.detonics.ws/video/sparrow.mpg"><img src="http://www.detonics.ws/images/medinasparrow.jpg" alt="" width="" height="" border="0" /></a>
    </p>

    <!-- End of content --></div>
    <!-- End of container --></div>

    <div id="foot">&copy; 2007-2008 Detonics and Double Nickle LLC.</div>

    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>

    <script type="text/javascript">
    _uacct = "UA-451410-1";
    urchinTracker();
    </script>
    </body>
    </html>

    Again, any help is appreciated. I'm beginning to wonder how you all do this day in and out without heavy drinking...

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    CODE TAGS! Please. Really.
    In the message window when your typing your reply/question .. the # button will put code tags up so your code is in a scroll box like my code is.

    I think I figured out what .pad is for. It seems to be a spacer to push the menu buttons down from the top. NOT the usual way to do it at all. With .pad set at 80px high it pushes your menu out of #head. Do this:
    Code:
    #head a .pad {
    			display:block; 
    			width:100px; 
    			height:40px; 
    			background:transparent; 
    			border-bottom:0px solid #000;
    		}
    and your menu is centered... Is that all .pad is for??? I keep asking because I don't want to delete something you're going to use later.
    If .pad is just a spacer you should get rid of it and position your menu with a margin.


    ===========

    Why your images aren't showing up... I'm not sure. Why are you wrapping them in p tags?

    The p tag is for paragraphs.

    Try this instead:
    Code:
    <a href="http://www.detonics.ws/video/applegate.mpg"><img src="http://www.detonics.ws/images/burroughsapplegate.jpg" alt="burroughsapplegate" width="200" height="139" /></a>
    Check out the suggestion and links about validating in my sig below. The code I gave you is valid CSS and XHTML 1.0 Strict. The little bit of changes you did added 21 errors, all of which are easy to fix.
    The validator is a good learning tool. It lets you know when you've made a mistake and usually gives a good explanation of why.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize for the lack of code tags. I realize now what you were referring to.

    Let's start with the easy stuff. The images, because of my lack of knowledge, were wrapped in p tags. I made all those changes which should fix the problems with the images.


    And the #head a.pad code is for positioning and spacer for the menu. As for using margins, should that go in the #head or would I have to create a new rule?

    Thank you once again.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by silentsid1 View Post
    And the #head a.pad code is for positioning and spacer for the menu. As for using margins, should that go in the #head or would I have to create a new rule?
    Empty divs are just extra markup and not needed. Spacer divs are the old way of doing it.
    Try putting margin: 20px 0 0 0; on your buttons with this:
    Code:
    a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
    width:120px; 
    height:80px; 
    margin: 20px 0 0 0;
    display:block; 
    float:right; 
    background:url(images/heading.jpg); 
    text-align:center; 
    font-size:13px; 
    font-weight:bold; 
    color:#edeae4; 
    text-decoration:none; 
    font-family:verdana, arial, sans-serif; 
    line-height:5px; 
    overflow:hidden; 
    }
    You'll need to get rid of everything concerning .pad for that to work.

    I'm off to dinner so no chance to look... did removing p tags help?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Removing the p tags fixed the image problems in IE7. I also removed the #head padding and replaced it with the margin definition you suggested. After adjusting the line height and height of the head a.navs, I got the menu situated where I wanted it. This also fixed a small issue on the a.navs pushing away any images I had in the content because the a.nav height was too big.

    The only issue I have now in IE7 is with the exception for the home page, all the other pages have the logo missing in the header. I'll be tackling this next.


  •  

    Posting Permissions

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