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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Firefox Issues!

    I am a newbie to css, and I have only been scripting for about 3-months and I have made a small website and did everything in CSS - no tables. Well, before I went to publish it i downloaded the newest version of Firefox and Opera. My site looked perfect in IE but when I went to load it in the other 2 it fell to crap. My perfectly aligned divs act as if there nothing holding them up, but even though I do not have years of exp. I know theres something small wrong here. I cant be that far off here. or can I? Below is my home pages source code. I have 2 css files and one is over 33k so i dont want to copy it in here so if you would like to help me out just let me know and i will email my css to you.. or yes if I must i will load it in here..

    <!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">
    <head>
    removed meta content for this site...


    <title>blahblahblahblahblahblahblahblahblahblah</title>
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <link href="css/content.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <!--Begin Page Layout-->

    <div id="wrapper">
    <div id="banner">
    I have a flash banner here..
    </div>

    <!--Begin Navigation Layout-->

    <div id="navcontent"><script language="JavaScript" src="scripts/menu.js"></script>
    </div>
    <div id="content">
    <div id="crosshead"><img src="images/gif/crossheader.gif" width="800" height="40" />
    <div id="accessbox">


    <div id="cartbox"><a href="blahblahblahblahblahblah"><img src="images/gif/topnav-cart.gif" alt="Shop" border="0" /></a> </div><div id="carttxtbox">
    <p id="carttext"><a class="access" href="blahblahblahblahblahblah">Cart</a></p>
    </div>

    <div id="shipbox"><a href="blahblahblahblah"><img src="images/gif/barcode2sml.gif" alt="Track Your Package" border="0" /></a></div>
    <div id="shiptxtbox">
    <p id="shiptext"><a class="access" href="blahblah.html">Tracking</a></p>
    </div>
    </div>
    <div id="shipnote"></div><div class="clear">&nbsp;</div>
    </div>
    </div>
    <div class="clear">&nbsp;</div>



    <!--Begin Body Layout-->

    <div id="bodycontent">
    <div id="bodytopheader"></div>

    <!--Left Column Start-->
    <div id="columnL">
    <div id="killer">
    I have a flash movie here..
    </div>
    </div>
    <!--Right Column Start-->

    <div id="columnR">
    <div id="maintext">
    <p>blahblahblahblahblahblahblahblahblahblah</p>
    </div>
    </div>
    <div id="bodybottomheader"></div>
    <div class="clear">&nbsp;</div>
    </div>

    <!--Footer Layout-->

    <div class="footerspace"></div>

    <div id="footer">
    <div id="footerpic">
    <div id="footsale"><p id="footertxt"><a class="accessfoot" href="/blahblah.html">Sales</a></p></div>
    <div id="footmap"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Site Map</a></p></div>
    <div id="footlink"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Link To Us</a></p></div>
    <div id="footcon"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Contact Us</a></p></div>
    <div id="footpol">
    <p id="footertxt"><a class="accessfoot" href="policy/policy.html">Policy</a></p></div>
    </div>
    </div><div class="clear">&nbsp;</div>

    <!--Curves-->

    <div class="curvel">
    <div class="curver">&nbsp; </div>
    </div>

    </div>

    <!--Copyright Information-->

    <div id="copyright">
    <p id="copytext">&copy; Copyright 2006 blahblah, Inc. All Rights Reserved.</p>
    </div>

    </body>
    </html>


    I hope you guys can help me out, thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can't help you if you don't show us the CSS. A link is preferred.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS file

    heres a copy of my css file..
    Attached Files Attached Files

  • #4
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    master.css

    and heres my final and master css file.. i have 2 total.
    Attached Files Attached Files

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just post it as code. Be sure to use the code button, its the # (pound) sign.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    here it is in code

    Code:
    /* CSS Document */
    /*Begin Overall Page Layout*/
    
    #wrapper {
    	text-align: left;
    	padding: 0;
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #FFFFFF;
    	border: 0;
    	z-index: 1;
    }
    
    #background {
    	background-color: #1192df;
    	text-align: center;
    	padding: 0px;
    	height: 100%;
    	width: 850px;
    	margin-right: auto;
    	margin-left: auto;
    	border: 1px solid #000000;
    }
    /*Begin Header Layout*/
    
    #crosshead { 
        position: relative;
    	top: 0;
    	left: 0;
    	margin-left: auto;
    	margin-right: auto;
    	width: 800px;
    	height: 120px;
    	 
    	
    }	
    #content {
    	text-align: left;
    	padding: 0;
    	width: 800px;
    	top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #FFFFFF;
    	position: relative;
    	height: 40px;
    		   
    }
    .abdown {
    	position: absolute;
    	bottom: 0px;
    }
    
    body {
    	font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
    	background-color: #000000;
    	text-align: center;
    	margin: 0 auto;
    	padding: 0px;
    	height: 100%;
    	border: 0;
    }
    #banner {
    	background-color: #FFFFFF;
    	text-align: center;
    	height: 165px;
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	top: 0px;
    	left: 0;
    	
    }
    #navcontent {
    	position: relative;
    	height: 0;
    	width: 800px;
    	left: auto;
    	right: auto;
    	z-index: 2;
    }
    /*Access Panel*/
    		
    #accessbox {
              position: absolute;
    		  top: 0;
    		  right: 0;
    		  width: 170px;
    		  height: 40px;
    		  padding: 0;
    }
    #carttxtbox {
              position: absolute;
    		  width: 20px;
    		  height: 10px;
    		  top: 25px;
    		  left: 11px;
    		  
    }		  	  
    #carttext {
               bottom: 0;
               font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
    		   font-size: 10px;
    		   color: #1192df;
    		   text-align: center;
    		 
    }		   
    #cartbox {
    	position: absolute;
    	height: 20px;
    	width: 16px;
    	padding: 0;
    	left: 10px;
    	top: 7px;
    		  }
    #shipbox {
              position: absolute;
    		  height: 19px;
    		  width: 31px;
    		  padding: 0;
    		  left: 86px;
    		  top: 7px;
    		  }
    #shiptxtbox {
                 position: absolute;
    			 height: 10px;
    			 width: 100px;
    			 top: 25px;
    			 left: 53px;	  
    			 }
    #shiptext {
        bottom: 0;
    	color: #1192df;
    	font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
    	font-size: 10px;
    	text-align: center;
    				 }
    
    /*Link Attributes*/	
    
    /*Access Panel Link Atrributes*/
    	  		   
    a.access:link {
    			color: #1192df; 
    			text-decoration: none; 
    			}
    
    a.access:visited {
    			color: #1192df; 
    			text-decoration: none; 
    			}
    
    a.access:hover {
    			color: #1192df; 
    			text-decoration: none;
    			}
    a.access:active {
    			color: #1192df; 
    			text-decoration: none;
    } 
    /*Footer Link Attributes*/
    
    a.accessfoot:link {
    			color: #ffffff; 
    			text-decoration: none; 
    			}
    
    a.accessfoot:visited {
    			color: #ffffff; 
    			text-decoration: none; 
    			}
    
    a.accessfoot:hover {
    			color: #c8ecfb; 
    			text-decoration: none;
    			}
    a.accessfoot:active {
    			color: #ffffff; 
    			text-decoration: none;
    } 
    
    
    /*Begin Body Layout*/
    
    
    /*Begin Footer Layout*/
    
    .curvel { 
        background: url(../images/gif/1bl.gif) 0 100% no-repeat #ffffff; 
    	background-attachment: scroll !important;
        background-attachment: fixed;
    	width: 800px;
    	padding: 0;
    	
    	
    }
    .curver { 
    	background: url(../images/gif/1br.gif) 100% 100% no-repeat;
    	background-attachment: scroll !important;
        background-attachment: fixed;
    	padding: 0;
    	
    	
    }
    .clear { font-size: 1px; 
            height: 1px
    }
    		 
    curves { 
             position: relative;
    		 margin: auto;
    		 padding: 0;
    		 height: 10px;
    		 width: 800px;
    		 top: 0;
    		 left: 0;
    }		 
    
                 
    #copyright {
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	border: 0;
    }
    #copytext {
                font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
    			font-size: 10px;
    			line-height: normal;
    			font-weight: bold;
    			color: #FFFFFF;
    			text-align: center;
    }
    #footer {
             position: relative;
    		 width: 800px;
    		 height: 26px;
    		 margin-right: auto;
    		 margin-left: auto;
    		 }
    #footerpic {
                position: absolute;
    			width: 600px;
    			height: 26px;
    			left: 100px;
    			background: url(../images/gif/footer.gif) no-repeat;
    			background-attachment: scroll !important;
                background-attachment: fixed;
                background-position: top left ;
    			}
    #footpol {
        height: 14px;
    	width: 119px;
    	top: 6px;
    	left: 480px;
    	text-align: center;
    	border-right: 1px solid #1192df;
    	position: absolute;
              }
    #footsale {
        height: 14px;
    	width: 120px;
    	top: 6px;
    	left: 0;
    	text-align: center;
    	border-right: 1px solid #ffffff;
    	position: absolute;
    	}
    #footcon {
        height: 14px;
    	width: 120px;
    	top: 6px;
    	left: 360px;
    	text-align: center;
    	border-right: 1px solid #ffffff;
    	position: absolute;
    	}
    #footmap {
        height: 14px;
    	width: 120px;
    	top: 6px;
    	left: 120px;
    	text-align: center;
    	border-right: 1px solid #ffffff;
    	position: absolute;
    	}
    #footlink {
        height: 14px;
    	width: 120px;
    	top: 6px;
    	left: 240px;
    	text-align: center;
    	border-right: 1px solid #ffffff;
    	position: absolute;
    	}		  		  		   		  
    #footertxt {
    	font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
    	font-size: 14px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-align: center;
                }

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Some issues I see. You have this
    Code:
    curves { 
             position: relative;
    		 margin: auto;
    		 padding: 0;
    		 height: 10px;
    		 width: 800px;
    		 top: 0;
    		 left: 0;
    }
    Also what is up with all of the absolute positioning?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried to make the relative absolute by placing absolute divs within relative divs. It seemed like it would give me better control over my site. to put everything abosolute to a bigger relative div.

  • #9
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or the other way around..lol

  • #10
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    are things to absolute to work to work properly in the other browsers? and if so how much more relative would i have to get?

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Without any of the images its a little hard to even try to know where the problem is at. Can you not post a link?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site Posting!

    Hey aerospace, I havent even posted the site yet, i have spent the last month puting it together and making the images for it and designing it. I have just been checking it locally. I would be happy to go ahead and post it prematurly so you could help me adjust it. like i said i have only been doing this (CSS) for about month or 2, but in ie it looks perfect so i would suggest looking at it like that first. i will go ahead and post it for you.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You should code for a good browser like Firefox and tweak for IE. This was your first mistake.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah kinda hit me after the fact


  •  

    Posting Permissions

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