Rendering error with a list on IE8, 7, 6 - html

What is the trick to getting IE to display a <ul>? I am working on a page with a php extension. I have a simple list.
<ul>
<li>Stuff one</li>
<li>Stuff two</li>
<li>Stuff three</li>
<li>Stuff four</li>
</ul>
While on Safari and Firefox I get a list that renders properly, on IE it just displays a paragraph. I have not found one consistant answer on any websites about what could be the problem.
What's happening?
The template is from Matthew James Taylor's 3 column blog style layout.
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
The css is right in the page. Even when I go back and strip the site to bare bones the lists do not display.
Is there the possibility of screwing up the css because of a div style?

IE 6,7,8 should all display unordered lists just fine...
My guess is you have something going on with CSS and/or JS that's causing the list not to be shown in IE.

There is nothing wrong with the code, you should get a list of four items in all browsers (and all versions).
Check your code for conditional (MS specific) comments such as:
<!--IE > Hidden code, could be some CSS <![endif]-->

That works fine in IE 6, do have you any css applied to the list?

No, IE does not display <ul>'s as paragraphs. Something else is wrong. Is it possible that IE-specific css is altering the appearance?

It could be that your CSS rules aren't complete. IE and Opera have a different interpretation of default list styles than other browsers, regarding whether the indentation is done with margins or padding. If you aren't applying the styles correctly, you can end up with a list that looks wrong on the browser you aren't testing on. Here is an article that goes into great detail on the differences between the browsers:
A List Apart: Articles: CSS Design: Taming Lists
Edit: And this one:
Consistent List Indentation

Related

HTML Bullets Not Showing

I am using the TinyMCE gem with Rails (if that even matters) to generate text on my site. All the sudden bullet points are not appearing. (They used to display just fine.)
After all the ERB is rendered, the final HTML is pretty unstyled and boring (it looks like this...)
<ul>
<li>Text here</li>
<li>More text here</li>
</ul>
There is no CSS that speaks directly to bullets (ul, li, or ol).
Looking at other StackOverflow posts (like this) you're supposed to ensure that <li> tags have the css property display: list-item, but when I look at them in the Chrome inspector, they do have this display property.
You can see the issue live here if you want to verify that this property is correct.
Other than this, I'm not sure what could be causing the issue. What else can I check for? I've never had bullets just disappear before!
As per your live issue here
overflow-x: hidden; on <li>
is hiding the bullets.
Removing it or adding
overflow-x : unset; may help

<select> dropdown a few pixels off

Consider this Bootstrap bug report. Basically, the <select> dropdown is not aligned with the <select> element on Chrome and Safari (both tested only a Mac). #mdo thinks there there is no fix. I just want a second opinion.
Can the <select> dropdown be aligned with the base <select> element?
You will NEVER style browser built-in tools the same across multiple browsers and across multiple OS.
I have been doing this a very long time and my best advise it to style as-best-as possible and reserve quirky css hacks for old IE browsers.
If you want to be super-anal about exact pixels, you need to not use the select html tag and instead use a ul tag. Then use css to list-style: none;
<ul id="my_selectbox">
<li>Option 1</li>
<li>Option 2</li>
</ul>
Then, style the menu to look exactly how you want it to look.
So think of this as a menu instead of a selectbox.
Then use javascript to make the menu drop down like a select tag.
(but that sure is a lot of work for a few pixels isn't it?)
Remember, you will NEVER EVER write a CSS file that makes all browsers look identical. Just isn't how they are designed. If you have a manager that demands it, they need to learn how this stuff works.
further note: you will have to also use javascript to store a selection. I can write you a quick script that does this if you need it. Not sure how proficient you are with javascript.
This additional style to the element may help:
-webkit-appearance: none;

IE7 strong tag behave like block element

I've got this structure:
<li>
<strong>If the Technology Developer and Analyst Intern Program - Consumer Banking Technology & Operations (CBT&O) is NOT conducting interviews on your campus,<strong> please apply below between November 1st and January 2nd.
</li>
In all browsers it looks fine, but in IE7 (and IE7 compability mode) looks like on screenshot.(http://screencast.com/t/kK4Ro9Gs)
It seems like the <strong> element looks like a block with a fixed width in IE7. I recommend you embedding modernizr or a css reset so this doesn't happen.
If it doesn't work, try also to give css to the strong element, maybe something like display:inline; float:left, width:100%
I don't have the website to mess around, so you have to find a way.
I found the issue. IE7 was automatically setting zoom:1 for strong element. I overwrited it with zoom:normal and it fixed it.

what is the difference between these two ul tags

something driver me crazy here
i have a big HTML template which i can't post but the problem is that when i write ul tag like this everything works find
<ul><li>something</li><li>something</li><li>something</li></ul>
but when i write it like this i got +4 pixel i don't know from where
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
when i use the second method i'm sure that i have no extra space somewhere but i think it's from the "enter" between them
Any solution? css maybe
::Extra info
i found that the problem comes from closing and starting li tag this worked out
<ul>
<li>
something
</li><li>
something
</li><li>
something
</li>
</ul>
any idea ?
You are probably noticing such gap because you are using CSS to make an horizontal menu; when making <li> inline elements white space between them is not ignored.
i would start by using a reset CSS like this one
I don't know what cause the problem, but you can solve it using CSS. Write a style for li element and specify the proper margin.
What you're noticing is the 'feature' of (x)html collapsing whitespace into a single space. Most of the time this isn't too much of a problem, but for a horizontal menu it's an irritation.
There are two options available to deal with this (in addition to your first example):
<ul>
<li>something</li
><li>something</li
><li>something</li>
</ul>
(Note that the first two </li> tags aren't closed until the following line.)
<ul>
<li>something</li><!-- hiding the whitespace
--><li>something</li><!-- hiding the whitespace again
--><li>something</li>
</ul>
Of the two options I prefer the first, it doesn't throw up any errors, validating quite happily under xhtml 1.0 strict. It's not an ideal situation, but it's slightly better than trying to put a whole list into a single line of (x)html.

Having line breaks between <li>s

I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
You can avoid the rendering issues but keep the code maintainable like this:
<ul
><li>item 1</li
><li>item 2</li
><li>item 3</li
></ul>
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float is your friend.
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;
to your li tags to get them next to each other.