Hi I’m pretty new to web design.
I am working on creating a portfolio and the site isn’t live yet as I haven’t finished it. When I test the page in Chrome or Safari the site looks fine and the way I want. When I try to run it in FireFox or IE, all I see is the background color that my master page has.
Here is the code for the page
<%@ Page Title="" Language="C#" MasterPageFile="~/Portfolio.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Portfolio.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="App_Themes/Corporation/CSS/forms.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/homepage.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/layout.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/navi.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/tables.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
width: 162px;
height: 108px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<div class="wrapper col1">
<div id="head">
<h1 style="color: #FFEE33"><img class="auto-style1" src="App_Themes/Corporation/Images/Logo.gif" /> </h1>
<p style="color: #FFEE33"> </p>
<div id="topnav">
<ul>
<li><a class="active" href="Index.aspx">Home</a></li>
<li><a href="AboutMe.aspx">About Me</a></li>
<li><a href="full-width.html">Portfolio</a></li>
<li><a href="Coursework.aspx">Coursework</a>
</li>
<li class="last"><a href="ContactMe.aspx">Contact Me</a></li>
</ul>
</div>
<div id="search">
<form action="#" method="post">
<fieldset>
<legend>Site Search</legend>
<input type="submit" name="go" id="go" value="GO" />
<input type="text" value="Search the site…" onfocus="this.value=(this.value=='Search the site…')? '' : this.value ;" />
</fieldset>
</form>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="gallery">
<div id="Div1">
<ul>
<li class="placeholder" style="background-image:url(App_Themes/Corporation/Images/Dylan.gif);">Image Holder</li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/casinoThumb.gif);" href="#gallery"><strong>Services</strong><span><img src="App_Themes/Corporation/Images/casino.gif" alt="" /></span></a></li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Products</strong><span><img src="App_Themes/Corporation/Images/gallery_2.gif" alt="" /></span></a></li>
<li class="last"><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Company</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h1>Welcome to My Website!</h1>
<p>My name is Dylan Creighton and I am a 3rd semester student at Ranken Technical College.</p>
<p>I am in the Internet and Web based Technologies program and I am hoping that I will be able to find a career that I love doing in this field upon graduation. To the right, you will find a list of content that is inside this website.</p>
<p>I love what I'm learning, I love what I'm doing and I hope I can be able to do this for a long time. So welcome to my website!</p>
<p> </p>
<p> </p>
</div>
<div id="column">
<div id="featured">
<ul>
<li>
<h2> What's Inside:</h2>
<p>
-A page that allows you to get to know me better</p>
<p>
</p>
<p>
-A page showing works I've done outside of Ranken</p>
<p>
</p>
<p>
-A page demonstrating techniques I have learned while attending Ranken</p>
<p>
</p>
<p>
-A contact page with all my information</p>
<p>
</p>
<p>
-A copy of my resumé</p>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wrapper col5">
<div id="footer">
<!-- End Contact Form -->
<!-- End Company Details -->
<div id="copyright">
<p class="fl_left">Copyright © 2011 - All Rights Reserved - <a href="Index.aspx">Dylan's Designs</a></p>
<p class="fl_right">Website by Dylan Creighton & <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<br class="clear" />
</div>
<div class="clear"></div>
</div>
</div>
</asp:Content>
And here is the code for the Master Page if that’s needed
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Portfolio.master.cs" Inherits="Portfolio.Portfolio" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="App_Themes/Corporation/CSS/forms.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/homepage.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/layout.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/navi.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/tables.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
<title>Dylan's Designs</title>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Appreciate any help someone can give me!
felgall
December 13, 2012, 8:48pm
2
Post the HTML that your code generates - that’s what the browsers see and that’s what we need to see in order to answer your question.
This is the page source that comes up with Firefox
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="App_Themes/Corporation/CSS/forms.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/homepage.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/layout.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/navi.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/tables.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
width: 162px;
height: 108px;
}
</style>
<title>
Dylan's Designs
</title></head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<div class="wrapper col1">
<div id="head">
<h1 style="color: #FFEE33"><img class="auto-style1" src="App_Themes/Corporation/Images/Logo.gif" /> </h1>
<p style="color: #FFEE33"> </p>
<div id="topnav">
<ul>
<li><a class="active" href="Index.aspx">Home</a></li>
<li><a href="AboutMe.aspx">About Me</a></li>
<li><a href="Portfolio.aspx">Portfolio</a></li>
<li><a href="Coursework.aspx">Coursework</a>
</li>
<li class="last"><a href="ContactMe.aspx">Contact Me</a></li>
</ul>
</div>
<div id="search">
<form action="#" method="post">
<fieldset>
<legend>Site Search</legend>
<input type="submit" name="go" id="go" value="GO" />
<input type="text" value="Search the site…" onfocus="this.value=(this.value=='Search the site…')? '' : this.value ;" />
</fieldset>
</form>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="gallery">
<div id="Div1">
<ul>
<li class="placeholder" style="background-image:url(App_Themes/Corporation/Images/Dylan.gif);">Image Holder</li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/casinoThumb.gif);" href="#gallery"><strong>Services</strong><span><img src="App_Themes/Corporation/Images/casino.gif" alt="" /></span></a></li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Products</strong><span><img src="App_Themes/Corporation/Images/gallery_2.gif" alt="" /></span></a></li>
<li class="last"><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Company</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h1>Welcome to My Website!</h1>
<p>My name is Dylan Creighton and I am a 3rd semester student at Ranken Technical College.</p>
<p>I am in the Internet and Web based Technologies program and I am hoping that I will be able to find a career that I love doing in this field upon graduation. To the right, you will find a list of content that is inside this website.</p>
<p>I love what I'm learning, I love what I'm doing and I hope I can be able to do this for a long time. So welcome to my website!</p>
<p> </p>
<p> </p>
</div>
<div id="column">
<div id="featured">
<ul>
<li>
<h2> What's Inside:</h2>
<p>
-A page that allows you to get to know me better</p>
<p>
</p>
<p>
-A page showing works I've done outside of Ranken</p>
<p>
</p>
<p>
-A page demonstrating techniques I have learned while attending Ranken</p>
<p>
</p>
<p>
-A contact page with all my information</p>
<p>
</p>
<p>
-A copy of my resumé</p>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wrapper col5">
<div id="footer">
<!-- End Contact Form -->
<!-- End Company Details -->
<div id="copyright">
<p class="fl_left">Copyright © 2011 - All Rights Reserved - <a href="Index.aspx">Dylan's Designs</a></p>
<p class="fl_right">Website by Dylan Creighton & <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<br class="clear" />
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
felgall
December 13, 2012, 9:47pm
4
Some of the meta and link tags have been misplaced into the body when they should be in the head.
I moved the meta tags back to the head section, but the issue still is there. The only thing visible is the background color on the page, same as before.
FireFox
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="App_Themes/Corporation/CSS/forms.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/homepage.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/layout.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/navi.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/tables.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
.auto-style1 {
width: 162px;
height: 108px;
}
</style>
<title>
Dylan's Designs
</title></head>
<body id="top" >
<div class="wrapper col1">
<div id="head">
<h1 style="color: #FFEE33"><img class="auto-style1" src="App_Themes/Corporation/Images/Logo.gif" /> </h1>
<p style="color: #FFEE33"> </p>
<div id="topnav">
<ul>
<li><a class="active" href="Index.aspx">Home</a></li>
<li><a href="AboutMe.aspx">About Me</a></li>
<li><a href="Portfolio.aspx">Portfolio</a></li>
<li><a href="Coursework.aspx">Coursework</a>
</li>
<li class="last"><a href="ContactMe.aspx">Contact Me</a></li>
</ul>
</div>
<div id="search">
<form action="#" method="post">
<fieldset>
<legend>Site Search</legend>
<input type="submit" name="go" id="go" value="GO" />
<input type="text" value="Search the site…" onfocus="this.value=(this.value=='Search the site…')? '' : this.value ;" />
</fieldset>
</form>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="gallery">
<div id="Div1">
<ul>
<li class="placeholder" style="background-image:url(App_Themes/Corporation/Images/Dylan.gif);">Image Holder</li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/casinoThumb.gif);" href="#gallery"><strong>Services</strong><span><img src="App_Themes/Corporation/Images/casino.gif" alt="" /></span></a></li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Products</strong><span><img src="App_Themes/Corporation/Images/gallery_2.gif" alt="" /></span></a></li>
<li class="last"><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Company</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h1>Welcome to My Website!</h1>
<p>My name is Dylan Creighton and I am a 3rd semester student at Ranken Technical College.</p>
<p>I am in the Internet and Web based Technologies program and I am hoping that I will be able to find a career that I love doing in this field upon graduation. To the right, you will find a list of content that is inside this website.</p>
<p>I love what I'm learning, I love what I'm doing and I hope I can be able to do this for a long time. So welcome to my website!</p>
<p> </p>
<p> </p>
</div>
<div id="column">
<div id="featured">
<ul>
<li>
<h2> What's Inside:</h2>
<p>
-A page that allows you to get to know me better</p>
<p>
</p>
<p>
-A page showing works I've done outside of Ranken</p>
<p>
</p>
<p>
-A page demonstrating techniques I have learned while attending Ranken</p>
<p>
</p>
<p>
-A contact page with all my information</p>
<p>
</p>
<p>
-A copy of my resumé</p>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wrapper col5">
<div id="footer">
<!-- End Contact Form -->
<!-- End Company Details -->
<div id="copyright">
<p class="fl_left">Copyright © 2011 - All Rights Reserved - <a href="Index.aspx">Dylan's Designs</a></p>
<p class="fl_right">Website by Dylan Creighton & <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<br class="clear" />
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Chrome
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="App_Themes/Corporation/CSS/forms.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/homepage.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/layout.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/navi.css" rel="stylesheet" />
<link href="App_Themes/Corporation/CSS/tables.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
.auto-style1 {
width: 162px;
height: 108px;
}
</style>
<title>
Dylan's Designs
</title></head>
<body id="top" >
<div class="wrapper col1">
<div id="head">
<h1 style="color: #FFEE33"><img class="auto-style1" src="App_Themes/Corporation/Images/Logo.gif" /> </h1>
<p style="color: #FFEE33"> </p>
<div id="topnav">
<ul>
<li><a class="active" href="Index.aspx">Home</a></li>
<li><a href="AboutMe.aspx">About Me</a></li>
<li><a href="Portfolio.aspx">Portfolio</a></li>
<li><a href="Coursework.aspx">Coursework</a>
</li>
<li class="last"><a href="ContactMe.aspx">Contact Me</a></li>
</ul>
</div>
<div id="search">
<form action="#" method="post">
<fieldset>
<legend>Site Search</legend>
<input type="submit" name="go" id="go" value="GO" />
<input type="text" value="Search the site…" onfocus="this.value=(this.value=='Search the site…')? '' : this.value ;" />
</fieldset>
</form>
</div>
</div>
</div>
<div class="wrapper col2">
<div id="gallery">
<div id="Div1">
<ul>
<li class="placeholder" style="background-image:url(App_Themes/Corporation/Images/Dylan.gif);">Image Holder</li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/casinoThumb.gif);" href="#gallery"><strong>Services</strong><span><img src="App_Themes/Corporation/Images/casino.gif" alt="" /></span></a></li>
<li><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Products</strong><span><img src="App_Themes/Corporation/Images/gallery_2.gif" alt="" /></span></a></li>
<li class="last"><a class="swap" style="background-image:url(App_Themes/Corporation/Images/290x105.gif);" href="#gallery"><strong>Company</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper col4">
<div id="container">
<div id="content">
<h1>Welcome to My Website!</h1>
<p>My name is Dylan Creighton and I am a 3rd semester student at Ranken Technical College.</p>
<p>I am in the Internet and Web based Technologies program and I am hoping that I will be able to find a career that I love doing in this field upon graduation. To the right, you will find a list of content that is inside this website.</p>
<p>I love what I'm learning, I love what I'm doing and I hope I can be able to do this for a long time. So welcome to my website!</p>
<p> </p>
<p> </p>
</div>
<div id="column">
<div id="featured">
<ul>
<li>
<h2> What's Inside:</h2>
<p>
-A page that allows you to get to know me better</p>
<p>
</p>
<p>
-A page showing works I've done outside of Ranken</p>
<p>
</p>
<p>
-A page demonstrating techniques I have learned while attending Ranken</p>
<p>
</p>
<p>
-A contact page with all my information</p>
<p>
</p>
<p>
-A copy of my resumé</p>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="wrapper col5">
<div id="footer">
<!-- End Contact Form -->
<!-- End Company Details -->
<div id="copyright">
<p class="fl_left">Copyright © 2011 - All Rights Reserved - <a href="Index.aspx">Dylan's Designs</a></p>
<p class="fl_right">Website by Dylan Creighton & <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<br class="clear" />
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Maybe there is something small that I’m just missing that is different in the two versions?
We’d require the CSS to see what styles are being applied to that markup.
The HTML looks fine, a couple of tiny errors but nothing that should stop the content being displayed, so it sounds like it’s more likely to be a CSS problem. Can you give us a link to the actual page (even it isn’t a final page, just a demo of the problem), so that we can see it in situ?
OK I got my page up.
URL is iwt.ranken.edu/dcreighton
There are five different CSS pages I can post if needed.
ralphm
December 15, 2012, 3:00am
9
Don’t post the CSS, as we can see it anyway.
You have a weird rule at around line line 67 of your layout.css file which is killing the site in Firefox (and prolly IE):
#head, #gallery, #breadcrumb, #container, #footer {
display: block;
left: 3px;
margin: 0 auto;
position: relative;
[COLOR="#FF0000"]top: -2.14748e+9px;[/COLOR]
width: 960px;
}
Remove that line, which is jibberish anyway and not needed.
That fixed it!
Such a dumb little issue causing such a headache. Thanks guys! Glad I found this place.