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

    Join Date
    Apr 2010
    Posts
    2
    Rep Power
    0

    Website design looks perfect in Firefox, but HORRIBLE in I.E. I think it's my CSS.


    Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue.

    The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up.

    If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is:
    http://www.favillephoto.com/new website/index.html

    I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there.

    Thanks in advance for your help.


    This is the css file for my index page:
    Code:
    body {
    	padding: 0;
    	background: #ffffff url('images/img01.jpg');
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
    }
    
    h1, h2, h3, h4 {
    	margin: 0;
    	font-weight: normal;
    	color: #AD1112;
    }
    
    h1 {
    	font-size: 250%;
    }
    
    h2 {
    	font-size: 180%;
    }
    
    h3 {
    	font-size: 140%;
    	font-weight: bold;
    }
    
    h4 {
    	font-size: 100%;
    	font-weight: bold;
    }
    
    p, ol, ul {
    	line-height: 180%;
    }
    
    p {
    }
    
    ol {
    }
    
    ul {
    }
    
    blockquote {
    	margin: 0;
    	padding-left: 20px;
    	font-style: italic;
    }
    
    blockquote * {
    	line-height: normal;
    }
    
    a {
    	color: #1267bc;
    }
    
    a:hover {
    	color: #999999;
    }
    
    img {
    	border: none;
    }
    
    img.left {
    	float: left;
    	margin: 10px 15px 0 0;
    }
    
    img.right {
    	float: right;
    	margin: 0 0 0 15px;
    }
    
    hr {
    	display: none;
    }
    
    /* Header */
    
    #header {
    	width: 1030px;
    	height: 260px;
    	margin: 0 auto;
    	background: url('images/img02.jpg') no-repeat right top;
    }
    
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 1030px;
    	height: 40px;
    	padding: 220px 0 0 0;
    }
    
    #menu a {
    	display: block;
    	height: 32px;
    	background: url('images/img06.gif') no-repeat;
    	text-decoration: none;
    	font-size: 13px;
    	font-weight: bold;
    	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
    }
    
    #menu ul {
    	width: 1026px;
    	height: 40px;
    	margin: 0;
    	padding: 0;
    	background: #AD1011 url('images/img05.jpg') repeat-x;
    	border-left: 2px solid #FFFFFF;
    	border-right: 2px solid #FFFFFF;
    	list-style-type:none
    }
    
    #menu li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    }
    
    #menu li a:hover
    {	color: #123456;}
    
    #menu div
    {	position: absolute;
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	background: #000000;
    }
    
    #menu div a
    {	position: relative;
    	display: block;
    	margin: 0;
    	padding: 3px 10px;
    	width: auto;
    	height: 20px;
    	white-space: nowrap;
    	text-align: left;
    	background: #6c91c5;
    	color: #ffffff;}
    	
    #menu div a:hover
    {	color: #123456;}
    
    
    /* Page */
    
    #page {
    	width: 1030px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 760px;
    	height: 2040px;
    	padding: 20px;
    	background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 220px;
    	height: 2070px;
    	padding-top: 10px;
    	padding-right: 10px;
    	background: #ffffff url('images/img07a.gif') no-repeat right bottom;
    }
    
    #sidebar a {
    	color: #dddddd;
    }
    
    #sidebar a:hover {
    	color: #999999;
    	text-decoration: underline;
    }
    
    #sidebar ul {
    	margin-left: 0;
    	padding-left: 0;
    	list-style: none;
    	
    	font-size: 92%;
    }
    
    #sidebar ul li {
    	background: url('images/img13.gif') no-repeat 0px 12px;
    	border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
    }
    
    #sidebar ul li.first {
    	border: none;
    }
    
    #sidebar ul li h2 {
    	margin: 0;
    	font-size: 100%;
    }
    
    #sidebar ul li h3 {
    	margin: 0;
    	font-size: 92%;
    }
    
    #sidebar ul li p {
    	color: #dddddd;
    	margin: 0;
    }
    
    #sidebar p {
    	color: #dddddd;
    	margin: 0;
    	font-size: 92%;
    }
    
    .boxed {
    	margin-bottom: 10px;
    	background: #113c5c url('images/img10.gif') no-repeat left bottom;
    }
    
    .boxed .title {
    	height: 30px;
    	margin: 0;
    	background: #000000 url('images/img08.jpg') no-repeat;
    	font-size: 16px;
    	font-weight: bold;
    	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
    }
    
    .boxed .content {
    	padding: 15px;
    	background: url('images/img09.gif') repeat-x;
    }
    
    
    .boxedPrintoftheMonth {
    	margin-left: -790px;
    	background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
    }
    
    .boxedPrintoftheMonth .title {
    	height: 30px;
    	margin: 0;
    	background: #000000 url('images/img08PotM.jpg') no-repeat;
    	font-size: 16px;
    	font-weight: bold;
    	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
    }
    
    .boxedPrintoftheMonth .content {
    	padding: 15px;
    	background: url('images/img09.gif') repeat-x;
    }
    
    /* Footer */
    
    #footer p {
    	margin: 0;
    	line-height: normal;
    	font-size: 85%;
    	color: #000000;
    }
    
    #footer a {
    	color: #000000;
    }
    
    #footer a:hover {
    	color: #666666;
    }

    This is the css for the rest of my pages:
    Code:
    body {
    	padding: 0;
    	background: #ffffff url('images/img01.jpg');
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
    }
    
    h1, h2, h3, h4 {
    	margin: 0;
    	font-weight: normal;
    	color: #AD1112;
    }
    
    h1 {
    	font-size: 250%;
    }
    
    h2 {
    	font-size: 180%;
    }
    
    h3 {
    	font-size: 140%;
    	font-weight: bold;
    }
    
    h4 {
    	font-size: 100%;
    	font-weight: bold;
    }
    
    p, ol, ul {
    	line-height: 180%;
    }
    
    p {
    }
    
    ol {
    }
    
    ul {
    }
    
    blockquote {
    	margin: 0;
    	padding-left: 20px;
    	font-style: italic;
    }
    
    blockquote * {
    	line-height: normal;
    }
    
    a {
    	color: #1267bc;
    }
    
    a:hover {
    	color: #999999;
    }
    
    img {
    	border: none;
    }
    
    img.left {
    	float: left;
    	margin: 10px 15px 0 0;
    }
    
    img.right {
    	float: right;
    	margin: 0 0 0 15px;
    }
    
    img.left1 {
    	float: left;
    	margin: 0 70px 0 70px;
    }
    
    img.right1 {
    	float: right;
    	margin: 0 70px 0 70px;
    }
    
    img.left2 {
    	float: left;
    	margin: 20px 100px 20px 100px;
    }
    
    img.right2 {
    	float: right;
    	margin: 30px 120px 20px 120px;
    }
    
    img.left3 {
    	float: left;
    	margin: 0 110px 0 110px;
    }
    
    img.right3 {
    	float: right;
    	margin: 20px 60px 0 60px;
    }
    
    hr {
    	display: none;
    }
    
    /* Header */
    
    #header {
    	width: 1030px;
    	height: 260px;
    	margin: 0 auto;
    	background: url('images/img02.jpg') no-repeat right top;
    }
    
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 1030px;
    	height: 40px;
    	padding: 220px 0 0 0;
    }
    
    #menu a {
    	display: block;
    	height: 32px;
    	background: url('images/img06.gif') no-repeat;
    	text-decoration: none;
    	font-size: 13px;
    	font-weight: bold;
    	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
    }
    
    #menu ul {
    	width: 1026px;
    	height: 40px;
    	margin: 0;
    	padding: 0;
    	background: #AD1011 url('images/img05.jpg') repeat-x;
    	border-left: 2px solid #FFFFFF;
    	border-right: 2px solid #FFFFFF;
    	list-style-type:none
    }
    
    #menu li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    }
    
    #menu li a:hover
    {	color: #123456;}
    
    #menu div
    {	position: absolute;
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	background: #000000;
    }
    
    #menu div a
    {	position: relative;
    	display: block;
    	margin: 0;
    	padding: 3px 10px;
    	width: auto;
    	height: 20px;
    	white-space: nowrap;
    	text-align: left;
    	background: #6c91c5;
    	color: #ffffff;}
    	
    #menu div a:hover
    {	color: #123456;}
    
    
    /* Page */
    
    #page {
    	width: 1030px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 990px;
    	padding: 20px;
    	background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
    }
    
    /* Footer */
    
    #footer p {
    	margin: 0;
    	line-height: normal;
    	font-size: 85%;
    	color: #000000;
    }
    
    #footer a {
    	color: #000000;
    }
    
    #footer a:hover {
    	color: #666666;
    }
  2. #2
  3. No Profile Picture
    http://stealthwd.ca
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2005
    Posts
    706
    Rep Power
    203
    I got a 404 on the link you had to your site....

    A quick look over the css and it looks fine. I find one of the big differences between IE and FF is IE adds extra padding in some places unless you specify it. That being said you can try using IE developers tool bar in IE, and firebug in FF to try to see where the inconsistencies lie. Also if you like post a working link to your site and I can take a quick peek at it for you.

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    2
    Rep Power
    0
    Originally Posted by Dameon51
    I got a 404 on the link you had to your site....

    A quick look over the css and it looks fine. I find one of the big differences between IE and FF is IE adds extra padding in some places unless you specify it. That being said you can try using IE developers tool bar in IE, and firebug in FF to try to see where the inconsistencies lie. Also if you like post a working link to your site and I can take a quick peek at it for you.
    I'm sorry. I actually took the site down. It's now located at my regular website without any extension. I was able to get it to function properly. I spent probably 10 hours yesterday reading through forum after forum while waiting for someone to respond, and I finally found something helpful. Someone had recommended using an online validator to make sure that the code was perfectly valid. To my surprise, fixing the problem was as simple as adding a "doctype" code at the top of my html, and correcting a couple of minor html errors. When I fixed that, I.E. worked perfectly, as well as FF. I don't know how to delete this thread now, but thank you for those of you who took a look at this anyway.

    If any mod happens across here, can you delete this thread for me? Or someone tell me how?

    Thanks
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,107
    Rep Power
    4306
    Originally Posted by FavillePhoto
    If any mod happens across here, can you delete this thread for me?
    Why delete the thread? If you simply want your URL removed, I'll be happy to remove it from your post for 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).

IMN logo majestic logo threadwatch logo seochat tools logo