SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GAH! Different browsers and boxes around everything!

    Hello again, Well, it's me again =/

    This time I have 2 problems...

    ...the first one is that in the right column (on my site) Im going to have links to different gallerys and im using a unorded lists (ul/li). The problem is that in Mozilla the listitems are putted pretty good a little bit in from the border. but in IE and Opera, the ListItems are put even outside the right column (to the left of it) into the main (content) column. I've putted a 10px margin to the list (ul) as you can see in my CSS.


    ...the second problem: On the same page I want to show the pictures. I have the pictures inside a <div class="my_image"></div> to try to have the first one 0px from the top and left. Give it a 1px white border, a gray background and a 5px padding. This should do so when the next picture comes beside it there will be a 2px white space (2 borders) between the pictures. But well, look att the site and the CSS:

    EDIT: One more thing, in mozilla the background of the image div/class in only at the bottom of the picture instead of around it (and under it). Why? =)

    SITE: http://www.shell.linux.se/lundberg/ssa/foto.php
    CSS: http://www.shell.linux.se/lundberg/ssa/css/eskiimo.css

    Thanks in advance!

    Martin Lundberg
    Sweden

  2. #2
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm okey, It was the padding on the ContentLayer.. hmmm i'll maybe fix this now myself =)

    Martin Lundberg
    Sweden

  3. #3
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm noooo theres still alot of problems here....
    the picture's <div> is just in the bottoms of the picture for some reason...

    Martin Lundberg
    Sweden

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mozilla uses padding for its default indentation on lists and IE uses margin. The bullets are spaced within thes margin/padding.

    Setting margin to zero will not leave any room for the bullets to show.

    To even up the display set both margin and padding properties. (margin:0;padding:0}
    e.g.
    Code:
    #contentRight ul {
     padding:0px;
     margin:	  0 10px 10px 40px;
     list-style: 	disc url(../gfx/list_icon_galleri.gif);
    }
    This will set them both to have 40px margins (padding:0 has cancelled out mozillas default padding and allowed the margin to influens the position.)

    Paul

  5. #5
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, hehe there are alot to have in your mind to fight the browsers =) Thanks! Do you have any idea about my other problem? my mind is a total mess!

    Martin Lundberg
    Sweden

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes the answers easy, you don't need to wrap the images up in a div. They are inline content anyway and behave the same as text (more or less). Just give the class to the image and not an outer div and then see how it looks.

    Change your style to this:
    Code:
    #contentLayer .my_image {
     background-color:   #EBEBEB;
     margin:	  0;
     padding: 	 5px;
     width:	  90px;
     height:	  120px;
     border:	  1px solid #fff;
    }
    and change the html to this:
    Code:
     <div id="contentLayer"> 
       <img class="my_image" alt="Emmy, NyŚr 2003" title="Emmy, NyŚr 2003" src="http://www.shell.linux.se/lundberg/s...nyar/emmy1.png" />
       <img class="my_image" alt="Emmy, NyŚr 2003" title="Emmy, NyŚr 2003" src="http://www.shell.linux.se/lundberg/s...nyar/emmy1.png" />
       <img class="my_image" alt="Emmy, NyŚr 2003" title="Emmy, NyŚr 2003" src="http://www.shell.linux.se/lundberg/s...nyar/emmy1.png" />
       <img class="my_image" alt="Emmy, NyŚr 2003" title="Emmy, NyŚr 2003" src="http://www.shell.linux.se/lundberg/s...nyar/emmy1.png" />
       <img class="my_image" alt="Emmy, NyŚr 2003" title="Emmy, NyŚr 2003" src="http://www.shell.linux.se/lundberg/s...nyar/emmy1.png" /> 
     </div>
    (change the absolute img addresses refs back to local of course)

    Paul

  7. #7
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That helped alot, i feel ashamed or how you spell it =P Just one more thing, i want it to be the same whitespace between the pictures as around them, If i add margin: 5px; it will become 10px between the pictures and 5px around them... I tried to do this: margin: 5px 0 0 5px; but it doesn't seam to work. =)

    Martin Lundberg
    Sweden

  8. #8
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! nevermind! i found something i liked =) thanks for the help again! =)

    Martin Lundberg
    Sweden


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
  •