Small CSS Problem!

[-Ryan-]

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:

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:

#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!

 

[Dal123]

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?

 

[-Ryan-]

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:

#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.

Thanks!

 

[Mitthrawnuruodo]

Try something like:

#main h1 {
    font: normal 80px/80px Velvet, sans-serif;
    margin: 0;
    padding: 0;
}

 

[-Ryan-]

Try something like:

#main h1 {
    font: normal 80px/80px Velvet, sans-serif;
    margin: 0;
    padding: 0;
}

That has fixed it! Thanks very much At least I don't do this for a job!

 

[Dal123]

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 .
Silly but basic suggestion have you overwitten the browsers padding for headers p { padding0 margin 0}

 

[-Ryan-]

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?

 

[Dal123]

<style type="text/css">@import url(your external css file.css);</style>

 

[-Ryan-]

<style type="text/css">@import url(your external css file.css);</style>

Thanks. I was using the 'link' element from HTML before, but this just gives the same result. Works in every browser except Internet Explorer.

 

[Dal123]

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?

 

[-Ryan-]

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?

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:

 <style type="text/css">@import url(required/style.css);</style>

Cheers!

 

[Dal123]

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 . This import should be placed in your <head> put it here</head>

 

[-Ryan-]

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.

 

[Dunmail]

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

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.

 

[-Ryan-]

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

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.

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.

 

[Dal123]

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.

 

[-Ryan-]

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.

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.

 

[-Ryan-]

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.

 

[Dunmail]

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.

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.