The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
A problem with <ul><li>
Discuss A problem with <ul><li> in the CSS Help forum on Dev Shed. A problem with <ul><li> Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

September 8th, 2012, 03:09 AM
|
 |
A Change of Season
|
|
|
|
|
A problem with <ul><li>
Hello;
Please have a look at the un ordered list here. As you can see it looks nice and clean.
Now in a version of IE, it looks like this.
Here is the link, I appreciate if anyone can guide me.
It is valid html.
Thanks
|

September 8th, 2012, 07:05 PM
|
 |
A Change of Season
|
|
|
|
Come on css people 
|

September 8th, 2012, 08:50 PM
|
|
|
|
which version of IE is showing it wrong?
it looks fine for me in Windows IE8 in standards mode and compatibility mode.
|

September 8th, 2012, 08:54 PM
|
 |
A Change of Season
|
|
|
|
Quote: | Originally Posted by DonR which version of IE is showing it wrong?
it looks fine for me in Windows IE8 in standards mode and compatibility mode. | Hello. Internet explorer version 9. And when I click compatibility mode, it fixes it. I wonder why this happens!
|

September 9th, 2012, 11:09 PM
|
|
|
I really hate to suggest this, but, it would be easiest way to fix your issue.
Add the following right after your <head> tag...
Code:
<meta http-equiv="X-UA-Compatible" content="IE=8" >
This will force IE9 into IE8 compatibility mode and will allow it to look the way you want.
|

September 9th, 2012, 11:43 PM
|
 |
A Change of Season
|
|
|
|
Quote: | Originally Posted by DonR I really hate to suggest this, but, it would be easiest way to fix your issue.
Add the following right after your <head> tag...
Code:
<meta http-equiv="X-UA-Compatible" content="IE=8" >
This will force IE9 into IE8 compatibility mode and will allow it to look the way you want. | Thank you for the reply. Is this the proper of doing it? Sounds a bit strange.
Thanks
|

September 9th, 2012, 11:44 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Bah. I was hoping you'd figure out what was happening, Don.
It's a change in float handling in IE9 and Opera 11.6x+. One solution is to give the list "overflow:hidden" and left padding so the markers don't overflow and thus be visible. It may be desirable to reduce or remove the right margin on the left-floated element. Another solution is to give "list-style-position:inside" to the list.
|

September 9th, 2012, 11:50 PM
|
 |
A Change of Season
|
|
|
|
Quote: | Originally Posted by Kravvitz give "list-style-position:inside" to the list. | This did it, problem fixed! But still IE insists to make it look bad! I don't know what to say!
|

September 9th, 2012, 11:59 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
Yeah, I don't like the look of "list-style-position:inside" when text wraps either. There's actually a third possible solution: give the list "margin-left:510px" and "padding-left:30px".
|

September 10th, 2012, 12:02 AM
|
 |
A Change of Season
|
|
|
|
Quote: | Originally Posted by Kravvitz Yeah, I don't like the look of "list-style-position:inside" when text wraps either. There's actually a third possible solution: give the list "margin-left:510px" and "padding-left:30px". | Thanks Kravvitz
|

September 10th, 2012, 12:24 AM
|
|
|
Quote: | Originally Posted by Kravvitz Bah. I was hoping you'd figure out what was happening, Don.  |
lol, actually, so was I, but, everything I was trying seemed to break the layout when viewing back in IE8 compatibility mode.
thats why I mentioned "hating to suggest" my way of fixing it...it just seemed to me to be simplest way to "fix" the issue without breaking it at the same time.
I still have ALOT to learn about CSS..especially when it comes to IE browsers. 
|

September 11th, 2012, 10:29 PM
|
 |
A Change of Season
|
|
|
|
|
Thanks
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|