INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!

Talk With Other Members
Be Notified Of Responses
To Your Posts
Keyword Search
One-Click Access To Your
Favorite Forums
Automated Signatures
On Your Posts
Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Tek-Tips LinkedIn^® Group

Join our
LinkedIn^® Group!

Hook up with past and present colleagues and classmates quickly.

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site

(Download This Button Today!)

Feedback

"...Compliments on a fantastic web site. I have learned so much from my threads and even if sometimes I cannot solve the problem, it gives me the reassurance that I am not the only one putting up with it!..."

More...

Geography

Where in the world do Tek-Tips members come from?

Click Here To Find Out!

Tek-Tips Shirts!

Get your
Tek-Tips Forums
SWAG here!

Home > Forums > Programmers > Web Development > HTML, XHTML & CSS Forum

I can float Nav in chrome and firefox but not ie. I am stumped (help)

Read More Threads Like This One

csphard (Programmer)

18 Mar 12 22:30

Using css I tried to float my nav to the right side to be inline with this image.

It works on chrome and firefox but not ie..   Can anyone tell me why?

Thanks  Howard

<html><head>

<link rel="stylesheet" type="text/css" href="sample2.css">
<title>Fpe</title>
<style>
body{background: url(images/new1.jpg) center top no-repeat;font-family: verdana;font-size:11px;text-align:center;}
h1,h2,h3,h4,h5,h6,ul,li,a,img,body{margin:0;padding:0;}
img {border:0;}
#container{width:874px;height:600px;margin:0 auto;position:relative;text-align:left;}
#header{height:180px;}
#header h1{background: url(images/logo2.png) left bottom no-repeat;height:180px;}
#header span{display:none;}
#cheader {width:874px;border:1px solid red;height:300px;} /* used to break up header 1 and header 2 */
#nav{float: right;margin:50px 140px 0 0; border:1px solid green;width:200px;}
#nav ul {list-style: none;}
#nav li {font-weight:bold;height:32px;}
#nav li a {text-decoration:none;font-size: 40px; color:black;}
#nav li a:hover {color: #c6c6c6;}
#nav li a:visited {color: gray}

</style>
</head><body>
<div id="container">
        <div id="header"><h1><span>HEADER</span></h1></div>

            <div id="content">
            <div id="cheader">
            <img src="images/2model.jpg" width="461" height="288">
            <div id="nav">
                            <ul>
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">MODELS</a></li>
                            <li><a href="#">EVENTS</a></li>
                            <li><a href="#">PRODUCTS</a></li>
                            <li><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
            </div>






            </div> 
</div>  

<div id="footer">

</div>
</body></html>

johnwm (Programmer)

19 Mar 12 2:52

Most likely problem is no doctype specified, therefore browser will drop into quirks mode. See http://www.htmlhelp.com/tools/validator/doctype.html

In general if you have any problems with layout start by using a validator which will help you resolve almost all of the problems straight off. See http://validator.w3.org/

If you want the best response to a question, please check out FAQ222-2244: How to get the best answers first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

ChrisHirst (IS/IT--Management)

28 Mar 12 5:53

right float elements have to be in the document flow before any elements that should be on the same horizontal row as the floated element.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To HTML, XHTML & CSS