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 Coder
    Join Date
    Feb 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE to firefox problem...

    A website I am working on for a girls lacrosse team works fine in IE but when it comes to Firefox the layout is all messed up

    Site: http://www.newfound-hosting.com/lacrosse
    Stylesheet: http://www.newfound-hosting.com/lacrosse/style.css

    Does anyone know what i can do to resolve this?
    I have searched and spent a few hours trying but i have had no luck.

  • #2
    New Coder
    Join Date
    Aug 2008
    Posts
    60
    Thanks
    6
    Thanked 6 Times in 6 Posts
    Take the style tags out of the stylesheet
    like this...
    incorrect-
    Code:
    <style type="text/css" media="screen">
    <!-- 
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: white;
    padding: 5px;
    border: 1px; 
    }
    
    ul.adminmenu {
    text-align: right;
    color: #000066;
    text-decoration: none;
    }
    
    .top {
    vertical-align: top;
    text-align: right;
    color: #000066;
    font-size: small;
    }
    
    .piclink: {
    color: #000066;
    }
    a.pic:link {
    color: #000066;
    text-decoration: none;
    }
    a.pic:visited {
    color: #000066; 
    text-decoration: none; 
    }
    a.pic:hover {
    color: #000066; 
    text-decoration: underline;
    }
    a.pic:active {
    color: #000066;
    } 
    
    .datetop {
    vertical-align: bottom;
    text-align: left;
    color: #000066; 
    }
    
    a.top:link {
    color: #000066;
    text-decoration: none;
    }
    a.top:visited {
    color: #000066; 
    text-decoration: none; 
    }
    a.top:hover {
    color: white; 
    text-decoration: underline;
    }
    a.top:active {
    color: #000066;
    } 
    
    table.left {
    	border-width: 1px;
    	border-spacing: ;
    	border-style: outset;
    	border-color: black;
    	border-collapse: separate;
    	background-color: white;
    }
    
    table.undermenu {
    border-style:solid;
        border-color: black;
        border-width:1px;
        border-top-width:0px;
    }
    
    .newsdate {
    color: #999999;
    font-size: smaller;
    text-align: right;
    vertical-align: bottom;
    }
    
    .upcoming {
    font-size: smaller;
    }
    
    .smallcentergray {
    font-size: smaller;
    color: #999999;
    text-align: center;
    }
    
    
    
    
    #outside{
    	border:1px solid #000000;
    	background:#000066;
    	}
    #navigation-1 {
    	padding:1px 0;
    	margin:0px;
    	list-style:none;
    	width:100%;
    	height:21px;
    	border-top:1px solid #FFFFFF;
    	font:normal 8pt verdana, arial, helvetica;
    }
    #navigation-1 li {
    	margin:0;
    	padding:0;
    	display:block;
    	float:left;
    	position:relative;
    	width:128px;
    }
    #navigation-1 li a:link, #navigation-1 li a:visited {
    	padding:4px 0;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	background:#000066;
    	color:#FF9900;
    	width:128px;
    	height:13px;
    }
    #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
    	padding:4px 0;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	background:#000066;
    	color:#FF9900;
    	width:126px;
    	height:13px;
    	border-left:1px solid #ffffff;
    	border-right:1px solid #ffffff;
    }
    #navigation-1 li ul.navigation-2 {
    	margin:0;
    	padding:1px 1px 0;
    	list-style:none;
    	display:none;
    	background:#ffffff;
    	width:126px;
    	position:absolute;
    	top:21px;
    	left:-1px;
    	border:1px solid #000000;
    	border-top:none;
    }
    #navigation-1 li:hover ul.navigation-2 {
    	display:block;
    }
    #navigation-1 li ul.navigation-2 li {
    	width:126px;
    	clear:left;
    	width:126px;
    }
    #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
    	clear:left;
    	background:#000066;
    	padding:4px 0;
    	width:126px;
    	border:none;
    	border-bottom:1px solid #ffffff;
    	position:relative;
    	z-index:1000;
    }
    #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
    	clear:left;
    	background:#FF9900;
    	color: #000066;
    	font-weight: bold;
    	padding:4px 0;
    	width:126px;
    	border:none;
    	border-bottom:1px solid #ffffff;
    	position:relative;
    	z-index:1000;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 {
    	display:none;
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	left:125px;
    	top:-2px;
    	padding:1px 1px 0 1px;
    	border:1px solid #000000;
    	border-left:1px solid #000000;
    	background:#ffffff;
    	z-index:900;
    }
    #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
    	display:block;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
    	background:#000066;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
    	background:#666666;
    }
    #navigation-1 li ul.navigation-2 li a span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:12pt;
    	color:#fe676f;
    }
    #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:12pt;
    	color:#ffffff;
    }
    
    
    
    -->
    </style>
    Correct-
    Code:
    <!-- 
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: white;
    padding: 5px;
    border: 1px; 
    }
    
    ul.adminmenu {
    text-align: right;
    color: #000066;
    text-decoration: none;
    }
    
    .top {
    vertical-align: top;
    text-align: right;
    color: #000066;
    font-size: small;
    }
    
    .piclink: {
    color: #000066;
    }
    a.pic:link {
    color: #000066;
    text-decoration: none;
    }
    a.pic:visited {
    color: #000066; 
    text-decoration: none; 
    }
    a.pic:hover {
    color: #000066; 
    text-decoration: underline;
    }
    a.pic:active {
    color: #000066;
    } 
    
    .datetop {
    vertical-align: bottom;
    text-align: left;
    color: #000066; 
    }
    
    a.top:link {
    color: #000066;
    text-decoration: none;
    }
    a.top:visited {
    color: #000066; 
    text-decoration: none; 
    }
    a.top:hover {
    color: white; 
    text-decoration: underline;
    }
    a.top:active {
    color: #000066;
    } 
    
    table.left {
    	border-width: 1px;
    	border-spacing: ;
    	border-style: outset;
    	border-color: black;
    	border-collapse: separate;
    	background-color: white;
    }
    
    table.undermenu {
    border-style:solid;
        border-color: black;
        border-width:1px;
        border-top-width:0px;
    }
    
    .newsdate {
    color: #999999;
    font-size: smaller;
    text-align: right;
    vertical-align: bottom;
    }
    
    .upcoming {
    font-size: smaller;
    }
    
    .smallcentergray {
    font-size: smaller;
    color: #999999;
    text-align: center;
    }
    
    
    
    
    #outside{
    	border:1px solid #000000;
    	background:#000066;
    	}
    #navigation-1 {
    	padding:1px 0;
    	margin:0px;
    	list-style:none;
    	width:100%;
    	height:21px;
    	border-top:1px solid #FFFFFF;
    	font:normal 8pt verdana, arial, helvetica;
    }
    #navigation-1 li {
    	margin:0;
    	padding:0;
    	display:block;
    	float:left;
    	position:relative;
    	width:128px;
    }
    #navigation-1 li a:link, #navigation-1 li a:visited {
    	padding:4px 0;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	background:#000066;
    	color:#FF9900;
    	width:128px;
    	height:13px;
    }
    #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
    	padding:4px 0;
    	display:block;
    	text-align:center;
    	text-decoration:none;
    	background:#000066;
    	color:#FF9900;
    	width:126px;
    	height:13px;
    	border-left:1px solid #ffffff;
    	border-right:1px solid #ffffff;
    }
    #navigation-1 li ul.navigation-2 {
    	margin:0;
    	padding:1px 1px 0;
    	list-style:none;
    	display:none;
    	background:#ffffff;
    	width:126px;
    	position:absolute;
    	top:21px;
    	left:-1px;
    	border:1px solid #000000;
    	border-top:none;
    }
    #navigation-1 li:hover ul.navigation-2 {
    	display:block;
    }
    #navigation-1 li ul.navigation-2 li {
    	width:126px;
    	clear:left;
    	width:126px;
    }
    #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
    	clear:left;
    	background:#000066;
    	padding:4px 0;
    	width:126px;
    	border:none;
    	border-bottom:1px solid #ffffff;
    	position:relative;
    	z-index:1000;
    }
    #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
    	clear:left;
    	background:#FF9900;
    	color: #000066;
    	font-weight: bold;
    	padding:4px 0;
    	width:126px;
    	border:none;
    	border-bottom:1px solid #ffffff;
    	position:relative;
    	z-index:1000;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 {
    	display:none;
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	left:125px;
    	top:-2px;
    	padding:1px 1px 0 1px;
    	border:1px solid #000000;
    	border-left:1px solid #000000;
    	background:#ffffff;
    	z-index:900;
    }
    #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
    	display:block;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
    	background:#000066;
    }
    #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
    	background:#666666;
    }
    #navigation-1 li ul.navigation-2 li a span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:12pt;
    	color:#fe676f;
    }
    #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
    	position:absolute;
    	top:0;
    	left:132px;
    	font-size:12pt;
    	color:#ffffff;
    }
    
    
    
    -->
    or you could put it on the actual webpage with the style tags

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Money88 View Post
    A website I am working on for a girls lacrosse team works fine in IE but when it comes to Firefox the layout is all messed up

    Site: http://www.newfound-hosting.com/lacrosse
    Stylesheet: http://www.newfound-hosting.com/lacrosse/style.css

    Does anyone know what i can do to resolve this?
    I have searched and spent a few hours trying but i have had no luck.
    first of all validate:
    http://validator.w3.org/check?verbos...%2Flacrosse%2F

    name and attributes are lowercase in xhtml and empty elements must end with ' />'. So, this:
    Code:
    <LINK rel="stylesheet" type="text/css" href="style.css" >
    become:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    second, css file can't contain html markup, so remove:
    Code:
    <style type="text/css" media="screen">
    <!--
    from top of style.css, and
    Code:
    -->
    </style>
    from bottom.

    best regards


  •  

    Posting Permissions

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