|
IE issues with my layout, works fine in Firefox :[
08-18-2006, 02:36 AM
|
IE issues with my layout, works fine in Firefox :[
|
Posts: 4
|
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:
<!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:
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. |
|
|
|
|
08-18-2006, 12:09 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 10,016
Location: Tennessee
|
The most typical reason the star to be dropping is that the contents inside it's container are wider than the container itself, so it forces it to the next line where there is space. IE has a broken box model, you'll find ways to work around it here:
Explorer Exposed!
There is also a 3-pixel bug in IE, also on that page.
Hacks are no longer a viable solution because with the advent of IE 7, your pages are going to break. Learn to use conditional comments instead of hacks if you must 'hack'.
The future of CSS hacking | 456 Berea Street
Vitamin Features » Stop Hacking, or be Stopped
A definition list does not a good menu make... it would be better, and simpler, to use an unordered list.. since that's what a menu really is anyway.
Your 800px width is going to cause a small horizontal scroll bar. The max size for an 800x600 page is 780px, 760 is even better.
Your #main-nav dt is floated left, but you define no width. If you float something, it MUST have a width (unless it's an image with has it's own width). Therefore the dt takes up the full width of the page or the container it's in.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
08-18-2006, 04:21 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 4
|
Hey Thanks for the reply LadynRed,
I redid the CSS in a seperate file specificly for IE, and here is where I am at:
The star image was moved up to the row but there is still a 3 px gap in between the last navigation button and itself.
I read about the 3 px gap IE issue here:
IE Three Pixel Gap
but I can't seem to figure out what changes to make and where.
here is the current css:
Code:
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;
}
|
|
|
|
|
08-18-2006, 05:07 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 4
|
Hey Thanks for the reply LadynRed,
I redid the CSS in a seperate file specificly for IE, and here is where I am at:
The star image was moved up to the row but there is still a 3 px gap in between the last navigation button and itself.
I read about the 3 px gap IE issue here:
IE Three Pixel Gap
but I can't seem to figure out what changes to make and where.
here is the current css:
Code:
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;
}
|
|
|
|
|
08-18-2006, 06:23 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 10,016
Location: Tennessee
|
Do you have the page on a server somewhere so we can see the whole, images and all ??
Your star seems to be in it's own div:
<div align="left"><img src="images/nav/star.gif" alt="star" /></div>
This div has no style rules. Give it a class or id with at least margin: 0; padding: 0; and see if that doesn't close the gap.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
08-18-2006, 06:43 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 4
|
well i tried taking out that div align left and it didnt seem to change anything, i originally put it in there hoping it would send it to the left cancelling out the 3 pixel gap but no such luck.
Yup! the site is now online here:
321: Global Branding
thank you for your generous help so far!  |
|
|
|
|
08-18-2006, 07:16 PM
|
Re: IE issues with my layout, works fine in Firefox :[
|
Posts: 10,016
Location: Tennessee
|
YW
The problem was not the left-alignment, it was the browser default margin and/or padding that was causing the space. That is why it is necessary to add the style rules for that div and zero out margins and padding.
I looked at your live site.. what is <p2> and <p3> ??? Those are not valid paragraph tags.
Looks pretty good though. Converting away from tables isn't always simple.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
« Reply to IE issues with my layout, works fine in Firefox :[
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
