Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23
  1. #1
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Hi guys,

    I've recently started trying to design using CSS again and I'm confused by an IE problem. Well, I've only tried on IE7 but whenever I load the page up most of the header disappears.

    The page is here. The CSS file is here.

    The header.jpg should be a link back to the homepage but the clickable area is expanded slightly by using padding. Everything works fine in Firefox but the image just completely disappears on IE7.

    Also, if anyone has anyone suggestions for how to insert and arrange the pictures on the page in a better way (in both XHTML and CSS) I'd be more than grateful! I can't help but get the feeling the method I've used is a little crude!

    Thanks,
    Ash

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hello Ash.

    This might be a stab in the dark, but you do not have any width or height attributes specified in your <img /> tag. Also, why not add an alt attribute. Handy and user friendly too.

  4. #3
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    No, there aren't any width or height atttributes. I don't recall ever needing to add them in the XHTML for it to show in IE though?

    There is an alt attribute in the img tag though. This doesn't show in IE7 either...

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    While the image should show without them, the benefit of having width and height set on images is extensive. for one, your pages render faster as your browser knows where elements (images0 ends.

    Seeing as FF shows the page perfectly fine, this is a side issue.

    The first thing to do is create a dummy page that shows the page in IE7. Then, once that is working, then start adding your markup (<div id="mastHead"> etc).

    It's a weird one.

    Just out of curiousity, try removing the background: #17096b; from the mastHead

  6. #5
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Removing the 'background: #17096b' part shows the image and navigation bar but (obviously) leaves it with a white background and I'm not sure what else I can give that background colour to.

    I've tried changing the tag the homeLink id is on from the <a> element to a <div> but this just makes the clickable area on FF smaller. Also, after removing the background colour I've just realised that the clickable area (including the actual image) isn't clickable at all in IE.

    Code:
    <div id="mastHead">
        <div id="homeLink">
            <a href="index.html"><img src="images/header.jpg" alt="autocraft services" /></a>
        </div>
        <ol id="navLinks">
            <li class="first"><a href="#">about us</a></li>
            <li><a href="#">service prices</a></li>
            <li><a href="#">car sales</a></li>
            <li class="last"><a href="#">contact</a></li>
        </ol>
        <p class="info">
            Opening hours:<br />
            Mon - Fri: 7:30am - 5pm<br />
            Sat: 8am - 12:30pm<br />
            <br />
            Phone: 0114 275 9584
        </p>
        <p id="today">
            December 18 2008
        </p>
    </div>
    What I have just noticed is that the above section of code (all of the mastHead div) should have that background colour applied, which it has done, but it's also replaced everything in the div with the colour except the <p> element and it's background image. I just have no idea why though! I've tried changing the 'info' class to an id to see if it had any affect but it didn't.

    I'll post the CSS code in here too in case anyone has any idea but can't be bothered to check the links...

    Code:
    #mastHead {
        background: #17096b;
        margin-bottom: 0; padding-top: 1px;
    }
    #homeLink {
        display: block;
        margin: 1em 40em 1em 1.5em; padding: 0;
    }
    #navLinks {
        display: block;
        margin: 0; padding: 0.66em 4.5em;
        background: #2688e3; color: #FFF;
    }
    #navLinks li {
        display: inline;
        list-style: none;
        border-right: 1px solid #FFF;
        margin-right: 0.25em; padding-right: 0.75em;
        font-weight: bold;
    }
    #navLinks li.last {
        border-right: none;
    }
    #navLinks li a {
        color: #FFF;
    }
    #navLinks li a:hover {
        text-decoration: underline;
    }
    #mastHead .info {
        font-size: smaller;
        text-align: right;
        color: #FFF;
        margin: -13em 0.5em 0; padding: 2em 5.5em;
        background: url(images/other_logos.jpg) 100% -0.25em no-repeat;
    }
    #today {
        margin-top: -0.5em; padding: 1em 2.25em 0 0;
        color: #FFF;
        font-weight: bold;
        text-align: right;
        line-height: 1;
    }

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Add a width and height to the img tag. See what that does.Then add a width and height to the masthead and see what it does. The code is not complicated so that's the only thing I can see. If that doesn't work let us know and I will get your code and do some testing.

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Also I notice you do not have a container div. Your content div, which is outside of the header, is coded as a container, with width attributes and margin 0, auto. I think you should make a containing div that wraps all your code up, but try my first suggestion because having that masthead with no width will not match up with your content div.

  9. #8
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Right, for some reason I thought I'd already tried adding a width to the mastHead div but obviously hadn't because that worked! Although whenever it's viewed in 1024x768 there seems to be an small chunk of white space to the right of the page which is creating a horizontal scroll bar.

    I haven't included a container div because I don't want the site to be set to a particular width. I want the header to stretch as far as the browser window allows, the same with the footer. The content should fill the page at 1024x768 and then get centered and have growing margins at bigger resolutions, this is purely because aligning all the images etc. in the content was a nightmare!

    Including a container wouldn't actually do anything unless I specified a width; something I don't want to for the header and footer.

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    If you wrap your code in a div and set the margin to auto, match your masthead width with your content width, then they will flow together.

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Oh I see what you want,let me think about that for a few minutes.


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com