IE-7, CSS and lists not displaying inline

Any suggestions? I am still trying to work at this, but I can't find out why it is doing that.

Thanks,

Ryan

It's the jQuery Corners script you're using that's causing it.

Try adding this rule to your stylesheet:

li.rounded_by_jQuery_corners>div {
  float: left;
}

Select allOpen in new window

Thank you, how did you find that out?

I used the IE Developer Toolbar to look at the page's DOM tree and saw that some of the <div>s which were added by the script were expanding wider than you wanted them to.

You can get the toolbar here: http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Thank you! The only thing is that, I am on a Mac so it is a bit harder, I have FireBug, but i didnt find anything, i obviously missed it :)

Do you see the results fixed? I think it is better, but I had a friend take a screenie, and the Twitter logo is below again. Is that the same concept as before?

You won't see it in Firebug because the script uses the -moz-border-radius property in Firefox.

The date has the same problem that those list items did. Why do you have a <span> in div.top-date anyway?

The Twitter logo drops down whenever the viewport is too narrow. I suggest you remove the height declaration from #top and give it float:left. Then give "#top-right p.follow" margin-bottom:0. You'll probably want to set a min-width on #top-right as well.

You don't have Parellels or VMWare Fusion?

>>You won't see it in Firebug because the script uses the -moz-border-radius property in Firefox.

Thats a good point, and it is in IE, so thats a no go.

>>Why do you have a <span> in div.top-date anyway?

I did that because when I set it to the <div> element it was huge then i wrapped it in a <span> and it worked. Is there a better way? It wouldn't appear like the others without the <span> and I had the same styles, because it was a block element right? (The <div> that is)

>>I suggest you remove the height declaration from #top and give it float:left. Then give "#top-right p.follow" margin-bottom:0. You'll probably want to set a min-width on #top-right as well.

I removed the height and added the float:left and added margin-bottom:0, What should i set the min-width to? how ever wide the element is?

I need to get one of them, it will help a TON.

If you look at it in FF, It doesnt show the background-color.

NEW CODE

#top{
 
	width:100%;
 
	font-size:90%;
 
	text-transform:uppercase;
 
	background-color:#202020;
 
        float:left
 
	line-height:30px;
 
	margin-top:-19px;
 
	-moz-opacity:0.90;
 
}
 
 
 
#top ul{
 
	margin:0 0 0 70px;
 
	float:left;
 
	display:inline;
 
}
 
 
 
#top ul li.corner{
 
	list-style-type:none;
 
	display:inline;
 
	background-color:#2C2C2C;
 
	padding:3px;
 
	font-size:90%;
 
}
 
 
 
#top ul li.corner a{
 
	color:#999999;
 
	font-weight:bold;
 
	padding:3px;
 
}
 
 
 
#top ul li.corner a:hover{
 
	color:#202020;
 
}
 
 
 
#top ul li.subscribe{
 
	list-style-type:none;
 
	display:inline;
 
	background-color:#B6636F;
 
	padding:3px;
 
	font-size:90%;
 
}
 
 
 
#top ul li.subscribe a{
 
	color:#FFFFFF;
 
	font-weight:bold;
 
	padding:3px;
 
}
 
 
 
#top ul li.subscribe a:hover{
 
	color:#202020;
 
}
 
 
 
#top ul li:hover{
 
	color:#202020;
 
	background-color:#91B168;
 
	font-weight:bold;
 
	padding:3px;
 
}
 
 
 
/* Allows the menu bar to appear correct in IE7 */
 
 
 
li.rounded_by_jQuery_corners>div {
 
  float: left;
 
}
 
 
 
/* Top left date styles */
 
 
 
#top div.top-date{
 
	margin:0 0 0 5px;
 
	clear:none;
 
	float:left;
 
	display:inline;
 
}
 
 
 
#top div.top-date span{
 
	padding:3px;
 
	background-color:#FFF9D8;
 
	font-size:90%;
 
	font-weight:bold;
 
}
 
 
 
/* end */
 
 
 
/* Start top-right styles for Twitter link */
 
 
 
#top-right{
 
	float:right;
 
	margin:0 5px 0 0;
 
}
 
 
 
#top-right p.follow{
 
	font-size:90%;
 
	font-weight:bold;
 
	margin-left:4px;
 
	padding:1px 0 0 30px;
 
	color:#FFFFFF;
 
	background:url("images/twitter.png") no-repeat 0 50%;
 
	-moz-opacity:0.60;
 
}
 
 
 
#top-right p.follow:hover{
 
	-moz-opacity:1.0;
 
}
 
 
 
#top-right p.follow a.top-right-twitter{
 
	color:#FFFFFF;
 
	font-weight:bold;
 
}

Select allOpen in new window

> I did that because when I set it to the <div> element it was huge then i wrapped it in a <span> and it worked.

Even though "#top div.top-date" is floated?

> What should i set the min-width to?

Try 270px

> If you look at it in FF, It doesnt show the background-color.

Eh? Where doesn't it show the background color?

I set the min-width:270px, I checked it in IE, still looks really funky?

It only looks right in Firefox 3 and Safari. IE7, Opera, Firefox 2, and Google Chrome have issues.

Remove the rule I suggested you add in my first reply. Then give those <li>s float:left. That will help some, but it won't fix it. This script just doesn't seem to work right when the <li>s have display:inline or are floated without also having a set width in many of these browsers.

Hey Krav,

Am I putting the float:left on this:

#top ul li.corner{
      list-style-type:none;
      display:inline;
      background-color:#2C2C2C;
      padding:3px;
      font-size:90%;
}

Yes, that's the rule for those <li>s.

I added that to the rule

If you check in it FF see how big the each list item is? Any ideas?

I took the float:left; off just for now. It was making them each as tall as the height of the #top DIV./

To fix the at side effect of floating them, give "#top ul li.corner" line-height:1.2 and margin-top:7px (line-height and z-index are the only two properties that don't require units on numerical values.)

By "fix the at" I meant "fix that".

Updated, how does she look now?

Thanks for all of your help with this? What did the line-height do? Offset it?

It looks find in FF3 again, but it's still messed up in the other browsers.

You haven't removed the rule I suggested you add in my first reply.

Changing the line-height made the list-items shorter. Adding the top margin moved them down.

I removed it again, it must have not saved last time before.

Thanks Krav.

Something you could try doing is modifying the script to set the width of each of those 3 <div>s to the offsetWidth of the <li>.

So check in the code to modify the width of the <div> it creates?

Below is what it creates via FB

<ul>
		<li class="corner rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="Go Home" href="http://www.ryancoughlin.com/index.php">home</a></li>
		<li class="corner rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="View Tutorials" href="category/tutorials/">tutorials</a></li>
		<li class="corner rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="Read My Blog" href="category/blog/">blog</a></li>
		<li class="corner rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="Get To Know Me" href="about/">get to know me</a></li>
		<li class="corner rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="Contact Me" href="contact/">coffee? chat? project?</a></li>
		<li class="corner subscribe rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><a title="Subscribe" href="http://feeds.feedburner.com/ryancoughlin/">subscribe</a></li>
	</ul>

Select allOpen in new window

The script does different things in Firefox and Safari than it does in other browsers. The elements it generates doesn't particularly matter. The script just needs some additional code to set the width on some of the elements it generates.

I was looking at the code to that script the other day and it does generate the CSS in there, but was unsure where to add it.

You were saying about, offset the width of the <div> it creates? But I dont see it creating <div>'s just adding the moz- properties, like in the Firebug output that I pasted.

Thanks,

Ryan

Ohh! I see now, there we go, is it because each browser renders the corners differently correct?

If you're asking about the branching it's because Firefox and Safari provide (vendor-specific) CSS properties to do this, but the same effect is wanted in other browsers too, so the third, more complex, branch is used when a browser doesn't support the CSS properties.

Gotcha...could you point me at what I should change?

Thanks Krav for your help,

Ryan

Krav, what steps can I take to modify that third block of code to create the rounded corners?

Attached is what it is currently display as, any idea how to fix that?

Ryan
Untitled-1.gif

I enjoy helping people in my free time, but it seems that solving this issue for you would require more time than I have to spare right now.