Jump to content
Stef's Coding Community
williamrouse

another CSS position help

Recommended Posts

Below is the visual framework for a practice slide show I am tutoring my self with. In webkit browsers and Firefox I get the controls to line up correctly, but on IE8 the far right control drops out and goes lower than I would expect.I have attached the code and some images in hopes that some one can suggest what I am doing incorrectly.Thanks!

[/size][/font][font="Arial"][size="2"]<!doctype html>
<!--
Practice jQuery slider and gallery
-->
<html>
<head>
   	<title>Practice jQuery slider and gallery</title>
   	<style>        	html, body{
           	width: 100%;
           	height: 100%;
           	margin: 0 auto;
           	font-family: 'PT Sans Narrow', Arial, sans-serif;
           	font-size:12px;
           	background-color: #DEDEDE;
           	color: red;
       	}        	#header{
           	margin: 0 auto;
           	width: 860px;
           	height: 95px;
           	background-color: #FAF6FA;
           	background: #ffffff;
       	}        	#container{
           	position: absolute;
           	top: 0px;
           	left: 80px;
           	margin: 0 auto;
           	width: 885px;
           	height: 970px;
           	background-color: #EFEFEF;
           	border-style:solid;
           	border-width:1px;
           	border-color: silver;
       	}        	#slideShowBox{
           	position: relative;
           	width: 640px;
           	height: 480px;
           	margin: 150px auto 0;
           	background-color: #F5F5F5;
           	border:1px solid #FFFFFF;            	-moz-box-shadow:0 0 22px #111;
           	-webkit-box-shadow:0 0 22px #111;
           	box-shadow:0 0 22px #111;
       	}
       	#slideShowBoxControlls{
           	position: relative;
           	width: 640px;
           	height: 34px;
           	margin: 1px auto 0;
           	border: 1px solid red;
       	}        	#descriptionBox{
           	width: 555px;
           	height: 32px;
           	padding-left: 5px;
           	display: inline-block;
           	color: black;
           	border: 1px solid black;
       	}        	#arrowLeft{
           	background: url('cssimages/arrowLeft.png') no-repeat;
           	width: 32px;
           	height: 32px;
           	border: 1px solid green;
           	display: inline-block;
           	float: left;
       	}        	#arrowRight{
           	background: url('cssimages/arrowRight.png') no-repeat;
           	width: 32px;
           	height: 32px;
           	border: 1px solid green;
           	display: inline-block;
           	float: right;
       	}
       	h1{
           	font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
           	text-align: center;
           	padding-top: 10px;
       	}
   	</style>
</head>
<body>
   	<div id="container">
       	<div id="header">
           	<h1>Practice jQuery Slider and Gallery</h1>
       	</div>
       	<div id="slideShowBox">        	</div>
       	<div id="slideShowBoxControlls">
           	<div id="arrowLeft"></div>
           	<div id="descriptionBox"> </div>
           	<div id="arrowRight"></div>
       	</div>
   	</div>
</body>
</html>[/size][/font][font="Arial"][size="2"][font="Arial"][size="2"]
[font="Arial"][size="2"][font="Arial"][size="2"][/size][/font][/size][/font]

[/size][/font]

post-14261-089415000 1315168007_thumb.png

post-14261-049686900 1315168019_thumb.png

Share this post


Link to post
Share on other sites

First of all, get rid of everything in front of the doctype and everything after the </html> tag.

 

Your div markup is

<div id="arrowLeft"></div>
<div id="descriptionBox"> </div>
<div id="arrowRight"></div>

where the description box is betaween a float: left and a float: right but hasn't got a float for itself. Try adding float: left to #descriptionBox.

 

Alternatively if a div hasn't got a float and you want it to move up between two floated divs, then the unfloated div should be last so that the floated divs go to their positions and the unfloated div moves up into the space

<div id="arrowLeft"></div>
<div id="arrowRight"></div>
<div id="descriptionBox"> </div>            	

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...