Div Tag float problems not visible or incorrectly positioned in IE

you may have to display a separate set of styles for IE....

What is not displaying correctly?  I opened up the pages with IE7 and Firefox and they appear to be identical.  The project popup fields also appear to display correctly on both browsers.

it's hard to tell. I think the problem is on IE6. I have clients telling me they see the div tags overlapping the fourth button on the HOME page. Is there a way to view on a MAC OS X different browsers for testing purposes?

You can load multiple versions of firefox, opera, or flock onto Leopard, just make sure you rename the .app file to reflect which version it it.  I run Safari, Firefox 2.14 and Firefox 3 all on my Leopard Mac for testing purposes.  I have just renamed my apps to firefox2.14.app and firefox3.app so i can tell the difference.  Also if you have Parallels or VMware Fusion on you mac you can create two different virtual windows PC's what have different versions of IE on them to test how your website will display.  This is how I code for web programming.

RLSM Tech

can you check the pages on IE6? I don't know if the problem is fixed or not. OR what CSS code to write for that matter to correct the float issue. I will look into getting Parallels to avoid this type of mishap in the future. thanks

Ok.  I did load the page in IE6 and can see the display issue you are getting.  I will look at the source and see if there are any modifications that can or need to be made.  It is possible that the version of CSS and XHTML that you are using might not be supported by IE6.  I will get back to you shortly.

RLSM Tech

i got a screenshot from IE6. looks like the problem is just the navigation list needs to be corrected. what do you think? see attached and css global css> nav li or nav ul

http://pintsizeprojects.com/css/global.css

Select allOpen in new window

projectspg-IE6.jpg

I believe the error is not with the nav ul or li but the div id="nav".  I am using the firebug plugin for firefox (a must have for web development) and when I am inspecting your code this div is masked by the above div id="header".  I believe that IE7, Firefox and Safari are all smart enough to correct this error by themselves but IE6 may not be able to.  

The div id="nav" never accepts the positioning attributes of the div id="header" and still retains its 0 margin position. The CSS setting being inherited by the div id="nav" are listed below:

#nav {global.css (line 68)
clear:both;
height:auto;
list-style-type:none;
width:560px;
}

* {global.css (line 114)
margin:5px 0 0;
padding:0;
}

Inherited fromdiv#container
#container {home.htm (line 40)
text-align:left;
}

Inherited frombody.oneCol
body {global.css (line 104)
font-family:"Book Antiqua","Times New Roman",Georgia,serif;
font-size:13.5px;
font-style:normal;
font-weight:normal;
letter-spacing:0.05em;
line-height:1.25em;
}

The ul CSS appears to be displaying in the proper location via inspect.  I have also listed its inherited CSS settings below.  

#nav ul {global.css (line 13)
background-image:url(../images/ps_text_tile.gif);
background-position:10px 2px;
background-repeat:no-repeat;
float:left;
height:53px;
left:346px;
list-style-type:none;
margin:0;
padding:100px 0 0;
position:absolute;
top:29px;
width:554px;
}

* {
}

Inherited fromdiv#nav
#nav {
}

Inherited fromdiv#container
#container {home.htm (line 40)
text-align:left;
}

Inherited frombody.oneCol
body {global.css (line 104)
font-family:"Book Antiqua","Times New Roman",Georgia,serif;
font-size:13.5px;
font-style:normal;
font-weight:normal;
letter-spacing:0.05em;
line-height:1.25em;
}


Hope this helps.

RLSM Tech

hmm, i am not exactly sure how to do that. my css knowledge is limited here.