...

View Full Version : Div and Table question



pricejt
05-24-2007, 05:31 AM
Yes I know i shouldn't be using tables, but I still haven't migrated my site completely.

Stupid question im sure

I have two divs


#pagecell1{
position:absolute;
top: 150px;
left: 10px;
right: 2%;
width:800px;
background-color: #ffffdd;
height: 800px;
}
#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
/*border-left: 1px solid #ccd2d2;*/
position:absolute;
left:0px;
top:0px;
/*background-color: #CC99FF;*/
background-color: #ffffdd;
width:611px;
height: 100%;

}

<div id="pagecell1">

<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

....lots of content

</table>
</div>
</div>

Currently the table is overflowing the content div. I know how to fix it by taking the height value away from the pagecell1 div. But when i do that if on another page i don't have that table in the content then my pagecell1 is very small. I think I can use minheight but that wont work for all browsers. anyone have any better suggestions.

Sorry if this has been asked a lot of times. Just trying to get this fixed rather quickly.

_Aerospace_Eng_
05-24-2007, 05:41 AM
min-height will work for most browsers and with the help of a bug can be simulated in IE6 as well

<style type="text/css">
#pagecell1 {
min-height:300px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#pagecell1 {
height:300px;
}
</style>
<![endif]-->

pricejt
05-24-2007, 05:50 AM
Yea that works, thanks

pricejt
05-24-2007, 06:25 AM
actually i thought this was fixed but when i looked at it in IE6 it pushes everything in that content div down to the bottom.

In the content div i had to change that to position relative. so i think that may be the reason. Any ideas how i can make it work in both ie6 and 7

_Aerospace_Eng_
05-24-2007, 07:10 AM
It shouldn't push anything down. Try adding the min-height to the #content div instead. I have to ask though why are you even using absolute positioning?

pricejt
05-24-2007, 07:15 AM
http://www.ivybasket.com/images/HatsPhotoAlbum/KidsHats.htm this is the page. I moved that min-height and its still doing the same thing in ie6. works great in ie7 and mozilla

_Aerospace_Eng_
05-24-2007, 08:17 AM
Guess I should have told you. You can't just copy and paste what I gave you. This is wrong

#pagecell1{
position:absolute;
top: 150px;
left: 10px;
right: 2%;
width:800px;
background-color: #ffffdd;

<!--[if lte IE 6]>
height:300px;
<![endif]-->
}
Try this instead

#pagecell1{
position:absolute;
top: 150px;
left: 10px;
right: 2%;
width:800px;
background-color: #ffffdd;
min-height:300px;
}
/*hide from IE Mac\*/
* html #pagecell1 {
height:300px;
}
/*end hide*/
I originally used conditional comments (http://www.quirksmode.org/css/condcom.html) because you didn't post enough code to begin with so I didn't know if the * html hack would suffice. Now that I see your code, I notice you are using a doctype so the * html hack will work since its only given to IE6 and below.

pricejt
05-24-2007, 08:22 AM
i have uploaded your changes but it is still doing the same things

_Aerospace_Eng_
05-24-2007, 08:33 AM
Its not my code causing the issue. Its something else in your code. Get rid of the margin and height on #content. You also need to float it to the left.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum