SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

    HTML Code:
    <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:

    HTML Code:
    <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;}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your markup is wrong. This , btw, is why it doesnt pay off to try to develop with inline styles.

    Code:
    <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>

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •