IE6 vs FF horizontal placement issue

3 New Member

OK, I have my dynamic script stripped down to show you my problem. I've tried fixing it anyway I can between IE6 and FF, so the CSS might be a bit bloated now with unnecessary elements.

The code is hosted on my lan but I put it out on:

http://www.welovetodd.com/test.html

It renders 'correctly' in FF with the text to the left, in a right justified div, and the green block should be in a left justfied div just the the right of it. If FF this works, in IE the div containing the green box is drawn just underneath the text. You'll see if you check it out in both browsers.

The CSS is at:

http://www.welovetodd.com/mainStyleSheet.css

Thanks for your help!

JT

May 31 '07 #1

Subscribe Reply

1732

thejam

New Member

I figure I'll just post the code for ya.

test.html -

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="mainStyleSheet.css">

<meta http-equiv='Refresh' content='9999999'>

</head>

<body>
 
<div class="lineItem">

    <div class="lineItemTitle">

        <a href="groupView.php?gid=1">FANMedia</a>&nbsp;&nbsp;&nbsp;&nbsp;

    </div>

    <div class="lineItemMonitors">

        <div id="monitor36" style="display: inline; width: 2px; position: relative;">

          <span class="greenDot" onmouseover="return escape('monitor<br/>Last Ran at 2007-05-31 20:20:00.000')">&nbsp;</span>

        </div>

    </div>

</div>
 
</body>

</html>

mainStyleSheet.css -

Expand|Select|Wrap|Line Numbers

 body

{
 
  font-family:Tahoma,Arial,Helvetica,sans-serif;

  background-color:white;
 
}
 
div.lineItem

{

  cursor:default;

  position:relative;

  padding:5px;  

  width:100%;

  clear:both;

}
 
div.lineItemTitle

{

  display:table-cell; 

  display:inline-block;

  position:relative;

  width:165px;

  text-align:right;

  font-size:16px;

  font-weight:bold;

  clear:both;

}
 
div.lineItemMonitors

{

  display:table-cell; 

  display:inline-block;

  position:relative;

  font-size:11px;

  clear:both;

}
 
span.greenDot

{

  left:2px;

  border:none;

  background-color:green;

}
 
span.redDot

{

  left:2px;

  border:none;

  background-color:red;

}
 
td

{

  background-color: #F8F8FF;

  border: none;

  border-width: 1px;

  border-color: black;

  padding: 4px;

  margin: 0px;

}
 
td.monitor

{

  width: 22px;

  text-align: center;

}
 
td.status

{

  width: 100px;

}
 
td.name

{

  width: 295px;

}
 
td.refresh

{

  width: 75px;

}
 
td.updated

{

  width: 200px;

}

May 31 '07 #2

drhowarddrfine

7,435

Recognized Expert Expert

I'll be gone for a few hours but IE tends to add margins and padding where there is none. Check your widths. If it's, say 800px wide, and everything adds up to 800, then IE is probably throwing a few more px in for you.

May 31 '07 #3

thejam

New Member

I'll be gone for a few hours but IE tends to add margins and padding where there is none. Check your widths. If it's, say 800px wide, and everything adds up to 800, then IE is probably throwing a few more px in for you.

The container div (lineItem) is set to 100% width. The two divs contained within (lineItemTitle and lineItemMonitors) should be horizontal each other. One does have a width of 165px, but the other has no width specified. With the parent element set to 100% width, how would width affect it even in IE?

I thought that was it at first too...

Expand|Select|Wrap|Line Numbers

 div.lineItem

{

  cursor:default;

  position:relative;

  padding:5px; 

  width:100%;

  clear:both;

}
 
div.lineItemTitle

{

  display:table-cell;

  display:inline-block;

  position:relative;

  width:165px;

  text-align:right;

  font-size:16px;

  font-weight:bold;

  clear:both;

}
 
div.lineItemMonitors

{

  display:table-cell;

  display:inline-block;

  position:relative;

  font-size:11px;

  clear:both;

}

May 31 '07 #4

drhowarddrfine

7,435

Recognized Expert Expert

display:table-cell does not work in IE, only modern browsers like FF.
display:inline-block is also iffy in IE.

You are using 'clear:both' but that property is only related to floated elements which you aren't using.

With that in mind, I would re-think this. I'm wondering if you are trying to make this page layout act like a table.

May 31 '07 #5

Similar topics

Virtual dtor and placement new.

by: Giancarlo Niccolai | last post by:

Hello all. I have peeked through the FAQ and all relevant links, and also through Stroustrup book, but I have not been able to find an answer, so I have to post here as a last resort. It...