Small CSS Problem!

Discussion in 'Web Design and Development' started by -Ryan-, Jul 31, 2010.

  1. -Ryan- macrumors 68000

    Joined:
    Jan 28, 2009
    #1
    I'm designing a website at the moment, and while I'd consider myself competent in CSS, I'm having a slight problem. If you look at this image below, my header for my news posts is going slightly awry:

    [​IMG]

    There is not supposed to be any border between the previous news article (which is symbolised by the dotted horizontal rule, and the next one. Similarly there is not supposed to be a large gap between the H1 text and the main body of the news.

    The code I am using for this H1 text is:

    HTML:
    #main h1 {
        font: normal 80px Velvet, sans-serif;
        
    }
    That is all I currently have in my style sheet. I thought it may have something to do with using a custom font, but I removed it and the problem remained.. Anyone able to help me out?

    Thanks!
     
  2. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #2
    Are you talking about the small text? What exactly; the way its bleeding off the page? Do you have live host so we can play around with the code?
     
  3. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #3
    I'm currently still writing in the news script at the moment, but it's definitely not something to do with the code in the news script, as if I make another page with a PHP include on it for my news database it doesn't have this problem. So the relevant CSS for this part of the page is:

    HTML:
    #main {
        overflow: hidden;
        width: 720px;
    }
    
    #main content {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    #main h1 {
        font: normal 80px Velvet, sans-serif;
        
    }
    
    #main hr {
        border: 1px dotted #cfcfcf;
        height: 1px;
        width: 80%;
        text-align: center;
    }
    
    #main a {
        color: #666;
    }
    
    #main a:hover {
        color: #999;
        border-bottom: 1px dotted #999;
    
    }
    That's all that I've done for that CSS group so far, so it must be there somewhere...I just can't see it. :confused:

    Thanks!
     
  4. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #4
    Try something like:

    HTML:
    #main h1 {
        font: normal 80px/80px Velvet, sans-serif;
        margin: 0;
        padding: 0;
    }
     
  5. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #5
    That has fixed it! Thanks very much :D At least I don't do this for a job!
     
  6. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Are you sure it's not the code, I cannot understand php yet :( but looks like it could be going through an unwanted div that might be creating more padding :confused:.
    Silly but basic suggestion have you overwitten the browsers padding for headers p { padding0 margin 0}:eek:
     
  7. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #7
    I've got one more small problem hopefully someone can help me with. Internet Explorer quite simply does not load my style sheet. It's fine in every other browser I've tried (Safari Mac+Win, Firefox Mac+Win, Chrome Mac+Win, Chromium, Firefox 4 beta 2 on Mac). No idea what could be wrong. Any ideas?
     
  8. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    <style type="text/css">@import url(your external css file.css);</style>
     
  9. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #9
    Thanks. I was using the 'link' element from HTML before, but this just gives the same result. Works in every browser except Internet Explorer. :(
     
  10. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #10
    That import thing should work, everyone hates ie, I don't even try to accomodate it which is a bit silly as I think it still takes a big chunk of the market.
    I'll have to accomodate it in my new site. How did you test ie on mac, did you use virtual pc? Or just ie for mac?
     
  11. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #11
    Yeah, same for me. Ordinarily I'd just check Firefox, Safari, Opera and Chrome, but the site I'm designing is to cater to students, quite a lot of whom I know use IE. I've got a Windows test PC at home, so I just tried it over the local network. Still no joy.

    Just in case I'm somehow doing this wrong, is this exactly how it should be formatted in the page:

    HTML:
     <style type="text/css">@import url(required/style.css);</style>  
    
    Cheers!
     
  12. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #12
    Stick with it, will deffinitely work, check out this article as I'm an extreme novice http://webdesign.about.com/cs/css/qt/tipcssatimport.htm
    If that don't crack it post your exact html and css and try to look at it by like I say I'm no expert :p. This import should be placed in your <head> put it here</head>
     
  13. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #13
    Well I've now discovered through a moment of common sense that it is somehow loading something from the CSS, just not the way I want it to. I only know this because the only CSS elements that I notice have been loaded are the width of the main text area and the background image.

    So, is IE really that bad at standards compliance? Does it not support div layering? Does it not support custom fonts? Does it not support CSS groups?

    What a joke. This is infuriating as it works just as I'd expect it in every other browser.
     
  14. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #14
    Which version of IE? I've used the Google fonts without problem in IE7, not sure of IE6 but that is an increasingly small percentage of my audience.

    A quick trick you can try is to add

    Code:
    border: 1px solid red;
    to each of your CSS rules in turn (well those that apply to block items anyway) and check if you get the border in IE. IE doesn't support some of the less common CSS selectors so it may be this that is the problem - see http://www.quirksmode.org/css/contents.html for a fuller list. Without more info it's hard to tell though.
     
  15. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #15
    Thanks for that link. :) Through that I've discovered that IE8 does not support quite a few of the CSS features I've been using. The design I've been building is supposed to look close in resemblance to a bunch of paper on a desk, so I've been using box-shadow, transform etc to create several pages off place beneath my main page using those attributes, and also div layers. Obviously I now know IE8 supports none of this. Way to be several years behind the times!

    I'm really quite annoyed about this. It's the first time I've ever tried to go fully CSS for the layout, and just leave the content to PHP, and it seems to have backfired on me. Ordinarily, I'd do stuff like the pages on top of each other in Photoshop and splice it, but I decided to become a bit more modern. :(
     
  16. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #16
    You're right to do it properly with css etc as you'll be able to find your site in search engines now.
    Don't worry too much about internet explorer, I just had a look at w3schools.com statistics and ie is only about 15% now. Last year it was 50% so it's custom is decreasing at a rapid rate and will soon acknowledge css or be extinct.
     
  17. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #17
    Thanks, just took a look there, and it's more like about 30% if you add together continued use of 6 and 7 also. I think I'll just leave it out. Maybe put something together quickly to check the useragent, and post an acknowledgement of the problem on the page if visited from Internet Explorer.
     
  18. -Ryan- thread starter macrumors 68000

    Joined:
    Jan 28, 2009
    #18
    Well, I just downloaded the Platform Preview 2 for IE9 and installed that on my PC. Huge improvements --- the page actually renders correctly, although it still doesn't look anyway near what I made it to look like. I guess I'll just have to abandon IE support.
     
  19. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #19
    One of the differences between print and the web is that not every viewing experience is the same - you have no idea if someone is going to view your site on a widescreen monitor with the browser set to full screen or on a mobile device - so you have to be flexible. You extend this flexibility to browsers with graceful degradation and progressive enhancement. So long as the site is useable in IE then all the niceties such as drop-shadows, rounded corners etc are progressive enhancement. If you rely on some new technology then graceful degradation means that those visitors without it will still be able to use the site.

    No need to drop IE support altogether but don't get hung up on it.
     

Share This Page