1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

background image and color not showing up in IE 7

Discussion in 'CSS' started by nol246, Nov 23, 2009.

0
  1. #1
    Hi,

    I can not get my background image/color to show up in IE7. It shows up in firefox. Even if I take the image out of the body tag and just leave body {background: grey;} I still do not get a grey background in IE7. I have been sitting here all day trying to fix it and can not figure out what the issue is. I could really use some help!

    Also, another issue I am having is that IE7 load the navigation links separately as opposed to one whole image. Is there a way to fix this?

    Thanks for your help!


    Noelle

    Here is my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>

    <TITLE>Ecosystem Services</TITLE>



    <style type="text/css">

    * {margin: 0; padding: 0;}

    body
    {background: grey url(http://renew.site11.com/header/shorterbar_02.jpg) repeat-x;
    }

    #container
    {width: 960px;
    height: 100%;
    margin: auto;
    z-index: 2;}

    #container-header
    {width: 600px;
    height: 240px;
    position: relative;
    left: 50px}

    #header {
    background:url(http://renew.site11.com/header/shorterbar_03.jpg) no-repeat;
    width: 100%;
    height: 189px;
    position: absolute;
    top: 0px;
    left: 130px;
    z-index: 3;}

    #nav-menu ul{
    position: absolute;
    height: 53px;
    left: 0px;
    top: 188px;
    right: 0px;
    width: 100%
    list-style: none;
    z-index: 4;}

    #nav-menu li{
    float: left;
    text-decoration: none;
    display:block;
    }

    #nav-menu li a{
    float:left;
    text-decoration: none;
    text-indent: -9999px;
    height: 53px;
    }

    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    .nav a {float:none;}
    /* End IE5-Mac hack */

    li#bleft {
    background:url(http://renew.site11.com/header/bleft.jpg) no-repeat;
    width:90px;
    height:100%;
    }

    a#home {
    background: url(http://renew.site11.com/header/home.jpg) no-repeat;
    width: 70px;
    }

    a#projects {
    background: url(http://renew.site11.com/header/projects.jpg) no-repeat;
    width: 84px;
    }

    a#publications {
    background: url(http://renew.site11.com/header/publications.jpg) no-repeat;
    width: 104px;
    }

    a#faq {
    background: url(http://renew.site11.com/header/FAQ.jpg) no-repeat;
    width: 66px;
    }

    a#contact {
    background: url(http://renew.site11.com/header/Contact.jpg) no-repeat;
    width: 96px;
    }

    li#bright {
    background: url(http://renew.site11.com/header/bright.jpg) no-repeat;
    width: 90px;
    height: 100%; }

    </style>

    </head>
    <body>
    <div id=container>
    <div id=container-header>
    <div id=header>

    <div id="nav-menu">
    <ul>
    <li id="bleft"></li>
    <li><a id="home" href="http://edition.cnn.com/">home</a></li>
    <li><a id="projects" href="http://weather.cnn.com/"></a></li>
    <li><a id="publications" href="http://facebook.com/"></a></li>
    <li><a id="faq" href="http:/aol.com/"></a></li>
    <li><a id="contact" href="http://bbc.com/"></a></li>
    <li id="bright"></li>
    </ul>
    </div>

    </div>
    </div>
    </div>
    </body>
    </html>
     
    nol246, Nov 23, 2009 IP
  2. vinpkl

    vinpkl Active Member

    Messages:
    899
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    vinpkl, Nov 23, 2009 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    IE doesn't consider 'gray' to be a color, it only recognizes grey is a color. The alternate spelling working in FF is a leftover from the old Netscape 4 days (which is why that whole 'gecko was a fresh start' malarkey doesn't fly with me)... I avoid using the named colors just because of little oddities like that. Wow, I almost missed that. Change that to #888 and it should fix things... @vinpki, there was NOTHING wrong with how the background was being declared as a single line apart from that one word.

    Though really you've got some over-thinking and some under-thinking on your markup and CSS. You are using four div where you should only need one, you are using text-indent instead of gilder-levin and pure CSS for the site logo meaning you have no images off degradation... and are using so many little images that by the time you add hover states, you'll be looking at more overhead in handshaking than you would in bandwidth as a single file.

    I did a rewrite though to show you how I'd approach that layout. I re-did the images, gave you some hover states, and take a look at it with images disabled. I also added a content are just for a quick test (and to show you where it goes in the markup)

    http://www.cutcodedown.com/for_others/nol246/template.html

    As with all my examples the directory:

    http://www.cutcodedown.com/for_others/nol246

    is unlocked so you can grab the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS if not for some IE workarounds, tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.6 and 10, FF 2 & 3, and the latest flavors of Safari and Chrome.

    In the markup I started out by moving your content to my base template - I work in XHTML STRICT, since all NEW websites should be done in a STRICT doctype, and I prefere XHTML for it's much tighter/consistent formatting rules. You'll also notice I'm pretty rabid about indentation. Set your editor for two space tabs, and the tab key is your friend. I put in my usual comments warning NOT to delete empty tags since they are presentational hooks. If CSS3 were real-world deployable we'd not need them, but since right now CSS3 is more myth than fact...

    As I said for what you had you only needed ONE div, the outermost wrapper to set your 600px width and to handle centering. Personally, I'd not make a fixed width layout site so narrow, but that's your site, you're call.

    You'll notice the site logo is now a H1 and uses gilder-levin image replacement atop that text. This is a pretty common technique for making sure that when images are off, there's text for the user to look at - as well as text for the search engine to see... and that your document structure makes sense when CSS is disabled/not present.

    Why a H1? Lower order heading numbers (h2) should ALWAYS be the start of a subsection for the higher order heading (h1) - since all headings on a page tend to be a subsection of the site itself, the site title/logo becomes the obvious candidate.

    The breaks inside the h1 and the small tag let us format that text close to what your image logo looks like - neat, huh?

    The menu doesn't need any extra DIV or other wrappers, just nail the UL itself. I moved the classes to the LI because it makes certain inheritance / specificity problems disappear. You can see that once again I went nuts with line feeds and tabs - just makes it easier to tell things apart... and again we have the empty span which will be our individual button images placed OVER the text. That whole sliding the text off the left side with text-indent trick is cute, but useless for people browsing with images disabled. Absolute positioning a span over the text hides it, and allows for easier hover effects.

    In the CSS, first is a targeted reset. The universal one you were using * {margin:0; padding:0;} is cute for quick testing, but I consider it undeployable given how badly it mangles form elements. This targeted reset hits the elements I consider need resetting, while still staying fairly lightweight.

    body - the text-align centers #pagewrapper in quirks mode browsers like IE 5.x - still supporting 5.x is probably a waste of time, but it's one line so why not? I set the font size to what I consider a comfortable default. When it comes time to build your content, don't use px for font sizes... accessibility /FAIL/. PX is fine for when you need to interact with an image, in those cases avoid using anything smaller than 14px or you'll alienate large font/120dpi users (like myself). Background-color and image should be familiar to you.

    #pageWrapper - set our width, center it, undo that text-align we did for IE 5.x

    h1 - position:relative is for our gilder-levin image replacement, the zoom:1 is a hasalayout trigger. Without that the positioning is messed up. I used zoom instead of width or height because we are declaring padding. I declare color and background-color for images off.

    h1 small - display:block prevents an odd line-height issue in Opera/Safari - which is fine since we want it on it's own line anyways. Top padding and font-size are nothing fancy.

    h1 span - our logo absolute positioned over our h1 - again, pretty simple.

    You are probably wondering how the total h1 height is set - simple, two lines of 35px line-height + one line of 23px line-height + 39px padding top and bottom with 20px padding over the small = 189. This means no declaring the height on the h1 meaning it will still work in IE 5.x (since you had the mac hack, I assumed this was a concern)

    On the menu I use the 'CSS Sprite' method. (I hate calling it that since they are not actually used as sprites, but the name has stuck) - as such the entire menu is built off a SINGLE image file:

    http://www.cutcodedown.com/for_others/nol246/images/mainMenu.jpg

    Top row non-hover, bottom row hover states.

    #mainMenu - turn off bullets, overflow:hidden will wrap any floats AND we'll be using that to chop off our gilder-levin for hover states, hence the fixed height. The padding on one side pushes our first button past the background - which we can then use that single image background on our wrapper... no more need for separate HTML for the 'sides' of the menu.

    #mainMenu li - IE has all sorts of odd issues with LI, so unless I'm building a drop-down menu I just set them to display:inline which 'gets them out of the way'.

    #mainMenu a - since these will have gilder-levin absolute positioned images over the text, we get position:relative; I float them left so they stack as blocks. Floats are inherently display:block and nothing you set for display can change that... but there's an odd quirk where IE will incorrectly double margins, and we want 3px between these for that little divider. Solution? display:inline does nothing in every browser except IE. IE ignores it for the 'inline' value, but it trips some oddball fix where the margin-doubling behavior goes away. It's a hack, but a hell of a lot less ugly than the sending every browser different numbers most other coders knee-jerk into using. Again, we do not explicitly set heights on these so IE 5.x is still supported, we just use top/bottom padding which adds to our 16px line-height.

    #mainMenu a span - our gilder-levin image. Nothing too fancy, but notice I declare the width wider than our largest button, this will be cut off when we set the unique widths on each anchor. The height is doubled, our fixed height cuts off the bottom half - the reason for this soon follows:

    #mainMenu a:states span - when we hover we change the top position instead of the background position. Since the overflow state will cut it off, it shows the bottom half of our image only when hovered. Slick, simple. I also set a color state change on just the anchor so that images off users have hover states too!

    #mainMenu .liClass - sets the width of each button.

    #mainMenu .liClass span - set our background-position to the top left corner of each button.

    #content,
    #content h2,
    #content p - just setting up some simple formatting just to show how content would look in the layout.


    Pretty simple. Hope this helps.
     
    deathshadow, Nov 23, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Is it the other way around? The OP has grey with the "correct" spelling lawlz.

    Also surprised you didn't suggest #DDD : )
     
    Stomme poes, Nov 24, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    It's one or the other - I don't know which since I don't use named colors - for that very reason...

    Stranger still, I know IE ignores it 'plain', but one of the variations it does recognize both .... I think it's lightgrey/lightgray it sees both.
     
    deathshadow, Nov 24, 2009 IP