CODEWITHSUNDEEP
htmlcss
Kyle Yeo
Kyle Yeo

Reputation: 2368

text inside div overflows... but returns to normal only after refresh

I'm doing a dynamic div that resizes accordingly to the amount of text. (Which means I can't define the width of the main div)

Problem is, with my current CSS, this is what's happening at the first load of the page:

div text is cut

However, when I press F5, the page automatically resizes itself back to this:

div text is uncut after refresh

Why is this happening? How do I solve it? I'm stumped on this part and I've even tried advanced CSS functions such as calc, etc.

I can't replicate the problem on jsFiddle, but I did provide the code I'm using.

HTML

<div class="breadcrumbz">
    <ul id="breadcrumbs" class="uppercase">
        <li><a href="http://localhost/adsg">Home</a></li>
        <span>/</span>
        <li><a href="http://localhost/adsg/blog/" title="View all posts in blog" rel="category tag">blog</a></li>
        <span>/</span>
        <li class="single">On the Go.</li>
    </ul>
</div>

CSS

.breadcrumbz { padding:6px 6px 6px 6px; margin:2% 0 0 4%; position:relative; background-color:#3b3c3e; float:left; }
.breadcrumbz ul { white-space:nowrap; float:left; }
.breadcrumbz ul li { display:inline; }
.breadcrumbz ul li:first-child a { padding:0 4% 0 0; }
.breadcrumbz ul li a { padding:0 4%; }
.breadcrumbz ul li span { padding:0 4%; }
.breadcrumbz ul li:last-child a { padding:0 0 0 4%; }
.breadcrumbz ul li.single { padding:0 0 0 4%; }

Upvotes: 2

Views: 130

Answers (4)

Super Hornet
Super Hornet

Reputation: 2907

try this:

.breadcrumbz ul li {
   display: inline-block;
}

Upvotes: 1

Ashis Kumar
Ashis Kumar

Reputation: 6544

You need to change the display style of li. Try "inline-block" insted of "inline".

.breadcrumbz ul li { display:inline-block; }

Check this http://jsfiddle.net/Yg58f/. Hope it helps.

Upvotes: 2

xec
xec

Reputation: 18024

It's the percentages causing it, the browser doesn't know what the width will be before the content is rendered, and the percentages in the margins of the content are based on the width. (A sort of chicken-and-the-egg problem.)

You also have invalid html (<span> is not allowed as children of <ul>).

If you change the units from percentages, you won't have this issue.

Sample at http://jsfiddle.net/sdMTJ/5/

Sidenote: instead of the invalid spans, you could add separators between the elements using pseudo-elements;

li + li:before {
    content: " / ";
}

http://jsfiddle.net/sdMTJ/9/

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24703

Percentages and padding can have this effect on floated items without set width, particularly. For reliability I would sugget you use em and not %

DEMO http://jsfiddle.net/kevinPHPkevin/sdMTJ/8/

.breadcrumbz ul li.single { padding:0 0 0 0.625em; }

Upvotes: 1

Related Questions