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/photo/OBtpNsMdRzMhcGVHL8-gAUNFYQhKyptfZbmOkLZ7v7s?feat=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…
ralphm
May 21, 2011, 12:14am
2
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.
its a 2000 x 2000 image…have you tried zooming in on the image…within the google web application… its designed for viewing images
Ah, I see. Still, to test that code I’d need to type it all out again, when you could just post it here.
i use javascript to create the page elements, if you need the object oriented javascript code… let use know…
.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;
}
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.
heres everything… just copy paste and run it…i have tested it… the problem is still there…thanks
<!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>
Hmmm, with that code you posted, the layout looks fine in IE8 (see screen shot).
oh okay am still using XP…is there a way to test css on different operating systems from one machine…this stuff never ends
PaulOB
May 21, 2011, 9:09am
12
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.
<div class="css_panel01" id="kompanel01">
<div class="css_titleBar02" id="komtitleBar02">
[B] <input title="Close" class="css_removebtn10" id="komremovebtn10" value="X" type="Submit">
<input title="Minimize" class="css_hidebtn06" id="komhidebtn06" value="_" type="Submit">[/B]
<img src="" class="css_photo03" id="komphoto03" height="43" width="33">
<label class="css_titlelabel04" id="komtitlelabel04">komachi</label>
floats always come first…yep cheers, thanks man it works now