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?
 
David S.Connect With a Mentor 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
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
catonthecouchproductionsAuthor Commented:
Thank you, how did you find that out?
0
 
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
 
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
All Courses

From novice to tech pro — start learning today.