CSS margin only applies to first line?

Joined
Apr 8, 2004
Messages
129
Reaction score
0
Points
16
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
 
Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's 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 :)
 
OP
M
Joined
Apr 8, 2004
Messages
129
Reaction score
0
Points
16
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 & 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> </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 > breadcrumb > 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">> <span class="careers_sidebar_link1">link</span><br>
> <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
 
OP
M
Joined
Apr 8, 2004
Messages
129
Reaction score
0
Points
16
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
 
Joined
Jun 11, 2003
Messages
4,915
Reaction score
68
Points
48
Location
Mount Vernon, WA
Your Mac's 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.
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top