...

View Full Version : IE to firefox problem...



Money88
09-01-2008, 10:53 PM
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.

uncrocks
09-02-2008, 01:50 AM
Take the style tags out of the stylesheet
like this...
incorrect-


<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-


<!--
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

oesxyl
09-02-2008, 02:04 AM
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?verbose=1&uri=http%3A%2F%2Fwww.newfound-hosting.com%2Flacrosse%2F

name and attributes are lowercase in xhtml and empty elements must end with ' />'. So, this:


<LINK rel="stylesheet" type="text/css" href="style.css" >

become:


<link rel="stylesheet" type="text/css" href="style.css" />


second, css file can't contain html markup, so remove:


<style type="text/css" media="screen">
<!--

from top of style.css, and


-->
</style>

from bottom.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum