CODEWITHSUNDEEP
csshtml
tonoslfx
tonoslfx

Reputation: 3442

css float right space

anyone know how to fix this! on 'Get In Touch button'
enter image description here

it works find in another browser except IE7;
HTML:

<NAV>
    <UL>
        <LI><a href="#">Home</a></LI>
        <LI><a href="#">Branding</a></LI>
        <LI><a href="#">About</a></LI>
        <LI><a href="#">Get In Touch</a></LI>
    </UL>
</NAV>

CSS:

nav { float:right;}
nav ul { margin:0px; padding:0px; }
nav ul li { float:left; }
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px;}

Upvotes: 1

Views: 3354

Answers (4)

sohrab
sohrab

Reputation: 38

use

clear: right; float:right;

Upvotes: -3

Barrie Reader
Barrie Reader

Reputation: 10713

nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px; width: auto; }

Add in that width: auto; - see if that helps.

Neuro

Upvotes: 0

Kon
Kon

Reputation: 27441

You may need to explicitly set width on the list and/or nav container.

This is quite common in IE7 and down, where the dumb browser needs to be told there's room allotted for the content.

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185903

Add white-space:nowrap to the nav ul li CSS rule.

About the white-space property: http://vidasp.net/CSS-white-space-property.html

Upvotes: 6

Related Questions