SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot snomag's Avatar
    Join Date
    Apr 2006
    Location
    Reading
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing differences in IE and FF

    Greetings!

    I ran into 2 kinda disturbing problem while I was playing around with CSS and I can't solve them, so I'm asking for help.
    So, the first problem's with the IE, as you can see on this picture, the 'footer' of the portlet doesn't really fit the end of the lines and I don't really understand why, becouse they're ok in FF.
    My second problem's with the whole middle section, that starts where I'm expecting it to start in IE, but in FF it has a small space between the content and the header.
    You can find the CSS for the page here and the HTML code looks something like this:
    Code:
        <div class="wrapper">
                <div class="header"></div>
                <div class="content">
                    <div class="contentleft">
                        <div class="portlet"> portlet 6.5os margin lefttel<br /><br />
                            <div class="portletcontent">
                                ide meg jon valami szoveg, ami a portlet tartalma
                            </div>
                            <div class="portletfooter"></div>
                        </div> <!-- End of portlet -->
                        <br /><br />
                        contentleft
                    </div> <!-- End of left content menu -->
                    <div class="contentright">
                        contentright
                    </div> <!-- End of right content menu -->
                    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                    </asp:contentplaceholder>
                </div> <!-- End of content-->
             <div class="clearfooter"></div>
        <div class="footer"></div>
        </div>
    If anyone could direct me to the right way, where to search for the problem it'd be really apprechiated.
    Thanks
    Adam

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Adam

    I can't say I've really figured it out but you might want to try adding
    margin: 0;
    to the relevant divs, rather than just applying it to html and body.

    If it doesn't work you'll have to wait for a real expert!

    Cheers
    fisherboy
    Web Site Design

  3. #3
    SitePoint Zealot snomag's Avatar
    Join Date
    Apr 2006
    Location
    Reading
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks fisherboy, the second problem's solved now But the first's still bothering me

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you still there? Is your bottom image gradiented or is it a solid colour??

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Too late...i cannot wait..need to get on with work...sorry dude

  6. #6
    SitePoint Zealot snomag's Avatar
    Join Date
    Apr 2006
    Location
    Reading
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe it's the box model problem in IE? If so, how could I correct it? (I just read an article but couldn't figure it out..)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It will only be a box model issue if you are not using a correct doctype or are using ie5.+. The faq on the box model explains this in detail so I won't repeat it here.

    I am guessing your problem is that the height of your element is only 14 px but ie won't render an element less thatn the current font-size unless you use overflow hidden or reduce the font-size.

    Try This.
    Code:
    .portletfooter
    {
    height:14px;
    background-image: url(images/portlet_end.gif) ;
    background-repeat:no-repeat;
    background-position:bottom;
    width:237px;
    overflow:hidden;
    }
    If you had placed the image at background-position:top you probably wouldn't have noticed anyway

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Try this, set default padding and margins to 0
    * {padding:0;margin:0;}

    100% high model ? content controled height model ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100%;}
    	
    	* {padding:0;margin:0;}
    
    	body{
    	text-align:center;
    	background:#575757;
    	}
    	
    	head+/**/body .fc:after{
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/* End hide */
    	
    	.wrapper {
    	min-width:1000px;
    	width:1000px;
    	margin:0 auto;
    	position:relative;
    	background:#ffffcc url(images/page_bg.jpg) center repeat-y;
    	text-align:left;
    	}
    	/* html .wrapper{height:100%;}
    	head+body .wrapper{min-height:100%;}*/
    	
    	.header{
    	height:143px;
    	background:#ccffff url(images/header.jpg) no-repeat center;
    	}
    	
    	.content{
    	margin: 0 257px 0 257px;
    	border-left:1px solid #000;
    	border-right:1px solid #000; 
    	width:484px;
    	}
    	* html .content{height:1%;}
    	
    	.contentleft,.contentright{
    	position:relative;
    	float:left;
    	margin:0 0 0 -251px;
    	width:250px;
    	background:Aqua;
    	}
    
    	.contentright{
    	float:right;
    	margin:0 -251px 0 0;
    	}
    
    	/**********************************/
    	/*			  PORTLETS			  */
    	/**********************************/
    	.portlet{
    	margin-left:6.5px;
    	}
    	
    	.portletcontent {
    	width:235px;
    	border-left: 1px solid #375779;
    	border-right: 1px solid #375779;
    	}
    	.portletfooter{
    	height:14px;
    	background:#ff6600 url(images/portlet_end.gif) no-repeat bottom;
    	width:237px;
    	}
    
    /**********************************/
    /*			  FOOTER			  */
    /**********************************/
    	.clearfooter {
    	clear:both;
    	height:31px;
    	width:100%;
    	}
    	
    	.footer {
    	position:absolute;
    	bottom:0;
    	height:31px;
    	background:#ccffcc url(images/page_bottom.jpg) no-repeat center;
    	width:100%;
    	}
    
    /*
    belso div felosztasok:
    250px szeles a 2 oldalara
    1001-7-7-250-250 = 487 px kozepre
    megvalositasi tervek:	1, kozepre egy div, abbol a 2 szelere kihuzzuk a 2 oldalso menusort?
    						2, 3 div float: lefttel
    */
    
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div class="wrapper">
    
    <div class="header"></div>
    
    <div class="content fc">
    
    <div class="contentleft">
    <div class="portlet">portlet 6.5os margin lefttel<br /><br />
    
    <div class="portletcontent">ide meg jon valami szoveg, ami a portlet tartalma</div>
    
    <div class="portletfooter">xxxxx</div>
    
    </div> <!-- End of portlet -->
    <br /><br />
    contentleft
    <div class="clearfooter"></div>
    </div> <!-- End of left content menu -->
    
    <div class="contentright">contentright
    
    <div class="clearfooter"></div>
    </div> <!-- End of right content menu -->
    <!-- 
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder> -->
    
    <div class="clearfooter"></div>
    </div> <!-- End of content-->
    
    <div class="footer"><p>footer</p></div>
    	
    </div> 
    
    </body>
    </html>

  9. #9
    SitePoint Zealot snomag's Avatar
    Join Date
    Apr 2006
    Location
    Reading
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am guessing your problem is that the height of your element is only 14 px but ie won't render an element less thatn the current font-size unless you use overflow hidden or reduce the font-size.
    Thanks Paul, that's soemthing I didn't know (and hopefully I won't forget) it really helped and thanks for all4nerds too, for correcting a few things in my dirty little css code
    You guys're great, thanks again. It's working as expected now


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
  •