SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Thread: Padding and IE

  1. #1
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding and IE

    Hi everyone!

    Please help me out with the issue i'm having when creating "rounded borders" title using DIV tags and background images.

    everything looks great in Firefox 1.5, but, when trying to use padding-top (to move the title a little lower), the IE fails. here is the HTML:

    HTML Code:
    <div class="slor-news">
     	<div class="slor-news-header">
     		<p><a href="{ipb.script_url}showtopic={$entry['tid']}">{$entry['title']}</a></p>
     	</div>
     </div>
     
     <!--
     ...some table goes here which should not have any empty space between the top code.
     -->
    and the CSS looks like this:

    Code:
    div.slor-news {
     	background: url(<#IMG_DIR#>/slor-news-topleft.gif) top left no-repeat;
     	width: 100%;
     	margin: 0;
     	padding: 0;
     }
     
     div.slor-news-header {
     	height:25px;
     	background: url(<#IMG_DIR#>/slor-news-topright.gif) top right no-repeat;
     }
     
     div.slor-news-header p {
     	background-image: url(<#IMG_DIR#>/slor-news-topbg.gif);
     	background-repeat: repeat-x;
     	font-size: 12px;
     	height:25px;
     /*	padding: 4px 0px 0px 0px;*/
     padding: 0;
     padding-top: 0.4em;
     	margin: 0px 9px 0px 9px;
     }
     
     div.slor-news-header a {
     	font-weight: bold;
     	text-decoration: none;
     }
    the main problem is the div.slor-news-header p part. when i use padding: 0; the IE and FF shows the style correctly, but the title text is too much on the top. that's why i tried to use padding as: 4px 0px 0px 0px; when doing this, FF works without a problem, IE not! i attached the screenshot what does the IE shows.

    does anyone have any idea how to move the text a little bit lower and still without IE empty space at the end of the <div> tag?

    thanks in advance!
    Attached Images Attached Images
    lordgreg, sloreactor.com
    http://www.sloreactor.com/


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
  •