chaseman Posted March 19, 2011 Share Posted March 19, 2011 Here's a screenshot: Here's the code .widget { border-bottom: 2px solid skyblue; padding: 0 0 25px 15px; margin-bottom: 25px; font-size: 14px; letter-spacing: 0.08em; line-height: 1.3em; color: #222; } .widget h4 { font-size: 18px; margin: 0 0 0.3em -0.7em; letter-spacing: 0.07em; } .widget h2 { font-size: 18px; margin: 0 0 0.3em -0.7em; letter-spacing: 0.07em; color: black; text-indent: -1em; padding-bottom: 0.5em; } .widget p { letter-spacing: 0.064em; line-height: 1.3em; color: #222; } .widget li { letter-spacing: 0.064em; line-height: 1.3em; border-bottom: 1px solid #d1dcdc; width: 90%; padding: 0 0.5em 0.5em 0.5em; list-style-position: inside; list-style-type: disc; font-size: 15px; } .widget li:hover { background-color: #f7fafa; } .widget a { width: 100%; display: block; } .widget ul { margin-left: -30px; } I'm working on a Wordpress template and what you're seeing is the sidebar where you insert the widgets. In Chrome the lists are showing fine but in IE 9 it appears broken, which does not account for all widgets only for some, as you can see while the categories widget is broken, the recent comments widgets displays fine. Any suggestions? Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/ Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 what do you mean with broken? Is it that the bullet of the list appears above the text? As shown with "categories" Maybe have a live example of this because the image won't tell me anything about the markup nor of the dimensions. Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1189540 Share on other sites More sharing options...
chaseman Posted March 19, 2011 Author Share Posted March 19, 2011 It's on my local server that's why I didn't have a live example, I'll try to upload one in a min and let you know the link to it. Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1189566 Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 It's on my local server that's why I didn't have a live example, I'll try to upload one in a min and let you know the link to it. okidoki Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1189568 Share on other sites More sharing options...
chaseman Posted March 20, 2011 Author Share Posted March 20, 2011 Sorry for the delay, I had MySQL database problems at first, and then it wasn't as easy to get the content together with the template uploaded and working on the shared hosting server. But here's a live example of the template I'm working on. I know the CSS may seem a little bit messy but I will clean that all up later and make it more efficient, I was experimenting a lot thus a lot of duplicate code occurred. As you can see in Chrome and Firefox the lists will appear fine, but in IE 9 the lists of the category widget will appear as shown in the screenshot: www.lolsmile.com/wordpress2 Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1190066 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 try this: Both firefox and chrome gave the same results here, so maybe try the following. .widget li { border-bottom: 1px solid #D1DCDC; font-size: 15px; letter-spacing: 0.064em; line-height: 1.3em; list-style-position: outside; /* changed this to outside instead of inside */ list-style-type: disc; margin-left: 20px; /* added this to adjust the outside display */ padding: 0.6em; width: 90%; } or do this .widget a { display: inline; /* inline instead of block, incase you like that inside-list-position thing */ width: 100%; } Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1190074 Share on other sites More sharing options...
chaseman Posted March 20, 2011 Author Share Posted March 20, 2011 The second one did the trick nicely, I simply changed it from block to inline and it worked. I guess because I had it on block it was adding a break line to the top right? Thank you a lot. What do you (as a CSS freak) think of the design btw? Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1190079 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 The second one did the trick nicely, I simply changed it from block to inline and it worked. I guess because I had it on block it was adding a break line to the top right? Thank you a lot. What do you (as a CSS freak) think of the design btw? well if you set an a element to display:block it will behave as a block element that needs float to sit on the same line with other block elements. as far as the look of your website. there is no visual distinction between the main column and the aside (right side) I would give the aside a not to bright color so that the main column pops out and the less crucial info (right side) is asking less attention. maybe try this: #sidebar { /* at line 63 at style.css */ background: none repeat scroll 0 0 #F3F3F3; /* added a bit color */ float: right; padding: 10px 0 20px 10px; width: 30%; } anyways good to hear it worked Quote Link to comment https://forums.phpfreaks.com/topic/231094-lists-appear-broken-in-ie-9/#findComment-1190081 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.