SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation css float: right in IE8 Problem

    I have a problem with css float: right property in IE8 works fine in fire fox...i have uploaded a screen shot to google photos...to help explain my problem...here is a direct link to the image...that points out the problem i have...click on the zoom icon

    https://picasaweb.google.com/lh/phot...eat=directlink

    i would like to know how i can get the to button elements...in the IE8 example, looking like the proper fire fox example....

    any help would be appreciated thanks...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi LeeHarvey2011. Welcome to SitePoint.

    For me, that screen shot is too small to read, even magnified. Ideally, post a link, or at least make up a working test page and post the code for that here.

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its a 2000 x 2000 image...have you tried zooming in on the image...within the google web application... its designed for viewing images

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Ah, I see. Still, to test that code I'd need to type it all out again, when you could just post it here.

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use javascript to create the page elements, if you need the object oriented javascript code... let use know...
    but this the css code am workin with...thanks


    Code CSS:
    .css_panel01 
    {
    	height: auto;
    	width: 800px;
    	border: 1px solid #000000;
    	padding: 5px;
    	margin:5px;
    	background-color: transparent;
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
    	zoom: 1;
    	background-color: RGBA(0, 0, 0, 0.2);
    	border: 1px solid #FFFFFF;
    }
     
    .css_titleBar02
    {
    	height: 55px;
    	width: 800px;
    	border: 1px outset #333333;
     
    	}
     
    .css_photo03
    {
    	height: 43px;
    	width: 33px;
    	border: 1px solid #666666;
    	vertical-align:middle;
    	margin: 5px;
     
    }
     
    .css_titlelabel04
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 25px;
    	font-weight: bolder;
    	color: #E1E1E1;
    	margin: 5px;
    	padding: 5px;	
    }
     
    .css_panelBody05
    {
    	margin: 3px;
    	padding: 3px;
    	height: 500px;
    	width: auto;
    	border: 1px outset #333333;
    }
     
    .css_labels
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #FFFFFF;
    	margin: 5px;
    	padding: 5px;
     
    }
     
    .css_hidebtn06
    {
    	width: 30px;
    	height:30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	color: #FFFFFF;
    	background-color: #CC3366;
    	border: 1px solid #FFFFFF;
    	float:right;
    	margin: 5px;
    	padding: 5px;
     
    }
    .css_removebtn10
    {
     
    	width: 30px;
    	height:30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	color: #FFFFFF;
    	background-color: #CC3366;
    	border: 1px solid #FFFFFF;
    	margin: 5px;
    	padding: 5px;
    	float:right;
     
     
    }
     
    .CountText{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    We also need the HTML that goes with that. Ideally, create a test page with the HTML and CSS together (CSS in the head) so that we can easily test the page and suggest a solution.

  7. #7
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres everything... just copy paste and run it...i have tested it... the problem is still there...thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css" rel="stylesheet" media="all" >
    .css_panel01 
    {
    	height: auto;
    	width: 800px;
    	border: 1px solid #000000;
    	padding: 5px;
    	margin:5px;
    	background-color: transparent;
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
    	zoom: 1;
    	background-color: RGBA(0, 0, 0, 0.2);
    	border: 1px solid #FFFFFF;
    }
    
    .css_titleBar02
    {
    	height: 55px;
    	width: 800px;
    	border: 1px outset #333333;
    
    	}
    	
    .css_photo03
    {
    	height: 43px;
    	width: 33px;
    	border: 1px solid #666666;
    	vertical-align:middle;
    	margin: 5px;
    	
    }
    
    .css_titlelabel04
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 25px;
    	font-weight: bolder;
    	color: #E1E1E1;
    	margin: 5px;
    	padding: 5px;	
    }
    
    .css_panelBody05
    {
    	margin: 3px;
    	padding: 3px;
    	height: 500px;
    	width: auto;
    	border: 1px outset #333333;
    }
    
    .css_labels
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #FFFFFF;
    	margin: 5px;
    	padding: 5px;
    
    
    }
    
    
    
    .css_hidebtn06
    {
    	width: 30px;
    	height:30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	color: #FFFFFF;
    	background-color: #CC3366;
    	border: 1px solid #FFFFFF;
    	float:right;
    	margin: 5px;
    	padding: 5px;
    	
    }
    .css_removebtn10
    {
    	
    	width: 30px;
    	height:30px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	color: #FFFFFF;
    	background-color: #CC3366;
    	border: 1px solid #FFFFFF;
    	margin: 5px;
    	padding: 5px;
    	float:right;
    
    	
    }
    
    .CountText{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    }
    
    </style>
    </head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Content View Component TestCase</title>
    <body>
    <script language="javascript" type="text/javascript">
    
    
    
    
    
    
    
    
    	
    	function ContentView(tlbl,uid,vc)
    	{
    	this.title = tlbl; /* Name of content*/
    	this.uId = uid; /* unique identifier*/
    	this.videoCount = vc;
    	}
    	
    	ContentView.prototype.exe = function()
    	{
    	
    	
    	
    //	var titlelabel
    //	var vCountLabel
    //	var iCountLabel
    //	var titleBar
    //	var hidebtn
    //	var closeBtn
    //	var editBtn
    //	var showbtn
    //	var panel
    //	var panelBody
    //	var imagePanel
    //	var videoPanel
    //	var favoritePanel
    //	var editPanel
    	
    //	var  = document.createElement("");
    //		.id = "";
    //		.className = "css_titlelabel04";
    
    	var oThis = this;
    	var ui = this.uId;
    	
    	var panel = document.createElement("div");
    		panel.id = this.uId + "panel01";
    		panel.className = "css_panel01";
    		
    	var titleBar = document.createElement("div");
    		titleBar.id = this.uId + "titleBar02";
    		titleBar.className = "css_titleBar02";
    		
    	var photo = document.createElement("img");
    		photo.id = this.uId + "photo03";
    		photo.className = "css_photo03";
    		photo.src = "";
    		photo.width = 33;
    		photo.height = 43;
    		
    	var titlelabel = document.createElement("label");
    		titlelabel.id = this.uId + "titlelabel04";
    		titlelabel.className = "css_titlelabel04";
    		titlelabel.innerHTML = this.title;
    		
    	var panelBody = document.createElement("div");
    		panelBody.id = this.uId + "panelBody05";
    		panelBody.className = "css_panelBody05";
    
    	var hidebtn = document.createElement("input");
    		hidebtn.type = "Submit";
    		hidebtn.value = "_";
    		hidebtn.id = this.uId + "hidebtn06";
    		hidebtn.className = "css_hidebtn06";	
    		hidebtn.title = "Minimize";
    		hidebtn.onclick = function()
    		{
    			oThis.hideElement(ui + "panelBody05");
    			hidebtn.value = "[ ]";
    			hidebtn.title = "Double click to Maximize";
    			
    		}
    		hidebtn.ondblclick = function()
    		{
    			oThis.showElement(ui + "panelBody05");
    			hidebtn.value = "_";
    			hidebtn.title = "Minimize";
    			
    		}
    		
    	var removebtn = document.createElement("input");
    		removebtn.type = "Submit";
    		removebtn.value = "X";
    		removebtn.id = this.uId + "removebtn10";
    		removebtn.className = "css_removebtn10";	
    		removebtn.title = "Close";
    		removebtn.onclick = function()
    		{
    			oThis.removeElement(ui + "panel01");
    		}
    	
    	
    	var vCountText = document.createElement("span");
    		vCountText.id = "vCountText11";
    		vCountText.className = "CountText";
    		vCountText.innerHTML = 7787878;
    		
    	var iCountText = document.createElement("span");
    		iCountText.id = "iCountText11";
    		iCountText.className = "CountText";
    		iCountText.innerHTML = 7787878;
    		
    	var pCountText = document.createElement("span");
    		pCountText.id = "pCountText11";
    		pCountText.className = "CountText";
    		pCountText.innerHTML = 7787878;
    		
    		//Video label
    	var vCountLabel = document.createElement("label");
    		
    		vCountLabel.id = "vCountLabel07";
    		vCountLabel.className = "css_labels";
    		vCountLabel.innerHTML = "Videos :" + " " ;
    		
    		//Image label
    	var iCountLabel = document.createElement("label");
    		iCountLabel.id = "iCountLabel08";
    		iCountLabel.className = "css_labels";
    		iCountLabel.innerHTML = "Images :";
    		
    		//Photosets label
    	var pCountLabel = document.createElement("label");
    		pCountLabel.id = "pCountLabel09";
    		pCountLabel.className = "css_labels";
    		pCountLabel.innerHTML = "Photosets :";
    	
    		//Append all objects to document
    		var panelObjects = new Array(titleBar,panelBody); 
    		var titleBarObjects = new Array(photo,titlelabel,iCountLabel,iCountText,pCountLabel,pCountText,vCountLabel,vCountText,removebtn,hidebtn);
    		for(var i = 0; i < panelObjects.length; i++)
    		{
    			panel.appendChild(panelObjects[i]);
    		}
    		for(var i = 0; i < titleBarObjects.length; i++)
    		{
    			titleBar.appendChild(titleBarObjects[i]);	
    		}
    		document.body.appendChild(panel);	
    	}
    	
    	ContentView.prototype.hideElement = function(eId)
    	{
    		var element = document.getElementById(eId);
    		element.style.display = "none";
    	}
    	
    	ContentView.prototype.showElement = function(eId)
    	{
    		var element = document.getElementById(eId);
    		element.style.display = "block";
    	}
    	
    	ContentView.prototype.removeElement = function(eId)
    	{
    		var element = document.getElementById(eId);
    		document.body.removeChild(element);
    	}
    	
    	ContentView.prototype.titleBarDataManager = function(eId)
    	{
    //		var dataManager new Array();
    //			dataManager["images"] = 
    //			dataManager["photosets"] =
    //			dataManager["videos"] = 
    //			dataManager["photo"] =
    			
    			
    	}
    </script>
    <script language="javascript" type="text/javascript">
    var cv01 = new ContentView("komachi","kom",14);
    var cv02 = new ContentView("Title header","har",3121);
    cv01.exe();
    cv02.exe();
    </script>
    </body>
    </html>
    Last edited by ralph.m; May 20, 2011 at 20:47. Reason: added code tags

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hmmm, with that code you posted, the layout looks fine in IE8 (see screen shot).
    Attached Images Attached Images

  9. #9
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what OS you using...

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    IE8 on Win7

  11. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh okay am still using XP...is there a way to test css on different operating systems from one machine...this stuff never ends

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

    There's no problem in IE8 xp either.

    You are probably viewing in quirks mode (no doctype) or something similar.

    The problem exists in IE7 and under though because of the way you have constructed it. In IE7 and under (and IE in quirks mode) floats must always come first before the content you want then to wrap with.

    When you place a float it first creates a new line in IE7 and under and then either floats left or right from there. In good browsers however when you float an item it only creates a new line when there is a block level element before it. If you place a float on the same line as inline content then the inline content on that single lie is shifted either left or right out of the way of the float.

    Therefore to satisfy all browsers you need to make sure that floats always come first.

    e.g.
    Code:
    <div class="css_panel01" id="kompanel01">
        <div class="css_titleBar02" id="komtitleBar02">
            <input title="Close" class="css_removebtn10" id="komremovebtn10" value="X" type="Submit">
            <input title="Minimize" class="css_hidebtn06" id="komhidebtn06" value="_" type="Submit">
            <img src="" class="css_photo03" id="komphoto03" height="43" width="33">
            <label class="css_titlelabel04" id="komtitlelabel04">komachi</label>

  13. #13
    SitePoint Member
    Join Date
    May 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    floats always come first...yep cheers, thanks man it works 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
  •