IE issues with my layout, works fine in Firefox :[

This is a discussion on "IE issues with my layout, works fine in Firefox :[" within the Web Page Design section. This forum, and the thread "IE issues with my layout, works fine in Firefox :[ are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page IE issues with my layout, works fine in Firefox :[

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Aug 18th, 2006, 06:12
New Member
Join Date: Aug 2006
Location: Maryland
Age: 25
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Red face IE issues with my layout, works fine in Firefox :[
Hey There,

I was assigned the job of putting the site together and I built it while looking back and forth in Firefox, and now that I'm done, I checked it in Internet Explorer and of course it has issues.
Here is how it is supposed to look (Firefox):

and here are the errors in Internet Explorer:

There is something going on that is pushing the end of the navigation bar (the star image) down a row, and also, down near the footer, the background image is being pushed down about 3 pixels.

Here is the html:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>321: Global Branding</title>
    <meta http-equiv="Content-Language" content="en-us" />
    
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    
    <meta name="author" content="321: Global Branding" />
    
    <style type="text/css" media="all">@import "css/about.css";</style>
</head>

<body class="about">
<div id="page-container">
    <div id="logo">
        <a href="index.html"><img src="images/headers/logo2.jpg" alt="321TakeOff" /></a>
    </div>
    
    <div id="main-nav">
        <div align="right"><img src="images/nav/brandlaunch.gif" alt="Brand Launch" /><br /><br />
        <dl>
            <dt id="about"><a href="about.html"></a></dt>
            <dt id="brandslam"><a href="brandslam.html"></a></dt>
            <dt id="ourwork"><a href="ourwork.html"></a></dt>
            <dt id="capabilities"><a href="capabilities.html"></a></dt>
            <dt id="connect"><a href="connect.html"></a></dt>
        </dl>
        <div align="left"><img src="images/nav/star.gif" alt="star" /></div>
        <img src="images/nav/orangeline1.gif" alt="orangeline" /></div>
    </div>
    
    <div id="leftmenu">
        <a href="why.html">WHY CHOOSE 321</a><br /><br />
        <a href="testimonials.html">TESTIMONIALS</a><br /><br />
        <a href="team.html">EXECUTIVE TEAM</a><br /><br />
        
    </div>
    
    <div id="image">
        <img src="images/image/authentic.jpg" alt="transact" />
    </div>
    
    <div id="content-top">
        ABOUT 321
    </div>
    
    <div id="content-bot">
<p>Authentic is having honest conversations with your customers. Authentic is being faithful to your history. Authenticity is essential to motivating employees, captivating customers and differentiating your brand from the competition. We are uniquely positioned to uncover brands' distinct identity because we aren’t afraid to explore the unknown, the whatif’s.</p>
<p>321 bridges that gap with a perfect blend of big agency experience and the agility, quality, and precision of a boutique shop.</p>
    </div>
    
    <div id="footer">
        <b>{ <a href="why.html">See why clients choose 321</a> }<img src="images/footer/22.gif"></b>
    </div>
    
</div>
</body>
</html>
And here is the CSS:
Code: Select all
html, body {
    margin: 0;
    padding: 0;
}
img { border:0px; }
body {
    font-family: Arial;
    font-size: 10px;
}
#page-container {
    width: 800px;
    background: white;
}
#logo {
    background: white;
    padding-left: 43px;
    padding-top: 7px;
    float: left;
    height: 123px;
    width: 199px;
}
/* Main Navigation */

#main-nav {
     height: 114px; 
     width: 519px;
     line-height: 9px;
     padding-top: 20px;
     float: left;
     background: white;
     }
#main-nav dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 21px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */
#main-nav dt { float: left; }
#main-nav dt a {
    display: block;
    height: 0px !important;
    height /**/:64px; /* IE 5/Win hack */ 
    padding: 64px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
}#main-nav dt a:hover {
    background-position: 0 -64px;
}
#main-nav dt#about,
#main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); }

#main-nav dt#brandslam,
#main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); }

#main-nav dt#ourwork,
#main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); }

#main-nav dt#capabilities,
#main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); }

#main-nav dt#connect,
#main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); }
body.about dt#about,
body.about dt#about a,
body.brandslam dt#brandslam,
body.brandslam dt#brandslam a,
body.ourwork dt#ourwork,
body.ourwork dt#ourwork a,
body.capabilities dt#capabilities,
body.capabilities dt#capabilities a,
body.connect dt#connect,
body.connect dt#connect a {
    background-position: 0 -128px;
}
#leftmenu {
    float: left;
    width: 106px;
    height: 256px;
    padding-left: 17px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/leftmenu/bg1.gif);
    background-repeat: no-repeat;
}
#leftmenu a {
    color: #57768C;
    text-decoration: none;
}
#leftmenu a:hover {
    color: #57768C;
    text-decoration: none;
}
#image {
    float: left;
    width: 274px;
    height:204px;
    background: white;
}
#content-top {
    float: left;
    width: 370px;
    height: 20px;
    padding-left: 14px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/content/topbg1.gif);
    background-repeat: no-repeat;
}
#content-bot {
    float: left;
    width: 370px;
    height: 164px;
    padding-left: 14px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/content/botbg1.gif);
    background-repeat: no-repeat;
    overflow: auto;
}
#footer {
    float: left;
    width: 658px;
    height: 78px;
    background-image: url(../images/footer/bigbottom.gif);
    background-repeat: no-repeat;
    text-align: right;
    padding-top: 10px;
    text-decoration: none;
}
#footer a {
    color: #FF3000;
    text-decoration: none;
}
#footer a:hover {
    color: #FF3000;
    text-decoration: none;
}
Any help would be greatly appreciated!
Also, how do I add some padding to the right of the content div? I tried doing padding-right and it made the whole div go down a line.
Also, anyone know how to make custom sidebars using images? thats up next.
Reply With Quote

  #2 (permalink)  
Old Aug 18th, 2006, 13:55
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: IE issues with my layout, works fine in Firefox :[
You are almost certainly coming up against stight differences in size/measurement interpretations in IE.

You will need to adjust the values for IE. Do this by creating a seperate style sheet, ieonly.css, and link it into your pages after the main css file using the conditional method.
Code: Select all
<!--[if IE]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->
You load it last as its settings will overright the same ones defined in the main file.
Reply With Quote
  #3 (permalink)  
Old Aug 18th, 2006, 17:28
New Member
Join Date: Aug 2006
Location: Maryland
Age: 25
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: IE issues with my layout, works fine in Firefox :[
hey thanks ukgeoff,

I will definitely do that, that makes it easier, to make one css file for firefox and one for IE.

So I managed to get the star on the same row as the navigation buttons but there are still 3 px padding going on...


I did a little bit of reading about it at this site but could not figure it out...

http://www.positioniseverything.net/...reepxtest.html

here is my current CSS:
Code: Select all
html, body {
    margin: 0;
    padding: 0;
}
img { border:0px; }
body {
    font-family: Arial;
    font-size: 10px;
}
#page-container {
    width: 800px;
    background: green;
    display: block;
}
#logo {
    background: blue;
    padding-left: 43px;
    padding-top: 7px;
    float: left;
    height: 123px;
    width: 156px;
    display: block;
}
/* Main Navigation */

#main-nav {
     height: 114px; 
     width: 521px;
     line-height: 9px;
     padding-top: 20px;
     float: left;
     background: pink;
     display: block;
     }
#main-nav dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 21px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */
#main-nav dt { 
    float: left;
    display: block
}
#main-nav dt a {
    display: block;
    height: 0px !important;
    height /**/:64px; /* IE 5/Win hack */ 
    padding: 64px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
}#main-nav dt a:hover {
    background-position: 0 -64px;
    display: block
}
#main-nav dt#about,
#main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); }

#main-nav dt#brandslam,
#main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); }

#main-nav dt#ourwork,
#main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); }

#main-nav dt#capabilities,
#main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); }

#main-nav dt#connect,
#main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); }
body.about dt#about,
body.about dt#about a,
body.brandslam dt#brandslam,
body.brandslam dt#brandslam a,
body.ourwork dt#ourwork,
body.ourwork dt#ourwork a,
body.capabilities dt#capabilities,
body.capabilities dt#capabilities a,
body.connect dt#connect,
body.connect dt#connect a {
    background-position: 0 -128px;
}
#leftmenu {
    float: left;
    width: 106px;
    height: 256px;
    padding-left: 17px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/leftmenu/bg1.gif);
    background-repeat: no-repeat;
    display: block
}
#leftmenu a {
    color: #57768C;
    text-decoration: none;
}
#leftmenu a:hover {
    color: #57768C;
    text-decoration: none;
}
#image {
    float: left;
    width: 274px;
    height: 1%;
    background: red;
    display: block
}
#content-top {
    float: left;
    width: 370px;
    height: 20px;
    padding-left: 14px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/content/topbg1.gif);
    background-repeat: no-repeat;
    display: block
}
#content-bot {
    float: left;
    width: 370px;
    height: 164px;
    padding-left: 14px;
    padding-top: 10px;
    background: white;
    background-image: url(../images/content/botbg1.gif);
    background-repeat: no-repeat;
    overflow: auto;
    display: block
}
#footer {
    float: left;
    width: 658px;
    height: 78px;
    background-image: url(../images/footer/bigbottom.gif);
    background-repeat: no-repeat;
    text-align: right;
    padding-top: 10px;
    display: block
    text-decoration: none;
}
#footer a {
    color: #FF3000;
    text-decoration: none;
}
#footer a:hover {
    color: #FF3000;
    text-decoration: none;
}
Reply With Quote
  #4 (permalink)  
Old Aug 18th, 2006, 19:33
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: IE issues with my layout, works fine in Firefox :[
In your default img definition add

padding: 0;
margin: 0;

Should do the trick.
Reply With Quote
  #5 (permalink)  
Old Aug 18th, 2006, 20:29
moojoo's Avatar
Moderator
Join Date: Aug 2005
Location: Texas
Age: 31
Posts: 1,946
Blog Entries: 1
Thanks: 0
Thanked 29 Times in 29 Posts
Re: IE issues with my layout, works fine in Firefox :[
and maybe even a border:0; for the ones within link tags. Um.. yes that would be a good thing to do.
__________________
I hate IE 6. Just sayin....
http://www.mevans76.com
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Reply With Quote
  #6 (permalink)  
Old Aug 18th, 2006, 20:33
New Member
Join Date: Aug 2006
Location: Maryland
Age: 25
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: IE issues with my layout, works fine in Firefox :[
nopers
Reply With Quote
  #7 (permalink)  
Old Aug 18th, 2006, 21:18
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: IE issues with my layout, works fine in Firefox :[
How about adding another dt with that image as a background an no a link.
Reply With Quote
Reply

Tags
issues, layout, works, fine, firefox

« Link list problem in IE | problem with layout »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
2 column Page Layout works in Firefox but not IE tupulo Web Page Design 3 Feb 26th, 2008 19:58
CSS Layout Issues (IE vs Firefox) Keith Web Page Design 5 Feb 11th, 2008 22:22
Floating works fine in firefox but not IE ! marSoul Web Page Design 13 Dec 18th, 2007 18:37
Centre column of 3 col layout problem - Works in IE but not firefox!? audiopleb Web Page Design 6 Jun 8th, 2006 16:20
Margin area not tranparent in Firefox (works fine in IE6) Breazile Web Page Design 2 Nov 6th, 2005 17:09


All times are GMT. The time now is 05:47.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Web Hosting :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43