1.11M Members

CSS FireFox problems

 
0
 

ok so im tryen to use css in my website everything works fine for ie but things are missing from firefox

ie link: dcsoffice.ca/index.html
firefox:dcsoffice.ca

you can clearly see my problem i ran in too

CSS file let me know what i am doing wrong here
the parts thats missing in firefox is in #divcontent #divabout

body, h1, h2, h3, h4, h5, h6, p, div, ul, li {
    margin:0;
    padding:0;
}
body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #000;
    text-align:center;
}

#divwrapper {
    width:800px;
    margin:20px auto;
    height:600px;
}
#divheader {
    width:800px;
    background-image:url(images/dcsoffice_01.gif);
}

#divHeader img {
    padding-top:20px;
    padding-bottom:20px;
}

#divLine {
    width:800px;
    background-color:#0f033c;

}

#divLinks {
    width:800px;
    background:#0f033c; 
}

#divNav {
    width:394px;
    background-color:#0f033c;
    height:36px;
    margin:0 auto;
}

#divNav ul {
    list-style-type:none;
}

#divNav ul li {
    float:left;
}

#divNav ul li a {
    display:block;
    height:20px;
    line-height:20px;
    background-color:#0f033c;
    width:80px;
    font-size:0.8m;
    font-weight:bold;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    margin:7px;


    /*border radius*/
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 1px solid #000;






    /*Grade*/
    background:-moz-linear-gradient(top,#003, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}   
#divNav ul li a:hover {
    background:#0f033c;
    background:-moz-linear-gradient(top,#003, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}

#divNav ul li a.current, #divNav ul li a.current:hover {
    background:#0f033c;
    background:-moz-linear-gradient(top,#003, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
    color:#f63;
    cursor:default;
}

#divabout {
    width:800px;
    background-color: #0f033c;
    padding-top:60pk;
    padding-bottom:60pk;

    /*grade*/
    background:-moz-linear-gradient(top,#003);
}


#divcontent {
    width:486px;
    height:600px;
    margin:0 auto;
    Background-color: #003;
    border: 3px solid #000;


    /*grade*/
    background:-moz-linear-gradient(top,#003);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);



}

#divcontent img {
    float:left;
    background:#0f033c;
    padding: 20px;
    margin:0 auto;
}

#divcontent h5 { 
     color:#FFF;
     padding-top:0.9em;
     padding-bottom:0;
     padding-left:0;
     padding-right:0;


}
#divcontent p {
    font-size:0.8em;
    color:#FFF;
    padding:0.8em;
    line-height:1.4em;

}
#divcontent2 {
    width:486px;
    margin:0 auto;
    background-color: #003;
    height:600px;

    /*grade*/
    background:-moz-linear-gradient(top,#0f033c);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}   
#divcontent2 img {
    float:center;
    background:#0f033c;
    padding: 20px;
    margin:0 auto;
    border:1px solid #000;
}
#divfooter  {
    background:#0f033c;
    height:15px;
    width:800px;
    border-bottom:2px solid #000;

    } 
    #divfooter p {
    font-size:0.8em;
    color:#FFF;
    padding:0.8em;
    line-height:1.4em;

}
 
0
 

the parts arent missing, they are just black on black!

 
0
 

how can i fix the black on black? i dont see what code is making it black on black? can you help me?

 
0
 

i only looked quickly, i dont have a solution to give you but i wouldn't be looking for what makes it black on black, in my opinion the problem is that whatever makes your background blue in IE isnt happening in chrome/ff so i would look for what makes your background blue in IE, and search why its not being applied in other browsers...

 
0
 

do you do any kind of hack to load the css only on ie browsers?


its strange because from chrome i can see your css file and some elements have some style rules from the file, but i clearly see you have the rule for lets say h5 in divcontent :

#divcontent h5 {
color:#FFF;
...
}

but when looking at the markup, that style is never applied to the h5...

 
0
 

actually no its not, your subtitles are in h5 the rest of the text is in paragraphs <p>, but all text is in the div #divcontent, the css rule in your css file seems good, and it applies it on ie, i do not see why it doesnt in ff but there has to be something im missing.

psot your full html for one page here please. from start to finish

 
0
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Prouducts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="dcsadmin.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body>
<div id="divwrapper">
         <div id="divheader"><img src="/images/Untitled-4_01.gif" width="799" height="173"></div>
                    <div id="divLine"></div>
                    <div id="divLinks">
                      <div id="divNav">
                        <ul>
                          <li><a href="index.html">About us</a></li>
                          <li><a href="Prouducts.html"  class="current">Prouducts</a></li>
                          <li><a href="Toner.html">Toner</a></li>
                          <li><a href="Service.html">Service</a></li>
                        </ul>
                      </div>
                    </div>
                    <div id="divLine"></div>
                    <div id="divAbout">
                      <div id="divContent">
                        <h5>Our Prouducts</h5>
                        <p>  At Dcs Office Equipment we carry an extensive line of new and refurbished photocopiers, printers, and faxes. From simple desktop copying to fully connected print/scan/fax capability, we know how to meet your needs and give you the best equipment solution possible.</p>
                        <h5>What We Do</h5>
                        <p>Short or Long Term Rental Machines Available
Call For Pricing Information
902-444-4601</p>


<h5>For All Samsung Prouduct List Click Samsung Logo</h5>

                    <div id="divContent2"><a href="http://www.samsung.com/ca/function/search/espsearchResult?input_keyword=copiers&keywords=copiers"><img src="/images/samsun logo.jpg" width="128" height="104"></a></div>
                    </div>
                    <div id="divfooter"><p>©2012 DCS Office Equipment Ltd.</p></div>
                  </div>
</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

css

body, h1, h2, h3, h4, h5, h6, p, div, ul, li {
    margin:0;
    padding:0;
}
body {
    font-family: Verdana, Geneva, sans-serif;
    background-color: #000;
    text-align:center;
}

#divwrapper {
    width:800px;
    margin:20px auto;
    height:1000px;
}
#divheader {
    width:800px;
    background-image:url(images/dcsoffice_01.gif);
}

#divHeader img {
    padding-top:20px;
    padding-bottom:20px;
}

#divLine {
    width:800px;
    background-color:#0f033c;

}

#divLinks {
    width:800px;
    background:#0f033c; 
}

#divNav {
    width:394px;
    background-color:#0f033c;
    height:36px;
    margin:0 auto;
}

#divNav ul {
    list-style-type:none;
}

#divNav ul li {
    float:left;
}

#divNav ul li a {
    display:block;
    height:20px;
    line-height:20px;
    background-color:#0f033c;
    width:80px;
    font-size:0.8m;
    font-weight:bold;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    margin:7px;


    /*border radius*/
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 1px solid #000;






    /*Grade*/
    background:-moz-linear-gradient(top,#0f033c, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}   
#divNav ul li a:hover {
    background:#0f033c;
    background:-moz-linear-gradient(top,#0f033c, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}

#divNav ul li a.current, #divNav ul li a.current:hover {
    background:#0f033c;
    background:-moz-linear-gradient(top,#0f033c, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
    color:#f63;
    cursor:default;
}

#divAbout {
    width:800px;
    background:#0f033c;
    padding-top:60pk;
    padding-bottom:60pk;


}

#divContent {
    width:486px;
    margin:0 auto;
    background:#0f033c;
    border: 3px solid #000;
    height:600px;

    /*grade*/
    background:-moz-linear-gradient(top,#0f033c);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);



}

#divContent img {
    float:left;
    background:#0f033c;
    padding: 20px;
    margin:0 auto;
}

#divContent h5 { 
     color:#FFF;
     padding-top:0.9em;
     padding-bottom:0;
     padding-left:0;
     padding-right:0;


}
#divContent p {
    font-size:0.8em;
    color:#FFF;
    padding:0.8em;
    line-height:1.4em;

}
#divContent2 {
    width:486px;
    margin:0 auto;
    background:#0f033c;
    height:600px;

    /*grade*/
    background:-moz-linear-gradient(top,#0f033c, #000);
    background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);
}   
#divContent2 img {
    float:center;
    background:#0f033c;
    padding: 20px;
    margin:0 auto;
    border:1px solid #000;
}
#divfooter  {
    background:#0f033c;
    height:15px;
    width:800px;
    border-bottom:2px solid #000;

    } 
    #divfooter p {
    font-size:0.8em;
    color:#FFF;
    padding:0.8em;
    line-height:1.4em;

}
 
0
 

found it.

10$ says the problem is the browsers stop reading the css file and applying the rules after they find the error in your gradient css for chrome/safari :

you have :

background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);

while you should have :

/* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#AAAAAA));

theres no comma between left and top. try removing that and see if it works

 
0
 

also heres the diferent gradients i use to reach as many browsers as possible :

.ruban_gradientgris 
{
    background-color:White;
    min-height:500px;
    height: 100%;
    border-right: 1px #AAAAAA dotted;
    
    /* gecko based browsers */
    background: -moz-linear-gradient(top, #aaaaaa, #ffffff);
    /* webkit based browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#ffffff));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#AAAAAA', EndColorStr='#FFFFFF', GradientType=0);
    /* opera */
    background-image: -o-linear-gradient(top,#aaaaaa,#ffffff);
}
 
0
 

ok so every that i got the moz and webkit should i add these code that you have gave me? sorry new to css if you have icq could you add me jarule646@gmail.com

 
0
 

you dont have to add the 2 others, they are jsut to create gradients for IE and opera browsers.

your problem is everywhere you have :

background:-webkit-gradient(linear, left, top, left bottom, from(#0f033c), to(#0f033c);

change it to :

background:-webkit-gradient(linear, left top, left bottom, from(#0f033c), to(#0f033c);

you need to remover the comma between "left" and "top".

i think it should fix it.

heading home, let me know if it works and if not ill get back to you tomorrow.

 
0
 

nope not working im almost to the point where im willing to pay for someone to creat the css file for my site...

 
0
 

<div id="divAbout"> was the error for why the blue wasnt showing up i removed it and the blue poped up now my othere problem is all my txt should be white and the copier should be on the left not right (yes i do have it set to left in coding) othere then that everything is working any ideas? im pretty sure that my images are notin place due to my border not showing up

 
0
 

ok so i fix font colors too i just need to get the border to work now so all my font and images will line up. or if anyone has any othere ideas on how to get the font and images to line up. main page the copier should be on the left with front starting be sided it. and well on the othere pages you can see how the font just dont line up right.

 
0
 

hmmm , i see what you did to get your h5 and text white, but it still doesnt explain why the rules in the css file past a certain line arent being applied, we need to find whats making it stop.

im gonna investigate a bit, in the mean time fix your jquery, says it cant find the file your linking to.

 
0
 

FOUND IT!!!

in :

#divNav ul li a {
	display:block;
	height:20px;
	line-height:20px;
	background-color:#0f033c;
	width:89px;
	font-size:0.8m;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	text-decoration:none;
	margin:7px;
	
	/*border radius*/
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border: 1px solid #000;

	/*Grade*/
    background: -moz-linear-gradient(top,#0f033c, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#0f033c), to(#000);
}

add a closing ) before the semi-colon on the last line :

background: -webkit-gradient(linear, left top, left bottom, from(#0f033c), to(#000));

your welcome :)

 
0
 

bro your good!!!! border is now working colors now working!!!! only thing left to do is to get content and img center with image inside my border!!!

 
0
 

thank you very much for all your help! site is almost done now do you have an email that we can contact. i got a few more sites that i still have to make encluding my own sites im more then willing to add some of your site links to my own site for all your help.
inbox me your email.

 
0
 

i dont have any personnal sites sorry, just the ones i work on for my job ;)

and they have very limited target users so it wouldnt be really relevant.

but thanks and im glad i could find your problem, it was buggin me all day lol.

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article