CSS margin only applies to first line?

M

Morgan19

Registered
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
 
What does your CSS look like and what does the corresponding HTML look like? I do remember having this problem myself several months ago, so I might be able to help you out.
 
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
 
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
 
You must log in or register to reply here.
Back
Top