SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout giving me major headache

    Ugh! I'm trying to lay something out with CSS positioning so it'll be fluid and resize/flow when the window is resized. But IE is giving me fits with one portion of it. I have an image that I've floated left and I then have categories (name, location, etc.) floated in <p>'s to the right (floated left) of that. In order to get the main div to expand down to enclose the entire image I'm forced to use a special <p style="clear: both;"></p> to get the div to extend down that far.

    Here is the relevant code:
    Code:
    <div id="main">
    	<div class="mainHeader">
    		<span class="mainHeaderText">User Profile for user</span> 
    	</div>
    	<div class="mainContent">
    		<img id="userPic" src="images/black.jpg" alt="user" />
    		<p class="main">
    			<span class="label">Name: </span><strong>Regular User</strong>
    		</p>
    		<p class="main">
    			<span class="label">Joined: </span>10/02/2002
    		</p>
    		<p class="main">
    			<span class="label">Location: </span>Hometown, Idaho -- United States
    		</p>
    		<p class="main">
    			<span class="label">Timezone: </span>(GMT -7:00 hours) Mountain Time (US &amp; Canada)
    		</p>
    		<p class="main">
    			<span class="label">Gender: </span>Male
    			<span class="label2">Age: </span>29
    		</p>
    		<p class="main">
    			<span class="label">Occupation: </span>n/a
    		</p>
    		<p class="main">
    			<span class="label">Interests: </span>Too many to list
    		</p>
    		<p class="main">
    			<span class="label">Notes: </span>Lots and lots of notes text here...
    			Lots and lots of notes text here...
    			Lots and lots of notes text here...
    			Lots and lots of notes text here...
    			Lots and lots of notes text here...
    			Lots and lots of notes text here..
    		</p>
    		<p style="clear: both;"></p>
    	</div>
    </div>
    Corresponding styles from external style sheet:
    Code:
    div#main {
    	position: absolute;
    	left: 190px;
    	right: 25px;
    	top: 15px;
    	padding: 3px;
    	border: solid #D8D8D8 1px;
    }
    div.mainContent {
    	left: 3px;
    	right: 3px;
    	margin-top: 3px;
    	background-color: #E8E8E8;
    	padding: 5px;
    	border: solid 1px #D8D8D8;
    }
    .mainHeader {
    	height: 25px;
    	/* simple 10 x 25 gradient image to give rounded 3d look */
    	background-image: url('images/headerBar.jpg');
    	background-repeat: repeat-x;
    	text-align: center;
    	border: solid 1px #D8D8D8;
    }
    .mainHeaderText {
    	position: relative;
    	font-size: 11px;
    	color: #643232;
    	font-weight: bold;
    	top: 5px;
    }
    p.main {
    	margin: 2px;
    	margin-right: 5px;
    	margin-top: 4px;
    	font-size: 11px;
    	line-height: 15px;
    	z-index: 2;
    }
    p.half {
    	float: left;
    	width: 40%;
    	margin-bottom: 2px;
    	margin-top: 4px;
    	font-size: 11px;
    	line-height: 15px;
    	z-index: 2;
    	/*background-color: #FFFFFF;*/
    }
    #userPic {
    	float: left;
    	height: 200px;
    	width: 150px;
    	margin: 0px;
    	margin-right: 7px;
    	margin-bottom: 2px;
    	clear: left;
    }
    The image is just a simple 150 x 200 jpg. You need the image in there to make the problem happen. If I comment out the image or I comment out the weird <p style="clear: both;"></p> then the problem doesn't happen.

    Please see the attached screenshots below for details.
    Last edited by slider; Nov 23, 2002 at 21:39.
    $slider = 'n00b';

  2. #2
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is working nicely:
    Attached Images Attached Images
    $slider = 'n00b';

  3. #3
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you expand the window just one pixel to the right beyond what it is in the above picture you get this strange behavior in IE6/Win:
    Attached Images Attached Images
    $slider = 'n00b';

  4. #4
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The strange <p style="clear: both;"></p> is necessary to avoid this (notice the main div not enclosing the image totally) (if anyone has a better way to avoid this it would probably get me around the other problem too, but this is the only way I can find to fix this):
    Attached Images Attached Images
    $slider = 'n00b';

  5. #5
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, something I just noticed: in the third pic you can see that my MAIN div is enclosing the image completely, yet the mainContent div is not. I cut everything from TimeZone down out so it ends nearly halfway up the image and the main div still encloses the image totally.

    This image enclosing problem is the root of this whole mess. Why is the one div enclosing the image but the other one is not?
    $slider = 'n00b';

  6. #6
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Screenshot of that just for full illustration:
    Attached Images Attached Images
    $slider = 'n00b';

  7. #7
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something I just noticed is, the text is there, just seems to be invisible. If I drag my mouse over it it becomes visible until I refresh the page.

    Very strange.

    I've played with the z-indexes of the various layers involved and it affects nothing.
    $slider = 'n00b';


Bookmarks

Posting Permissions

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