SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to remove Padding..CSS issues...

    Ok, here is the link to my home page:

    www.evolutionmsport.com

    In general I am pleased with it, but I have a few minor issues. First, if you look at the left, you will see the three small pictures/text down the left column. It seems as though the space between the first and second is different than the second and third. All three divs have the same class assigned and if anything should all be separated by 10px. I prefer 5px but regardless something is goofy. They should be equally spaced.

    Next, if you look at the bottom right of the page, where I have featured products and news , I would like the background on the headings (the blue) to extend to the full width of their container, less a pixel or so. It seems as though a 5px padding or marin has been applied. I have not explicitely applied anything to those items or their containers.

    Finally, in the top right where the car is on the racetrack, in IE the background for that whole area is white, as it should be. In mozilla it is blue. If explicitely set the backround to white (as i have) i lose some of my padding above the quick links bar????

    Any help would be greatly appreciated.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

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

    Sorry I missed this post, I've been busy

    Are the problems above still outstanding or have you fixed them now. As the post was a couple of days old I didn't want to spend time looking at something you may have fixed bt now

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi mike,

    Sorry I missed this post, I've been busy

    Are the problems above still outstanding or have you fixed them now. As the post was a couple of days old I didn't want to spend time looking at something you may have fixed bt now

    Paul
    Paul,

    I fixed the problem with the spacing between the divs in the left column. It ended up being the text next to the pictures. Too much text and it just pushes down.

    I have yet to figure out how to get the Headings for Featured Products and news to expand all the way out. I t looks like they have padding applied to them.

    Thanks for asking....

    Mike
    Evolution Motorsport
    The Performance Company

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

    I have yet to figure out how to get the Headings for Featured Products and news to expand all the way out. I t looks like they have padding applied to them.
    This might seem abit basic but why haven't you tried setting the margins in the calss for those 2 h3 headings.

    e.g.
    Code:
    .blue {
     background-color: #2500ff;
     color: #FFF;
     text-align: center;
     margin:0;
     }
    That will make the headings into one line becasue there will be no margin bewteen.

    You have set all the default margins for all the heading tags earlier in the code and you have set 5px margins which is why you get the gap.

    Hope that helps.

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    This might seem abit basic but why haven't you tried setting the margins in the calss for those 2 h3 headings.

    Paul
    Wow that was basic. Here I thought I had a handle on all this stuff. OK i fixed the heading and added a border to the bottom and right. Now the only problem is the right border on the featured product heading overlaps the column next to it a smidge. Something I can live with, but if its an easy fix I am there.

    Another thing I noticed, on the left column where I have the images stacked up. In IE there is a vertical gap between the divs, in Mozilla, there is none. Do I need to clear them?

    Anyway, thanks for the help, as always it is greatly appreciated.

    Thanks...Mike
    Last edited by EvM-Mike; Sep 20, 2004 at 17:51. Reason: Fixed one of my problems
    Evolution Motorsport
    The Performance Company

  6. #6
    SitePoint Member Chucho's Avatar
    Join Date
    Sep 2004
    Location
    Monterey County
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To save myself a lot of debugging time, and headaches,
    dealing with cross-browser issues, I usually have this code at the beginning of my CSS:

    html, body, div, h1, h2, h3, h4, h5, h6, p, br, img, form, input, ul, li {
    padding: 0px;
    margin: 0px;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To save myself a lot of debugging time, and headaches,
    dealing with cross-browser issues, I usually have this code at the beginning of my CSS:

    html, body, div, h1, h2, h3, h4, h5, h6, p, br, img, form, input, ul, li {
    padding: 0px;
    margin: 0px;
    }
    To save yourself a lot of typing you could just use the universal selector and select all elements.
    Code:
    * {margin:0;padding:0}


    Paul
    Last edited by Paul O'B; Sep 21, 2004 at 03:15.

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

    Why don't you just add a 1px padding to that style only to match it up.
    Code:
    	  <h3 class="blue" style="margin-right:1px">Featured Products</h3>
    You can make a class and add it to the other one separated by a space instead of the inline style.
    Code:
    	  <h3 class="blue onepixmargin" style="margin-right:1px">Featured Products</h3>
    Then just set a style for the onepixmargin class.

    The other proble with the images stcking up is more compliacted and has something to do with the incorrect nestings of the p tags inside the anchors which is not allowed. Therefore you need to remove those p tags and use spans (or nothing at all unless you've styled them in some way.)

    You also need to amend the css:
    Code:
    .pictext290{
    padding:0 5px;
    margin:0px;
    position:relative;
    clear:left;
    }
    * html .pictext290 {height:88px}
    You had top and bottom padding in there plus a width without a unit. This should give you the effect you require but it might be worth doing that section again as it shouldn't be that difficult to get right.You seem to have some conflicting things going on.

    The above should help anyway.

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The other proble with the images stcking up is more compliacted and has something to do with the incorrect nestings of the p tags inside the anchors which is not allowed.
    I was also wondering is it an accepted practice the wrap the img tag and some text in the <a> tag, or should I just do one or the other. Really, all I am trying to do is make the whole div "clickable". When the user hovers over the div I want him to be able to click on it and go somewhere. Can I set this in the css? is there a div Hover property? or should I just stick with what I have?


    Quote Originally Posted by Paul O'B
    Hi Mike,

    it might be worth doing that section again as it shouldn't be that difficult to get right.You seem to have some conflicting things going on.

    The above should help anyway.

    Paul
    Thanks Paul. I will look at this tonight. I will try to re-do it the right way. I can usually hack something together, but I would prefer to do things the "correct" way. I appreciate all the help.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  10. #10
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    Why don't you just add a 1px padding to that style only to match it up.

    Paul
    I added the inline style and it looks great.

    I was also poking around and found this thread:

    http://www.sitepoint.com/forums/showthread.php?t=191794

    Would it be wise to follow something like that, or just wrap the image and text as I have it.

    I mean I could place the image in the background of a div and float it left, then apply left padding to the div or a left margin to the <p> tag to avoid the image. Is there a best practice. I see 2 options:

    1. Wrap the image and text in an anchor tag and leave the div as is (no background image) and tweak the css a little.
    2. Place the image in the background of the div and apply the css as outlined in the above link.


    Is one better than the next????

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

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

    Well the answer to whether an image should be in the background (css) or in the foreground (html) is quite simple and you need to ask yourself these 2 questions.

    Is the image important to the content of the page and surrounding text? If yes then the image should be in the html.

    Is the image for decoration only and has no bearing on content other than making it look nice? If yes then the image goes in the background.

    Hope that makes sense

    paul


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
  •