#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    CSS fine in Chrome, but problems in Explorer and Firefox


    I am very new to coding and my website looks great in Chrome, but not in Firefox or Explorer. My CSS formatting is not displaying properly on sub pages when using Firefox. And on Explorer the tool bar is screwed up and the footer is floating in the content area. I am going to copy and paste my code (index.html, CSS page, and a subpage). the website is:

    Skalaban.org

    This is just a real kick in the face having this problem after hitting so many roadblocks when trying to learn how to write code somewhat properly. No one is really helping me code, and i am not strictly following a guide. Would anyone mind taking a look at my website and code and try to help me? I would greatly appreciate it a ton.


    Thank you,


    Tim


    My Index.html page
    Code:
    <html>
    
    
    
    <head>
    
    <title> Timothy Skalaban's Website </title>
    
    <link rel="stylesheet" type="text/css"href="master.css">
      
    
      </head>
    
    
    
    <body>
    
    	<div id='page_wrapper'>
    
    		<div id='head_wrapper'>
    
    			<div id= "my_name">
    
    			<h3> Timothy Skalaban </h3>
    		</div>
    
    			<div id= "slogan">
    				<h3> Passionate and Forward Thinking:</h3>
    				<h3> Driven by Finance, Technology, and Innovation</h3>
    			</div>
    		
    				
    		
    		</div>
    
    
    		<div id="menu_bar">
    
    			
    		<ul>
    			<li><a href='index.html'>Home</a></li>
    			<li><a href='resume.html'>My Resume</a></li>
    			<li><a href='bio.html'>About Me</a></li>
    			<li><a href='contact.html'>Contact Me</a></li>	
    		</ul>
    		</div>
    		
    
    		<div id='content_wrapper'>
    		
    			<img id="welcome_img" src="images/Professional3.jpg" width="360" height="450">
    			
    			<div id="welcome_text">
    			<p>Hello and welcome to my professional website. This website is a work in progress, and constantly being updated as I continue to learn new web development skills. In addition, as my skills and qualifications change, this website will be updated to reflect that. I hope that you enjoy learning more about me.  This whole website was designed from scratch using a basic notepad ( I have enjoyed the challenge). If you have any questions or comments feel free to reach out to me.  
    
     </p> 
    			
    			
    			</div>
    		</div>
    
    		<div id='footer_wrapper'>
    
    			<div id= "copyright">
    			<p>Copyright  2012 Timothy Skalaban</p>
    			</div>
    		</div>
    
    
    
    
    
    
    
    
    	</div>
    </body>
    
    </html>
    My CSS Page
    Code:
    <html>
    
    
    <header>
    
    
    
    
    
    
    
    #my_name {
    	
    
    	
    	float:left;
    	font-size:32px;
    	width:50%;
    	font-family:Helvetica, Arial, sans-serif;
    	text-shadow:-1px -1px 0 #000;
    	color:#0F224D;
           }
    
    
    
    
    #slogan {
    
    	float:left;
    	font-family:Helvetica, Arial, sans-serif;
    	font-size:15px;
    	color:#0F224D;
    }
    
    
    
    
    
    	
    	
    
    
    #name {
    	
    	width:100%;
    	padding:10px;	
    	color:#FFF;	
    	background-color:#424242;
    	font-size:26px;
    	font-weight:bold;
    	text-align:center;
     
           }
    
    
    	
    .largeAndInCharge {
    	
    	color:red;	
    	font-size:40px;
    	font-style:italic;	
    	font-weight:bold;
    
    	}
    
    
    
    #contact_box {
    	
    	Width:300px;
    	padding:10px;
    	color:#424242;	
    	background-color:#ccc;
    	font-size:16px;
    
    	}
    
    	
    
    #page_wrapper {
    	
    	margin:0 auto;	
    	width:1024px;	
    	background-color:#FFF;	
    	padding:20px;
    
    
    	
    	
    	
    	}
    
    	
    
    #head_wrapper {
    	
    	
    	
    	height:120px;
    		
    	padding:2%;
    	background: rgb(249,252,253); /* Old browsers */
    	background: rgb(250,249,253); /* Old browsers */
    	background: -moz-linear-gradient(top, rgba(250,249,253,1) 0%, rgba(244,242,250,1) 31%, rgba(230,220,254,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,249,253,1)), color-stop(31%,rgba(244,242,250,1)), color-stop(100%,rgba(230,220,254,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9fd', endColorstr='#e6dcfe',GradientType=0 ); /* IE6-9 */
    
    	border-radius:5px;
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    
    
    }
    
    	
    
    #content_wrapper {
    	
    		
    	min-height:750px;	
    background-color:#F3F1FA;
    	color:color:#0F224D;;
    	font-size:22px;
    	text-shadow:-1px -1px 0 #000;
    	padding:2%;
    	
    	
    	
    	
    	border-radius:5px;
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    
    		
    	
    	
    	
    	
    
    	}
    
    	
    
    #footer_wrapper {
    	
    	
    
    	height:50px;
    	
    	border-top:thick double #0F224D;
    	padding:2%;
    	
    
    	background: rgb(249,252,253); /* Old browsers */
    	background: rgb(250,249,253); /* Old browsers */
    	background: -moz-linear-gradient(top, rgba(250,249,253,1) 0%, rgba(244,242,250,1) 31%, rgba(230,220,254,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,249,253,1)), color-stop(31%,rgba(244,242,250,1)), color-stop(100%,rgba(230,220,254,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(250,249,253,1) 0%,rgba(244,242,250,1) 31%,rgba(230,220,254,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9fd', endColorstr='#e6dcfe',GradientType=0 ); /* IE6-9 */
    
    
    	
    	border-radius:5px;
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    
    
    	}
    #copyright {
    	float:right;
    	color:color:#0F224D;
    	
    	}	
    
    #logo {
    	
    	font-size:40px;
    	
    	color:orange;
    	
    	margin:5px;
    	
    	}
    
    	
    
    #menu_bar {
    	
    	width:100%;
    
    	height:40px;
    	
    
    	margin-bottom:20px;
    
    	-webkit-box-shadow:0px 0px 5px #ccc;
    	-moz-box-shadow:0px 0px 5px #ccc;
    	box-shadow:5px 5px 5px #ccc;
    	border-radius:5px;
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    
    	background: rgb(38,47,70); /* Old browsers */
    	background: -moz-linear-gradient(top, rgba(38,47,70,1) 0%, rgba(38,47,70,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38,47,70,1)), color-stop(100%,rgba(38,47,70,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262f46', endColorstr='#262f46',GradientType=0 ); /* IE6-9 */
    	
    	}
    
    	
    	
    
    #menu_bar ul {
    	
    	list-style-type:none;
    	
    
    	}
    
    	
    
    #menu_bar li {
    	
    	float:left;
    
    	color:FFF;
    	text-align:center;
    	
    	width:25%;
    	
    	padding:10px opx;
    
    
    	background: rgb(38,47,70); /* Old browsers */
    	background: -moz-linear-gradient(top, rgba(38,47,70,1) 0%, rgba(38,47,70,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38,47,70,1)), color-stop(100%,rgba(38,47,70,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* IE10+ */
    	background: linear-gradient(to bottom, rgba(38,47,70,1) 0%,rgba(38,47,70,1) 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262f46', endColorstr='#262f46',GradientType=0 ); /* IE6-9 */
    	
    	
    	}
    
    
    
    	
    #menu_bar li a {
    	color:FFF;
    	text-decoration:none;
    
    	
    	}	
    
    
    
    #menu_bar li a:hover {
    	
    	color:#40594F;
    
    	font-weight:bold;
    	
    
    	}
    
    	
    
    #welcome_text {	
    	
    	
    width:48%;
    	float:left;
    		
    	}
    
    	
    
    img#welcome_img {
    
    
    	float:right;
    	
    
    	}
    
    
    	
    
    	
    
    
    </header>
    
    
    </html>

    One of the Sub pages
    Code:
    <html>
    
    
    
    <head>
    
    
    <title> Contact </title>
    
    
    
    <link rel="stylesheet" type="text/css"href="master.css">
    </head>
    
    
    
    
    
    <body>
    
    	
    <div id='page_wrapper'>
    
    	
    
    	<div id='head_wrapper'>
    		
    			<div id= "my_name">
    
    				<h3> Timothy Skalaban </h3>
    			</div>
    
    			<div id= "slogan">
    				<h3> Passionate and Forward Thinking:</h3>
    				<h3> Driven by Finance, Technology, and Innovation</h3>
    			</div>	
    	</div>
    
    
    	
    
    
    	<div id="menu_bar">
    
    	
    		
    		
    		<ul>
    	
    		<li><a href='index.html'>Home</a></li>
    	
    		<li><a href='resume.html'>My Resume</a></li>
    	
    		<li><a href='bio.html'>About Me</a></li>
    	
    		<li><a href='contact.html'>Contact Me</a></li>	
    
    		</ul>
    		
    	</div>
    	
    
    	
    
    		
    	<div id='content_wrapper'>
    	
    	
    			
    		<h1> Feel Free to Contact Me</h1>
    	
    		<p> I enjoy networking and meeting other business professionals. Please feel free to email me with any questions or comments that you may have.</p>
    			<p> I look forward to hearing from you, just shoot me an email.</p>
    
    	
    		<img id="Me" src="images/Me.jpg">
    
    	
    		<p> <a href="mailo:Timothy.skalaban@gmail.com">Timothy Skalaban</a> </p>
    	
    	</div>
    		
    	
    
    		
    
    	<div id='footer_wrapper'>
    
    
    			<div id= "copyright">
    			<p>Copyright  2012 Timothy Skalaban</p>
    			</div>
    	</div>
    
    
    
    
    
    
    
    
    
    
    	
    </div>
    
    
    </body>
    
    
    
    </html>
    Last edited by Kravvitz; October 7th, 2012 at 08:36 PM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed forums, timskal.

    First of all, there are a few errors in your code that should be corrected. The first and fourth are most likely directly related to the unexpected display of the page.

    1) The first one is that you're not using a doctype. A doctype is need to tell browsers to use "standards mode" to display your page instead of "backwards compatibility mode" (aka "quirks mode"). Simply put "<!DOCTYPE html>" (without the quotes) at the very beginning of your HTML pages.

    2) It's necessary to specify which character set your page is using. Some web servers are configured to do this automatically, but yours doesn't seem to be, so you should add this line as the first one after the <head> start tag.
    Code:
    <meta charset="UTF-8">
    3) Third is that a space should be added between the 2nd and 3rd attributes here:
    Code:
    <link rel="stylesheet" type="text/css"href="master.css">
    4) Don't put HTML tags inside a stylesheet. Remove them.

    5) Please provide appropriate alternate text for your images.
    http://webaim.org/techniques/alttext/
    http://www.456bereastreet.com/archiv...le_attributes/
    http://www.456bereastreet.com/archiv...good_alt_text/

    6) "</br>" is not valid in HTML. The <br> element has no end tag.

    7) Don't use non-breaking spaces (&nbsp;) to add spacing. That's what CSS is for.

    8) While it's very good to write code by hand, using Notepad is like writing a novel in crayon. There are many much better tools available, tools that have features like syntax highlighting and more advanced find and replace. For instance, I use PSPad.

    Congratulations on taking your first few steps into the wide world of web development.

    P.S. I find that hard text-shadow makes the body text more difficult for me to read.
    Last edited by Kravvitz; October 7th, 2012 at 11:24 PM. Reason: typo correction
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Thank you for your help


    Thank you so much for writing me such a detailed and thoughtful response! I will be implementing all the changes you suggested over the next couple of days. I greatly appreciate all your help!


    Sincerely,


    Tim
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Using the PSPad


    I am just wondering if there is a way to Sync the PSPad to Cyberduck? For some reason Cyberduck is not backing up the updates that I make to my files to my hard copies on my computer. Am I better off testing changes to my website offline using PSPAD? Then manually uploading the files back to Cyberduck in order to load them online?
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    I don't use Cyberduck myself, but perhaps this page will help you. I don't use the feature myself but PSPad actually has built-in FTP capability.

    I often develop things locally before uploading them anywhere, but that's up to you.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0
    Ok Thank you for your help! I will look into the FTP capability of PSPad.

IMN logo majestic logo threadwatch logo seochat tools logo