SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Fruit & Veg's Avatar
    Join Date
    May 2000
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Overlaying an Image Problem Across Multiple DIVS

    http://www.thebrandsurgery.co.uk/testsite/ - this page is setup and I need to position that logo at the bottom across the top pink bar so it lines up.

    I've tried multiple options but I can't get it to do all these 3 things;
    1. Line up in IE and FF.
    2. Remain in the same place for different screen sizes.
    3. Not affect the rest of the content on the page.
    Using relative positioning in the various divs gives me problem No.3. Absolute positioning gives me problem No.2. Problem No.1 is something I always suffer from

    Any ideas?
    USBtastic - UK Gadgets Blog
    SmartGeezer - UK Men's Clothing Blog
    Individualitee - Great Tshirts
    Shiola - Complete Waste of Time

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see a pink bar at the bottom so not sure what you're after but here's a couple of suggestions.

    Validate your code at http://w3.validator.org there's a few problems in that you're using multiple ID's. Presumably you're using it for styling so where you have multiple instances you should always use a class.

    In your CSS use the following as the first line in your code

    Code:
    * {
      padding: 0; margin: 0;
    }
    All browsers have different default's set for different elements so what this does is set every element on the page to zero instead of relying on the browser default.

    You'll then need to go through your code and apply it where you need it but you'll get much more consistent results and will probably help solve your problem with things lining up correctly in Firefox and IE.

    I'd initially look at using floats and the padding/margin on an element along with a background image to get a foreground image to lineup with a background image but it isn't clear from your page what you're after which is probably why you've not had any responses.

    Hope that helps though.


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
  •