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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 bugs - IE vs FF

    www.greater-designs.com

    My code should be fairly clean in this one but here are my 2 issues:
    1) I am trying to get my NAV-Bar directly in the middle between the 2 rasied band areas. Also centered. I thought I have been doing everything correct so far, the logo ISO logo and mission statements are behaving the same in both IE and FF, but now that I am trying to do the NAV Bar it shows different in IE and in FF.
    2) I am trying to do the trick at where the background stops to have a 1 pixel continuation of the background where how far the page goes down is how many times that the 1px background repeats. I can use this code by itself with only that DIV and it works just fine.

    Please help the handicapped.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Add this code. It resets these to zero before you start the CSS. It may mean resetting some of these values in some of your divs.

    Frank

    Code:
    /* CSS Document */
    
    *{
    margin:0;
    padding:0;
    }
    
    body {
    	text-align: center;
    	background-image: url(background-rounded-edges-top.gif);
    	background-repeat: no-repeat;
    	background-position: top;
    	margin: 10px;
    	float: none;
      }
    Last edited by effpeetee; 12-20-2007 at 08:24 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello greatrd,
    It's not hard to move things up and down with margins. Sometimes you can even do it without running into a browser bug that knocks it all out of whack.
    Like this:
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <meta name="" content="authored by http://nopeople.com/Design" />
    <link rel="stylesheet" type="text/css" href="trial7css.css" />
    </head>
    <body>
    <div id="container">
    	<div id="header">
            <div id="top-heading-space"></div>
                            <div id="top-heading">
                                <img src="greatrd_files/Logo-to-size.gif" alt="logo image" width="261" height="80" id="logo" />
                                <div class="mission">
                                    <i>Our Mission</i><br />
                                    To be the very best at acheiving our<br />
                                    Purpose and Vision we are committed to:<br />
                                    <u>Exceeding Customers' Expectations</u><br />
                                    through highly Engaged Employees<br />
                                    using Superior Processes and<br />
                                    sustaining Profitable Growth
                                <!--end .mission--></div>
                            <!--end top-heading-space--></div>
                        <div id="navbar">
                            <div id="rollover1"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover2"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover3"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover4"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover5"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover6"><a href="http://nopeople.com/Design"></a></div>
                            <div id="rollover7"><a href="http://nopeople.com/Design"></a></div>
          				<!--end navbar--></div>
            <!--end header--></div>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        <!--end content--></div>
    <!--end container--></div>
    </body>
    </html>
    and the CSS that goes with that:
    Code:
    html, body {
    	background: #FFFFFF;
    	text-align: center;
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    }
    * {
    	margin:0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    }
    #header{
    	height: 256px;
    	background: url(http://www.greater-designs.com/background-rounded-edges-top.gif) no-repeat top;
    }
    #top-heading-space {
    	width: 800px;
    	height: 40px;
    	margin: 0 auto;
    }
    #top-heading {
    	width: 675px;
    	height: 100px;
    	margin: 10px auto 0 auto;
    	background: #66FF00 url(http://www.greater-designs.com/grafic-i-s-o-act.gif) no-repeat center center;
    }
    	#logo {
    		float: left;
    		margin: 10px 0 0 0;
    	}
    .mission {
    	background-attachment: scroll;
    	font-family:Arial, Helvetica, sans-serif;
    	width: 224px;
    	height: 90px;
    	float: right;
    	text-align: center;
    	font-size: xx-small;
    	font-weight:bolder;
    	margin-top: 12px;
    }
    /***************/
    /*NAV Contents */
    #navbar {
    	height: 61px;
    	width: 706px;
    	margin: 20px auto 0;
    }
    #rollover1 {
    	height: 61px;
    	width: 88px;
    	float: left;
    	background: url(http://www.greater-designs.com/images/home.gif);
    }
    #rollover1 a:hover {
    	display:block;
    	height: 61px;
    	width: 88px;
    	background: url(http://www.greater-designs.com/images/home.gif) bottom;
    }
    #rollover1 a {
    	display:block;
    	height: 61px;
    	width: 88px;
    	background: url(http://www.greater-designs.com/images/home.gif) top;
    }
    		#rollover2 {
    			height: 61px;
    			width: 93px;
    			float: left;
    			background: url(http://www.greater-designs.com/images/history.gif);
    		}
    		#rollover2 a:hover {
    			display:block;
    			height: 61px;
    			width: 93px;
    			background: url(http://www.greater-designs.com/images/history.gif) bottom;
    		}
    		#rollover2 a {
    			display:block;
    			height: 61px;
    			width: 93px;
    			background: url(http://www.greater-designs.com/images/history.gif) top;
    		}
    #rollover3 {
    	height: 61px;
    	width: 110px;
    	float: left;
    	background: url(http://www.greater-designs.com/images/eng.gif);
    }
    #rollover3 a:hover {
    	display:block;
    	height: 61px;
    	width: 110px;
    	background: url(http://www.greater-designs.com/images/eng.gif) bottom;
    }
    #rollover3 a {
    	display:block;
    	height: 61px;
    	width: 110px;
    	background: url(http://www.greater-designs.com/images/eng.gif) top;
    }
    		#rollover4 {
    			height: 61px;
    			width: 117px;
    			float: left;
    			background: url(http://www.greater-designs.com/images/manuf.gif);
    		}
    		#rollover4 a:hover {
    			display:block;
    			height: 61px;
    			width: 117px;
    			background: url(http://www.greater-designs.com/images/manuf.gif) bottom;
    		}
    		#rollover4 a {
    			display:block;
    			height: 61px;
    			width: 117px;
    			background: url(http://www.greater-designs.com/images/manuf.gif) top;
    		}
    #rollover5 {
    	height: 61px;
    	width: 71px;
    	float: left;
    	background: url(http://www.greater-designs.com/images/qa.gif);
    }
    #rollover5 a:hover {
    	display:block;
    	height: 61px;
    	width: 71px;
    	background: url(http://www.greater-designs.com/images/qa.gif) bottom;
    }
    #rollover5 a {
    	display:block;
    	height: 61px;
    	width: 71px;
    	background: url(http://www.greater-designs.com/images/qa.gif) top;
    }
    		#rollover6 {
    			height: 61px;
    			width: 102px;
    			float: left;
    			background: url(http://www.greater-designs.com/images/contact.gif);
    		}
    		#rollover6 a:hover {
    			display:block;
    			height: 61px;
    			width: 102px;
    			background: url(http://www.greater-designs.com/images/contact.gif) bottom;
    		}
    		#rollover6 a {
    			display:block;
    			height: 61px;
    			width: 102px;
    			background: url(http://www.greater-designs.com/images/contact.gif) top;
    		}
    #rollover7 {
    			height: 61px;
    			width: 125px;
    			float: left;
    			background: url(http://www.greater-designs.com/images/employ.gif);
    		}
    #rollover7 a:hover {
    			display:block;
    			height: 61px;
    			width: 125px;
    			background: url(http://www.greater-designs.com/images/employ.gif) bottom;
    		}
    #rollover7 a {
    			display:block;
    			height: 61px;
    			width: 125px;
    			background: url(http://www.greater-designs.com/images/employ.gif) top;
    		}
    /* This is the end of the Nav contents*/
    
    	
    .style2 {font-size: 24px}
    A couple things to note:
    • the logo image is too wide - need to trim about 50px of the right side
    • .mission breaks with only one text resize... maybe that should be an image too?
    • #content would work well with a 800px by 1px image repeated on the y-axis. I think that was what your question #2 was about?
    • I removed the ul tags from your nav - that was not a ul.
    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


  •  

    Posting Permissions

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