williamrouse Posted September 4, 2011 Report Share Posted September 4, 2011 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] Quote Link to comment Share on other sites More sharing options...
Wickham Posted September 5, 2011 Report Share Posted September 5, 2011 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> Quote Link to comment Share on other sites More sharing options...
williamrouse Posted September 5, 2011 Author Report Share Posted September 5, 2011 I added magin 0, and padding 0 to each of the three DIVs and that worked. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.