• Locked
No replies
Fri, 2013-05-03 18:47
wannabe
wannabe's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT-7
Joined: 2009-04-20
Posts: 4
Points: 12

Can someone tell me why the left of my editorDiv is different in Chrome and IE...besides the fact that IE is not standards compliant Smile Specifically I set the left of editorDiv to 275 and it is in different in each browser. I, of course, need them to be the same. Can someone tell me what needs to change to fix this?

Markup

	<div id="theme-container">
		<div id="banner">
			<img id="logoImage" class="draggable" src="<%=sLogoFile %>" />
			<div id="titleDiv" class="draggable"><label id="title">Team Title Here</label></div>
			<div id="subtitleDiv"><label id="subtitle">Team subtitle that might be really really long</label></div>
		</div>
		<div id="editorDiv">
			<h3>Currently editing: Title</h3>
			<div id="tools-container">
				<div id="fontButtonsDiv">
					<div class="btn-group">
						<button id="decreaseTitle" class="btn decreaseFont" title="smaller"><i class="icon-font awesomeFont" style="font-size:9px;"></i></button>
						<button id="increaseTitle" class="btn increaseFont" title="larger" ><i class="icon-font awesomeFont" style="font-size:14px;"></i></button>
					</div>
					<div class="btn-group">
						<button class="btn alignTitle" title="align left"><i class="icon-align-left awesomeFont"></i></button>
						<button class="btn alignTitle" title="align center"><i class="icon-align-center awesomeFont"></i></button>
						<button class="btn alignTitle" title="align right"><i class="icon-align-right awesomeFont"></i></button>
					</div>
					<div class="btn-group">
						<button class="btn btn-info resetTitle" title="reset title"><i class="icon-undo awesomeFont"></i></button>
					</div>
				</div>
				<div id="titleInputDiv">
					<input id="titleInput" class="input-xlarge" type="text" value="Team Title Here" />
				</div>
				<div id="typeFaceDiv">
					<label>Type Face:</label>
					<select id="titleFontFamilySelector" style="margin-top:5px;">
						<option value="Select">-- Select --</option>
						<option value="Arial">Arial</option>
						<option value="Algerian">Algerian</option>
						<option value="Cubano">Cubano</option>
						<option value="Outage">Outage</option>
						<option value="Homestead">Homestead</option>
					</select>
				</div>
				<div id="colorSelectorDiv">
					<label style="margin-bottom:5px;">Color:</label>
					<input id="titleColorSelector" class="colorSelector" type='text' />
				</div>
			</div>
		</div>
	</div>

CSS

#theme-container {
	background-image: url(Images/themeroller1.png);
	background-repeat:no-repeat;
	background-position: center top;
	height:100%;
}
 
#banner {
	position: relative;
	margin: 0 auto 0 auto;
	height: 250px;
	width: 1000px;
	border: solid 2px pink;
}
 
#logoImage {
	position: absolute;
	top: 79px;
	left:0px;
}
 
#titleDiv {
	position: absolute;
	top: 69px; 
	left:180px;
}
 
#title {
	font-size: 72px;
	font-family: 'Times New Roman';
	color:#fff;
	white-space: nowrap;	/* As the user moves the title around, we do not want the title to wrap. */
}
 
#subtitleDiv {
	position: absolute;
	top: 129px; 
	left:180px;
}
 
#subtitle {
	font-size: 18px;
	font-family: 'Times New Roman';
	color:#fff;
	white-space: nowrap;
}
 
/* Overall container for the tool section */
#editorDiv {
	position: absolute;
	top: 335px;
	left: 275px;
	width: 450px;
	border: solid 2px silver;
	padding: 10px;
}
 
#titleInputDiv {
	top: 79px;
	left: 180px;
	clear: both;
	float: left;
}
 
#titleInput {
	margin-top:5px;
	width: 400px;
	height:32px; 
}
 
#fontButtonsDiv {
	float: left;
	vertical-align: top;
	padding-left:5px;
}
 
#typeFaceDiv {
	clear: both;
}
 
 .awesomeFont {
	font-size:12px;
	line-height: 16px;
}
 
.btn-grp{
	padding-right: 1px; 
}
 
/*.full-spectrum .sp-palette {
	max-width: 200px;
}*/

Top
Tags: