SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up vertical space issue, good in firefox, bad in IE

    Hi everyone,
    Thx for reading. The site is thesatirewire.com (funny ****). Anyway, the boxes to the right (screenwriting, stand-up comedy, movie reviews and funny videos) have no vertical space b/w them in IE. I want a little space. In firefox it looks good. If I type <p> after </div> the vertical space is obnoxiously big. Hellllllp. Here's the html of one of the boxes if it helps.

    <div class="glidim">
    <a href="http://thesatirewire.blogspot.com/Stand-up%20Comedy" title="Stand-Up Comedy"> <alt="Relationships" src="http://s1303.photobucket.com.jpg" target="_blank"><img src="http://i1303.photobucket.com.jpg" width="300" border="0" /> </alt="relationships"></a> </div>

    One more thing. The "screenwriting" box does not line up exactly with the box to the left, it is a little bit vertically lower. Is there some way to move it up a pinch?

    Thx again,
    Scott

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

    That page could do with a bit of a tidy up (by "bit" I mean a lot )

    It looks like you have placed 4px spacer images between those items to make space. You never need to that in CSS - ever!

    Remove those spacer images and just apply a margin-bottom to the div to make space. Also set the actual image to display:block to kill the whitespace gaps that inline content has.

    e.g.
    Code:
    .glidim{margin:0 0 4px}
    .glidim img{display:block}
    The gap at the top is because you have wrapped a p element around the divs (which is not allowed anyway) and the p element comes with default top and bottom margins which is what causes the space.

    Remove the p from around all your divs as it is invalid.

    I usually set the margin on p elements to only have a bottom margin anyway.

    Code:
    p {margin:0 0 .5em}
    Do not use empty elements to make space and don't use images or breaks to make space. Use css instead because that's what it's for

    Lastly try to use valid code or at least run the page through the validator to pick up things like typos and invalid nested elements. It's worth it in the end.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx. for the reply. I tried what you said, but it didn't work- put the letters from the code, eg. .glidim... on the website itself. The p {margin:0 0 .5em} did the same thing, so, I can live w/ the 4x spacer images, but the "Screenwriting" box being lower vertically than the box to the left, as a pirate with a steering wheel in his pants would say, "R, it's driving me nuts!"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by scottsayswhat View Post
    Thx. for the reply. I tried what you said, but it didn't work- put the letters from the code, eg. .glidim... on the website itself. The p {margin:0 0 .5em} did the same thing, so, I can live w/ the 4x spacer images, but the "Screenwriting" box being lower vertically than the box to the left, as a pirate with a steering wheel in his pants would say, "R, it's driving me nuts!"
    Yes I mentioned that above and its the top margin on the p element that you wrapped the divs in.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by scottsayswhat View Post
    Thx. for the reply. I tried what you said, but it didn't work-
    After 33,000 posts everything I say works You must have done it wrong.

    The p {margin:0 0 .5em} did the same thing,
    Did what same thing?

    so, I can live w/ the 4x spacer images,
    No you can't I won't let you

    but the "Screenwriting" box being lower vertically than the box to the left, as a pirate with a steering wheel in his pants would say, "R, it's driving me nuts!"
    I've mentioned that twice now so remove the p element, make the changes I suggest and then upload the page and if its not working I will take another look for you.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I notice that you have this rule:

    Code:
    .sidebar3 p {
      margin: 0;
      padding: 7px 10px;
    }
    That is affecting the first p on that right column so try changing it to this if you haven't removed the p element by the time you read this

    Code:
    .sidebar3 p {
      margin: 0;
      padding: 3px 10px 7px;
    }
    I tested locally and it lined the box up for me.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm back in the morning and I'll take another look if none of that is working for you.

  8. #8
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to hop on the css bandwagon, I really do. But me be a noobee when it comes to html. Here's what I did, I copied the first code .glidim{margin:0 0 4px}
    .glidim img{display:block} then I pasted it over the </div><img src="clear.gif" height="4"/> Then I click refresh, and voila, .glidim{margin:0 0 4px}
    .glidim img{display:block} is written on the webpage. So I'm not sure when you say to apply the code to the div where exactly it should be. Then you said to set the actual image to display:block, but what I heard is, "translate this message into Latin and insert it into the matrix" IOW, I have no idea what this means.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Tere are basically two types of code involved here—HTML and CSS. This is the basic structure of a web page:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Page Title</title>
    	
      <style type="text/css" media="all">
    
      </style>
    
      <link href="styles.css" type="text/css" media="all" rel="stylesheet">
    
    </head>
    
    <body>
    
    </body>
    
    </html>
    Any HTML goes between the blue <body> tags.
    All CSS is referenced between the red <head> tags.

    There are two main ways to reference CSS code. You can place it on the page itself, between the green <style> tags, or you can place it on another page, such as style.css, and link to it in the head. (See the orange link in the head as an example.)

    So, this is the HTML that you put between the <body> tags:

    Code:
    <div class="glidim">
      <img src="http://i1303.photobucket.com.jpg" width="300" border="0" /> 
    </div>
    This is the CSS stuff that either goes between the <style> tags or in the separate .css file:

    Code:
    .sidebar3 p {
      margin: 0;
      padding: 3px 10px 7px;
    }
    
    p {margin:0 0 .5em}
    
    .glidim{margin:0 0 4px}
    .glidim img{display:block}
    If your site has more than one page, use the separate .css file, as you can set all site styles one, rather than repeating them on each page.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for the distinction. Didn't realize the two were different till now. So using my code above, where is my <style> tag?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't really understand your setup, or what you have access to. The link you posted above goes to a site that has everything contained in a frame that comes from elsewhere.

    Do you have access to that other site? It has this in the head:

    Code:
    <link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' />
     <link rel="stylesheet" type="text/css" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=5300790920284861978&zx=60ceb502-e5b1-4795-8f38-e40b3f94de4b"/>
    <style type="text/css">#navbar-iframe { display:block }
    </style>
    So it has at least two external style sheets and at least one on page style block.

    Where you put the styles is up to you.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by scottsayswhat View Post
    Then you said to set the actual image to display:block, but what I heard is, "translate this message into Latin and insert it into the matrix" IOW, I have no idea what this means.
    lol sorry I assumed too much. I always assume that if you have a webpage up and running then you are familiar with these terms but I forget that some sites are built with "click and go".

    If you are still having problems after Ralph's explanation then just shout and we'll try a step by step approach but we may need more details about how you manage things your end.


Tags for this Thread

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
  •