Text overflow in Ie

I make list.but when list complete the last 3 or 4 character shows next line
i can’t understand i knew for css so please help me.

Hi Kiran Dixit. Welcome to SitePoint. :slight_smile:

You need to show us the code you are using—both HTML and CSS.

Sounds like the duplicate character bug but as Ralph said we would need to see an example.:slight_smile:

html code

<div id="heading">
                <h2>Our Vision</h2>
                </div><!-- heading ends-->
               
                <ul>
                <li>To aid to the development of infrastructure by offering innovative designs, consistent high quality and cost effective construction services.</li>
                </ul>
                
                 <div id="heading">
                <h2>Our Mission</h2>
                </div><!-- heading ends-->
                
                <ul>
                <li>To be the leader in the field of industrial construction by employing fast paced methods while ensuring cost effectiveness and high quality standards.</li>
                </ul>     
              	
                <div id="heading">
                <h2>Awards and recognition</h2>
                </div><!-- heading ends-->
                 <ul>
                <li>GIDC AA Ceritificate.</li>
                <li>The TELCO Car Show room won the Best Automobile Showroom in Gujarat.</li></ul>

css code

#heading{
width: 225px;
height: 29px;
float: left;
padding:12px 14px 0px 14px;
margin: 0px 0px 18px 0px;
background:url(images/navigation-btn-bg.jpg) repeat-x;
}

#heading h2{
font-size:16px;
color:#ffffff;
float:left;
font-weight: bold;
}

ul{
float:left;
margin:0 auto;
}

ul li{
font-size:12px;
color:#ffffff;
text-align:justify;
margin:0px 0px 17px 11px;
}

You cannot have duplicate ID values in your HTML you might have been better using a class of ‘heading’ instead. You also probably forgot to wrap the last list within the DIV or will need to rework the CSS.

I doubt your code is really complete there. Here is the code you posted below, placed into a complete HTML file. Copy this code, paste it into a .html file and open it with your browser. You’ll see we don’t have a lot to go on there, even if you color the <body> element’s background. The lists are floating all over the place. I guess the list items will wrap to a new line if you have a width set of the <ul>s, but beyond that, I have no idea what to say about this.


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
#heading{
width: 225px;
height: 29px;
float: left;
padding:12px 14px 0px 14px;
margin: 0px 0px 18px 0px;
background:url(images/navigation-btn-bg.jpg) repeat-x;
}

#heading h2{
font-size:16px;
color:#ffffff;
float:left;
font-weight: bold;
}

ul{
float:left;
margin:0 auto;
}

ul li{
font-size:12px;
color:#ffffff;
text-align:justify;
margin:0px 0px 17px 11px;
}
</style>
</head>

<body>
<div id="heading">
<h2>Our Vision</h2>
</div><!-- heading ends-->

<ul>
<li>To aid to the development of infrastructure by offering innovative designs, consistent high quality and cost effective construction services.</li>
</ul>

<div id="heading">
<h2>Our Mission</h2>
</div><!-- heading ends-->

<ul>
<li>To be the leader in the field of industrial construction by employing fast paced methods while ensuring cost effectiveness and high quality standards.</li>
</ul>

<div id="heading">
<h2>Awards and recognition</h2>
</div><!-- heading ends-->
<ul>
<li>GIDC AA Ceritificate.</li>
<li>The TELCO Car Show room won the Best Automobile Showroom in Gujarat.</li>
</ul>
</body>
</html>

It’s the duplicate character bug that I mentioned in my first post.

One fix would be to add a negative right margin to the flkoated ul.


ul {
    float:left;
    margin:0 -3px 0 0;
}

Of course that ul should be classed to make it specific and you should also address the issues the others have mentioned above :slight_smile:

Thank you, this code is working.

From what I’m seeing, you should be encountering BOTH the duplicate character AND dissapearing content bugs – and the cause?

Your COMMENTS.

Move the closing comment before the closing tag instead of after:

<!-- #heading –></div>

and that will prevent the bug in IE. Also note I don’t waste time saying “end” – closing a DIV is the end of something? REALLY? Who’d have guessed :stuck_out_tongue:

though, as others noted you shouldn’t be using the same ID more than once, and frankly there is NO REASON to be wrapping a heading tag in a DIV, ESPECIALLY if that DIV is called “heading” – can you get more pointless?

ESPECIALLY when you aren’t setting ANYTHING on the DIV you couldn’t have set on the h2 in the first place!

Get rid of the DIV:


<h2>Our Vision</h2>
<ul>
	<li>
		To aid to the development of infrastructure by offering innovative designs, consistent high quality and cost effective construction services.
	</li>
</ul>

<h2>Our Mission</h2>
<ul>
	<li>
		To be the leader in the field of industrial construction by employing fast paced methods while ensuring cost effectiveness and high quality standards.
	</li>
</ul>     

<h2>Awards and recognition</h2>
<ul>
	<li>GIDC AA Ceritificate.</li>
	<li>The TELCO Car Show room won the Best Automobile Showroom in Gujarat.</li>
</ul>

Your CSS has further issues – mixing widths and padding, heights and padding is usually a disaster, so I’d avoid doing that… I also advise AGAINST ever using odd numbered heights, as it makes text centering vertically a nightmare. (so 29px == /FAIL/)… there’s a reason you’ll see many designers use exponents of two.

The margin without the width being set on the UL is also a oddity – my advice is scrap the float on that too, and set a left margin equal to the h2’s width plus any desired extra padding.

… and the use of px metric fonts on the LI is just flushing usability down the crapper – NOT that the H2 are much better in that regard though at least you used the default 16px, and not the illegibly useless 12px.


/* assumes reset has been used */

h2 {
	clear:both; /* clear so no accidental stacking */
	float:left;
	width:225px;
	padding:18px 0;
	margin-left:18px;
	/*
		text-indent instead of padding so as to avoid using padding
		same time as width. If padding is REALLY desired on the X axis,
		put a span inside the h2, set it to display:block and set it
		there!
	*/
	text-indent:14px;
	/*
		I HIGHLY recommend setting the full property every time,
		particularly line-height since browsers are a bit #DDD
		on that.
	*/
	font:bold 16px/18px arial,helvetica,san-serif;
	/*
		18px line-height + 18px top padding + 18px bottom padding == 54 px total height
		avoid odd numbered height totals, avoid declaring height same time as padding
	*/
	color:#FFF;
	background:url(images/navigation-btn-bg.jpg) 0 0 repeat-x;
}

ul{
	margin-left:236px;
}

ul li{
	text-align:justify;
	font:normal 90%/120% arial,helvetica,sans-serif;
	color:#FFF;
	padding-bottom:1em;
}

Though I’d really need to see it live on a page as to what you are trying to do – but from what I see so far you missed the point of ID, and are suffering from a nasty case of slapping DIV around things and ID’s/Classes on things for no good reason.