SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser Issues - works in IE but nothing else!

    Hi All,

    I'm trying to customise a wordpress blog to fit into the rest of a site and have come across a few problems that I can't work out.

    Here's my css code for the particular part:

    #header {
    width: 100%;
    height: 42px;
    }
    #header h4 {
    width: 150px;
    height: 42px;
    margin: 0;
    text-indent: -5000px;
    display: block;
    float: right;
    }
    #header h4 a {
    width: 150px;
    height: 42px;
    background: url("images/logo.png") no-repeat 0 0;
    display: block;
    }
    #header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #header li {
    font:40px arial,sans-serif;
    display: inline;
    padding: 0 20px 0 0;
    }

    And here's the html:
    <div id="wrap">
    <div id="header">
    <h4><a href="http://www.wlansource.co.uk">Wireless LAN Blog</a></h4>
    <ul><li><a href="../index.html" class="nav">Home</a></li>
    <li><a href="../wireless_about.html" class="nav">About</a></li>
    <li><a href="../wireless_products.html" class="nav">Products</a></li>
    <li><a href="../wireless_solutions.html" class="nav">Solutions</a></li>
    <li><a href="../wireless_services.html" class="nav">Services</a></li>
    <li><a href="../support/" class="nav">Support</a></li>
    <li><a href="../store/" class="nav">Store</a></li>
    <li><a href="../blog/" class="nav">Blog</a></li>
    <li><a href="../wireless_contact.html" class="nav">Contact</a></li> </ul>


    </div>

    Here's a link to the page in question:
    http://www.toves.tv/wordpress/

    It displays correctly in IE (eek!)
    It displays too close to the bottom in firefox, and too high in safari!

    Here's how it should look:
    http://www.toves.tv/wireless_about.html

    This page works correctly in all 3 browsers even though the code for the header piece is the same

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try to remove height from #header ?

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks

    Yeah that makes everything go all over the place

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which goes to show, again, how bad IE is. I will be looking at this but might get called away. Get it working in a modern browser first, then adjust for IEs quirks and bugs.

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks

    I had it working in safari by changing this part

    #header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

    to add in a height padding of 30px, however this made the other two browsers way out

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Bring back tables!

  7. #7
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks the same in both IE and FF here. What is the exact problem you are still encountering?
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  8. #8
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks correct in IE, in firefox the navigation links move down slighty so that they are touching the top of the border and in safari they are way up top.

  9. #9
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's wrong in IE. The navigation links are floated thus taking it out of the normal flow and letting your sidebar div rise up. To prove this, increase the header size by a few px. IE is ignoring your float while FF is performing correctly.

  10. #10
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is true. IE displays it wrong. You are going to have to specify padding or margin for both to line up exactly.
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!


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
  •