table with css using div - problem in IE [Archive]

dukevn

07-11-2008, 04:02 PM

Hi folks,

I am working with a table with css using div tag. Basically I want to have a table with two rows, each row contains one image in the left, text in the right side, and text must be placed in the middle. Everything seems to work (Firefox, Safari, Opera) except IE. I tried to put extra css codes for IE, using display:inline or inline-block, but it does not help.

I have just very basic css knowledge, and I would appreciate you masters in css to help me.

Here is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Table with DIV and CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="thumbnails_main">
<div id="thumbnails_table">
<a href="">
<div class="thumbnails_element1">
<div class="thumbnails_image">
<img src="a.jpg" width="50" height="50" style="border: 1px green solid; margin-left: 0em; margin-right: 0.2em; margin-top: 0.1em; margin-bottom: 0.1em;" alt="intro_thumnail" />

</div>
<div class="thumbnails_text">
<div class="title">test1</div>
</div>
</div>
</a>
<a href="">
<div class="thumbnails_element2">

<div class="thumbnails_image">
<img src="b.jpg" width="50" height="50" style="border: 1px green solid; margin-left: 0em; margin-right: 0.2em; margin-top: 0.1em; margin-bottom: 0.1em;" alt="intro_thumnail" />
</div>
<div class="thumbnails_text">
<div class="title">test2</div>
</div>
</div>
</a>
</div>
</div>

</body>
</html>

and the style.css file:

#thumbnails_main {
width: auto;
margin-left: auto;
margin-right: auto;
border: solid #333333 0px;
padding: 0;
text-align: center;
}

#thumbnails_table {
background: none #ffffcc;
border: solid #000000 0px;
color: #000000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0;
text-align: center;
width: 100%;
display:table;
}

.thumbnails_element1 {
width: 100%;
display:table;
margin-left: 0px;
margin-right: 0px;
background: #E6E6E7;
border: 1px solid #CCCCCC;
text-align: center;
}

.thumbnails_element1:hover {
background: #fff;
}

.thumbnails_element2 {
width: 100%;
display:table;
margin-left: 0px;
margin-right: 0px;
background: #F1F1F2;
border: 1px solid #CCCCCC;
text-align: center;
}

.thumbnails_element2:hover {
background: #fff;
}

.thumbnails_image {
display:table-cell;
vertical-align: middle; /* image will be placed in this position */
text-align: center;
border: 0px solid #CCCCCC;
}

.thumbnails_text {
display:table-cell;
width: 100%;
vertical-align: middle; /*if contains a cell, then THAT cell (which is text cell) will be placed in THIS position */
text-align: center;
border: 0px solid #CCCCCC;
}

/* this extra cell is to place the text vertically*/
.title {
width:100%;
display:table-cell;
position:relative;
}

Thanks,

D.

boogyman

07-11-2008, 06:38 PM

IE doesn't have support for the table style css layout property/values.

if this is truely for a record type data, use a table, if not you can use some floating and/or relative positioning to accomplish what you want, and have it be all browsers compliant... with a little extra work for IE of course :(

dukevn

07-13-2008, 08:12 PM

Hi Boogyman,

Thanks for your response. I tried to avoid table (that I used before) and I also want to learn css, that is why I use css layout now. But I did not use float (because I do not understand it), but now I think I have to use float :)

D.

boogyman

07-14-2008, 12:46 PM

floats are often the hardest thing to understand upon first learning to use CSS, and unfortunately are not always handled correctly by the browser. If you have a specific question do not be afraid to ask and we will do what we can to try an help you understand the theory so you can apply it at your leisure