CSS works inline but not properly when I move it to css external file

[Bayliss Trevor]

Hi all
This is the original html with the css inline:

<div style="width:80%;float:left;text-align:center;color:white;padding:0px;padding-top:0px;margin-bottom:8px;margin:0px;font-size:22px;">

<div style="width:167px;float:left;"><img src="nxstep.jpg" width="167" height="80" alt=""></div>

<div style="width:650px;margin-top:10px;margin-left:0px;float:left;background:green;"><br/>

  <select name="select2" >
<option value="." selected="selected">Sector</option></select>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('addsector.cfm','mywindow','width=400,height=250'));">+ Sector</a>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('adddiv.cfm','mywindow','width=400,height=250'));">+ Divison</a></div>
<div style="width:80px;float:right;"><img src="smiley.jpg" width="80" height="80" alt=""></div>
</div>

This is what I changed it to:

<div class="logo">

<div class="logo2"><img src="nxstep.jpg" width="167" height="80" alt=""></div>

<div class="smile"><br/>

  <select name="select2" >
<option value="." selected="selected">Sector</option></select>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('addsector.cfm','mywindow','width=400,height=250'));">+ Sector</a>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('adddiv.cfm','mywindow','width=400,height=250'));">+ Divison</a></div>
<div class="logo2"><img src="smiley.jpg" width="80" height="80" alt=""></div>
</div>

This is the css in the external file that it is successfully calling, why is it not working, should I use ids instead? Thanks:

.logo {width:80%;float:left;text-align:center;color:white;padding:0px;padding-top:0px;margin-bottom:8px;margin:0px;font-size:22px;width:80%;float:left;text-align:center;color:white;padding:0px;padding-top:0px;margin-bottom:8px;margin:0px;font-size:22px;}
.logo1 {width:167px;float:left;}
.logo2 {width:650px;margin-top:10px;margin-left:0px;float:left;background:green;}
.smile {width:80px;float:right;}

[ralph.m]

Moving the styles like that should be fine. But there may be other styles interfering now. We'd need a link to investigate further. Or just go to Inspect Element in Chrome and see what styles are applying to your elements. Also make sure to refresh the browser, in case that's the issue.

[dresden_phoenix]

Your markup is wrong. This , btw, is why it doesnt pay off to try to develop with inline styles.

<div class="logo">

<div class="logo1"><img src="nxstep.jpg" width="167" height="80" alt=""></div>

<div class="logo2"><br/>
<select name="select2" ><option value="." selected="selected">Sector</option></select>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('addsector.cfm','mywindow','width=400,height=250'));">+ Sector</a>
<a style="color:white;font-size:70%;" href="javascript:void(window.open('adddiv.cfm','mywindow','width=400,height=250'));">+ Divison</a></div>
<div class="smile"><img src="smiley.jpg" width="80" height="80" alt=""></div>
</div>

[Bayliss Trevor]

Thanks dresden and ralph, for some reason the page wasn't refreshing the css style sheet, now the above code works fine. Why is the markup wrong dresden? Do you mean the inline style on the a hrefs? I'll move that out if that is the issue