CSS margin only applies to first line?

Morgan19 · Morgan19 #1 (**permalink**)

12-19-2005, 05:25 PM

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

Murlyn · Murlyn #2 (**permalink**)

12-19-2005, 06:12 PM

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

Morgan19 · Morgan19 #3 (**permalink**)

12-20-2005, 09:12 AM

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

Morgan19 · Morgan19 #4 (**permalink**)

12-20-2005, 09:54 AM

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

Murlyn · Murlyn #5 (**permalink**)

12-20-2005, 12:13 PM

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.

Morgan19 #1 (permalink)
Member Since: Apr 08, 2004 Posts: 127	12-19-2005, 05:25 PM 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 Last edited by Morgan19; 12-19-2005 at 05:28 PM.
	QUOTE Thanks

Murlyn #2 (permalink)
Member Since: Jun 11, 2003 Location: Mount Vernon, WA Posts: 4,905 Mac Specs: MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2	12-19-2005, 06:12 PM 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 ---> Join the Mac-Forums Folding team: use 37954 as your team number. View Mac-Forums Folding team statistics (More Info) Don't forget to use the User Reputation System
	QUOTE Thanks

Murlyn #5 (permalink)
Member Since: Jun 11, 2003 Location: Mount Vernon, WA Posts: 4,905 Mac Specs: MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2	12-20-2005, 12:13 PM 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. ---> Join the Mac-Forums Folding team: use 37954 as your team number. View Mac-Forums Folding team statistics (More Info) Don't forget to use the User Reputation System
	QUOTE Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Line In on new Powerbook G4 not working.	Ilnyckyj	Switcher Hangout	15	07-11-2005 12:24 PM
What is the Mac Equivalent of "Shift+End" to Highlight an Entire Line?	GTwinkie	Switcher Hangout	2	02-21-2005 07:08 AM
My first tableless CSS layout	ChicoWeb	Web Design and Hosting	17	01-18-2005 02:57 PM
Image placement with CSS	dziner	Web Design and Hosting	5	08-12-2004 08:38 PM
CSS strangeness in Safari only!?	stevenjohn	Web Design and Hosting	1	03-29-2004 07:08 AM

CSS margin only applies to first line?

Internet Services

Web Development

Digital Marketing

Consumer Tech

Morgan19 #4 (permalink)
Member Since: Apr 08, 2004 Posts: 127	12-20-2005, 09:54 AM 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
	QUOTE Thanks

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)