SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Error - A possible double margin error? Not fixed by display:inline

    Hi there,

    Please take a look at http://www.jh-webdesign.co.uk/projects/dmb/site/ in IE.

    You will notice that the image, which reads 'Site News' is out of place and does not align with the other float:right element on the page, 'Album Selector'
    I thought that this could be a possible IE double margin error, so I used display:inline however this doesn't work.
    In Firefox and Opera, my page displays fine;

    Any ideas on how to get the 'Site News' element aligned to the right just like 'Album Selector'?

    My CSS is below:

    Code:
    *{margin:0px;padding:0;}
    	
    	body {margin-top:5px;background-color:#9191FF;}
    
    	div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
    
    	.container{
    	margin:0 auto;
    	width:615px;
    	background-color:#ffffff;}
    
    * html .main_container{height:1%;}
    
    /* FONT CLASSES */
    
    p {font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #9191ff;}
    
       .newsdate{font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #9191ff;
            font-weight:bold;}
       
       .newsbody{font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #9191ff;}
    
    
    .albumdate{font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #9191ff;
            font-weight:bold;margin-bottom:10px;}
    
    .linksbar{margin-top:6px;margin-left:35px;
             font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #ffffff;
            font-weight:bold;float:left;}
    
    .linksbar a{text-decoration:none;
                color: #ffffff; }
    
    
    /* BAND_NEWS.ASP */
    
    .news{font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	color: #9191ff;
            font-weight:bold; 
            margin-bottom:10px;}
    
    .date{font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #9191ff;
            font-weight:bold; 
            margin-bottom:5px;}
    
    #bandnews_contain{width:465px;margin-bottom:15px;}
    #bandnews_pic{width:150px:height:150px;float:left;margin-right:10px;margin-bottom:10px;}
    .bandnewsbody,.albumdescr{font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #9191ff;margin-bottom:25px;}
    
    /* OTHER RECENT NEWS */
    
    #otherrecentnews{float:left;display:inline;}
    #otherrecentnews_title{height:20px;background:url(images/band_news.asp_OtherRecentNews.png);margin-bottom:10px;}
    
    #otherrecentnews_container{width:120px;float:left;margin-left:13px;}
    
    
    
    
    
    
    
    head+body .container{overflow:hidden;}
    
    
    
    
    
    #header{
    background:url(images/header.png);height:112px;}
    
    #links{
    background:url(images/links.png);height:35px;}
    
    .main_container{margin:15px;}
    #main{}
    
    #opentext{height:70px;margin-bottom:20px;}
    
    /*----INDEX.HTML-----*/
    
    /*----NEWS-----*/
    
    #bandnew_contain{width:368px;float:left;margin-bottom:15px;float:left;}
    #bandnew_title{height:20px;background:url(images/bandnews_header.png);}
    #bandnew_asp{margin-top:5px;margin-left:4px;margin-right:4px;margin-bottom:20px;background-color:#eeeeee;}
    #bandnewpic{width:102px;height:102px;float:left;margin-right:7px;margin-bottom:3px;border:1px;clear:left}
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:inline-block;
    }
    /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	 .clearfix {display: block;}
    /* End hide */}
    #bandnewdate{width:200px;}
    
    #sitenew_contain{width:190px;float:right;margin-bottom:15px;display:inline;}
    #sitenew_title{height:20px;background:url(images/sitenews_header.png);}
    #sitenew_asp{margin-top:5px;margin-bottom:20px;}
    #sitenewdate{width:150px;}
    
    #albumselector_contain{width:190px;float:right;}
    #albumselector_title{height:20px;background:url(images/albumselector_header.png);margin-bottom:8px;}
    #albumselector_asp{margin-bottom:8px;float:left;margin-right:8px;}
    
    #footer{background:url(images/footer.png);height:37px;clear:both;position:relative;}
    
    #albumselector_album{margin-right:10px;margin-bottom:10px;float:left;}
    Kind Regards

    James

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried wrapping both right-hand div elements in a class but this didn't help and has forced out the right-hand div, 'albumselector_contain'. So this has to mean that its a double margin error within IE? However this still doesn't go away with display:inline. Any ideas?

    Kind Regards

    James

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think first, you need to sort out your double-use of the same id (bandnewdate).
    Then, remove this and you might be OK (maybe)...
    Code:
    #bandnewdate{width:200px;}


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
  •