Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Floating right inside DIV. IE problem.

    I'm having this problem with IE. It just completely breaks when I view it in IE.

    What i'm trying to do is make a lesson viewing type thing. Where it's a div box that contains a title box, a description box, and a floating box which contains links to the questions and lesson.

    The floating div box is giving me trouble.

    This is my HTML.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" href="css/base.css"  type="text/css">
    <link rel="stylesheet" href="css/lesson.css"  type="text/css">
    </head>
    <body>
    <div class="main">
    <div class="header">test</div>
    	<div class="content">
    				<div class="lesson_box">
    					<div class="lesson_title"><a href="questions.php?id=2">Morbi vel erat non justo venenatis rutrum. Vivamus in sem.</a></div>
    						<div class="lesson_desc">
    						dolor vel enim. Pellentesque sagittis. Etiam tristique tincidunt mi. In quis lectus. Donec vulputate turpis in pede. Quisque tellus sapien, convallis ac, porttitor sit amet, egestas et, est. Duis varius suscipit turpis. Etiam placerat nibh eget massa bibendum rutrum. Phasellus ante. 
    					<div style="float: right; border: 1px solid #fa0; border-bottom-width: 0px; border-right-width: 0px; padding: 5px;">test</div>
    					<div style="clear: both;"></div>					
    					</div>
    				</div>
    	</div>
    	<div class="footer">A bunch of crappy copyright stuff</div>
    
    </div>
    </body>
    </html>
    This is my CSS.

    Code:
    .lesson_box{
    	background: #ccc;
    	border: 1px solid #999;
    	border-bottom-width: 0px;
    	margin-bottom: 10px;
     }
    .lesson_title{
    	font-size: 18px; 
    	font-weight: bold; 
    	background-color: #aaa; 
    	border: 1px solid #999; 
    	padding: 5px;
    }
    .lesson_title a{
    	text-decoration: none;
    	color: #3d4b6e;}
    .lesson_desc{
    	padding: 10px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    }
    The CSS for the floating right box is contained within the HTML because I was just testing it.

    And preferably if the problem is simple enough I'd like the floating div box to not go to a new line and instead kind of stick itself in the description. So the description flows around it.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Where exactly do you want that link div?
    .
    .

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    On the right bottom within the description.

  • #4
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any ideas?

    Edit: nevermind I fixed it.

    New CSS:

    Code:
    .lesson_box{
    	margin-right: auto;
    	margin-left: auto;
    	width: 95%;
    	background: #ccc;
    	border: 1px solid #999;
    	border-bottom-width: 0px;
    	margin-bottom: 10px;
     }
    .lesson_title{
    	font-size: 18px; 
    	font-weight: bold; 
    	background-color: #aaa; 
    	border: 1px solid #999; 
    	padding: 5px;
    }
    .lesson_title a{
    	text-decoration: none;
    	color: #3d4b6e;}
    .lesson_desc{
    	padding: 10px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    }
    Needed to specify a width.
    Last edited by Saurdo; 08-02-2007 at 10:04 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •