Float (?) issues with IE

I have two issues with a web app I’m working on that I suspect are both due to an IE float issue. I created a dummy mockup link of the site you can see here. I got the code via generated HTML and then tried to clean it up a bit but there’s still some junk in it.

The first issue is with the #status div. The HTML for that part (from clean copy, not generated) is:


<div id="status">
	<span>You are securely logged in as: <a href="libraries.php?nav=therapists" title="My Profile"><?php echo $USER->Name(); ?></a></span>
	<ul>					
		<li id="pageHelp" ><a href="pagehelp.php" onclick="return helpwin('pagehelp.php?<?php echo 'g_nav=',G_NAV,'&amp;nav=',$L_NAV;?>')" title="Help for This Page" >Help for This Page</a></li> 
			
		<li id="profile"><a href="libraries.php?nav=therapists" title="My Profile">My Profile</a></li>
			
		<li id="logout"><a href="#" onclick="logout(event);" title="You are securely logged in. Click here to logout."><img src="_images/icons/lockSmall.png" alt="You are securely logged in. Click here to logout." /> Logout</a></li> 		
	</ul>
</div>

The “IE offending” style seems to be #status ul. Here are all the #status styles:


#status {	
	padding:.7em 15px;
	background-color:#000;
	color:#fff;
	border-bottom:1px solid #fff;
	}
	
#status ul {
	display:inline;
	float:right;
	margin-right:50px;
	}
	
#status li {
	display:inline;
	margin-right:20px;
	}
		
#status h1, h3 {
	display:inline;
	}
	
#status h3 {
	font-size:.8em;
	}

I took the float out of the IE stylesheet for the generated mockup so you’d be able to see the content of the status div, but that whole div is really supposed to nestle just to the left of the Shrink Office logo as opposed to where it is now. You can check the mockup link in other browsers if you want to see how it’s supposed to look. How do I get it to behave in IE?

The second issue has to do with the toolbar div. In IE, it’s totally disappeared in the live mockup link I made above. In my localhost copy, though, I can see the toolbar div just fine in IE. However, something - and I’m suspecting it’s the styles in toolbar div - is pushing all of the content to the right, causing my localhost IE to have scrollbars. The scrollbars don’t appear in the mockup link - probably because the toolbar div doesn’t appear, either. :slight_smile: All of the styles for the toolbar div are in the _styles/menus.css file.

All help appreciated.

You don’t have a DTD at the top of your page, making IE enter the quirks mode.

You should have smt like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>

Even when you want HTML 5?

No. You just need to have a valid DTD. And html 4.01 strict seemed to me to be the case here. But you can go for html5 DTD if you like.

Then use the html5 doctype.:slight_smile:

As noonope said above if you have no doctype, html 4 transitional without uri, or even comments/code above the doctype you will trip quirks mode in IE and it will behave much like ie5.

Oh sorry. I do have the HTML 5 doctype on the actual site. It just didn’t come through with the generated source I used and I didn’t catch it. I fixed that and now the toolbar div shows up fine but there’s still the issue with #status. Any help on how to fix that?

Hi,

You didn’t mention which browsers exactly as IE6 has many many errors.

IE8 isn’t floating the status to the right because you removed the float in the IE stylesheet. Put it back and it will work. Note that you should only have the differences in the IE files but you seem to have include hundreds of rules which will make maintenance a nightmare.

IE7 isn’t floating right because a) you have removed the float and b) you have content before the float on the same line and in ie6 and 7 floats must come first.


    <div id="status"> <[B]span>You are securely logged in as: <a href="libraries.php?nav=therapists" title="My Profile">Buncha Carrots</a></span>[/B]
            <ul>

Either float that span as well (and clear the parent) or put the ul at the fornt of the line.


    <div id="status"> 
[B]<ul>etc ...  <ul>
[/B]<span>You are securely logged in as: <a href="libraries.php?nav=therapists" title="My Profile">Buncha Carrots</a></span>
         

The span would be more semantic as a p element because it runs into another block element (the ul).

IE6 needs a lot of work but I didn’t look because I didn’t know if you were supporting it.

Thanks, Paul. I did change the span to a p and put the ul at the front. All works fine now in 7 & 8. At this point, we’re still planning on supporting IE6 but we’re still so far from launching that it may become a moot point.

As far as the extra junk in my stylesheets, yes. They’re a mess and I need to clean them up. What’s the best tool to use to show you which styles you’re not using? I have Firebug and Dust-Me Selectors. Will Dust-Me also spider tables that are generated through JavaScript? I think there are some styles in the JavaScript, too. Not many, but I believe I’ve seen some. I’m not the JavaScript person.

This was an interesting thread to read and I am glad it was resolved.

In general, wouldn’t a child element only need its specific styling or the styling that it has different form any of its parents, because it would inherit that styling right?

Yes child elements will take on the stylings of their parent elements in most cases.

In general, wouldn’t a child element only need its specific styling or the styling that it has different form any of its parents, because it would inherit that styling right?

Children will inherit font size and family, but not dimensions, positioning or floating for example.