Spacing Problem?

Discussion in 'Web Design & Coding' started by Dave601, Apr 19, 2006.

  1. Dave601

    Dave601 Web Guru VIP Member

    Joined:
    Jan 27, 2004
    Messages:
    1,017
    Likes Received:
    22
    Location:
    St. Paul, MN
    The problem that I am having is that the green spacing between the 2 images (About Me and Photos) is different in FireFox and IE.

    In IE:
    [​IMG]

    In FireFox:
    [​IMG]

    So, as you can see, this causes some problems. The code:

    HTML:
    <div class="sidebar-top">
                </div>
                <div class="sidebar">
                    <div class="button">
                        <a href="blog.htm" onmouseover="MouseOverRoutine('button1')" onmouseout="MouseOutRoutine('button1')">
                            <img src="images/buttons/button-blog.gif" alt="About Me" name="button1" width="225" height="40" />
                        </a>
                        <a href="about.htm" onmouseover="MouseOverRoutine('button2')">
                            <img src="images/buttons/button-about-op.gif" alt="About Me" name="button2" width="225" height="40" />
                        </a>
                        <a href="photos.htm" onmouseover="MouseOverRoutine('button3')" onmouseout="MouseOutRoutine('button3')">
                            <img src="images/buttons/button-photos.gif" alt="About Me" name="button3" width="225" height="40" />
                        </a>
                        <a href="links.htm" onmouseover="MouseOverRoutine('button4')" onmouseout="MouseOutRoutine('button4')">
                            <img src="images/buttons/button-links.gif" alt="About Me" name="button4" width="225" height="40" />
                        </a>
                        <a href="contact.htm" onmouseover="MouseOverRoutine('button5')" onmouseout="MouseOutRoutine('button5')">
                            <img src="images/buttons/button-contact.gif" alt="About Me" name="button5" width="225" height="40" />
                        </a>
                    </div>
                </div>
                <div class="sidebar-bottom">
                </div>
    
    The CSS:
    Code:
    div.sidebar-top
    {
    background-image: url('images/sidebar-top.gif');
    width: 250px;
    height: 136px;
    float: right;
    padding-right: 10px;
    background-repeat: no-repeat
    }
    
    div.sidebar
    {
    background-image: url('images/sidebar-middle.gif');
    width: 250px;
    float: right;
    margin-top: 119px;
    padding-right: 10px;
    background-repeat: repeat-y;
    margin-right: -260px
    }
    
    div.sidebar-bottom
    {
    background-image: url('images/sidebar-bottom.gif');
    width: 250px;
    height: 119px;
    float: right;
    margin-top: 334px;
    padding-right: 10px;
    background-repeat: no-repeat;
    margin-right: -260px;
    }
    
    div.button
    {
    margin-left: 25px;
    }
    
    So, does someone know a way to control and fix this problem. I am running out of ideas. I can probably change some stuff around with the images, but would rather not if I don't have to. Thanks guys!
     
    Dave601, Apr 19, 2006
    #1
    1. Advertisements

  2. Dave601

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    What happens if you change the image height to say, 35 instead of 40?

    I think what's happening is you've set the height to 40px each, and that is just too much to fit in your div.sidebar - so IE Crops it to fit in your side bar, where as Firefox just makes sure each image is 40px high, and wont crop it to fit within the div.
     
    S Walch, Apr 19, 2006
    #2
    1. Advertisements

  3. Dave601

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    I have cleaned the HTML up a bit, if you have spacings inbetween links and images, sometimes IE displays spacings. You should also use the alt tag for the file name and use the title tag to name the image.
    HTML:
    <div class="sidebar-top"></div>
         <div class="sidebar">
          <div class="button">
          <a href="blog.htm" onmouseover="MouseOverRoutine('button1')" onmouseout="MouseOutRoutine('button1')"><img src="images/buttons/button-blog.gif" alt="About Me" name="button1" width="225" height="40" /></a>
          <a href="about.htm" onmouseover="MouseOverRoutine('button2')"><img src="images/buttons/button-about-op.gif" alt="About Me" name="button2" width="225" height="40" /></a>
          <a href="photos.htm" onmouseover="MouseOverRoutine('button3')" onmouseout="MouseOutRoutine('button3')"><img src="images/buttons/button-photos.gif" alt="About Me" name="button3" width="225" height="40" /></a>
          <a href="links.htm" onmouseover="MouseOverRoutine('button4')" onmouseout="MouseOutRoutine('button4')"><img src="images/buttons/button-links.gif" alt="About Me" name="button4" width="225" height="40" /></a>
          <a href="contact.htm" onmouseover="MouseOverRoutine('button5')" onmouseout="MouseOutRoutine('button5')"><img src="images/buttons/button-contact.gif" alt="About Me" name="button5" width="225" height="40" /></a>
          </div>
         </div>
    <div class="sidebar-bottom"></div>
    The way you are using CSS is a little strange as well. You don't have to use div.sidebar div.menu, etc. You can assign them as ID's and only use them once per page. If you want, check out my personal page's code, that should help out.
    I have tried to resolve the issue, but without all of the code, I can't really give any helpful tips.

    Code:
    div.sidebar-top
    {
       background-image: url('images/sidebar-top.gif');
       width: 250px;
       height: 136px;
       float: right;
       padding-right: 10px;
       background-repeat: no-repeat
    }
    div.sidebar
    {
       background-image: url('images/sidebar-middle.gif');
       width: 250px;
       float: right;
       margin-top: 119px;
       padding-right: 10px;
       background-repeat: repeat-y;
       margin-right: -260px
    }
    div.sidebar-bottom
    {
       background-image: url('images/sidebar-bottom.gif');
       width: 250px;
       height: 119px;
       float: right;
       margin-top: 334px;
       padding-right: 10px;
       background-repeat: no-repeat;
       margin-right: -260px;
    }
    div.button { margin-left: 25px; }
     
    James, Apr 19, 2006
    #3
  4. Dave601

    Dave601 Web Guru VIP Member

    Joined:
    Jan 27, 2004
    Messages:
    1,017
    Likes Received:
    22
    Location:
    St. Paul, MN
    James, that totally solved my problem. Thanks!
     
    Dave601, Apr 19, 2006
    #4
  5. Dave601

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    No problem. I would look into the <div id="x"> scheme when structuring the layout for your site. Classes are mainly used for styling, not for structure. In the long run, say you want to style links differently in your header and footer, using the ID tags as I suggested will make things easier. If you want me to expound more I can or you can look at my code on my site.
     
    James, Apr 19, 2006
    #5
  6. Dave601

    Zeus Moderator

    Joined:
    Jun 20, 2005
    Messages:
    2,006
    Likes Received:
    33
    Location:
    Virginia
    I hang around here long enough and I'll be able to write my own web page.
     
    Zeus, Apr 19, 2006
    #6
  7. Dave601

    Dave601 Web Guru VIP Member

    Joined:
    Jan 27, 2004
    Messages:
    1,017
    Likes Received:
    22
    Location:
    St. Paul, MN
    I will probably switch things around and use IDs. I used classes because I thought it provided a little more flexibility (the ability to use the element more than once on a page), but I am an amateur so what do I know. :huh

    By the way, I have used your site on more than one occassion to figure out some coding problems...
     
    Dave601, Apr 19, 2006
    #7
  8. Dave601

    Nickweb Resident Filmaker Moderator

    Joined:
    Nov 7, 2003
    Messages:
    2,532
    Likes Received:
    27
    Location:
    North Wales, Britain
    learning from others, the best way to do it, i've learned a lot being here
     
    Nickweb, Apr 21, 2006
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.