Results 1 to 5 of 5
  1. #1


    Member Since
    Apr 08, 2004
    Posts
    129
    Angry CSS margin only applies to first line?
    I've created a text style, using CSS, with a margin of 15 pixels on the left side. It works great on the first line and the text is bumped out by 15 pixels, but as soon as the text wraps to the second or later lines, it's back flush with the side of the cell again as if there was no 15 pixel margin. The same thing happens if I do a soft return to create a line break.

    What am I missing here? This is for some sidebar navigation. so it looks pretty goofy when the first line of a navigation option is indented nicely but then jumps back to the left when it flows to the next line. I'd like the 15 pixel margin on the left to apply to everything set to that certain style, not just the first line...

    m19

  2. #2

    Murlyn's Avatar
    Member Since
    Jun 11, 2003
    Location
    Mount Vernon, WA
    Posts
    4,915
    Specs:
    MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
    Try setting the style's border color so that you can see the dimension of the box, it makes it a little bit easier to work with

  3. #3


    Member Since
    Apr 08, 2004
    Posts
    129
    I'm not sure that really accomplishes anything, though. It might make things more visible, but it still doesn't fix the fact that only the first line is taking the padding. Speaking of which, a member on another forum suggested I use padding instead of margin in the style. I made the switch but so far the subsequent lines of text still aren't being pushed to the right properly.

    This is the style:

    Code:
    .sub_sidenav2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: 565555;
        text-transform: uppercase;
        text-decoration: none;
        padding-left: 13px;
    }
    This is the navigational include that's being pulled into the main page:

    Code:
    <!-- BEGIN nav_Left_Careers.inc.htm -->
    <link href="styles.css" rel="stylesheet" type="text/css">
    
    <p><img src="images/nortel_arrow.gif" width="14" height="10"><span class="sub_sidenav1"><a href="careers.shtml" class="sub_sidenav1">Careers</a></span></p>
    <p><a href="benefits.shtml" class="sub_sidenav2">Benefits</a></p>
    <p><a href="jobopenings.shtml" class="sub_sidenav2">Job Openings</a></p>
    <p><a href="inteljobopenings.shtml" class="sub_sidenav2">Intel Job Openings</a></p>
    <p><a href="topten.shtml" class="sub_sidenav2">Top 10 Reasons</a></p>
    <p><a href="corporateculture.shtml" class="sub_sidenav2">Staff &amp; Corporate Culture</a></p>
        <p><a href="recruitingevents.shtml" class="sub_sidenav2">Recruiting Events</a></p>
        <p><a href="eeoaastatement.shtml" class="sub_sidenav2">EEO/AA Statement</a></p>
        <p>&nbsp;</p>
        <!-- END nav_Left_Careers.inc.htm -->
    And this is the main page itself:

    Code:
    <!--#include file="PageTop.inc.htm"-->
    <body bgcolor="#ffffff">
    <script language="JavaScript">document.sSect='Car';</script>
    <table border="0" cellpadding="0" cellspacing="0" width="747px">
        <tr><td width="173"></td><td width="400"></td><td width="174"></td></tr>
    
        <tr><td colspan="3"><a href="index.shtml"><img name="help_header1" src="images/careers_header1.jpg" width="465" height="96" border="0"></a><img name="help_header2" src="images/careers_header2.jpg" width="184" height="96" border="0" alt=""><img name="help_header3" src="images/careers_header3.jpg" width="97" height="96" border="0"></td>
        </tr>
    
    <!--#include file="nav_Top.inc.htm" -->
    
        <tr>
            <td colspan="3" height="25" bgcolor="#606060" align="left" valign="middle" bgcolor="606060" class="sub_breadcrumb" style="padding-left: 17px;">breadcrumb &gt; breadcrumb &gt; breadcrumb</td>
        </tr>
    
        <tr>
            <td valign="top" bgcolor="#FFFFFF" style="padding-left:15px;padding-top:29px;"><!--#include file="nav_Left_Careers.inc.htm"--></td>
            <td valign="top" width="400"><img name="sub_p_example" src="images/sub_p_example.jpg" width="400" height="170" border="0" alt="">
    
                
    <!-- BEGIN Main Content -->
    
    <p class="sub_text">Aenean quam est, egestas ac, gravida sed, blandit nec, neque. Cras ipsum nibh, accumsan nec, volutpat quis, laoreet soles, nibh. Pellen tesque iaculis erat scelerisque libero. Fusce nunc porttitor lectus eu ipsum. Etiam ac ante a turpis dignissim ullamcorper. Nam mi risus, accumsan id, imperdiet a, tempo lacus. Sed hendrerit lorem. Duis vel turpis vitae mauris aliquet tempus. Donec tellus ipsum, euismod sed, porttitor vel, hend rerit vitae, odio. Sed sollicitudin nisl ac dui. In hac habitasse platea dictumst. Vestibulum placerat vehicula nunc.</p>
    
    <!-- END Main Content -->
                <br clear="all" />
            </td>
            <td rowspan="4" valign="top" bgcolor="#D9D9D9" style="padding-left:15px;padding-top:29px;">
            
    <!-- BEGIN Right Bar Content -->
    
                <p class="index_sidebar_link2"><img src="images/arrow.gif" width="14" height="10"><span class="careers_sidebar_link2">link</span><br />
                <img src="images/arrow.gif" width="14" height="10"><span class="careers_sidebar_link2">link</span></p>
             <p class="index_sidebar_link1">&gt; <span class="careers_sidebar_link1">link</span><br>
    &gt; <span class="careers_sidebar_link1">link</span></p>
    
    <!-- END Right Bar Content -->
            </td>
        </tr>
    
    <!--#include file="PageBottom.inc.htm"-->
    I've also tried creating a new HTML page from scratch (outside of what I'm working on now), setting up a basic style that has a 13 pixel padding on the left, and the padding works fine. It's when I try and do the same thing on the page or include (per above) that it starts acting up, and I'm not sure why.

    m19

  4. #4


    Member Since
    Apr 08, 2004
    Posts
    129
    Got it. The padding was being applied to the A elemenets; I just needed to create a separate style for just the P elements and it's working great now.

    m19

  5. #5

    Murlyn's Avatar
    Member Since
    Jun 11, 2003
    Location
    Mount Vernon, WA
    Posts
    4,915
    Specs:
    MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2
    Yep, the reason I said what I did was so that you could actually see it and then play around with it. Also instead of applying the padding element to the <p> tags, you could make a surrounding <div> tag that goes around all of it and you just apply it to that div tag, then make the <p> tags just the style that you want visually.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Teardown reveals iPad mini yields 43% gross margin for Apple
    By OneMoreThing... in forum Apple Rumors and Reports
    Replies: 0
    Last Post: 11-04-2012, 11:30 PM
  2. Replies: 3
    Last Post: 04-07-2011, 12:13 AM
  3. How to Check if Ipod still applies for Care Protection?
    By raveonpragha in forum iPod Hardware and Accessories
    Replies: 2
    Last Post: 10-17-2009, 09:52 PM
  4. CSS Navigation - More Than One Line
    By deathcab1 in forum Web Design and Hosting
    Replies: 2
    Last Post: 03-30-2009, 01:55 PM
  5. iPhone Nano?? Apple applies for new patent for a Simplified Cell Phone
    By kaidomac in forum iPhone Hardware and Accessories
    Replies: 11
    Last Post: 07-07-2007, 11:24 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •