Help with extra top margin on H1 element in product listing

[catalano]

Hi All,

 

I've having a hard time tracking down a formatting issue. If you look here: http://musicalartistrecords.com/shoppe/product_info.php?cPath=1&products_id=66 you can see that the item price ($9.00) is dropped slightly below the item name. Looking at the structure in Firebug shows that there is a top margin of 13px on the H1 element that shows the price. But the margin is shown in the layout tab of firebug, not in the style section, so I can't see where its being applied from. Can anyone make some sense of this and help me figure out where that extra margin styling is coming from?

 

Thank You,

Chris

[catalano]

Can anyone see the problem here?

THanks

[Guest]

The 2 <h1> tags do not play nice together.

 

Try this. Backup first.

In catalog/product_info.php find

   if (tep_not_null($product_info['products_model'])) {
     $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
   } else {
     $products_name = $product_info['products_name'];
   }

Change to

   $products_name = $product_info['products_name'];

Find

<div>
 <h1 style="float: right;"><?php echo $products_price; ?></h1>
 <h1><?php echo $products_name; ?></h1>
</div>

Change to

<div>
 <h1><span style="float: right;"><?php echo $products_price; ?></span>
 <?php echo $products_name; ?></h1>
<?php
   if (tep_not_null($product_info['products_model'])) {
?>
 <span class="smallText"><b>[<?php echo $product_info['products_model']; ?>]</b></span>
<?php
   }
?>
</div>

[catalano]

bktrain,

 

Thanks that worked perfectly. Is this a problem with the default install of osc 2.3.1 or did I do something somewhere else to cause this?

 

Thanks Again,

Chris

[Guest]

The code that was changed, listed above, was from a stock osC 2.3.1.

 

There is something with either the stylesheet or the way lay out was put together that causes that problem. I just don't know what it is.

[catalano]

That's the thing that was bothering me. In Firebug that price element didn't show any extra margin styling being applied to it. Yet when you clicked over to the layout tab it showed that it had all that extra top margin space. It was clearly there, but there was nothing indicating where it was coming from.

 

 

The code that was changed, listed above, was from a stock osC 2.3.1.

 

There is something with either the stylesheet or the way lay out was put together that causes that problem. I just don't know what it is.

[Guest]

That's the thing that was bothering me. In Firebug that price element didn't show any extra margin styling being applied to it. Yet when you clicked over to the layout tab it showed that it had all that extra top margin space. It was clearly there, but there was nothing indicating where it was coming from.

It appears that the problem is putting the <h1> tags inside the <div> tag.

 

If you leave the code in its original and just remove the <div></div> tags, the price moves up as you would expect.

 

The other way liste above seems to work too. So use which way you desire.

[NodsDorf]

Brian is exactly right.

 

Header tags inside Div will throw off the layout. Even when you give the text inside it another class. The way I deal with it is like this

 

 

In the CSS

<style>
h1,h2,h3,h4,h5,h6{
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
</style>

 

Then to switch your font to the size you want give it another class like

<div id="HeaderText">
<h1 class="bigtext">My Big Header</h1>
</div>

 

It didn't make sense to me when I ran into it, but after research it does. The old html way of giving something a header tag, was essentially a way of applying a CSS to text. Now we actually have CSS and don't really need the old way, but search engines still use these tags to weight value of the content of the page.

 

Hope that helps and makes sense.

[catalano]

I'll probably leave it as is now. Its working and the client is happy.

 

Thanks,

Chris

 

It appears that the problem is putting the <h1> tags inside the <div> tag.

 

If you leave the code in its original and just remove the <div></div> tags, the price moves up as you would expect.

 

The other way liste above seems to work too. So use which way you desire.

[catalano]

I see what you're getting at. Might as well simply define all the different text sizes you want to use on the site by using different classes, then for SEO reasons apply H tags as needed.

Interesting....

 

Thanks,

Chris

 

Brian is exactly right.

 

Header tags inside Div will throw off the layout. Even when you give the text inside it another class. The way I deal with it is like this

 

 

In the CSS

<style>
h1,h2,h3,h4,h5,h6{
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
</style>

 

Then to switch your font to the size you want give it another class like

<div id="HeaderText">
<h1 class="bigtext">My Big Header</h1>
</div>

 

It didn't make sense to me when I ran into it, but after research it does. The old html way of giving something a header tag, was essentially a way of applying a CSS to text. Now we actually have CSS and don't really need the old way, but search engines still use these tags to weight value of the content of the page.

 

Hope that helps and makes sense.