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 :slight_smile:

Hi,

That page could do with a bit of a tidy up :slight_smile: (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.


.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.


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 :slight_smile:

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.

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. :slight_smile:

After 33,000 posts everything I say works :slight_smile: 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 :slight_smile:

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.:wink:

I notice that you have this rule:


.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 :slight_smile:


.sidebar3 p {
  margin: 0;
[B]  padding: 3px 10px 7px;[/B]
}

I tested locally and it lined the box up for me.

I’m back in the morning and I’ll take another look if none of that is working for you.:wink:

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.

Tere are basically two types of code involved here—HTML and CSS. This is the basic structure of a web page:

<!DOCTYPE html>
<html lang="en">

[COLOR="Red"]<head>[/COLOR]
  <meta charset="utf-8">
  <title>Page Title</title>
	
  [COLOR="Green"]<style type="text/css" media="all">

  </style>[/COLOR]

  [COLOR="DarkOrange"]<link href="styles.css" type="text/css" media="all" rel="stylesheet">[/COLOR]

[COLOR="Red"]</head>[/COLOR]

[COLOR="Blue"]<body>

</body>[/COLOR]

</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:

<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:

.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.

thank you for the distinction. Didn’t realize the two were different till now. So using my code above, where is my <style> tag?

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:

<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.

lol sorry I assumed too much. :slight_smile: 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.