Hi guys, I create a css menu for my site, I tested them in Internetexplorer, it looks perfect. But tried in opera and firefox, the menu seems to be broken. Pls take a look at <!-- m --><a class="postlink" href="http://www.fastgaming.5gigs.com">http://www.fastgaming.5gigs.com</a><!-- m --> . My CSS code is:
Can anyone help me fix the problem ?
body
{
background-color: #000000;
font-family: Verdana, Tahoma, Arial;
font-size: 12px;
margin: 0;
padding: 0;
}
div.page
{
margin: 0 auto;
width: 770px;
border: 1px solid #AF1600;
border-top: none;
}
div.header
{
background-color: #F01914;
border-bottom: 1px solid #FFF;
height: 66px;
}
div.logo
{
float: left;
padding: 5px 10px;
width: 183px;
}
div.top-menu
{
border-left: 2px solid #FFF;
float: left;
margin: 14px 0px 0 0;
padding: 20px 0px 0px;
width: 545px;
color: #FFF;
}
ul.menu
{
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li
{
float: left;
line-height: 19px;
padding-left: 5px;
text-align: left;
}
ul.menu li a
{
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
ul.menu li a:link, li a:visited
{
color: #9E3C02;
display: block;
background: url('../img/menu4.gif');
padding: 8px 0 0 30px;
}
ul.menu li a:hover
{
color: #fff;
background: url('../img/menu4.gif') 0 -32px;
padding: 8px 0 0 30px;
}
ul.menu li a:active
{
color: #fff;
background: url('../img/menu4.gif') 0 -64px;
padding: 8px 0 0 30px;
}
div.search
{
background-repeat: no-repeat;
background-position: top left;
border-bottom: 1px solid #fff;
clear: both;
font-size: 10px;
height: 113px;
}
div.search-form
{
padding-top: 30px;
text-align: center;
}
div.search-form a
{
color: #FFF;
}
input.what
{
background-color: #BC0904;
border: 1px solid #FFF;
color: #FFF;
}
span.search-title
{
color: #FFF;
font-size: 16px;
font-weight: bold;
}
div.caption
{
background-color: #BC0904;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
div.bottom-line
{
background-color: #BC0904;
border-top: 3px solid #F99B1D;
height: 18px;
}
div.bottom
{
background-color: #F99B1D;
border-top: 1px solid #AF1600;
clear: both;
color: #FFF;
font-size: 10px;
padding: 10px 0;
position: relative;
text-align: center;
}
div.bottom a
{
color: #FFF;
font-weight: bold;
}
div.bottom a:hover
{
color: #333;
}
div.copyright
{
margin: 10px 0;
}
a:hover
{
color: #000;
}
input, textarea
{
font-size: 10px;
font-family: Verdana;
}
div.content
{
padding: 0;
position: relative;
}
div.breadcrumb
{
color: #FFF;
font-weight: bold;
font-size: 13px;
}
div.breadcrumb a
{
color: #FFF;
}
p
{
padding: 0;
margin: 0;
}
h2
{
font-size: 20px;
margin: 0 0 10px 0;
padding: 0;
}
img
{
border: 0;
}
form
{
padding: 0;
margin: 0;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix
{
height: 1%;
}
.button
{
text-align: right;
margin-bottom: 10px;
}
h1
{
color: #AF1600;
font-size: 22px;
font-weight: bold;
margin: 10px;
}
h1 a
{
color: #F24618;
}
p.date
{
font-size: 13px;
}
p.news
{
margin-top: 5px;
font-size: 12px;
}
p.last
{
font-size: 13px;
margin-top: 5px;
text-align: right;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix
{
height: 1%;
}
div.field
{
font-size: 11px;
font-weight: bold;
margin-bottom: 10px;
}
fieldset
{
border: 1px solid #AF1600;
margin: 5px;
}
legend
{
color: #333;
background-color: #f1f1f1;
border: 1px solid #AF1600;
font-weight: bold;
padding: 3px;
}
div.links
{
text-align: justify;
}
div.links a
{
color: #F24618;
}
a.title
{
font-size: 14px;
font-weight: bold;
}
div.url
{
color: #333;
padding: 0;
margin: 2px;
font-size: 11px;
font-style: italic;
}
div.description
{
color: #333;
padding: 0;
margin: 2px;
font-size: 12px;
}
div.stat
{
color: #333;
padding: 0;
margin: 2px;
font-size: 11px;
}
div.pr_stat
{
color: #333;
font-size: 9px;
margin: 2px 2px 15px 2px;
}
form
{
margin: 0;
padding: 0;
}
div.categories
{
font-size: 12px;
list-style-type: none;
padding: 0 0 0 0px;
}
div.categories a
{
color: #F24618;
font-weight: bold;
}
div.categories div.col
{
float: left;
height: 60px;
text-align: left;
width: 175px;
}
div.categories div.last
{
float: left;
height: 50px;
text-align: left;
width: 168px;
}
div.categories div.divider
{
clear: both;
padding: 0px;
}
div.categories div.categ
{
padding: 3px 0 3px 5px;
}
div.subcategories
{
font-size: 10px;
padding: 3px 0 3px 5px;
}
.no
{
border: none;
}
a.no
{
text-decoration: none;
}
.editor-welcome
{
padding: 0;
text-align: left;
}
.editor-content
{
padding: 0;
text-align: center;
}
div.notification
{
background-color: #FDD9A8;
border: 2px solid #AF1600;
font-weight: bold;
margin: 10px 5px;
padding: 5px;
}
div.navigation
{
color: #333;
clear: both;
margin: 15px 0 5px 0;
text-align: center;
}
div.navigation a
{
color: #333;
}
div.pagerank
{
border: 1px solid #ccc;
height: 4px;
margin: 0;
padding: 0;
width: 100px;
}
div.inner-pagerank
{
margin-top: -1px;
background-image: url('../img/pr10.gif');
float: left;
height: 5px;
padding: 0;
}
div.preview
{
background-image: url('../img/no-preview.gif');
background-repeat: no-repeat;
background-position: top left;
border: 1px solid #ccc;
height: 90px;
width: 120px;
}
div.adsense
{
margin: 10px 0;
text-align: center;
}
div.box
{
border: 1px solid #F99B1D;
margin: 0 10px 10px 10px;
}
div.box-caption
{
background-color: #F99B1D;
background-image: url('../img/box-bg.gif');
background-position: right;
background-repeat: no-repeat;
color: #FFF;
font-size: 14px;
font-weight: bold;
padding: 5px 0 5px 10px;
}
div.box-content
{
padding: 10px;
}
div.featured-link
{
margin: 5px 0;
}
div.featured-link a
{
font-size: 11px;
}
div.sponsored-link
{
margin: 5px 0;
}
div.sponsored-link a
{
font-size: 11px;
}
div.partner-link
{
margin: 5px 0;
}
div.partner-link a
{
font-size: 11px;
}
span.highlight
{
background-color: #CCC;
color: #000;
font-weight: bold;
}
ul.editor-menu
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul.editor-menu
{
font-weight: bold;
line-height: 20px;
margin-top: 10px;
}
td.link
{
padding-bottom: 20px;
}
div.lang-switch
{
color: #FFF;
margin: 5px 0;
position: absolute;
text-align: right;
width: 760px;
}
div.lang-switch a
{
color: #FFF;
font-weight: bold;
}
div.link-sorting
{
font-size: 11px;
text-align: center;
}
div.link-sorting a
{
font-weight: bold;
}
hr
{
color: #F99B1D;
height: 1px;
border: none;
background-color: #F99B1D;
}
p.field
{
margin: 10px 0;
}
div.payment
{
padding: 10px 0;
}
div.news-title
{
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}
div.news-date
{
font-size: 10px;
text-align: right;
margin: 0 0 10px 0;
}You need to fix your markup errors first: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http://www.fastgaming.5gigs.com/">http://validator.w3.org/check?verbose=1 ... 5gigs.com/</a><!-- m -->
After that, run it through the CSS validator to make sure there are no CSS errors: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http://www.fastgaming.5gigs.com/Is">http://jigsaw.w3.org/css-validator/vali ... igs.com/Is</a><!-- m --> there any other simpler way, by just editing the css, it works in all browser ? Pls advise ..
Its too troublesome for me..Put a specific width in the <ul> and <li> tags. Put display: block in the <li> tag. Add margin settings to the <li>.
VALIDATE your coding. Mixing old school coding with CSS causes problems.
KDLA
Can anyone help me fix the problem ?
body
{
background-color: #000000;
font-family: Verdana, Tahoma, Arial;
font-size: 12px;
margin: 0;
padding: 0;
}
div.page
{
margin: 0 auto;
width: 770px;
border: 1px solid #AF1600;
border-top: none;
}
div.header
{
background-color: #F01914;
border-bottom: 1px solid #FFF;
height: 66px;
}
div.logo
{
float: left;
padding: 5px 10px;
width: 183px;
}
div.top-menu
{
border-left: 2px solid #FFF;
float: left;
margin: 14px 0px 0 0;
padding: 20px 0px 0px;
width: 545px;
color: #FFF;
}
ul.menu
{
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li
{
float: left;
line-height: 19px;
padding-left: 5px;
text-align: left;
}
ul.menu li a
{
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
ul.menu li a:link, li a:visited
{
color: #9E3C02;
display: block;
background: url('../img/menu4.gif');
padding: 8px 0 0 30px;
}
ul.menu li a:hover
{
color: #fff;
background: url('../img/menu4.gif') 0 -32px;
padding: 8px 0 0 30px;
}
ul.menu li a:active
{
color: #fff;
background: url('../img/menu4.gif') 0 -64px;
padding: 8px 0 0 30px;
}
div.search
{
background-repeat: no-repeat;
background-position: top left;
border-bottom: 1px solid #fff;
clear: both;
font-size: 10px;
height: 113px;
}
div.search-form
{
padding-top: 30px;
text-align: center;
}
div.search-form a
{
color: #FFF;
}
input.what
{
background-color: #BC0904;
border: 1px solid #FFF;
color: #FFF;
}
span.search-title
{
color: #FFF;
font-size: 16px;
font-weight: bold;
}
div.caption
{
background-color: #BC0904;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
div.bottom-line
{
background-color: #BC0904;
border-top: 3px solid #F99B1D;
height: 18px;
}
div.bottom
{
background-color: #F99B1D;
border-top: 1px solid #AF1600;
clear: both;
color: #FFF;
font-size: 10px;
padding: 10px 0;
position: relative;
text-align: center;
}
div.bottom a
{
color: #FFF;
font-weight: bold;
}
div.bottom a:hover
{
color: #333;
}
div.copyright
{
margin: 10px 0;
}
a:hover
{
color: #000;
}
input, textarea
{
font-size: 10px;
font-family: Verdana;
}
div.content
{
padding: 0;
position: relative;
}
div.breadcrumb
{
color: #FFF;
font-weight: bold;
font-size: 13px;
}
div.breadcrumb a
{
color: #FFF;
}
p
{
padding: 0;
margin: 0;
}
h2
{
font-size: 20px;
margin: 0 0 10px 0;
padding: 0;
}
img
{
border: 0;
}
form
{
padding: 0;
margin: 0;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix
{
height: 1%;
}
.button
{
text-align: right;
margin-bottom: 10px;
}
h1
{
color: #AF1600;
font-size: 22px;
font-weight: bold;
margin: 10px;
}
h1 a
{
color: #F24618;
}
p.date
{
font-size: 13px;
}
p.news
{
margin-top: 5px;
font-size: 12px;
}
p.last
{
font-size: 13px;
margin-top: 5px;
text-align: right;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix
{
height: 1%;
}
div.field
{
font-size: 11px;
font-weight: bold;
margin-bottom: 10px;
}
fieldset
{
border: 1px solid #AF1600;
margin: 5px;
}
legend
{
color: #333;
background-color: #f1f1f1;
border: 1px solid #AF1600;
font-weight: bold;
padding: 3px;
}
div.links
{
text-align: justify;
}
div.links a
{
color: #F24618;
}
a.title
{
font-size: 14px;
font-weight: bold;
}
div.url
{
color: #333;
padding: 0;
margin: 2px;
font-size: 11px;
font-style: italic;
}
div.description
{
color: #333;
padding: 0;
margin: 2px;
font-size: 12px;
}
div.stat
{
color: #333;
padding: 0;
margin: 2px;
font-size: 11px;
}
div.pr_stat
{
color: #333;
font-size: 9px;
margin: 2px 2px 15px 2px;
}
form
{
margin: 0;
padding: 0;
}
div.categories
{
font-size: 12px;
list-style-type: none;
padding: 0 0 0 0px;
}
div.categories a
{
color: #F24618;
font-weight: bold;
}
div.categories div.col
{
float: left;
height: 60px;
text-align: left;
width: 175px;
}
div.categories div.last
{
float: left;
height: 50px;
text-align: left;
width: 168px;
}
div.categories div.divider
{
clear: both;
padding: 0px;
}
div.categories div.categ
{
padding: 3px 0 3px 5px;
}
div.subcategories
{
font-size: 10px;
padding: 3px 0 3px 5px;
}
.no
{
border: none;
}
a.no
{
text-decoration: none;
}
.editor-welcome
{
padding: 0;
text-align: left;
}
.editor-content
{
padding: 0;
text-align: center;
}
div.notification
{
background-color: #FDD9A8;
border: 2px solid #AF1600;
font-weight: bold;
margin: 10px 5px;
padding: 5px;
}
div.navigation
{
color: #333;
clear: both;
margin: 15px 0 5px 0;
text-align: center;
}
div.navigation a
{
color: #333;
}
div.pagerank
{
border: 1px solid #ccc;
height: 4px;
margin: 0;
padding: 0;
width: 100px;
}
div.inner-pagerank
{
margin-top: -1px;
background-image: url('../img/pr10.gif');
float: left;
height: 5px;
padding: 0;
}
div.preview
{
background-image: url('../img/no-preview.gif');
background-repeat: no-repeat;
background-position: top left;
border: 1px solid #ccc;
height: 90px;
width: 120px;
}
div.adsense
{
margin: 10px 0;
text-align: center;
}
div.box
{
border: 1px solid #F99B1D;
margin: 0 10px 10px 10px;
}
div.box-caption
{
background-color: #F99B1D;
background-image: url('../img/box-bg.gif');
background-position: right;
background-repeat: no-repeat;
color: #FFF;
font-size: 14px;
font-weight: bold;
padding: 5px 0 5px 10px;
}
div.box-content
{
padding: 10px;
}
div.featured-link
{
margin: 5px 0;
}
div.featured-link a
{
font-size: 11px;
}
div.sponsored-link
{
margin: 5px 0;
}
div.sponsored-link a
{
font-size: 11px;
}
div.partner-link
{
margin: 5px 0;
}
div.partner-link a
{
font-size: 11px;
}
span.highlight
{
background-color: #CCC;
color: #000;
font-weight: bold;
}
ul.editor-menu
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul.editor-menu
{
font-weight: bold;
line-height: 20px;
margin-top: 10px;
}
td.link
{
padding-bottom: 20px;
}
div.lang-switch
{
color: #FFF;
margin: 5px 0;
position: absolute;
text-align: right;
width: 760px;
}
div.lang-switch a
{
color: #FFF;
font-weight: bold;
}
div.link-sorting
{
font-size: 11px;
text-align: center;
}
div.link-sorting a
{
font-weight: bold;
}
hr
{
color: #F99B1D;
height: 1px;
border: none;
background-color: #F99B1D;
}
p.field
{
margin: 10px 0;
}
div.payment
{
padding: 10px 0;
}
div.news-title
{
font-size: 14px;
font-weight: bold;
margin: 0 0 5px 0;
}
div.news-date
{
font-size: 10px;
text-align: right;
margin: 0 0 10px 0;
}You need to fix your markup errors first: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http://www.fastgaming.5gigs.com/">http://validator.w3.org/check?verbose=1 ... 5gigs.com/</a><!-- m -->
After that, run it through the CSS validator to make sure there are no CSS errors: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http://www.fastgaming.5gigs.com/Is">http://jigsaw.w3.org/css-validator/vali ... igs.com/Is</a><!-- m --> there any other simpler way, by just editing the css, it works in all browser ? Pls advise ..
Its too troublesome for me..Put a specific width in the <ul> and <li> tags. Put display: block in the <li> tag. Add margin settings to the <li>.
VALIDATE your coding. Mixing old school coding with CSS causes problems.
KDLA