IE-7, CSS and lists not displaying inline

If you go to ryancoughlin.com in IE7 it is not displaying my list inline for some reason, I googled it but didn't find anything that worked? Any ideas?

UPDATE: I have added my code below, still messing around with it and nothing, love IE haha :)
#top{
 
	width:100%;
 
	font-size:90%;
 
	text-transform:uppercase;
 
	background-color:#202020;
 
	height:30px;
 
	line-height:30px;
 
	margin-top:-19px;
 
	-moz-opacity:0.90; 
 
}
 
 
 
#top ul{
 
	margin:0 0 0 70px;
 
	float:left;
 
        display:block;
 
}
 
#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;
 
	
 
}

Open in new window

LVL 1
catonthecouchproductionsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Thanks,

Ryan
0
David S.Commented:
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;
}

Open in new window

0
catonthecouchproductionsAuthor Commented:
Thank you, how did you find that out?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

David S.Commented:
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
0
catonthecouchproductionsAuthor Commented:
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?
0
David S.Commented:
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?

0
catonthecouchproductionsAuthor Commented:
>>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.
0
catonthecouchproductionsAuthor Commented:
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;
 
}

Open in new window

0
David S.Commented:
> 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?
0
catonthecouchproductionsAuthor Commented:
I set the min-width:270px, I checked it in IE, still looks really funky?
0
David S.Commented:
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.
0
catonthecouchproductionsAuthor Commented:
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%;
}
0
David S.Commented:
Yes, that's the rule for those <li>s.
0
catonthecouchproductionsAuthor Commented:
I added that to the rule
0
catonthecouchproductionsAuthor Commented:
If you check in it FF see how big the each list item is? Any ideas?
0
catonthecouchproductionsAuthor Commented:
I took the float:left; off just for now. It was making them each as tall as the height of the #top DIV./
0
David S.Commented:
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.)
0
David S.Commented:
By "fix the at" I meant "fix that".
0
catonthecouchproductionsAuthor Commented:
Updated, how does she look now?

Thanks for all of your help with this? What did the line-height do? Offset it?
0
David S.Commented:
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.
0
catonthecouchproductionsAuthor Commented:
I removed it again, it must have not saved last time before.

Thanks Krav.
0
David S.Commented:
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>.
0
catonthecouchproductionsAuthor Commented:
So check in the code to modify the width of the <div> it creates?
0
catonthecouchproductionsAuthor Commented:
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>

Open in new window

0
David S.Commented:
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.
0
catonthecouchproductionsAuthor Commented:
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
0
David S.Commented:
It seems you don't understand my last reply. The code branches based on the browser. You're having trouble with the third branch:

    if (webkitAvailable && s.webkit) roundWebkit(e, s);
    else if(mozillaAvailable && s.mozilla && (s.sizex == s.sizey)) roundMozilla(e, s);
    else {
      var bgColor = backgroundColor(e.parentNode);
      var fgColor = backgroundColor(e);
      switch (nodeName) {
        case 'a':
        case 'input':
          roundLink(e, s, bgColor, fgColor);
          break;
        default:
          roundDiv(e, s, bgColor, fgColor);
          break;
      }
    }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
catonthecouchproductionsAuthor Commented:
Ohh! I see now, there we go, is it because each browser renders the corners differently correct?
0
David S.Commented:
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.
0
catonthecouchproductionsAuthor Commented:
Gotcha...could you point me at what I should change?

Thanks Krav for your help,

Ryan
0
catonthecouchproductionsAuthor Commented:
Krav, what steps can I take to modify that third block of code to create the rounded corners?
0
catonthecouchproductionsAuthor Commented:
Attached is what it is currently display as, any idea how to fix that?

Ryan
Untitled-1.gif
0
David S.Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.