SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why do I get additional space in IE?

    Recently started designing websites in CSS but I seem to keep coming up against a certain issue which I have tried to overcome with no success.

    If you view the following sites in Firefox (my browser of choice) they display as required but IE adds a chunk underneath the content:

    Website #1 - extra space added underneath the 3 white boxes.

    Website #2 - space added underneath grey box on left and request resource pack box.

    I would really appreciate it if someone could point out what causes this and how I can overcome it.

    Thanks in advance.

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Barry,

    Just had a muck about with your html...

    Your not going to like the solution !

    Like me your a tidy person (i'm pretty anal about noting up my code, makes it a hell of alot easier when it comes to revisiting the project years later) but sometimes IE doesn't take to kindly to it.

    I just changed ...
    Code:
    <div class="box-bottom"></div>
    </div><!-- close:box02 -->
    <div id="box03">
    To...
    Code:
    <div class="box-bottom"></div>
    </div><div id="box03">
    Problem went away
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  3. #3
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Northern Star - Thanks for the quick and helpful response. I made the change on Website #1 and like you said the problem went away. Thinking it was probably the same with Website #2 I removed all the notes but unfortunately it didn't change anything.

    Any ideas?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #left01 doesn't need a height (try resizing the text in FF).
    #left02 doesn't need to be floated and #video doesn't need such a large height. Give #left position: relative and then give #left02 position: absolute; bottom: 0; right: X to align it to the bottom.
    But the actual space is being caused by the float on #box01a. You'd be better off using a different image replacement method:
    http://www.tjkdesign.com/articles/tip.asp
    http://www.ryznardesign.com/web_codi...ent/index.html
    You also seem to have a case of divitis. A lot of the divs you've used would be better as heading tags (h1 - h6) or paragraphs.

  5. #5
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tyssen - Thanks for the input. I did try and make the changes you suggested but it screwed up the layout. It is probably something I did wrong.

    I take your point about divitis.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barryelucid8
    I did try and make the changes you suggested but it screwed up the layout. It is probably something I did wrong.
    Have you got a link to the problem page?

  7. #7
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New page can be viewed here

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
     <title>Untitled Document</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <style>
     body {
     	background: #FFFFFF url(http://www.elucid8web.com/sep/graphics/background.jpg) repeat-y 50% 0;
     	text-align: center;
     	margin: 0;
     	padding: 0;
     	font-size: 62.5%;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     }
     a {
     	text-decoration: none;
     }
     * html body {padding-right: -1px}
     #container {
     	margin: auto;
     	width: 740px;
     }
     
     /* Header
     ------------------------------------------------------------------*/
     #header {
     	width: 740px;
     	height: 198px;
     	background: url(http://www.elucid8web.com/sep/graphics/header.jpg) no-repeat;
     	text-indent: -9999px;
     }
     h1 {
     	float: left;
     	background: url(http://www.elucid8web.com/sep/graphics/logo_sep.jpg) no-repeat;
     	width: 221px;
     	height: 96px;
     	padding: 0;
     	margin: 17px 0 0 71px;
     	display: inline;
     }
     #nav-top {
     	float: right;
     	width: 100px;
     	padding: 0;
     	margin: 15px -4px 0 0;
     }
     #nav-top li {
     	float: left;
     	list-style: none;
     	margin: 0;
     	padding: 0;
     }
     #nav-top a {
     	float: left;
     	text-indent: -9999px;
     	padding: 0;
     	margin: 0 10px 0 0;
     	height: 15px;
     }
     #nav-top-home a {
     	background: url(http://www.elucid8web.com/sep/graphics/home.jpg) no-repeat;
     	width: 26px; 
     }
     #nav-top-contact a {
     	background: url(http://www.elucid8web.com/sep/graphics/contact.jpg) no-repeat;
     	width: 53px; 
     }
     #nav-top-home a:hover {
     	background: url(http://www.elucid8web.com/sep/graphics/home_f2.jpg) no-repeat;
     }
     #nav-top-contact a:hover {
     	background: url(http://www.elucid8web.com/sep/graphics/contact_f2.jpg) no-repeat;
     }
     
     /* Navigation
     ------------------------------------------------------------------*/
     #nav {
     	background: url(http://www.elucid8web.com/sep/graphics/nav_back.jpg) repeat-x;
     	width: 740px;
     	height: 25px;
     	margin: 0;
     	padding: 0;
     }
     #nav li {
     	float: left;
     	list-style: none;
     	text-indent: -9999px;
     }
     #nav a {
     	border: 0;
     	display: block;
     	background: url(http://www.elucid8web.com/sep/graphics/nav.jpg) no-repeat;		
     }
     #nav-what a {
     	width: 156px;
     	height: 25px;
     }
     #nav-story a {
     	width: 188px;
     	height: 25px;
     }
     #nav-testimonials a {
     	width: 116px;
     	height: 25px;
     }
     #nav-casestudy a {
     	width: 100px;
     	height: 25px;
     }
     #nav-who a {
     	width: 150px;
     	height: 25px;
     }
     #nav-what a:link {
     	background-position: 0px 0px;
     }
     #nav-what a:hover {
     	background-position: 0px -25px;
     }
     #nav-story a:link {
     	background-position: -161px 0px;
     }
     #nav-story a:hover {
     	background-position: -161px -25px;
     }
     #nav-testimonials a:link {
     	background-position: -349px 0px;
     }
     #nav-testimonials a:hover {
     	background-position: -349px -25px;
     }
     #nav-casestudy a:link {
     	background-position: -465px 0px;
     }
     #nav-casestudy a:hover {
     	background-position: -465px -25px;
     }
     #nav-who a:link {
     	background-position: -565px 0px;
     }
     #nav-who a:hover {
     	background-position: -565px -25px;
     }
     #nav-shadow {
     	background: url(http://www.elucid8web.com/sep/graphics/nav-shadow.jpg) repeat-x;
     	height: 15px;
     }
     
     
     
     
     
     /* Middle
     ------------------------------------------------------------------*/
     #middle-top {
     	background: url(http://www.elucid8web.com/sep/graphics/middle-top.jpg) no-repeat;
     	width: 740px;
     	height: 21px;
     }
     #middle-sides {
     	background: url(http://www.elucid8web.com/sep/graphics/middle-sides.jpg) repeat-y; 
     	width: 740px;
     }
     #middle {
     	background: #FFFFFF;
     	width: 670px;
     	margin: auto;
     }
     #middle-bottom {
     	background: url(http://www.elucid8web.com/sep/graphics/middle-bottom.jpg) no-repeat;
     	width: 740px;
     	height: 29px;
     	clear: both;
     }
     #left {
     	float: left;
     	display: inline;
     	width: 520px;
     }
     #right {
     	margin-left: 530px;
     }
     
     
     /* Home
     ------------------------------------------------------------------*/
     #patrons {
     	background: url(http://www.elucid8web.com/sep/graphics/patrons.jpg) no-repeat;
     	width: 520px;
     	height: 185px;
     	text-indent: -9999px;
     }
     .line-diag {
     	background: url(http://www.elucid8web.com/sep/graphics/line_diag.jpg) repeat-x;
     	height: 5px;
     	margin: 15px 0 15px 0;
     }
     #left01 {
     	float: left;
     	background: #DDDADE;
     	width: 250px;
     	height: 245px;
     }
     .casestudy-pic {
     	background: #DDDADE url(http://www.elucid8web.com/sep/graphics/classroom.jpg) no-repeat;
     	height: 145px;
     }
     .casestudy {
     	font-size: 1.1em;
     	line-height: 1.5em;
     	color: #333333;
     	margin: 8px 10px 5px 10px;
     	text-align: left;
     }
     .more a {
     	float: right;
     	font-size: 1.1em;
     	line-height: 1.5em;
     	color: #5CA526;
     	font-weight: bold;
     	text-align: right;
     	margin: 0 10px 2px 0;
     	padding: 0;
     }
     .more a:hover{
     	color: #666666;
     }
     #left02 {
     	width: 250px;
     	margin-left: 260px;
     }
     #video {
     	background: #999999;
     	height: 186px;
     	margin: 0 0 14px 0;
     }
     /*
     #box01 a {
     	background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack.jpg) no-repeat;
     	width: 250px;
     	height: 45px;
     	text-indent: -9999px;
     }
     #box01 a:hover {
     	background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack_f2.jpg) no-repeat;
     }
     */
     #box01 a { display: block; cursor: pointer; }
     #box01 a, #box01 a em { width: 250px; height: 45px; }
     #box01 a em { background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack.jpg) no-repeat; }
     #box01 a:hover { background: none; }
     #box01 a:hover em { background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack_f2.jpg) no-repeat; }
     
     /* image replacement general properties */
     .IR { 
     	position: relative;
     	overflow: hidden;
     	font-size: 12px;
     }
     		
     .IR em {
     	display: block;
     	position: absolute;
     	top: 0; left: 0;
     	z-index: 1;
     }
     
     
     /* Pages
     ------------------------------------------------------------------*/
     
     
     
     
     
     
     /* Right column
     ------------------------------------------------------------------*/
     #thumbs-up {
     	background: url(http://www.elucid8web.com/sep/graphics/thumbs_up.jpg) no-repeat;
     	height: 347px;
     	text-indent: -9999px;
     }
     #logo-hopehiv {
     	background: url(http://www.elucid8web.com/sep/graphics/logo_hopehiv.jpg) no-repeat;
     	height: 64px;
     	text-indent: -9999px;
     }
     
     
     /* Footer
     ------------------------------------------------------------------*/
     #footer {
     	background: url(http://www.elucid8web.com/sep/graphics/footer.jpg) repeat-y;
     	width: 740px;
     	height: 100px;
     }
     #design a {
     	background: url(http://www.elucid8web.com/sep/graphics/design.jpg) no-repeat;
     	height: 9px;
     	width: 100px;
     	float: right;
     	margin: 6px;
     	text-indent: -9999px;
     }
     #design a:hover {
     	background: url(http://www.elucid8web.com/sep/graphics/design_f2.jpg) no-repeat;
     }
     </style>
     </head>
     
     <body>
     <div id="container">
     <div id="header">
     	<h1>SEP - Social Entrepreneurs Project</h1>
     	<ul id="nav-top">
     
     	  <li id="nav-top-home"><a href="http://www.elucid8web.com/sep/default.htm">SEP 
     		Home</a></li>
     	  <li id="nav-top-contact"><a href="http://www.elucid8web.com/sep/contact.htm">SEP 
     		Contact details</a></li>
     	</ul>
     </div>
     
     <ul id="nav">
     	<li id="nav-what"><a href="http://www.elucid8web.com/sep/what.htm">What is the SEP?</a></li>
     	<li id="nav-story"><a href="http://www.elucid8web.com/sep/story.htm">The Background Story</a></li>
     
     	<li id="nav-testimonials"><a href="http://www.elucid8web.com/sep/testimonials.htm">Testimonials</a></li>
     	<li id="nav-casestudy"><a href="http://www.elucid8web.com/sep/resources.htm">Case Study</a></li>
     	<li id="nav-who"><a href="http://www.elucid8web.com/sep/who.htm">Who are HOPEHIV?</a></li>
     </ul>
     <div id="nav-shadow"></div>
     
     <div id="middle-top"></div>
     
     <div id="middle">
     
     	<div id="left"> 
     	  <div id="patrons">Patrons - Lewis Moody MBE and Claire Connor OBE</div>
     
     	  <div class="line-diag"></div>
     	  <div id="left01"> 
     		<div class="casestudy-pic"></div>
     		<div class="casestudy">A preparatory school in Kent raises over 12000 
     		  for the SEP helping to rebuild a school and fund innovative art and 
     		  drama therapy for African children.</div>
     		<div class="more"><a href="http://www.elucid8web.com/sep/case_study.htm">Read 
     		  about how they did it...</a></div>
     	  </div>
     	  <div id="left02"> 
     		<div id="video">Video file to go in here</div>
     
     		<div id="box01" class="IR"><a href="#"><em></em>Click here to download a copy of the SEP Resource 
     		  Pack</a></div>
     	  </div>
     	</div>
     
     
     <div id="right"><img src="http://www.elucid8web.com/sep/graphics/thumbs_up.jpg" alt="african boy with thumbs up">
     	<div class="line-diag"></div>
     	<div id="logo-hopehiv">HOPEHIV - SEP is an initiative of HOPEHIV. Registered charity number 1079385</div>
     </div>
     
     </div>
     
     <div id="middle-bottom"></div>
     
     <div id="footer">
     <div id="design"><a href="http://www.elucid8.co.uk">Design : Elucid8</a></div>
     </div>
     
     </div>
     </body>
     </html>
    By the way, your doctype was incomplete.

  9. #9
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tranfered all your code into my document but it doesn't seem to have made any difference.

    Thanks for trying.

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a page on my server with the code i posted above. It seems to me that it looks pretty much the same in FF & IE and removes the unwanted space in IE which you referred to in your first post. If that's not what was wanted, you'll need to explain why not.

  11. #11
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tyssen - Thanks. Just copied the CSS from that site and dropped it into my one. Works perfectly in removing the white space at the bottom. The only difference is that the margin between the classroom photo and the space for the video file is smaller in IE.

    Thanks again for your help.
    Last edited by bazzablue; Oct 11, 2006 at 02:05.

  12. #12
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you mean. Smaller than what? What do you want it to be?

  13. #13
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tyssen - Sorry should have made that clearer. The margin between the classroom photo and the space for the video file is smaller in Firefox than it is in IE.

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if you wanted to you could use an IE-only filter (like * html #left02) or conditional comments to give IE a different left margin from other browsers, but one thing I've learned from working with CSS is to be a bit more forgiving about a few pixels difference between browsers.

  15. #15
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll take your advice on board.

    Thanks for your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •